/* ============================================ Animations CSS Scroll-triggered fade-in via Intersection Observer ============================================ */ /* === Scroll-in animation base state === */ /* Progressive enhancement: hidden only when JS is available (.js-ready on ) */ .js-ready .js-animate { opacity: 0; will-change: transform, opacity; transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Direction-specific initial states (set by JS) */ .js-ready .js-animate.animate-left { transform: translateX(-60px); } .js-ready .js-animate.animate-right { transform: translateX(60px); } /* Triggered by Intersection Observer via JS */ .js-ready .js-animate.is-visible { opacity: 1; transform: translateX(0) translateY(0); will-change: auto; } /* Stagger children if needed */ .js-ready .js-animate.is-visible .module__media { transition-delay: 0.1s; } .js-ready .js-animate.is-visible .module__content { transition-delay: 0.2s; } /* === Hero scroll-down arrow pulse === */ @keyframes bounce-y { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(8px); opacity: 1; } } .hero__scroll-icon { animation: bounce-y 2s ease-in-out infinite; } .hero__scroll-icon:hover { animation-play-state: paused; } /* === Button press feedback === */ .hero__scroll-icon:active, .footer__btn:active, .module__icon-btn:active { transform: scale(0.96); }