/* * Scroll-triggered reveal — opacity + slight rise as elements enter the * viewport. Fires once per element via IntersectionObserver in reveal.js; * each element re-revealed only on first entry, then unobserved. * * Gated by `.has-js` on so users without JS see content immediately * (graceful degradation). The class is set by an inline boot script in * so paint never starts in the hidden state. * * Per-element stagger via `--pst-reveal-delay` inline style; consumers * (e.g. card-grid) set the variable to (index * 100ms) so siblings appear * one after another. `prefers-reduced-motion: reduce` short-circuits the * transition entirely. * * Tunable parameters (defined as CSS vars on `:root` so any block scope can * override by setting them on its wrapper): * --pst-reveal-distance initial translateY offset (default 16px) * --pst-reveal-duration fade + rise duration (default 600ms) * --pst-reveal-easing transition easing (default cubic-bezier) * --pst-reveal-delay per-element stagger (default 0ms) * * Override example, scoped to a block: * .my-block { --pst-reveal-distance: 24px; --pst-reveal-duration: 800ms; } * * Or per-element via inline style on the data-reveal element itself. */ :root { --pst-reveal-distance: 16px; --pst-reveal-duration: 600ms; --pst-reveal-easing: cubic-bezier(0.4, 0, 0.2, 1); --pst-reveal-delay: 0ms; } .has-js [data-reveal] { opacity: 0; transform: translateY(var(--pst-reveal-distance)); transition: opacity var(--pst-reveal-duration) var(--pst-reveal-easing), transform var(--pst-reveal-duration) var(--pst-reveal-easing); transition-delay: var(--pst-reveal-delay); will-change: opacity, transform; } .has-js [data-reveal].is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .has-js [data-reveal], .has-js [data-reveal].is-revealed { opacity: 1; transform: none; transition: none; } }