/* ========================================================= ANIMATIONS — keyframes + classes reveal Intersection Observer ========================================================= */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes floatSubtle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Éléments à révéler au scroll Par défaut visibles (fallback si JS ne charge pas, ex : double-clic en file://). Cachés uniquement si la classe .js-loaded est posée sur par le script inline dans le . */ .reveal { opacity: 1; transform: none; } .js-loaded .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); will-change: opacity, transform; } .js-loaded .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 100ms; } .reveal-delay-2 { transition-delay: 200ms; } .reveal-delay-3 { transition-delay: 300ms; } .reveal-delay-4 { transition-delay: 400ms; } /* Effet frosted glass réutilisable */ .frost { background: var(--frost-white); backdrop-filter: blur(var(--frost-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.4); } .frost--dark { background: rgba(13, 31, 61, 0.5); backdrop-filter: blur(var(--frost-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.15); } /* Élément qui flotte doucement */ .float-subtle { animation: floatSubtle 6s ease-in-out infinite; } /* Respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } }