/* ========================================================================== ÉCRIN — Animations & apparitions au défilement Tout est neutralisé plus bas si l'utilisateur demande moins de mouvement. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Keyframes -------------------------------------------------------------------------- */ @keyframes cue-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes quote-in { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 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, 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; } .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); } .js [data-reveal-group] > * { opacity: 0; transform: translateY(1.5rem); transition: opacity 850ms var(--ease-out), transform 850ms 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 qui se déploie sous un titre */ .js .rule[data-reveal] { transform: scaleX(0); transform-origin: left; opacity: 1; transition: transform 700ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .js .rule[data-reveal].is-in { transform: scaleX(1); } /* -------------------------------------------------------------------------- 3. Respect de « prefers-reduced-motion » -------------------------------------------------------------------------- */ @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[data-reveal], .js .rule[data-reveal] { transform: scaleX(1) !important; } .ticker__track { animation: none; } .scroll-cue { display: none; } .quote-slide.is-active { animation: none; } }