/* ============================================================ ScrollAnimate — AOS-style scroll animations (vanilla JS) Pairs with js/scroll-animate.js · Elements hide only when is present (set by the JS), so content is never invisible without JS. · Only transform + opacity are animated: hardware-accelerated, zero layout shift. ============================================================ */ html.aos-ready .aos { opacity: 0; transition-property: opacity, transform; transition-duration: .65s; transition-timing-function: cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } /* ---- Initial (hidden) states per animation type ---- */ html.aos-ready .aos.fade-up { transform: translate3d(0, 34px, 0); } html.aos-ready .aos.fade-down { transform: translate3d(0, -34px, 0); } html.aos-ready .aos.fade-left { transform: translate3d(34px, 0, 0); } /* slides in toward the left */ html.aos-ready .aos.fade-right { transform: translate3d(-34px, 0, 0); } /* slides in toward the right */ html.aos-ready .aos.zoom-in { transform: scale3d(.88, .88, 1); } html.aos-ready .aos.zoom-out { transform: scale3d(1.12, 1.12, 1); } html.aos-ready .aos.flip-up { transform: perspective(900px) rotateX(28deg) translate3d(0, 24px, 0); transform-origin: 50% 100%; } html.aos-ready .aos.scale { transform: scale3d(.94, .94, 1); } /* ---- Animated-in state (added by the observer) ---- */ html.aos-ready .aos.aos-animate { opacity: 1; transform: none; } /* ---- Accessibility: respect prefers-reduced-motion ---- */ @media (prefers-reduced-motion: reduce) { html.aos-ready .aos { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto; } }