/** * Scroll-driven entrance animations (P3.17). * * Sections fade + slide up as they scroll into view — a subtle, premium * entrance. Reveal is a one-shot: once a section crosses ~70% of the viewport * it animates in and stays. * * Accessibility + resilience contract: * 1. prefers-reduced-motion: content shows immediately, no motion. * 2. No-JS / JS-failure fallback: if the element never receives the * `flm-scroll-js` class (because scroll-entrance.js didn't run), every * [data-scroll-reveal] is forced visible. Content can NEVER be stuck at * opacity:0. */ /* Only hide-then-reveal when JS is present AND motion is allowed. The .flm-scroll-js gate guarantees the no-JS fallback below can win. */ .flm-scroll-js [data-scroll-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .flm-scroll-js [data-scroll-reveal].is-revealed { opacity: 1; transform: none; } /* Accessibility: reduced motion always shows content with no animation, regardless of JS state. */ @media (prefers-reduced-motion: reduce) { .flm-scroll-js [data-scroll-reveal], [data-scroll-reveal] { opacity: 1; transform: none; transition: none; } } /* Resilience fallback: when JS did not run (no `flm-scroll-js` on ), everything is visible. This rule needs no extra selector — the hiding rule above is itself scoped to .flm-scroll-js, so absent that class nothing is ever hidden. Kept explicit for clarity / defense in depth. */ html:not(.flm-scroll-js) [data-scroll-reveal] { opacity: 1; transform: none; }