/* No-JS / no-support fallback: content is visible by default. JS adds the "js-ready" class to only once it has successfully set up the IntersectionObserver, so .reveal only hides content when we know for certain the animation will actually run. */ .reveal, .reveal-stagger > * { opacity: 1; transform: none; } .js-ready .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease, transform 600ms ease; } .js-ready .reveal.is-visible { opacity: 1; transform: translateY(0); } .js-ready .reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity 550ms ease, transform 550ms ease; } .js-ready .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); } .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; } .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; } .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; } .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } }