/* ═══════════════════════════════════════════════════════════════════════════
   INTRO — RAME MÉTRO LIGNE 6 (photo réelle découpée)
   · wagon_body.png = photo, vitres + colonne centrale évidées
   · door_left/right.png = vantaux découpés qui coulissent
   · un seul Paris (paris_pano.jpg) défile derrière TOUTES les vitres
   · à l'ouverture : le train s'arrête, zoom "on sort", arrivée sur le site
   ═══════════════════════════════════════════════════════════════════════════ */

#metro-wrap { position: relative; z-index: 400; height: 190vh; background: #cdd9db; }

#metro-intro {
  position: fixed; top: 0; left: 0; height: 100vh; width: 100%; overflow: hidden;
  --open: 0; --zoom: 1; --fx: 0px; --nx: 0px;
  background: #cdd9db;
  font-family: 'Archivo', system-ui, sans-serif;
}

/* zoom "on sort par les portes" */
.car { position: absolute; inset: 0; transform: scale(var(--zoom, 1)); transform-origin: 50% 46%;
  filter: brightness(calc(1 + var(--white, 0) * 0.5)) blur(calc(var(--white, 0) * 3px));
  will-change: filter, transform; }

/* wagon calé sur l'aspect de la photo, en "cover" */
.wagon { position: absolute; top: 50%; left: 50%; height: 100vh; aspect-ratio: 2976 / 1430; transform: translate(-50%, -50%); }
@media (min-aspect-ratio: 2976/1430) { .wagon { width: 100vw; height: auto; } }

/* Paris filmé (vidéo) partagé derrière toutes les vitres — l'extérieur qui bouge */
.metro-paris { position: absolute; inset: 0; z-index: 0; background: #0b1420; overflow: hidden; }
.paris-video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  /* Paris tamisé portes fermées (le soleil ne "crame" plus au centre), puis
     qui s'illumine à l'ouverture des portes. */
  filter: saturate(1.08) contrast(0.99) brightness(calc(0.9 + var(--open, 0) * 0.2));
  will-change: filter;
  image-rendering: -webkit-optimize-contrast; }
/* masque doux au centre des portes : absorbe le soleil "cramé" qui passe par les
   vitres quand les portes sont FERMÉES, puis s'efface à l'ouverture (la lumière
   entre alors franchement). Placé AU-DESSUS des portes (z-index 2, après .doors). */
.metro-seam { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(32% 24% at 50% 46%,
    rgba(20,26,28,0.72) 0%, rgba(20,26,28,0.40) 42%, rgba(20,26,28,0) 72%);
  opacity: calc(1 - var(--open, 0) * 1.6); }

/* Lumière chaude qui déborde du seuil des portes et inonde la rame à l'ouverture */
.metro-daylight { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(56% 48% at 50% 47%,
    rgba(255,233,183,0.92) 0%,
    rgba(255,216,150,0.40) 44%,
    rgba(255,216,150,0.00) 72%);
  mix-blend-mode: screen;
  /* grandit à l'ouverture, puis s'embrase juste avant le fondu vers le site */
  opacity: calc(var(--open, 0) * 0.45 + var(--white, 0) * 0.75);
  will-change: opacity; }
/* fallback photo (si la vidéo ne charge pas) */
.paris-pano { position: absolute; inset: 0;
  background: url("../uploads/metro/paris_pano.jpg") repeat-x;
  background-size: auto 100%; background-position: calc(50% + var(--fx)) center; }

/* photo du wagon (vitres + colonne évidées) — pleine image */
.wagon-body { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; pointer-events: none; }

/* portes : coulissent dans les poches — clip sur l'encadrement, jamais sur les sièges/vitres */
.doors { position: absolute; inset: 0; z-index: 2;
  -webkit-clip-path: inset(0 34.6% 0 34.6%);
          clip-path: inset(0 34.6% 0 34.6%); }
.door { position: absolute; inset: 0; width: 100%; height: 100%; display: block; will-change: transform; }
.door--l { transform: translateX(calc(var(--open) * -21%)); }
.door--r { transform: translateX(calc(var(--open) *  21%)); }

/* ── WORMHOLE à l'arrivée : traversée d'un tunnel de lumière (canvas) ────── */
/* Le canvas couvre la scène dès le départ (fond opaque) → pas de flash du métro
   avant l'effet ; warp-intro.js dessine le tunnel puis fait un fondu à la sortie. */
#warp { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: block;
  width: 100%; height: 100%; background: #04070a; opacity: 1;
  transition: opacity 0.55s ease; }

/* la rame « se matérialise » en sortie de tunnel (déclenchée par .warp-arrive).
   fill = backwards pour ne pas écraser le filtre de fondu blanc de .car. */
.warp-arrive .car { animation: carSpawn 0.85s cubic-bezier(.16,1,.3,1) backwards; }
@keyframes carSpawn {
  0%   { transform: scale(1.16); filter: blur(18px) brightness(1.9); opacity: 0.3; }
  60%  { filter: blur(3px) brightness(1.15); }
  100% { transform: none; filter: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) { #warp { display: none; } }

/* ── UI ── */
.metro-ui { position: absolute; inset: 0; z-index: 6; pointer-events: none; }

/* Indice de défilement (centré en bas) : disparaît dès qu'on commence à scroller */
.metro-scrollhint {
  position: absolute; left: 50%; bottom: clamp(1.4rem, 4vh, 3rem); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem; color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
  opacity: calc(1 - var(--p, 0) * 8);   /* fondu rapide dès le début du scroll */
}
.msh-label { font-family: "DM Sans", system-ui, sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.24em; font-size: clamp(0.6rem, 0.95vw, 0.72rem); }
/* chevron « vers le bas » (plus clair qu'une souris à molette) */
.msh-arrow { width: 15px; height: 15px; margin-top: 2px;
  border-right: 2px solid rgba(255,255,255,0.92);
  border-bottom: 2px solid rgba(255,255,255,0.92);
  transform: rotate(45deg); animation: mshBounce 1.7s ease-in-out infinite; }
@keyframes mshBounce {
  0%, 100% { transform: rotate(45deg) translate(-2px, -2px); opacity: 0.55; }
  50%      { transform: rotate(45deg) translate(2px, 2px);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .msh-arrow { animation: none; } }

/* Bascule vers le site : la lumière s'épanouit DEPUIS la porte (iris doux) et
   remplit l'écran de la couleur papier du site → transition fluide, sans coupure. */
#metro-intro::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(circle at 50% 47%,
    #e7e6e3 calc(var(--white, 0) * 135%),
    rgba(231,230,227,0) calc(var(--white, 0) * 135% + 26%));
  will-change: background; }

/* pendant l'intro : nav + progression masquées */
#folio, #progress { transition: opacity .4s ease; }
body.metro-on #folio, body.metro-on #progress { opacity: 0; pointer-events: none; }

body { background: var(--paper, #fff); }

@media (prefers-reduced-motion: reduce) {
  #metro-wrap { height: 0; overflow: hidden; }
  #metro-intro { display: none; }
}