/* ============================================================================ 05-ANIMATIONS.CSS — Keyframes, enter-states, reduced-motion contract Depends on: 01-tokens.css ---------------------------------------------------------------------------- GSAP drives the scroll-linked choreography in JS. This file owns: (a) pure-CSS loops that don't need JS (scroll cue), (b) the "pre-animation" hidden state — but ONLY applied when JS is active, so that a no-JS / failed-CDN visitor still sees fully-rendered content. ========================================================================== */ /* Looping descend tick under the scroll cue */ @keyframes cue { 0%, 100% { transform: scaleY(0.25); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } } /* ---------------------------------------------------------------------------- PROGRESSIVE ENHANCEMENT `.is-enhanced` is added to by main.js ONLY when GSAP + ScrollTrigger loaded AND the user does not prefer reduced motion. It switches the acts from the vertical fallback stack to the horizontal filmstrip and hints the compositor. NOTE — we deliberately DO NOT hide .gs-fade / .gs-title via CSS here. GSAP's `.from()` uses immediateRender:true, so it sets the start state (opacity:0, y-offset) synchronously before first paint — no flash, and no risk of trapping content invisible if a tween fails. CSS-hiding would also poison the `.from()` end value (it would read 0 as the target). Visibility stays a JS concern; CSS only ever leaves content shown. -------------------------------------------------------------------------- */ .is-enhanced .scene__bg, .is-enhanced .acts__track { will-change: transform; } /* ---------------------------------------------------------------------------- REDUCED MOTION Kill every transition/animation and guarantee visibility. The acts already fall back to a vertical stack via 03-layout.css (no `.is-enhanced`). -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .gs-fade, .gs-title { opacity: 1 !important; transform: none !important; } }