/* ============================================ SCROLL REVEAL Elements with .reveal fade + slide up into place as they enter the viewport. The hidden state is gated behind .has-reveal (added to by a tiny inline script in ). If JS is disabled, .has-reveal is never added, so .reveal elements just stay visible — the page degrades gracefully. ============================================ */ .reveal { transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } /* Hidden state — only when JS reveal is active */ .has-reveal .reveal { opacity: 0; transform: translateY(4rem); } /* Revealed state */ .has-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Accessibility — users who ask for less motion get no animation */ @media (prefers-reduced-motion: reduce) { .reveal, .has-reveal .reveal { opacity: 1; transform: none; transition: none; } }