/* aisd motion — curated keyframes + behaviour CSS. transform/opacity ONLY
   (compositor-safe, ENF-P3) · tokens only · logical properties · every
   continuous animation and every JS-enabled hidden state is wrapped in
   @media (prefers-reduced-motion: no-preference) so no-JS AND reduced-motion
   always show the final, readable state (EF-S6). Bundled as animations.css. */

/* ── Reveal on scroll (EF-S3) ────────────────────────────────────────────
   JS adds .aisd-reveal-ready to each group (so no-JS keeps content visible),
   then .aisd-reveal-in when it enters the viewport. Section-level cascade:
   groups reveal one after another as the page scrolls. */
@media (prefers-reduced-motion: no-preference) {
    .aisd-reveal-ready[data-aisd-reveal-group] {
        opacity: 0;
        transform: translateY(var(--aisd-reveal-distance));
        transition:
            opacity var(--aisd-dur-3) var(--aisd-ease-out),
            transform var(--aisd-dur-3) var(--aisd-ease-out);
        will-change: opacity, transform;
    }

    .aisd-reveal-ready.aisd-reveal-in[data-aisd-reveal-group] {
        opacity: 1;
        transform: none;
    }

    /* Child cascade: reveal.js sets --aisd-reveal-i on staggered children. */
    .aisd-reveal-ready[data-aisd-reveal-group] [data-aisd-reveal-item] {
        opacity: 0;
        transform: translateY(var(--aisd-reveal-distance));
        transition:
            opacity var(--aisd-dur-2) var(--aisd-ease-out),
            transform var(--aisd-dur-2) var(--aisd-ease-out);
        transition-delay: calc(var(--aisd-stagger) * var(--aisd-reveal-i, 0));
    }

    .aisd-reveal-ready.aisd-reveal-in[data-aisd-reveal-group] [data-aisd-reveal-item] {
        opacity: 1;
        transform: none;
    }

    /* Scroll-native progressive enhancement (EF-S3): where supported, the
       browser drives the reveal off the scroll timeline — no JS, no observer.
       reveal.js sees .aisd-reveal-ready is absent (it only sets it when the
       feature is missing) and stays out of the way. */
    @supports (animation-timeline: view()) {
        [data-aisd-reveal-group] {
            animation: aisd-reveal-up linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 40%;
        }
    }

    @keyframes aisd-reveal-up {
        from { opacity: 0; transform: translateY(var(--aisd-reveal-distance)); }
        to   { opacity: 1; transform: none; }
    }
}

/* ── Word rotator (hero-animated) ────────────────────────────────────────
   All words stacked; JS toggles .aisd-word-active. No-JS: first word stays. */
@media (prefers-reduced-motion: no-preference) {
    .aisd-s-hero-animated__word {
        transition: opacity var(--aisd-dur-2) var(--aisd-ease-out), transform var(--aisd-dur-2) var(--aisd-ease-out);
        transform: translateY(0.35em);
    }

    .aisd-s-hero-animated__word.aisd-word-active {
        opacity: 1;
        transform: none;
    }
}

/* ── Type stream (console-mockup) — reveal lines one by one ───────────────*/
@media (prefers-reduced-motion: no-preference) {
    [data-aisd-type-stream].aisd-typing .aisd-s-console-mockup__line {
        opacity: 0;
        transition: opacity var(--aisd-dur-1) var(--aisd-ease-out);
    }

    [data-aisd-type-stream].aisd-typing .aisd-s-console-mockup__line.aisd-line-in {
        opacity: 1;
    }
}

/* ── Marquee (text-marquee) — duplicated track scrolls; paused offscreen ──*/
@media (prefers-reduced-motion: no-preference) {
    [data-aisd-marquee].aisd-marquee-on .aisd-s-text-marquee__track {
        flex-wrap: nowrap;
        justify-content: flex-start;
        inline-size: max-content;
        animation: aisd-marquee 30s linear infinite;
    }

    [data-aisd-marquee].aisd-marquee-on.aisd-paused .aisd-s-text-marquee__track {
        animation-play-state: paused;
    }

    @keyframes aisd-marquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }
}

/* ── Tilt (persona-cards) — pointer parallax via a CSS var set by JS ──────*/
@media (prefers-reduced-motion: no-preference) {
    [data-aisd-tilt] {
        transition: transform var(--aisd-dur-2) var(--aisd-ease-out);
        transform: perspective(var(--aisd-perspective))
            rotateX(var(--aisd-tilt-x, 0deg)) rotateY(var(--aisd-tilt-y, 0deg));
    }
}

/* ── Accordion (faq) — smooth open on top of the native <details> ─────────*/
@media (prefers-reduced-motion: no-preference) {
    [data-aisd-accordion] .aisd-s-faq__answer {
        transition: opacity var(--aisd-dur-1) var(--aisd-ease-out);
    }
}

/* ── Counter / bar-fill — the number/width is written by JS; the transition
   here just smooths it. No layout thrash (transform/opacity where possible).*/
@media (prefers-reduced-motion: no-preference) {
    [data-aisd-bar-fill] .aisd-bar__value {
        transition: transform var(--aisd-dur-3) var(--aisd-ease-out);
        transform: scaleX(var(--aisd-bar, 0));
        transform-origin: left center;
    }
}

/* ── Scrolly (scrolly-pinned) — active step emphasis ─────────────────────*/
@media (prefers-reduced-motion: no-preference) {
    [data-aisd-scrolly] [data-aisd-scrolly-step] {
        transition: opacity var(--aisd-dur-2) var(--aisd-ease-out);
        opacity: 0.45;
    }

    [data-aisd-scrolly] [data-aisd-scrolly-step].aisd-step-active {
        opacity: 1;
    }
}

/* ── Reading progress bar (opt-in behaviour) ─────────────────────────────*/
.aisd-reading-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    transform: scaleX(var(--aisd-read, 0));
    transform-origin: left center;
    background: var(--aisd-gradient-brand);
    z-index: 60;
    pointer-events: none;
}

[dir="rtl"] .aisd-reading-progress,
[dir="rtl"] [data-aisd-bar-fill] .aisd-bar__value {
    transform-origin: right center;
}