/* * Scroll-reveal styles, driven by components/ScrollReveal.js. * * The hidden state only applies after ScrollReveal adds .reveal-ready to * , so content stays fully visible without JavaScript. Once an element * has finished revealing, the data-reveal attribute is removed and these * rules stop applying to it. */ :root { --reveal-duration: 600ms; --reveal-ease: cubic-bezier(0.23, 1, 0.32, 1); --reveal-distance: 20px; } html.reveal-ready [data-reveal] { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease); } html.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.reveal-ready [data-reveal] { transform: none; transition: opacity 300ms ease-out; } html.reveal-ready [data-reveal].is-revealed { transform: none; } }