/* * Scroll reveal styling. * * Everything stays visible until reveal.js adds .js-reveal to . That way * a JS failure, an old browser or a blocked script leaves the page readable * rather than blank. */ .js-reveal [data-animate], .js-reveal [data-stagger] { opacity: 0; transform: translateY(var(--translate-distance)); transition: opacity var(--duration-enter) var(--ease-out-expo), transform var(--duration-enter) var(--ease-out-expo); } .js-reveal [data-animate].is-revealed, .js-reveal [data-stagger].is-revealed { opacity: 1; transform: none; } /* A parent that only orchestrates its children should not fade itself. */ .js-reveal [data-animate="children"] { opacity: 1; transform: none; transition: none; } @media (prefers-reduced-motion: reduce) { .js-reveal [data-animate], .js-reveal [data-stagger] { opacity: 1; transform: none; transition: none; } }