/* ============================================================
   SCROLL ANIMATIONS — opt-in via data-animate
   ============================================================
   Usage:
     <div data-animate="fade-up">...</div>
     <div data-animate="fade-up" data-animate-delay="120">...</div>

   Values: fade | fade-up | fade-down | zoom

   Progressive enhancement: JS adds the hidden state, then reveals
   on scroll. If JS fails, content is visible by default.
   ============================================================ */

[data-animate] {
    opacity: 1;
    transform: none;
    transition:
        opacity 700ms cubic-bezier(.22, .61, .36, 1),
        transform 700ms cubic-bezier(.22, .61, .36, 1);
    will-change: auto;
}

/* Only when JS is active do we make them hidden first.
   The .js-anim class is added to <html> by animations.js */
html.js-anim [data-animate="fade"]      { opacity: 0; }
html.js-anim [data-animate="fade-up"]   { opacity: 0; transform: translate3d(0, 24px, 0); }
html.js-anim [data-animate="fade-down"] { opacity: 0; transform: translate3d(0, -16px, 0); }
html.js-anim [data-animate="zoom"]      { opacity: 0; transform: scale(0.96); }

/* Revealed state — applied by JS via .is-visible */
[data-animate].is-visible {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
}

/* Respect reduced motion: always visible, no transform, no transition */
@media (prefers-reduced-motion: reduce) {
    html.js-anim [data-animate],
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}