/* ========================================================================== Animate on scroll The reveal is gated behind the `.js` class (added synchronously to by the bootstrap script in base.html). Without JavaScript nothing is hidden, so above-the-fold/LCP content paints immediately and the page degrades safely. ========================================================================== */ .js [data-aos] { opacity: 0; transition: opacity .4s ease, transform .4s ease; transition-delay: var(--aos-delay, 0ms); will-change: opacity, transform; } .js [data-aos="fade-up"] { transform: translateY(10px); } .js [data-aos="fade-down"] { transform: translateY(-10px); } .js [data-aos="fade-left"] { transform: translateX(10px); } .js [data-aos="fade-right"] { transform: translateX(-10px); } .js [data-aos="zoom-in"] { transform: scale(.98); } .js [data-aos="fade"] { transform: none; } .js [data-aos].is-visible { opacity: 1; transform: none; } /* Stagger */ .js [data-aos-stagger] > * { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; } .js [data-aos-stagger].is-visible > * { opacity: 1; transform: none; } .js [data-aos-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; } .js [data-aos-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; } .js [data-aos-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; } .js [data-aos-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; } .js [data-aos-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; } .js [data-aos-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; } .js [data-aos-stagger].is-visible > *:nth-child(7) { transition-delay: 480ms; } @media (prefers-reduced-motion: reduce) { [data-aos], [data-aos-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; } }