/* ========================================================================== Scroll Reveal Usage: add data-reveal to any element. js/components/reveal.js adds .is-visible when it scrolls into view and sets a per-sibling animation delay. Elements are only hidden when carries the "js" class, so pages stay readable without JavaScript. The keyframe animation uses fill-mode "backwards" so it never overrides hover transforms after it has finished. ========================================================================== */ html.js [data-reveal] { opacity: 0; } html.js [data-reveal].is-visible { opacity: 1; animation: reveal-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards; } @keyframes reveal-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity: 1; animation: none; } }