/* ========================================================================== Mouvement — Agnesa Mirabel Tout ce qui suit ne s'active que si porte `motion-on`, posé par motion.js après avoir vérifié prefers-reduced-motion. Sans JS ou en mouvement réduit : la page reste entièrement lisible et statique. ========================================================================== */ /* ========================================================================== 1. Poussière d'étoiles ========================================================================== */ .c-dust { position: absolute; inset: 0; z-index: -1; /* au-dessus du fond flouté, sous le contenu */ pointer-events: none; opacity: 0; transition: opacity 1.4s ease 220ms; } .motion-on .c-dust { opacity: 1; } /* ========================================================================== 2. La voie ferrée — la progression de lecture EST la ligne de train ========================================================================== */ .c-rail { position: fixed; top: 0; bottom: 0; right: clamp(.75rem, 2vw, 1.6rem); width: 26px; z-index: 90; pointer-events: none; opacity: 0; transition: opacity var(--d-slow) ease; } .motion-on .c-rail { opacity: 1; } /* ========================================================================== LA VOIE — deux rails, des traverses, du métal Trois filets de 1px ne lisaient pas comme une voie ferrée. Ce qui fait une voie, ce sont les TRAVERSES : sans elles, c'est juste une ligne. Tout est en CSS, aucune image. ========================================================================== */ .c-rail__line { position: absolute; top: 10vh; bottom: 10vh; left: 50%; width: 20px; transform: translateX(-50%); /* ⚠️ Couleurs EN DUR, pas dérivées des tokens : le rail est en position fixed et traverse des sections nuit ET crème. Dérivé du thème, il devenait de l'or sur crème — donc invisible (constaté au zoom). Un ballast sombre translucide lui donne son propre fond, lisible partout, et c'est aussi plus juste : une voie repose sur du ballast. Le blur derrière évite l'effet « barre collée ». */ background: rgba(10, 21, 38, .42); backdrop-filter: blur(3px) saturate(120%); -webkit-backdrop-filter: blur(3px) saturate(120%); border-radius: 10px; /* La voie s'estompe en haut et en bas au lieu de se couper net. */ mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent); } /* Les traverses : de courts tirets horizontaux, régulièrement espacés. */ .c-rail__line::before { content: ''; position: absolute; inset: 0 3px; background: repeating-linear-gradient(to bottom, rgba(217, 174, 95, .62) 0 2px, transparent 2px 15px); } /* Les deux rails, avec un reflet métallique : bord clair à gauche, arête sombre à droite. C'est ce liseré qui donne le relief. */ .c-rail__line::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 13px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(250, 225, 154, .85) 0 1px, rgba(8, 18, 33, .7) 1px 2px, transparent 2px) left / 2px 100% repeat-y, linear-gradient(90deg, rgba(250, 225, 154, .85) 0 1px, rgba(8, 18, 33, .7) 1px 2px, transparent 2px) right / 2px 100% repeat-y; } /* ========================================================================== LE FEU DE LA LOCOMOTIVE Un point plat devient un vrai fanal : cœur incandescent, halo chaud, et un cône de lumière projeté vers l'avant sur les rails. ========================================================================== */ .c-rail__lamp { position: absolute; top: 0; left: 50%; width: 11px; height: 11px; margin-top: calc(10vh - 5.5px); border-radius: 50%; /* Cœur presque blanc, puis or, puis ambre : un filament vu de près. */ background: radial-gradient(circle at 50% 42%, #FFFDF2 0%, #FDDF96 34%, #D9AE5F 66%, rgba(192,129,62,.7) 100%); box-shadow: 0 0 0 1px rgba(250, 225, 154, .55), 0 0 10px 2px rgba(253, 223, 150, .8), 0 0 26px 8px rgba(253, 223, 150, .45), 0 0 60px 20px rgba(253, 223, 150, .18); transform: translate3d(-50%, 0, 0); will-change: transform; } /* Le sillage derrière le fanal : la voie reste chaude sur son passage. */ .c-rail__lamp::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 3px; height: calc(var(--progress, 0) * 30vh); transform: translateX(-50%); border-radius: 2px; background: linear-gradient(to top, rgba(253, 223, 150, .7), rgba(253, 223, 150, .14) 55%, transparent); filter: blur(1px); } /* Le cône projeté vers l'avant, comme un phare sur les rails. */ .c-rail__lamp::after { content: ''; position: absolute; left: 50%; top: 100%; width: 26px; height: 9vh; transform: translateX(-50%); pointer-events: none; background: linear-gradient(to bottom, rgba(253, 223, 150, .18), transparent 62%); clip-path: polygon(44% 0, 56% 0, 88% 100%, 12% 100%); filter: blur(5px); } /* Les arrêts. */ .c-rail__stop { position: absolute; left: 50%; width: 7px; height: 7px; margin: calc(12vh - 3.5px) 0 0 0; transform: translateX(-50%); /* Couleurs en dur, comme le reste du rail : `var(--bg)` devenait crème sur les sections claires, donc une grosse pastille blanche au milieu des rails dorés. Ici : disque sombre cerclé d'or — un signal de gare. */ border: 1.5px solid rgba(217, 174, 95, .9); border-radius: 50%; background: #0A1526; box-shadow: 0 0 0 2px rgba(10, 21, 38, .55); transition: background-color var(--d-base) ease, border-color var(--d-base) ease, box-shadow var(--d-base) ease, transform var(--d-base) var(--ease-out); } /* La station où l'on se trouve s'allume, comme un feu de voie. */ .c-rail__stop.is-here { background: #FDDF96; border-color: #FFFDF2; transform: translateX(-50%) scale(1.45); box-shadow: 0 0 0 2px rgba(10, 21, 38, .55), 0 0 12px 3px rgba(253, 223, 150, .75), 0 0 28px 8px rgba(253, 223, 150, .3); } /* Le nom de la station, révélé au survol du rail. */ .c-rail:hover { pointer-events: auto; } .c-rail__stop::after { content: attr(data-label); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px); white-space: nowrap; font-family: var(--font-body); font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; /* Verre sombre en dur : le rail flotte au-dessus de sections nuit ET crème, donc une plaque dérivée de --bg devenait un rectangle crème posé sur la nuit du hero. Constant, il fonctionne partout. */ color: var(--gold-300); background: rgba(10, 21, 38, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 5px 10px; border: 1px solid rgba(217, 174, 95, .38); border-radius: var(--r-sm); opacity: 0; pointer-events: none; transition: opacity var(--d-fast) ease, transform var(--d-fast) var(--ease-out); } /* Au survol du rail uniquement. Afficher en permanence la station courante parasitait la lecture — le point allumé suffit à situer. */ @media (hover: hover) and (pointer: fine) { .c-rail:hover .c-rail__stop::after { opacity: 1; transform: translateY(-50%) translateX(0); } } /* Le rail vole de la place au contenu sur petit écran : on le retire. */ @media (max-width: 1180px) { .c-rail { display: none; } } /* ========================================================================== 3. La couverture vivante — reflet doré qui glisse ========================================================================== */ .c-vol__sheen { position: absolute; top: -12%; bottom: -12%; left: -60%; width: 62%; pointer-events: none; background: linear-gradient(100deg, transparent 0%, rgba(255, 251, 240, .05) 34%, rgba(253, 223, 150, .30) 50%, rgba(255, 251, 240, .05) 66%, transparent 100%); filter: blur(6px); mix-blend-mode: screen; will-change: transform; } .motion-on .c-vol__inner { will-change: transform; } /* ========================================================================== 4. Le passage de lanterne Une bande de lumière chaude traverse le bloc, puis le contenu reste. Sans `lit-ready` (JS absent / mouvement réduit) : tout est visible. ========================================================================== */ .lit-ready .js-lit { opacity: 0; transform: translateY(18px); transition: opacity 760ms var(--ease-warm) var(--lit-delay, 0ms), transform 760ms var(--ease-warm) var(--lit-delay, 0ms); } .lit-ready .js-lit.is-lit { opacity: 1; transform: none; } /* La lumière elle-même : un pseudo-élément qui balaie une seule fois. */ .lit-ready .js-lit { position: relative; } .lit-ready .js-lit::before { content: ''; position: absolute; inset: -2% -14%; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(104deg, transparent 34%, rgba(253, 223, 150, .14) 47%, rgba(253, 223, 150, .26) 50%, rgba(253, 223, 150, .14) 53%, transparent 66%); filter: blur(10px); } .lit-ready .js-lit.is-lit::before { animation: agn-lantern 1180ms var(--ease-warm) var(--lit-delay, 0ms) both; } @keyframes agn-lantern { 0% { opacity: 0; transform: translateX(-64%); } 22% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; transform: translateX(64%); } } /* Filet de sécurité : un bloc jamais éclairé redevient visible seul. */ .lit-ready .js-lit:not(.is-lit) { animation: agn-lit-failsafe 0s linear 3s forwards; } @keyframes agn-lit-failsafe { to { opacity: 1; transform: none; } } /* ========================================================================== 5. Le titre allumé — mot à mot ========================================================================== */ .c-stage__title.is-splitting .u-word { display: inline-block; opacity: 0; transform: translateY(0.34em) rotateX(-38deg); transform-origin: 50% 100%; filter: blur(5px); } .c-stage__title.is-alight .u-word { opacity: 1; transform: none; filter: blur(0); transition: opacity 460ms var(--ease-warm) var(--w-delay, 0ms), transform 560ms var(--ease-warm) var(--w-delay, 0ms), filter 460ms var(--ease-warm) var(--w-delay, 0ms); } /* La lettrine s'allume avec le premier mot, elle n'est pas découpée. */ .c-stage__title.is-splitting .u-cap { opacity: 0; } .c-stage__title.is-alight .u-cap { opacity: 1; transition: opacity 900ms var(--ease-warm); text-shadow: 0 0 34px rgba(253, 223, 150, .34); } /* ========================================================================== 6. Parallaxe ========================================================================== */ .motion-on .c-stage__bg, .motion-on .c-stage__object { will-change: transform; } /* ========================================================================== Panneaux de gare — balancement au survol, comme une enseigne suspendue ========================================================================== */ .c-sign { transform-origin: 50% 0; transition: transform var(--d-slow) var(--ease-warm), border-color var(--d-base) ease, box-shadow var(--d-base) ease; } @media (hover: hover) and (pointer: fine) { .motion-on .c-sign:hover { transform: rotate(-0.5deg) translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-lg), 0 0 30px -12px var(--glow-strong); } } /* Le chevron glisse à droite au survol : le train repart. */ .c-sign__name::after { transition: transform var(--d-base) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .motion-on .c-sign:hover .c-sign__name::after { transform: translateX(4px); } } /* ========================================================================== Respect absolu du mouvement réduit — rien ne bouge, tout reste lisible. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .c-dust, .c-rail { display: none !important; } .js-lit { opacity: 1 !important; transform: none !important; } .js-lit::before { display: none !important; } .c-stage__title .u-word, .c-stage__title .u-cap { opacity: 1 !important; transform: none !important; filter: none !important; } .c-vol__sheen { display: none !important; } }