@charset "UTF-8"; /* ═══════════════════════════════════════════════════════════ 06 — ANIMATIONS Un seul principe : opacité + translation + flou, sur une courbe unique. Rien ne dépasse 800 ms, rien ne rebondit. ═══════════════════════════════════════════════════════════ */ /* ── Garde-fou sans JavaScript ─────────────────────────── Les états « masqués » ne s'appliquent que si le script a pu marquer . Sans JS, la page s'affiche entièrement, simplement sans animation. */ html:not(.js) .intro, html:not(.js) .cursor, html:not(.js) .scroll-progress { display: none; } /* ── Entrée du héros, séquencée après le rideau ─────────── */ .js [data-anim] { opacity: 0; will-change: transform, opacity; } .js [data-anim="fade"] { translate: 0 22px; filter: blur(6px); } .js [data-anim="mask"] { opacity: 1; } .js [data-anim="mask"] > span { display: block; translate: 0 108%; rotate: 1.6deg; transform-origin: left top; } body.is-ready [data-anim="fade"] { opacity: 1; translate: 0 0; filter: blur(0); transition: opacity .8s var(--ease-out) calc(var(--d, 0) * .085s + .06s), translate .8s var(--ease-out) calc(var(--d, 0) * .085s + .06s), filter .8s var(--ease-out) calc(var(--d, 0) * .085s + .06s); } body.is-ready [data-anim="mask"] > span { translate: 0 0; rotate: 0deg; transition: translate .92s var(--ease-out) calc(var(--d, 0) * .085s + .06s), rotate .92s var(--ease-out) calc(var(--d, 0) * .085s + .06s); } /* le soulignement orange n'avance qu'une fois la page prête */ .hero__title em::after { animation-play-state: paused; } body.is-ready .hero__title em::after { animation-play-state: running; } /* ── Révélation au défilement ───────────────────────────── */ .js .reveal { opacity: 0; translate: 0 26px; filter: blur(5px); /* pas de will-change ici : trop d'éléments à promouvoir d'un coup */ } .reveal.is-in { opacity: 1; translate: 0 0; filter: blur(0); transition: opacity .78s var(--ease-out) calc(var(--d, 0) * .075s), translate .78s var(--ease-out) calc(var(--d, 0) * .075s), filter .78s var(--ease-out) calc(var(--d, 0) * .075s); } /* ── Keyframes ──────────────────────────────────────────── */ @keyframes intro-mark { from { opacity: 0; scale: .6; rotate: -12deg; } to { opacity: 1; scale: 1; rotate: 0deg; } } @keyframes intro-label { from { opacity: 0; translate: 0 100%; } to { opacity: 1; translate: 0 0; } } @keyframes intro-bar { 0% { scale: 0 1; } 62% { scale: .72 1; } 100% { scale: 1 1; } } @keyframes build-in { to { opacity: 1; translate: 0 0; filter: blur(0); } } @keyframes underline-in { from { scale: 0 1; } to { scale: 1 1; } } @keyframes marquee { from { translate: 0 0; } to { translate: -50% 0; } } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 6px transparent; } } @keyframes pulse-dot-ok { 0%, 100% { box-shadow: 0 0 0 0 rgba(18,161,80,.28); } 50% { box-shadow: 0 0 0 5px transparent; } } @keyframes float-a { from { translate: 0 0; } to { translate: 0 -14px; } } @keyframes float-b { from { translate: 0 0; } to { translate: 0 12px; } } @keyframes drift-a { from { translate: 0 0; scale: 1; } to { translate: -6% 8%; scale: 1.12; } } @keyframes drift-b { from { translate: 0 0; scale: 1; } to { translate: 8% -6%; scale: 1.08; } } /* ── État initial de la maquette avant reprise par le JS ── Évite le saut d'une image entre le rendu CSS et la première frame calculée par le module « tilt ». */ @media (prefers-reduced-motion: no-preference) and (min-width: 901px) { .js .browser { transform: perspective(1600px) rotateX(11deg) scale(.94); } } /* ── Mouvement réduit : on coupe tout, on garde le sens ─── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal, [data-anim], [data-anim="mask"] > span, [data-build] { opacity: 1 !important; translate: 0 0 !important; filter: none !important; rotate: 0deg !important; } .marquee__track { animation: none !important; } .cursor { display: none !important; } .intro { display: none !important; } .manifesto__text .w { color: var(--ink) !important; } .gauge__fg { stroke-dashoffset: var(--off, 6.5) !important; } .bars u { scale: var(--v, 1) 1 !important; } }