/* ============================================================ Scroll-triggered reveals. How it works: 1. gets `iw-animated` set by a tiny inline script in the , BEFORE first paint, ONLY when prefers-reduced-motion is unset. That class scopes every rule below — so reduced-motion visitors see the unanimated page with zero flash. 2. `public/js/reveal.js` adds `iw-reveal` to a curated list of selectors after DOM parse, then observes them with IntersectionObserver and toggles `iw-in-view` as each enters view. The CSS does the actual transition. 3. Stagger inside known grid containers is set via an inline `--iw-reveal-delay` CSS custom property. Everything is opacity + transform only — compositor-friendly, no layout thrash. ============================================================ */ .iw-animated .iw-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(.2, .8, .2, 1), transform 0.7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--iw-reveal-delay, 0ms); will-change: opacity, transform; } .iw-animated .iw-reveal.iw-in-view { opacity: 1; transform: translateY(0); } /* Variant: pure fade (used for the quote block which is already centered) */ .iw-animated .iw-reveal.iw-fade { transform: none; } /* Variant: subtle scale (used for hero imagery) */ .iw-animated .iw-reveal.iw-scale { transform: scale(.97); } .iw-animated .iw-reveal.iw-scale.iw-in-view { transform: scale(1); } /* Variant: slide from the side (used for alternating split rows) */ .iw-animated .iw-reveal.iw-from-left { transform: translateX(-28px); } .iw-animated .iw-reveal.iw-from-right { transform: translateX(28px); } .iw-animated .iw-reveal.iw-from-left.iw-in-view, .iw-animated .iw-reveal.iw-from-right.iw-in-view { transform: translateX(0); } /* Belt-and-braces: anyone who lands with reduced motion preference set gets nothing transitioned, no matter what JS did or didn't do. */ @media (prefers-reduced-motion: reduce) { .iw-animated .iw-reveal, .iw-animated .iw-reveal.iw-in-view { opacity: 1; transform: none; transition: none; } }