/* Scroll-triggered fade-in animations. Gated behind html.js (set inline in ) so content stays visible when JavaScript is unavailable — never hide content behind a JS reveal. */ html.js .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } html.js .fade-in.visible { opacity: 1; transform: translateY(0); } .fade-in-delay-1 { transition-delay: 0.1s; } .fade-in-delay-2 { transition-delay: 0.2s; } .fade-in-delay-3 { transition-delay: 0.3s; } .fade-in-delay-4 { transition-delay: 0.4s; } /* Hero content entrance animations */ .hero-fade-up { opacity: 0; transform: translateY(30px); animation: heroFadeUp 0.8s ease forwards; } .hero-fade-up-delay-1 { animation-delay: 0.2s; } .hero-fade-up-delay-2 { animation-delay: 0.4s; } .hero-fade-up-delay-3 { animation-delay: 0.6s; } @keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } } /* Slide-in animation for messages/alerts */ .slide-in { animation: slideIn 0.3s ease forwards; } @keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Respect users who ask for less motion: show everything, animate nothing. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js .fade-in, .hero-fade-up { opacity: 1; transform: none; transition: none; animation: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }