/* * The five AOS animations this site actually uses, lifted local. * * The upstream aos.css is 26 KB of every animation the library ships and was * loaded render-blocking from cdnjs. AOS's JavaScript is not loaded at all — * ScrollAnimations.tsx reimplements the in-view detection and toggles the same * .aos-init / .aos-animate classes — so only the CSS half was ever needed. * * Duration and easing are baked in rather than read from the body's * data-aos-duration / data-aos-easing attributes, which is what the real * library's JS would do. Keep them in step with the values on . */ [data-aos] { opacity: 0; transition-property: opacity, transform; transition-duration: 0.8s; transition-timing-function: ease-in-out; will-change: opacity, transform; } [data-aos].aos-animate { opacity: 1; transform: none; } [data-aos='fade-up'] { transform: translate3d(0, 100px, 0); } [data-aos='fade-down'] { transform: translate3d(0, -100px, 0); } [data-aos='fade-right'] { transform: translate3d(-100px, 0, 0); } [data-aos='fade-left'] { transform: translate3d(100px, 0, 0); } [data-aos='zoom-in'] { transform: scale(0.6); } /* The library applies these from JS as inline styles; as CSS they cost nothing. */ [data-aos][data-aos-delay='100'] { transition-delay: 0.1s; } [data-aos][data-aos-delay='200'] { transition-delay: 0.2s; } [data-aos][data-aos-delay='400'] { transition-delay: 0.4s; } [data-aos][data-aos-delay='500'] { transition-delay: 0.5s; } /* * Reveal-on-scroll is decoration. Anyone who has asked the OS for less motion * gets the content, not the journey. */ @media (prefers-reduced-motion: reduce) { [data-aos] { opacity: 1; transform: none; transition: none; } }