/* Dôme Habitat — mouvement (vitrine + blog public).
   Les états « cachés avant révélation » dépendent de .motion-on, posé par motion.js
   uniquement si le mouvement n'est pas réduit : sans JS, la page reste lisible et statique. */
:root { --mo-ease: cubic-bezier(.16, 1, .3, 1); }

/* Anti-flash : le titre est masqué entre le premier rendu et le découpage en lettres/mots
   (classe .js-motion posée dans <head> ; un filet de sécurité le révèle si le script échoue). */
.js-motion :is(h1, h2):not(.is-split) { opacity: 0; animation: mo-unhide .01s linear 1.2s forwards; }
@keyframes mo-unhide { to { opacity: 1; } }

/* Barre de progression de lecture */
.scroll-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 1100; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; background: var(--rust); transform-origin: left; transform: scaleX(0); }

/* ---------- Titres : les mots sortent d'un masque ---------- */
.mw { position: relative; display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .14em 0; margin: 0 -.08em -.14em 0; }
.mwi { display: inline-block; }
.motion-on .mwi { transition: transform 1.05s var(--mo-ease); transition-delay: calc(var(--wi, 0) * 65ms + 80ms); }
.motion-on .is-split:not(.is-in) .mwi { transform: translateY(112%) rotate(3deg); transform-origin: left bottom; }
/* Titre contenant un lien : pas de découpage (les mots en inline-block perdraient le soulignement), simple fondu */
.motion-on .no-words { transition: opacity .9s var(--mo-ease), transform .9s var(--mo-ease); }
.motion-on .no-words:not(.is-in) { opacity: 0; transform: translateY(16px); }

/* Trait de stylo sous un mot (data-scribble) */
.mw.has-scribble { padding-bottom: .34em; margin-bottom: -.34em; }
.scribble { position: absolute; left: 0; bottom: .02em; width: 100%; height: .3em; overflow: visible; pointer-events: none; clip-path: inset(-50% 102% -50% -2%); transition: clip-path 1.3s var(--mo-ease) .65s; }
.is-in .scribble { clip-path: inset(-50% -2% -50% -2%); }
.scribble path { fill: none; stroke: var(--lime); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ---------- Hero : lettres en cascade, éclairées près du curseur ---------- */
.hw { display: inline-block; white-space: nowrap; }
.motion-on .hc {
  display: inline-block;
  animation: hc-rise 1.15s var(--mo-ease) both;
  animation-delay: calc(var(--ci, 0) * 32ms + .12s);
  translate: 0 calc(var(--p, 0) * -.13em);
  color: color-mix(in srgb, currentColor, var(--lime-bright, #fff) calc(var(--p, 0) * 75%));
}
@keyframes hc-rise { from { transform: translateY(110%) rotate(7deg); opacity: 0; } to { transform: none; opacity: 1; } }
.motion-on .hero-content > :not(h1) { animation: mo-rise .9s var(--mo-ease) both; animation-delay: 1.05s; }
.motion-on .hero-content .hero-cta { animation-delay: 1.25s; }
@keyframes mo-rise { from { transform: translateY(22px); opacity: 0; } to { transform: none; opacity: 1; } }
.motion-on .hero-content { will-change: translate, opacity; }

/* Dôme filaire : se trace, puis suit le curseur (géométrie recalculée par motion.js) */
.hero { overflow: hidden; } /* le dôme déborde volontairement à droite : on le coupe, sans scroll horizontal */
.hero-dome { position: absolute; right: -9%; bottom: 6%; width: min(54vw, 720px); height: auto; z-index: 1; pointer-events: none; }
.hero-dome path { fill: none; stroke: var(--lime); stroke-width: 1.3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero-dome .mer { opacity: .5; }
.hero-dome .par { opacity: .32; }
.hero-dome .ground { stroke: var(--rust); stroke-width: 1.8; opacity: .85; }
.motion-on .hero-dome path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dome-draw 2.6s var(--mo-ease) forwards; animation-delay: calc(var(--di, 0) * 70ms + .35s); }
@keyframes dome-draw { to { stroke-dashoffset: 0; } }
/* Mobile : le dôme prend la zone libre sous la barre de navigation, au-dessus du titre, pour ne pas barrer le paragraphe */
@media (max-width: 860px) { .hero-dome { right: -6%; top: 64px; bottom: auto; width: 100vw; opacity: .8; } }

/* ---------- Bandeau : lié au scroll, incliné selon la vitesse ---------- */
.motion-on .strip-track { animation: none; }

/* ---------- Procédé : un fil se trace, les étapes s'allument ---------- */
.steps-rail { height: 2px; margin-top: 2.6rem; background: var(--border); overflow: hidden; }
.steps-rail i { display: block; height: 100%; background: var(--rust); transform-origin: left; transform: scaleX(0); }
.steps-rail + .steps-gallery { margin-top: 1rem; }
.motion-on .step-shot img { scale: 1.12; transition: transform .6s ease, filter .8s ease; }
.motion-on .step-shot:not(.is-on) img { filter: saturate(.3) brightness(.85); }
.motion-on .step-shot .num { transition: transform .6s var(--mo-ease), box-shadow .6s ease; }
.motion-on .step-shot:not(.is-on) .num { transform: scale(.7); }
.motion-on .step-shot.is-on .num { box-shadow: 0 0 0 6px color-mix(in srgb, var(--rust) 28%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .scroll-progress, .steps-rail { display: none; }
  .hero-dome path { stroke-dasharray: none; animation: none; }
}