Native CSS Scroll-Driven Timeline Page

What this builds

A complete scroll-narrative page (4-7 acts, 5000-8000px of scroll depth) where every animation is driven by animation-timeline: scroll() or animation-timeline: view() with zero JavaScript for motion. The page uses CSS-only progress bars, per-element reveals on viewport entry, parallax layers, sticky text transitions, and act-boundary crossfades, all running on the compositor thread with no main-thread cost.

• Global scroll progress bar driven by scroll(root block)
• Per-section reveals using view() timelines with animation-range tuning
• Multi-layer parallax using differential scroll() rates on transform
• Sticky text that crossfades between acts using view() exit/entry overlap
• Act-boundary color transitions via scroll() on custom properties (with @property registration)
• Graceful fallback for Firefox/Safari where animation-timeline support is incomplete
• Total JS: zero lines for animation; optional polyfill import for older browsers