/* NOSKUZ — couche motion v0.2 (typographie cinétique + défilement narratif)
   Les états cachés ne s'appliquent que si html.motion est posé (JS actif, animations autorisées).
   Sans JS, ou avec « réduire les animations », la page reste complète et lisible. */

/* ---------- Toujours actif : étiquettes des barres du pont ---------- */
.bar { position: relative; overflow: hidden; }
.bar b {
  position: absolute; left: 50%; bottom: 12px;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-display); font-weight: 900; font-stretch: var(--display-stretch);
  font-size: clamp(20px, 4.6vw, 40px); line-height: 1; text-transform: uppercase; letter-spacing: .02em;
  white-space: nowrap;
}
.bar--douala, .bar--abidjan { color: var(--color-text); }
.bar--lagos, .bar--paris { color: var(--color-bg); }

/* Portes : inversion au survol ou au toucher */
.doors li { transition: background-color .2s ease, color .2s ease; }
.doors li:hover { background: var(--color-text); color: var(--color-bg); }

/* La largeur du titre d'ouverture peut dépasser l'écran pendant l'effet : on coupe sans créer de défilement */
.hero { overflow-x: clip; }

/* ---------- Motion ---------- */

/* 1. Titres découpés mot par mot, qui montent derrière un masque */
.motion [data-split] .w {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: .08em 0 .14em; margin: -.08em 0 -.14em;
}
.motion [data-split] .w > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.motion [data-split].is-in .w > span { transform: none; }

/* 2. Apparitions en cascade (portes, formats, promesses, carte, compte à rebours) */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Les portes s'ouvrent comme des volets */
.motion .doors li[data-reveal] { transform: scaleX(.2); transform-origin: left center; }
.motion .doors li[data-reveal].is-in { transform: none; }

/* 3. Bandeau des villes piloté par le défilement (le JS remplace l'animation CSS) */
.motion .ticker__track { animation: none; will-change: transform; }

/* 4. Le pont : section épinglée, les villes s'allument l'une après l'autre */
.motion .bar { transform: scaleY(var(--b, 0)); transform-origin: bottom; will-change: transform; }
.motion .bar b { opacity: var(--l, 0); transition: opacity .2s linear; }
.motion .scene.is-pinned { height: 260vh; height: 260svh; padding: 0; }
.motion .scene.is-pinned .scene__sticky {
  position: sticky; top: var(--header-h, 61px);
  height: calc(100vh - var(--header-h, 61px));
  height: calc(100svh - var(--header-h, 61px));
  display: flex; align-items: center;
}
.motion .scene.is-pinned .scene__sticky > .wrap { width: 100%; }

/* 5. Insiders : le rideau terracotta s'ouvre jusqu'aux bords */
.motion .insiders {
  clip-path: inset(0 calc(var(--c, 1) * 6vw) round calc(var(--c, 1) * 28px));
}

/* Sur petit écran, le pont épinglé doit tenir en hauteur */
@media (max-width: 899px) {
  /* Sur mobile, contenu calé en haut : pas de grand vide à l'entrée de la scène */
  .motion .scene.is-pinned .scene__sticky { align-items: flex-start; padding-top: 40px; }
  .motion .scene.is-pinned .manifesto__title { font-size: clamp(36px, 10vw, 56px); }
  .motion .scene.is-pinned .manifesto__grid { gap: 24px; }
  .motion .scene.is-pinned .manifesto__text { margin-top: 14px; font-size: 17px; }
  .motion .scene.is-pinned .manifesto__sign { margin-top: 10px; font-size: 17px; }
  .motion .scene.is-pinned .bridge { min-height: 150px; }
  .motion .scene.is-pinned .bridge .bar:nth-child(2) { margin-top: 16px; }
  .motion .scene.is-pinned .bridge .bar:nth-child(3) { margin-top: 32px; }
  .motion .scene.is-pinned .bridge .bar:nth-child(4) { margin-top: 48px; }
}