Scroll Reveal

Add scroll reveal to page sections. As the user scrolls, elements fade in and rise into place. Each element starts at opacity 0 and translateY(14px), and animates to opacity 1 and translateY(0) over 220ms ease-out. When several siblings reveal together (cards in a row, list items), stagger them 120ms apart, but cap the stagger at the first 8 elements so long lists don't feel slow. Use IntersectionObserver with a threshold around 0.2, animate each element only the first time it appears, and never re-hide revealed content. Animate opacity and transform only (no top/margin), so nothing reflows. If prefers-reduced-motion is enabled, show everything immediately with no animation. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.