/** * Scroll Animation Styles * Progressive enhancement: content is visible by default. * Elements only "hide" when JS has registered the animation observer * (indicated by the .js-ready class on ). * This guarantees no blank space if JS fails, is slow, or is disabled. */ /* Default visible state for all animated elements */ .trust-indicator, .scroll-animate, .scroll-animate-left, .scroll-animate-right, .scroll-animate-scale { opacity: 1; transform: none; transition: opacity 0.6s ease-out, transform 0.6s ease-out; } /* Only apply the "enter from" state when JS is ready to animate */ html.js-ready .trust-indicator:not(.animate-in) { opacity: 0; transform: translateY(30px) scale(0.9); } html.js-ready .scroll-animate:not(.animate-in) { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } html.js-ready .scroll-animate-left:not(.animate-in) { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } html.js-ready .scroll-animate-right:not(.animate-in) { opacity: 0; transform: translateX(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } html.js-ready .scroll-animate-scale:not(.animate-in) { opacity: 0; transform: scale(0.8); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } /* Animated-in state: fully visible */ .trust-indicator.animate-in, .scroll-animate.animate-in, .scroll-animate-left.animate-in, .scroll-animate-right.animate-in, .scroll-animate-scale.animate-in { opacity: 1; transform: none; } /* Icon bounce only runs when JS explicitly triggers animate-in */ html.js-ready .trust-indicator.animate-in i { animation: iconBounce 0.6s ease-out; } @keyframes iconBounce { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } /* Reduced motion: no animations, no hidden states */ @media (prefers-reduced-motion: reduce) { .trust-indicator, .scroll-animate, .scroll-animate-left, .scroll-animate-right, .scroll-animate-scale, html.js-ready .trust-indicator:not(.animate-in), html.js-ready .scroll-animate:not(.animate-in), html.js-ready .scroll-animate-left:not(.animate-in), html.js-ready .scroll-animate-right:not(.animate-in), html.js-ready .scroll-animate-scale:not(.animate-in) { transition: none; opacity: 1; transform: none; } html.js-ready .trust-indicator.animate-in i { animation: none; } }