/* ========================================================================== ÉLYSÉE HÔTEL & SPA — ANIMATIONS ET MICRO-INTERACTIONS SUBTILES Direction Artistique : Rendu fluide, discret, haute couture ========================================================================== */ /* -------------------------------------------------------------------------- 1. CLASSES DE RÉVÉLATION AU DÉFILEMENT (PROGRESSIVE ENHANCEMENT) Par défaut, tous les éléments sont 100% visibles pour éviter tout écran blanc. Lorsque JavaScript s'initialise (classe .js-ready sur ), les animations de révélation douces s'activent. -------------------------------------------------------------------------- */ .reveal, .reveal--left, .reveal--right, .reveal--scale { opacity: 1; transform: none; transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } /* État initial réservé aux environnements avec JavaScript actif */ html.js-ready .reveal { opacity: 0; transform: translateY(24px); } html.js-ready .reveal--left { opacity: 0; transform: translateX(-28px); } html.js-ready .reveal--right { opacity: 0; transform: translateX(28px); } html.js-ready .reveal--scale { opacity: 0; transform: scale(0.97); } /* État actif révélé au scroll */ html.js-ready .reveal.is-visible, html.js-ready .reveal--left.is-visible, html.js-ready .reveal--right.is-visible, html.js-ready .reveal--scale.is-visible { opacity: 1; transform: translate(0) scale(1); } /* Délais échelonnés (stagger effect) pour grilles */ .stagger-1 { transition-delay: 0.08s; } .stagger-2 { transition-delay: 0.16s; } .stagger-3 { transition-delay: 0.24s; } .stagger-4 { transition-delay: 0.32s; } .stagger-5 { transition-delay: 0.40s; } /* -------------------------------------------------------------------------- 2. KEYFRAMES & MICRO-INTERACTIONS -------------------------------------------------------------------------- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Effet flottant discret pour badge de bienvenue */ @keyframes softFloat { 0% { transform: translateY(0px); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0px); } } .animate-float { animation: softFloat 4s ease-in-out infinite; } /* -------------------------------------------------------------------------- 3. ACCESSIBILITÉ : 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, .reveal--left, .reveal--right, .reveal--scale, html.js-ready .reveal, html.js-ready .reveal--left, html.js-ready .reveal--right, html.js-ready .reveal--scale { opacity: 1 !important; transform: none !important; } }