/** * Scroll reveal — a gentle fade + rise as blocks enter the viewport. * * Everything is gated on the `enact-anim` class, which reveal.js only puts on * when IntersectionObserver exists and the visitor hasn't asked for * reduced motion. If JS fails or is blocked, no element is ever hidden — the * page just renders normally. Nothing is hidden by CSS alone. * * @package astra-child */ .enact-anim .enact-reveal { opacity: 0; transform: translate3d(0, 16px, 0); will-change: opacity, transform; } .enact-anim .enact-reveal.is-in { opacity: 1; transform: translate3d(0, 0, 0); /* soft ease-out; 600ms reads as "settled" without feeling slow */ transition: opacity 600ms cubic-bezier(.22, .61, .36, 1), transform 600ms cubic-bezier(.22, .61, .36, 1); transition-delay: var(--enact-reveal-delay, 0ms); } /* once played, drop the compositing hint */ .enact-anim .enact-reveal.is-done { will-change: auto; } /* Belt and braces: anyone preferring reduced motion sees everything, always. */ @media (prefers-reduced-motion: reduce) { .enact-anim .enact-reveal, .enact-anim .enact-reveal.is-in { opacity: 1; transform: none; transition: none; } } /* --- Hero entrance --- PURE CSS on purpose: reveal.js is a footer script, so anything it hid would already have painted — the hero would flash then fade, looking broken. A keyframe declared in the stylesheet applies at first paint, needs no JS, and always runs to completion, so the hero can never be left invisible. Two beats: the photo settles, then the copy arrives just behind it. */ @keyframes enact-hero-in { from { opacity: 0; } to { opacity: 1; } } @keyframes enact-hero-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @media (prefers-reduced-motion: no-preference) { .enact-hero, .enact-pagehero { animation: enact-hero-in 900ms ease both; } .enact-hero__box > *, .enact-pagehero h1, .enact-pagehero__intro { animation: enact-hero-rise 700ms cubic-bezier(.22,.61,.36,1) both; animation-delay: 220ms; } .enact-hero__box > *:nth-child(2) { animation-delay: 300ms; } .enact-hero__box > *:nth-child(3) { animation-delay: 380ms; } .enact-pagehero__intro { animation-delay: 320ms; } }