/* ================================================================ HERO
   Port de badapt.com3.0/css/hero.css. La mécanique ne change pas — se
   reporter aux commentaires du fichier d'origine pour le détail. */
.hero-track {
  position: relative;
  display: flow-root;
  margin-bottom: 18vh;
}

.hero {
  --count: 3;
  --focal: 50vh;
  --focal: 50dvh;
  --lead: .45;

  position: sticky;
  top: calc((var(--count) - 1) * -1lh - (var(--lead) * 1lh));
  display: flex;
  align-items: start;
  justify-content: center;
  width: 100%;
  padding-top: calc(var(--focal) - .5lh + (var(--lead) * 1lh));
  margin-bottom: 50vh;

  font-family: var(--font);
  /* Poppins est plus large que Neue Haas : 17vw au lieu de 21vw, pour que
     « Évoluer » (7 lettres) tienne sur mobile. */
  font-size: clamp(3rem, min(17vw, 24vh), 16rem);
  font-weight: 700;
  /* Rythme du défilement : 2 au lieu de .98, soit ~2x plus lent par mot.
     Augmenter pour ralentir encore (ajuster aussi les deux décalages en em
     marqués « rythme » plus bas). */
  line-height: 2;
  letter-spacing: -.035em;
}

.hero__words { margin: 0; text-align: center; font-size: inherit; font-weight: inherit; }

.hero__word {
  position: relative;
  display: block;
  width: fit-content;
  margin-inline: auto;
  opacity: var(--o, 1);
  scale: calc(.72 + var(--t, 0) * .63);
  color: var(--accent);
  transform-origin: 50% 50%;
}

.hero__word--liquid { filter: url(#liquid) blur(.6px); }
.hero__liquid { display: block; filter: blur(var(--blur, 0px)); }

/* Évoluer / grow — « la courbe qui pousse ».
   Les lettres sortent d'un sol invisible (masque sous la ligne de base), de
   droite à gauche, avec un léger ressort : pendant l'approche le mot dessine
   un escalier qui monte, comme une courbe de croissance, puis se met à
   niveau sur la ligne focale. À la sortie, il grandit d'un bloc pendant que
   l'approche s'ouvre légèrement, puis s'efface.
   Aucune déformation : la forme des lettres reste intacte.
   Écrit par le JS : --ly / --lo par lettre, --gs et --track sur le mot. */
.hero__word--grow { scale: var(--gs, 1); }
.hero__splay {
  display: flex; justify-content: center; align-items: baseline;
  /* Le sol : tout ce qui passe sous la ligne des jambages est masqué.
     Large marge en haut et sur les côtés pour le ressort et l'ouverture. */
  clip-path: inset(-60% -30% .27em -30%); /* rythme : sol sous les jambages */
}
.hero__splay > span {
  display: block;
  transform:
    translateX(calc(var(--c, 0) * var(--track, 0em)))
    translateY(var(--ly, 0em));
  opacity: var(--lo, 1);
  will-change: transform;
}

/* Durer. : Bold Italic, le mot-clé accent de la charte. */
.hero__word--last { font-style: italic; padding-right: .06em; }
.hero__underline {
  position: absolute;
  left: 2%; right: 4%;
  bottom: .49em; /* rythme : sous la ligne de base */
  width: 94%;
  height: .14em;
  overflow: visible;
  color: var(--corail);
}
.hero__underline path {
  stroke-width: 7;
  stroke-dasharray: 1;
  /* Se trace sur les 40 derniers % de l'approche : il arrive quand le mot
     se pose, pas avant. --t est écrit par le JS. */
  stroke-dashoffset: max(0, min(1, (1 - var(--t, 1)) * 2.5));
}

/* Un accent par mot, chacun contre le fond qu'il atteint (combinaisons
   approuvées p. 15). */
.hero__word:nth-child(1) { --accent: var(--lin); }    /* Lin sur Encre 15:1     */
.hero__word:nth-child(2) { --accent: var(--citron); } /* Citron sur Bleu, titre */
.hero__word:nth-child(3) { --accent: var(--bleu); }   /* Bleu sur Lin 4.9:1     */

.hero-cue {
  position: absolute;
  left: 50%;
  top: calc(100svh - 4.5rem);
  translate: -50% 0;
  display: flex; align-items: center; gap: .75rem;
  color: var(--lin);
  opacity: calc(.7 - var(--cue-fade, 0));
  transition: opacity .3s;
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.hero-cue svg { width: .9rem; animation: cue 1.8s var(--ease-expo) infinite; }
@keyframes cue { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 4px; } }

@media (prefers-reduced-motion: reduce) {
  .hero__word { scale: 1; }
  .hero-cue svg { animation: none; }
}