/* Visible by default — so content shows even if JS fails or is blocked. The hidden/animated state only applies once the inline head script adds the `js` class to , which prevents the no-JS blank-page failure and keeps the hero (LCP) painting on the first frame. */ .reveal { opacity: 1; transform: none; } html.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity var(--transition-slow), transform var(--transition-slow); } html.js .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Motion-sensitive users: never hide or move content */ @media (prefers-reduced-motion: reduce) { html.js .reveal, html.js .reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; } } .reveal--delay-1 { transition-delay: 100ms; } .reveal--delay-2 { transition-delay: 200ms; } .reveal--delay-3 { transition-delay: 320ms; } .reveal--delay-4 { transition-delay: 440ms; } .reveal--delay-5 { transition-delay: 560ms; }