/* ═══════════════════════════════════════════
   SCROLL ANIMATIONS — global engine
   Paired with assets/js/scroll-animations.js.
   Elements are assigned one of these state
   classes by the JS, then flipped to
   .sa-in when they scroll into view.
   Kept out of prefers-reduced-motion entirely
   so those visitors just see final content.
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
    .sa-up,
    .sa-down,
    .sa-left,
    .sa-right {
        opacity: 0;
        will-change: transform, opacity;
        transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
        transition-delay: calc(var(--sa-delay, 0) * 1ms);
    }

    .sa-up    { transform: translateY(36px); }
    .sa-down  { transform: translateY(-36px); }
    .sa-left  { transform: translateX(-48px); }
    .sa-right { transform: translateX(48px); }

    .sa-up.sa-in,
    .sa-down.sa-in,
    .sa-left.sa-in,
    .sa-right.sa-in {
        opacity: 1;
        transform: none;
    }

    .sa-in {
        will-change: auto;
    }
}