/* Shared scroll-reveal animation. Content is only hidden once reveal.js has added .reveal-ready to , which it does only when it can guarantee it will un-hide it again. */ .reveal-ready .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease-out, transform .7s ease-out; } .reveal-ready .reveal.is-visible { opacity: 1; transform: none; } .reveal-ready .reveal-delay-1 { transition-delay: .12s; } .reveal-ready .reveal-delay-2 { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .reveal-ready .reveal { opacity: 1; transform: none; transition: none; } } /* Page-load entrance for hero content. Pure CSS — runs at first render, never depends on JS, so the hero can never be left hidden. */ @keyframes hero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .hero-enter > * { animation: hero-rise 1.1s cubic-bezier(.22,.61,.36,1) both; } .hero-enter > *:nth-child(1) { animation-delay: .05s; } .hero-enter > *:nth-child(2) { animation-delay: .23s; } .hero-enter > *:nth-child(3) { animation-delay: .41s; } .hero-enter > *:nth-child(4) { animation-delay: .59s; } .hero-enter > *:nth-child(n+5) { animation-delay: .77s; } @media (prefers-reduced-motion: reduce) { .hero-enter > * { animation: none; } }