/*
 * scroll-animations.css  v4.1.0
 * https://www.joshwcomeau.com/animation/scroll-driven-animations/
 *
 * TWO MODES:
 *
 * 1. SCROLL-DRIVEN (.sa-scroll-driven — JS adds this class)
 *    CSS animation-timeline: view() scrubs keyframes with scroll.
 *    Chrome 115+, Edge 115+, Safari 18+. Firefox → auto-falls back.
 *
 *    Critical rules for scroll-driven:
 *    a) animation-duration: auto  — browser ignores ms when timeline active
 *    b) animation-delay: 0s       — delay shifts scroll range, not time
 *    c) animation-fill-mode: both — stay hidden before entry, stay visible after
 *    d) animation-range: entry 0% entry 100% — complete as element enters
 *
 * 2. SCROLL-TRIGGERED (.sa-triggered — JS adds when IO fires)
 *    CSS transition from hidden → visible state.
 *    Uses --sa-duration, --sa-delay, --sa-easing (set by JS, time-based).
 *    Works in all browsers including Firefox.
 *
 * Reduced motion gated per article recommendation.
 */

:root {
    --sa-duration: 600ms;
    --sa-delay:    0ms;
    --sa-easing:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reduced motion gate ─────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

    /* ══════════════════════════════════════════════════════════
       MODE 1 — SCROLL-DRIVEN
       JS adds .sa-scroll-driven and calls fixAncestorOverflow().
       All animation-* properties are explicit — no CSS vars here.
    ══════════════════════════════════════════════════════════ */
    [data-sa].sa-scroll-driven {
        animation-duration:        auto;
        animation-timing-function: linear;
        animation-fill-mode:       both;
        animation-play-state:      running;
        animation-timeline:        view();
        animation-range:           entry 0% entry 100%;
        animation-delay:           0s;
    }

    /* Keyframe assignments — each animation type */
    [data-sa="sa-fade"].sa-scroll-driven      { animation-name: sa-fade-kf; }
    [data-sa="sa-slide-up"].sa-scroll-driven  { animation-name: sa-slide-up-kf; }
    [data-sa="sa-slide-down"].sa-scroll-driven{ animation-name: sa-slide-down-kf; }
    [data-sa="sa-slide-left"].sa-scroll-driven{ animation-name: sa-slide-left-kf; }
    [data-sa="sa-slide-right"].sa-scroll-driven{ animation-name: sa-slide-right-kf; }
    [data-sa="sa-zoom"].sa-scroll-driven      { animation-name: sa-zoom-kf; }
    [data-sa="sa-zoom-out"].sa-scroll-driven  { animation-name: sa-zoom-out-kf; }
    [data-sa="sa-flip"].sa-scroll-driven      { animation-name: sa-flip-kf; transform-origin: top center; }
    [data-sa="sa-reveal"].sa-scroll-driven    { animation-name: sa-reveal-kf; animation-timing-function: cubic-bezier(0.77, 0, 0.18, 1); }
    [data-sa="sa-blur"].sa-scroll-driven      { animation-name: sa-blur-kf; }
    [data-sa="sa-spring"].sa-scroll-driven    {
        animation-name: sa-spring-kf;
        animation-timing-function: linear(
            0, 0.01, 0.04 1.8%, 0.161 3.7%, 0.81 10.6%, 1.038,
            1.181 16.4%, 1.223, 1.247 19.3%, 1.253 20.2% 21.1%,
            1.232, 1.19 25.4%, 1.058 30.8%, 1.001 33.5%,
            0.958 36.5%, 0.945, 0.938 39.6%, 0.936 41.6%,
            0.941 43.8%, 0.999 53.9%, 1.01 56.7%,
            1.015 59.7% 64.3%, 1.001 74.2%, 0.996 79.6%, 1.001
        );
    }

    /* ══════════════════════════════════════════════════════════
       MODE 2 — SCROLL-TRIGGERED (IO-based, AOS-style)
       Initial hidden states — before IO fires.
       JS writes --sa-duration / --sa-delay / --sa-easing.
    ══════════════════════════════════════════════════════════ */

    [data-sa]:not([data-sa=""]):not(.sa-scroll-driven):not(.sa-triggered) {
        opacity: 0;
    }
    [data-sa="sa-slide-up"]:not(.sa-scroll-driven)    { transform: translateY(44px); opacity: 0; }
    [data-sa="sa-slide-down"]:not(.sa-scroll-driven)  { transform: translateY(-44px); opacity: 0; }
    [data-sa="sa-slide-left"]:not(.sa-scroll-driven)  { transform: translateX(52px); opacity: 0; }
    [data-sa="sa-slide-right"]:not(.sa-scroll-driven) { transform: translateX(-52px); opacity: 0; }
    [data-sa="sa-zoom"]:not(.sa-scroll-driven)        { transform: scale(0.88); opacity: 0; }
    [data-sa="sa-zoom-out"]:not(.sa-scroll-driven)    { transform: scale(1.1); opacity: 0; }
    [data-sa="sa-flip"]:not(.sa-scroll-driven)        { transform: perspective(600px) rotateX(28deg); transform-origin: top center; opacity: 0; }
    [data-sa="sa-reveal"]:not(.sa-scroll-driven)      { clip-path: inset(0 100% 0 0); }
    [data-sa="sa-blur"]:not(.sa-scroll-driven)        { transform: translateY(20px); filter: blur(10px); opacity: 0; }
    [data-sa="sa-spring"]:not(.sa-scroll-driven)      { transform: translateY(52px) scale(0.94); opacity: 0; }

    /* IO fires → transition to visible */
    [data-sa].sa-triggered {
        opacity:   1 !important;
        transform: none !important;
        filter:    none !important;
        clip-path: none !important;
        transition:
            opacity   var(--sa-duration, 600ms) var(--sa-easing, cubic-bezier(0.16,1,0.3,1)) var(--sa-delay, 0ms),
            transform var(--sa-duration, 600ms) var(--sa-easing, cubic-bezier(0.16,1,0.3,1)) var(--sa-delay, 0ms),
            filter    var(--sa-duration, 600ms) var(--sa-easing, cubic-bezier(0.16,1,0.3,1)) var(--sa-delay, 0ms),
            clip-path var(--sa-duration, 600ms) cubic-bezier(0.77,0,0.18,1) var(--sa-delay, 0ms);
    }
    [data-sa="sa-spring"].sa-triggered {
        transition-timing-function:
            linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938,1.077 19.8%,
                   1.121,1.149 22.7%,1.159,1.152 24.9%,1.126 26.7%,1.021 32.8%,
                   0.99,0.969 36.7%,0.96,0.954 39.5%,0.957,0.977 43.1%,
                   1.001 47.3%,1.011 49.2%,1.017 51.2%,1.016 53.5%,
                   1.003 62.3%,0.995 68.4%,1),
            linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938,1.077 19.8%,
                   1.121,1.149 22.7%,1.159,1.152 24.9%,1.126 26.7%,1.021 32.8%,
                   0.99,0.969 36.7%,0.96,0.954 39.5%,0.957,0.977 43.1%,
                   1.001 47.3%,1.011 49.2%,1.017 51.2%,1.016 53.5%,
                   1.003 62.3%,0.995 68.4%,1);
    }
    [data-sa="sa-reveal"].sa-triggered {
        transition-timing-function: cubic-bezier(0.77,0,0.18,1), cubic-bezier(0.77,0,0.18,1);
    }

    /* ══════════════════════════════════════════════════════════
       KEYFRAMES (for scroll-driven mode)
    ══════════════════════════════════════════════════════════ */
    @keyframes sa-fade-kf {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    @keyframes sa-slide-up-kf {
        from { opacity: 0; transform: translateY(44px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes sa-slide-down-kf {
        from { opacity: 0; transform: translateY(-44px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes sa-slide-left-kf {
        from { opacity: 0; transform: translateX(52px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes sa-slide-right-kf {
        from { opacity: 0; transform: translateX(-52px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes sa-zoom-kf {
        from { opacity: 0; transform: scale(0.88); }
        to   { opacity: 1; transform: scale(1); }
    }
    @keyframes sa-zoom-out-kf {
        from { opacity: 0; transform: scale(1.1); }
        to   { opacity: 1; transform: scale(1); }
    }
    @keyframes sa-flip-kf {
        from { opacity: 0; transform: perspective(600px) rotateX(28deg); }
        to   { opacity: 1; transform: perspective(600px) rotateX(0deg); }
    }
    @keyframes sa-reveal-kf {
        from { clip-path: inset(0 100% 0 0); }
        to   { clip-path: inset(0 0% 0 0); }
    }
    @keyframes sa-blur-kf {
        from { opacity: 0; filter: blur(10px); transform: translateY(20px); }
        to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
    }
    @keyframes sa-spring-kf {
        from { opacity: 0; transform: translateY(52px) scale(0.94); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }

} /* end prefers-reduced-motion */

/* ── Fallback: force-show via .sa-visible ────────────────────── */
[data-sa].sa-visible,
[data-sa][data-sa=""] {
    opacity:    1 !important;
    transform:  none !important;
    filter:     none !important;
    clip-path:  none !important;
    transition: none !important;
    animation:  none !important;
}

/* ── prefers-reduced-motion: reduce ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    [data-sa] {
        opacity:    1 !important;
        transform:  none !important;
        filter:     none !important;
        clip-path:  none !important;
        transition: none !important;
        animation:  none !important;
    }
}