/* ========================================================================== ÉDEN — Animations & apparitions au défilement Tout est neutralisé plus bas si l'utilisateur demande moins de mouvement. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Keyframes -------------------------------------------------------------------------- */ @keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } } @keyframes cue-slide { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Trait or qui se déploie sous les titres de section */ @keyframes draw-line { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* -------------------------------------------------------------------------- 2. Apparition au défilement Les éléments porteurs de [data-reveal] partent légèrement décalés ; le script main.js ajoute .is-in quand ils entrent dans le viewport. ⚠️ Tout est préfixé par `.js` — classe posée sur par un script inline en tête de page. Sans JavaScript (script bloqué, erreur, aperçu statique, robot d'indexation), aucune de ces règles ne s'applique et le contenu reste visible : jamais de zone blanche. -------------------------------------------------------------------------- */ .js [data-reveal] { opacity: 0; transform: translateY(1.75rem); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .js [data-reveal="left"] { transform: translateX(-1.75rem); } .js [data-reveal="right"] { transform: translateX(1.75rem); } .js [data-reveal="fade"] { transform: none; } /* Voile qui se lève sur une image */ .js [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1200ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .js [data-reveal].is-in { opacity: 1; transform: none; } .js [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); } /* Décalage automatique des enfants d'un groupe */ .js [data-reveal-group] > * { opacity: 0; transform: translateY(1.5rem); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); } .js [data-reveal-group].is-in > * { opacity: 1; transform: none; } .js [data-reveal-group].is-in > *:nth-child(1) { transition-delay: 0ms; } .js [data-reveal-group].is-in > *:nth-child(2) { transition-delay: 90ms; } .js [data-reveal-group].is-in > *:nth-child(3) { transition-delay: 180ms; } .js [data-reveal-group].is-in > *:nth-child(4) { transition-delay: 270ms; } .js [data-reveal-group].is-in > *:nth-child(5) { transition-delay: 360ms; } .js [data-reveal-group].is-in > *:nth-child(6) { transition-delay: 450ms; } .js [data-reveal-group].is-in > *:nth-child(n + 7) { transition-delay: 540ms; } /* Filet or animé sous un titre */ .js .rule--gold[data-reveal] { transform: scaleX(0); transform-origin: left; opacity: 1; transition: transform 700ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .js .rule--gold[data-reveal].is-in { transform: scaleX(1); } /* -------------------------------------------------------------------------- 3. Parallaxe très légère (piloté par main.js via --parallax) -------------------------------------------------------------------------- */ [data-parallax] { transform: translate3d(0, var(--parallax, 0px), 0); will-change: transform; } /* -------------------------------------------------------------------------- 4. Respect de « prefers-reduced-motion » On coupe tout mouvement et on force l'état final visible. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-reveal], [data-reveal-group] > *, .js [data-reveal], .js [data-reveal-group] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; } .rule--gold[data-reveal], .js .rule--gold[data-reveal] { transform: scaleX(1) !important; } [data-parallax] { transform: none !important; } .hero__media img { animation: none; } .marquee__track { animation: none; } .scroll-cue { display: none; } }