/* ==========================================================================
   URBAN KART'IN — Intro "LIGHTS OUT"
   Vraie procédure de départ F1 : portique de 5 colonnes à 2 feux qui
   s'allument colonne par colonne, temps de suspense, puis extinction
   simultanée. Le logo surgit et l'écran s'ouvre en deux.
   100 % CSS : l'intro se termine seule même si le JS échoue.
   Durée totale ≈ 4,6 s — skippable au clic ou au clavier.
   ========================================================================== */

:root {
  --intro-l1: 0.35s;     /* allumage de la 1re colonne */
  --intro-gap: 0.35s;    /* écart entre chaque colonne */
  --intro-out: 2.6s;     /* extinction simultanée = départ */
  --intro-reveal: 3s;    /* le portique s'efface, le logo surgit */
  --intro-wipe: 4.25s;   /* ouverture des panneaux */
  --intro-end: 5.05s;    /* fin totale */
}

html.is-intro,
html.is-intro body { overflow: hidden; }

.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  animation: splash-done 0.01s linear var(--intro-end) forwards;
}

@keyframes splash-done {
  to { visibility: hidden; pointer-events: none; }
}

/* --- Panneaux qui s'ouvrent en deux --- */
.splash__panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: #000;
  will-change: transform;
}
.splash__panel--t {
  top: 0;
  border-bottom: 2px solid transparent;
  animation: panel-t 0.75s cubic-bezier(0.76, 0, 0.24, 1) var(--intro-wipe) forwards;
}
.splash__panel--b {
  bottom: 0;
  animation: panel-b 0.75s cubic-bezier(0.76, 0, 0.24, 1) var(--intro-wipe) forwards;
}
/* Liseré vert sur la ligne de séparation, comme un rideau de garage */
.splash__panel--t::after,
.splash__panel--b::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00c85a 20%, #fff 50%, #00c85a 80%, transparent);
  opacity: 0;
  animation: seam 0.75s ease-out var(--intro-wipe) forwards;
}
.splash__panel--t::after { bottom: 0; }
.splash__panel--b::after { top: 0; }

@keyframes panel-t { to { transform: translateY(-101%); } }
@keyframes panel-b { to { transform: translateY(101%); } }
@keyframes seam {
  0% { opacity: 0; }
  25% { opacity: 1; box-shadow: 0 0 30px 4px rgba(0, 200, 90, 0.8); }
  100% { opacity: 0; }
}

/* --- Scène (au-dessus des panneaux) --- */
.splash__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  padding: 6vw;
  text-align: center;
  animation: stage-out 0.4s ease-in calc(var(--intro-wipe) - 0.2s) forwards;
}
/* Les elements de la scene passent au-dessus du sol et du vignettage */
.gantry,
.gantry__caption,
.splash__logo,
.splash__tag,
.splash__bar { position: relative; z-index: 4; }
@keyframes stage-out {
  to { opacity: 0; transform: scale(1.08); }
}

/* Sol en perspective qui défile vers le spectateur, ancré sur la ligne d'horizon */
.splash__grid {
  position: absolute;
  left: -60%;
  right: -60%;
  top: 62%;
  bottom: -45%;
  z-index: 1;
  transform: perspective(240px) rotateX(62deg);
  transform-origin: 50% 0;
  background-image:
    linear-gradient(to right, rgba(0, 200, 90, 0.6) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 200, 90, 0.6) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 88%);
  animation: rush 0.8s linear infinite;
}
@keyframes rush { to { background-position: 0 58px, 0 58px; } }

/* Ligne d'horizon lumineuse + vignettage */
.splash__stage::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 62%;
  z-index: 2;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 200, 90, 0.9) 35%, rgba(255, 255, 255, 0.9) 50%, rgba(0, 200, 90, 0.9) 65%, transparent);
  box-shadow: 0 0 50px 8px rgba(0, 200, 90, 0.4);
}
.splash__stage::after {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 42%, rgba(0, 0, 0, 0.8) 88%);
}

/* Halo qui explose au moment du départ */
.splash__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 40vmax;
  height: 40vmax;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 200, 90, 0.5), transparent 62%);
  opacity: 0;
  animation: burst 0.85s ease-out var(--intro-out) forwards;
}
@keyframes burst {
  0% { opacity: 0; scale: 0.2; }
  18% { opacity: 1; }
  100% { opacity: 0; scale: 1.7; }
}

/* --- Portique de depart : 5 colonnes de 2 feux, comme en F1 --- */
.gantry {
  display: grid;
  justify-items: center;
  gap: 0;
}

/* Potence de suspension */
.gantry__mast {
  width: clamp(90px, 26vw, 170px);
  height: clamp(14px, 3vw, 26px);
  background: linear-gradient(180deg, #23282b, #14181a);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 0;
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}

.gantry__bar {
  display: flex;
  gap: clamp(7px, 1.9vw, 16px);
  padding: clamp(9px, 2.2vw, 18px) clamp(11px, 2.6vw, 22px);
  background: linear-gradient(180deg, #1e2325 0%, #101314 55%, #080a0b 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 6px rgba(0, 0, 0, 0.8),
    0 18px 45px -18px rgba(0, 0, 0, 0.95);
}

.gantry__col {
  display: grid;
  gap: clamp(6px, 1.6vw, 12px);
  padding-inline: clamp(3px, 0.9vw, 7px);
  border-inline: 1px solid rgba(255, 255, 255, 0.05);
}
.gantry__col:nth-child(1) { --i: 0; }
.gantry__col:nth-child(2) { --i: 1; }
.gantry__col:nth-child(3) { --i: 2; }
.gantry__col:nth-child(4) { --i: 3; }
.gantry__col:nth-child(5) { --i: 4; }

/* Lentille eteinte : verre rouge sombre */
.gantry__col i {
  display: block;
  width: clamp(24px, 6.4vw, 44px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.85);
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.09), transparent 45%),
    radial-gradient(circle at 50% 55%, #35171a 0%, #1a0c0e 55%, #0c0607 100%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9), inset 0 -1px 2px rgba(255, 255, 255, 0.05);
  animation:
    lamp-on 0.16s ease-out both,
    lamp-off 0.14s ease-in var(--intro-out) forwards;
  animation-delay:
    calc(var(--intro-l1) + var(--intro-gap) * var(--i)),
    var(--intro-out);
}

@keyframes lamp-on {
  to {
    background:
      radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.75), transparent 42%),
      radial-gradient(circle at 50% 55%, #ff5a5a 0%, #f11414 48%, #9e0000 100%);
    box-shadow:
      0 0 26px 5px rgba(246, 43, 43, 0.75),
      0 0 60px 12px rgba(246, 43, 43, 0.28),
      inset 0 -2px 6px rgba(0, 0, 0, 0.45);
  }
}
@keyframes lamp-off {
  to {
    background:
      radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.09), transparent 45%),
      radial-gradient(circle at 50% 55%, #35171a 0%, #1a0c0e 55%, #0c0607 100%);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9), inset 0 -1px 2px rgba(255, 255, 255, 0.05);
  }
}

/* Halo rouge diffus projete par le portique pendant le compte a rebours */
.gantry__bar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 130%;
  height: 320%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(246, 43, 43, 0.22), transparent 65%);
  opacity: 0;
  pointer-events: none;
  animation:
    glow-red 0.5s ease-out calc(var(--intro-l1) + var(--intro-gap) * 4) forwards,
    glow-cut 0.16s ease-in var(--intro-out) forwards;
}
.gantry__bar { position: relative; }
@keyframes glow-red { to { opacity: 1; } }
@keyframes glow-cut { to { opacity: 0; } }

/* Mention "LIGHTS OUT" au moment exact du depart */
.gantry__caption {
  margin-top: clamp(0.7rem, 2vw, 1.1rem);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: clamp(0.6rem, 1.8vw, 0.8rem);
  color: #fff;
  opacity: 0;
  animation: caption 0.7s ease-out var(--intro-out) forwards;
}
@keyframes caption {
  0% { opacity: 0; transform: scale(0.9); letter-spacing: 0.5em; }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1); letter-spacing: 0.3em; }
}

/* --- Logo : surgit au moment de l'extinction --- */
.splash__logo {
  width: min(74vw, 620px);
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 0 26px rgba(0, 200, 90, 0.55));
  animation: logo-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--intro-out) forwards;
}
@keyframes logo-in {
  0% { opacity: 0; transform: translateX(70px) skewX(-14deg) scale(1.12); filter: blur(14px) drop-shadow(0 0 0 transparent); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 0 26px rgba(0, 200, 90, 0.55)); }
}

.splash__tag {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: clamp(0.62rem, 1.9vw, 0.82rem);
  color: #00c85a;
  opacity: 0;
  animation: fade-up 0.6s ease-out calc(var(--intro-out) + 0.35s) forwards;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* --- Barre de chargement facon "tour de piste" --- */
.splash__bar {
  width: min(58vw, 300px);
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  opacity: 0;
  animation: fade-up 0.4s ease-out calc(var(--intro-out) + 0.3s) forwards;
}
.splash__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #00c85a, #fff401);
  animation: bar-fill 0.95s cubic-bezier(0.4, 0, 0.2, 1) calc(var(--intro-out) + 0.3s) forwards;
}
@keyframes bar-fill { to { width: 100%; } }

/* --- Bouton passer --- */
.splash__skip {
  position: absolute;
  right: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 28px);
  z-index: 2;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.55);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  padding: 0.55rem 1rem;
  min-height: 40px;
  cursor: pointer;
  opacity: 0;
  animation: fade-up 0.4s ease-out 0.6s forwards;
  transition: color 0.2s, border-color 0.2s;
}
.splash__skip:hover { color: #fff; border-color: #00c85a; }

/* --- Sortie anticipee declenchee par le JS --- */
.splash.is-skipping { animation: splash-skip 0.45s ease-in forwards; }
@keyframes splash-skip {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* --- Accessibilite : pas d'intro si l'utilisateur refuse les animations --- */
@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
  html.is-intro, html.is-intro body { overflow: auto; }
}