/* ════════════════════════════════════════════════════════════
   arrivee.css — v19 (05/10), chargée après retouches.css.
   1. L'arrivée sur le site : le K apparaît, « kreapz. » s'écrit à la machine à
      écrire, puis tout remonte se poser dans l'en-tête (arrivee.js). C'est le
      VRAI logo de l'en-tête qui est animé : la fin tombe exactement à sa place
      sur tous les écrans. Ni flou, ni pluie, ni rond (fondateur, 05/10).
   2. Les textes de chaque chapitre glissent l'un après l'autre.
   3. Mobile : un voile sombre derrière les textes posés sur une image claire.
   ════════════════════════════════════════════════════════════ */

/* ── 1. L'arrivée ───────────────────────────────────────────── */
.kz-arrivee { display: none; }
/* Le fond noir passe SOUS l'en-tête (z-index 20) : le logo de l'en-tête reste visible au-dessus. */
.kz-reveal-actif .kz-arrivee {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 19;
  background-color: #04090d;
  transition: background-color .8s ease, opacity .3s ease;
}
.kz-arrivee.is-fin { background-color: rgba(4, 9, 13, 0); }
.kz-arrivee.is-passe { opacity: 0; }
/* Pendant l'arrivée, l'en-tête ne montre que le logo ; le logo attend d'être placé. */
.kz-reveal-actif .header > :not(.brand) { opacity: 0; }
.kz-reveal-actif:not(.kz-reveal-pret) .header .brand { opacity: 0; }
.kz-reveal-sortie .header > * { transition: opacity .45s ease; }
/* Le K apparaît (sans flou), le nom s'écrit ensuite (arrivee.js). */
.kz-reveal-actif .header .brand-logo { opacity: 0; }
.kz-reveal-pret .header .brand-logo { animation: kz-k-apparait .6s cubic-bezier(.2, .8, .2, 1) .15s both; }
@keyframes kz-k-apparait { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.kz-curseur {
  position: absolute;
  width: .07em;
  border-radius: 1px;
  background: currentColor;
  animation: kz-clignote .8s steps(1) infinite;
}
@keyframes kz-clignote { 0% { opacity: 1; } 50% { opacity: 0; } }

/* ── 2. Les textes qui glissent ─────────────────────────────── */
/* Seulement quand arrivee.js a pris la main (sinon rien n'est caché). */
html.kz-glisse.is-enhanced .copy > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .85s cubic-bezier(.2, .75, .2, 1);
  transition-delay: calc(80ms + var(--kz-n, 0) * 110ms);
}
html.kz-glisse.is-enhanced .copy.kz-vu > * { opacity: 1; transform: none; }
/* Les titres ne glissent pas en bloc : leurs lignes montent une à une. */
html.kz-glisse.is-enhanced .copy > .kz-titre { transform: none; }
.kz-ligne { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.kz-ligne-in { display: inline-block; }
html.kz-glisse.is-enhanced .copy .kz-ligne-in {
  transform: translateY(108%);
  transition: transform .9s cubic-bezier(.2, .75, .2, 1);
  transition-delay: calc(140ms + var(--kz-n, 0) * 110ms + var(--kz-l, 0) * 130ms);
}
html.kz-glisse.is-enhanced .copy.kz-vu .kz-ligne-in { transform: none; }
/* En quittant un chapitre : remise à zéro sans animation (le bloc est déjà effacé). */
html.kz-glisse.is-enhanced .copy:not(.kz-vu) > *,
html.kz-glisse.is-enhanced .copy:not(.kz-vu) .kz-ligne-in { transition-duration: 0s; transition-delay: 0s; }
/* Pendant l'arrivée, le premier chapitre attend que le logo se pose. */
html.kz-reveal-actif.kz-glisse.is-enhanced .copy > * { opacity: 0; transform: translateY(22px); transition-duration: 0s; transition-delay: 0s; }
html.kz-reveal-actif.kz-glisse.is-enhanced .copy .kz-ligne-in { transform: translateY(108%); transition-duration: 0s; transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  html.kz-glisse .copy > *, html.kz-glisse .copy .kz-ligne-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── 3. Mobile : lisibilité des textes posés sur les images ─── */
@media (max-width: 700px) {
  .is-enhanced .copy { isolation: isolate; }
  .is-enhanced .copy::before {
    content: '';
    position: absolute;
    inset: -9svh -10vw;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 72% 62% at 42% 50%, rgba(3, 8, 12, .66), rgba(3, 8, 12, .38) 55%, rgba(3, 8, 12, 0) 100%);
  }
  .is-enhanced #resistance .copy::before { background: radial-gradient(ellipse 70% 64% at 50% 55%, rgba(3, 8, 12, .7), rgba(3, 8, 12, .4) 55%, rgba(3, 8, 12, 0) 100%); }
  /* L ancrage : le dernier paragraphe tombe sur l éclair blanc de l image. */
  .is-enhanced #ancrage .copy::before { inset: -5svh -10vw -9svh; background: linear-gradient(180deg, rgba(3, 8, 12, .5), rgba(3, 8, 12, .72) 55%, rgba(3, 8, 12, .62) 82%, rgba(3, 8, 12, 0)); }
  .is-enhanced #ancrage .copy p { color: #eef3f1; }
  .is-enhanced #julia .copy::before,
  .is-enhanced #carlos .copy::before { inset: -4svh -8vw; }
  .is-enhanced .copy .lead,
  .is-enhanced .copy p { text-shadow: 0 1px 10px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .5); }
}

/* ── 4. Mobile : un geste = un chapitre (repères posés par mobile.js) ── */
.kz-ancre { position: absolute; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
html.kz-pages { scroll-snap-type: y mandatory; }
html.kz-pages .kz-ancre { scroll-snap-align: start; scroll-snap-stop: always; }

/* ── Filet de sécurité : si arrivee.js ne charge pas, le voile s'efface seul. ── */
.kz-reveal-actif .kz-arrivee { animation: kz-secours 0s linear 6s forwards; }
.kz-reveal-actif:not(.kz-reveal-pret) .header > *,
.kz-reveal-actif:not(.kz-reveal-pret) .header .brand-logo { animation: kz-secours-marque 0s linear 6s forwards; }
@keyframes kz-secours { to { visibility: hidden; opacity: 0; } }
@keyframes kz-secours-marque { to { opacity: 1; } }

/* ── 5. Mobile : « Voir le film » se détache du texte (fondateur, 05/10) ── */
@media (max-width: 700px) {
  .film-trigger {
    margin-top: 40px;
    min-height: 0;
    padding: 7px 20px 7px 7px;
    background: rgba(7, 19, 26, .58);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    text-shadow: none;
  }
}
@media (max-width: 700px) and (max-height: 740px) { .film-trigger { margin-top: 28px; } }
/* Sur la Genèse, le bouton quitte le texte : en bas, centré, sur le sol sombre de
   l'image (il ne couvre plus le doudou), au-dessus de la barre des chapitres. Le
   bloc de texte est à 12svh du haut sur mobile : le haut du bouton est compté
   depuis là. Centré par les marges (le glissement des textes utilise transform). */
@media (max-width: 700px) {
  .is-enhanced #genese .film-trigger {
    position: absolute;
    left: 0;
    right: 0;
    width: max-content;
    margin: 0 auto;
    top: calc(76svh - 12svh - 58px);
  }
}

/* ── 6. Chapitre 01 sur mobile (fondateur, 05/10) : le texte en haut, le message
   de Havana plus haut que le bas de l'écran (au-dessus de la barre des chapitres). ── */
@media (max-width: 700px) {
  .is-enhanced #histoire #debut .copy { top: 12svh; bottom: auto; }
  .is-enhanced #histoire #debut .havana-message {
    position: absolute;
    left: 0;
    top: calc(62svh - 12svh);
    width: min(360px, 100%);
    margin: 0;
  }
}

/* ── 7. Ancrage : « 19,2 kHz » reste collé à sa phrase ; la frise, sa légende et la
   dernière phrase forment un groupe, posé en bas sur mobile pour dégager le militaire.
   La frise n'est plus coupée en haut et en bas (débordement visible). ── */
.frequency-signature { margin-bottom: 0; }
.frequency-wave { overflow: visible; }
.kz-frequence-bas .frequency-wave { width: min(360px, 100%); }
.kz-frequence-bas .frequency-caption { margin-bottom: 19px; }
.copy:has(.frequency-signature.is-transmitting) .frequency-scan { animation-play-state: running; }
@media (max-width: 700px) {
  .kz-frequence-bas .frequency-wave { width: 235px; height: 22px; }
  .kz-frequence-bas .frequency-caption { margin-bottom: 12px; }
  /* Le bloc de texte de l'ancrage est à 11svh du haut ; --kz-h = hauteur du groupe (mobile.js),
     --rail-clearance = place de la barre des chapitres (presentation.js). */
  .is-enhanced #ancrage .kz-frequence-bas {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100svh - 11svh - var(--rail-clearance, 96px) - var(--kz-h, 120px) - 6px);
  }
  .is-enhanced #ancrage .kz-frequence-bas::before {
    content: '';
    position: absolute;
    inset: -6svh -10vw -3svh;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(3, 8, 12, 0), rgba(3, 8, 12, .6) 38%, rgba(3, 8, 12, .62));
  }
  .is-enhanced #ancrage .copy::before { inset: -5svh -10vw -5svh; background: linear-gradient(180deg, rgba(3, 8, 12, .55), rgba(3, 8, 12, .68) 60%, rgba(3, 8, 12, 0)); }
}

/* ── 8. Menu : les deux traits se croisent en X ; le menu s'ouvre en glissant, ses
   lignes arrivent l'une après l'autre ; il se referme en fondu (site-ui.js). ── */
.menu-toggle .kz-trait { transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.65, 0, .35, 1); }
.menu-toggle[aria-expanded="true"] .kz-trait-1 { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .kz-trait-2 { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 1100px) {
  .header nav.is-open { animation: kz-menu-ouvre .3s cubic-bezier(.2, .8, .2, 1) both; transform-origin: top right; }
  .header nav.is-open > * { animation: kz-menu-ligne .34s cubic-bezier(.2, .8, .2, 1) both; }
  .header nav.is-open > :nth-child(2) { animation-delay: 30ms; }
  .header nav.is-open > :nth-child(3) { animation-delay: 60ms; }
  .header nav.is-open > :nth-child(4) { animation-delay: 90ms; }
  .header nav.is-open > :nth-child(5) { animation-delay: 120ms; }
  .header nav.is-open > :nth-child(6) { animation-delay: 150ms; }
  .header nav.is-open > :nth-child(7) { animation-delay: 180ms; }
  .header nav.is-open > :nth-child(8) { animation-delay: 210ms; }
  .header nav.is-open > :nth-child(n+9) { animation-delay: 240ms; }
  .header nav.is-closing { animation: kz-menu-ferme .18s ease forwards; }
  .header nav.is-closing > * { animation: none; }
}
@keyframes kz-menu-ouvre { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes kz-menu-ligne { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes kz-menu-ferme { to { opacity: 0; transform: translateY(-8px) scale(.97); } }
@media (prefers-reduced-motion: reduce) {
  .menu-toggle .kz-trait { transition: none; }
  .header nav.is-open, .header nav.is-open > *, .header nav.is-closing { animation: none; }
}