/* ================================================================
   App: About — animations + reduced-motion
   Split from about.css per CLAUDE.md soft-rule (file > 350 LOC).
   Layout/style stays in about.css; this file only contains
   keyframes, animation overrides, and reduced-motion media.
   ================================================================ */

/* ---- Avatar: breathing-glow loop + click-glitch ---- */
[data-window="about"] .about__logo.is-glitching {
    animation: about-logo-glitch 400ms steps(20, end),
               about-logo-breathe 6s ease-in-out infinite;
}
@keyframes about-logo-breathe {
    0%, 100% { box-shadow: 0 0 0 1px var(--byte-border-strong), 0 0 16px rgba(253, 125, 0, 0.15); }
    50%      { box-shadow: 0 0 0 1px var(--byte-border-strong), 0 0 32px rgba(253, 125, 0, 0.32); }
}
@keyframes about-logo-glitch {
    0%   { transform: translate(0, 0); filter: hue-rotate(0deg); }
    10%  { transform: translate(-2px, 1px); filter: hue-rotate(-30deg); }
    20%  { transform: translate(2px, -1px); filter: hue-rotate(30deg); }
    30%  { transform: translate(-1px, 0); filter: hue-rotate(-15deg); }
    40%  { transform: translate(1px, 1px); filter: hue-rotate(15deg); }
    100% { transform: translate(0, 0); filter: hue-rotate(0deg); }
}

/* ---- Window-Open Cascade Entry (.about-entering toggled by JS on un-minimize) ---- */
@keyframes about-fadein-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
[data-window="about"].about-entering .about__row,
[data-window="about"].about-entering .about__section,
[data-window="about"].about-entering .about__footer {
    animation: about-fadein-up 0.4s ease-out both;
}
[data-window="about"].about-entering .about__row              { animation-delay:   0ms; }
[data-window="about"].about-entering .about__section:nth-of-type(1) { animation-delay: 100ms; }
[data-window="about"].about-entering .about__section:nth-of-type(2) { animation-delay: 200ms; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    [data-window="about"] .about__logo,
    [data-window="about"] .about__logo.is-glitching,
    [data-window="about"].about-entering .about__row,
    [data-window="about"].about-entering .about__section,
    [data-window="about"].about-entering .about__footer {
        animation: none;
    }
}