/* ============================================================
   Auto Plus 01 — intro « Le garage ouvre »
   ------------------------------------------------------------
   Un rideau métallique ferme la page sous l'en-tête (qui joue le
   rôle du caisson). L'applique s'allume, les lames s'écartent, le
   rideau remonte et révèle le vrai haut de page. Tout est visible
   seulement quand <html> porte la classe "intro-pending"
   (js/intro-check.js) ; js/intro.js découpe le rideau en lames et
   pilote la séquence avec GSAP.
   Le motif CSS des lames (avant découpe) et les lames découpées
   partagent les mêmes dégradés : aucun saut au passage de l'un à
   l'autre.
   ============================================================ */

.intro-root,
.intro-skip { display: none; }

/* ---------- Réglages du rideau ---------- */
.intro-root {
  --slat-h: 56px;
  --bar-h: 70px;
  --door-paint: #E6ECF5;
  --door-paint-dim: #B4C2DA;
  --door-light: 226, 236, 255;     /* lumière froide de l'atelier (r, g, b) */

  /* Une lame : joint sombre, lèvre éclairée par l'applique, face bombée avec une nervure */
  --slat-face: linear-gradient(180deg,
    #070D18 0, #070D18 1.5px,
    #5B6E92 1.5px, #3E5073 3.5px,
    #33456A 5px, #2A3A5B 44%,
    #1B263D 48%, #485A7E 50%, #2A395A 52%,
    #1F2C46 84%, #151E32 calc(100% - 2px),
    #0A101C calc(100% - 1px), #0A101C 100%);
  /* Ce qui passe par-dessus la peinture : joints et ombre de la courbure */
  --slat-over:
    linear-gradient(180deg, #070D18 0, #070D18 1.5px, rgba(91, 110, 146, 0.85) 1.5px, rgba(91, 110, 146, 0) 3.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0) 30%, rgba(4, 8, 15, 0) 52%, rgba(4, 8, 15, 0.28) 100%);
}
@media (max-width: 1100px) {
  .intro-root { --slat-h: 48px; --bar-h: 60px; }
}
@media (max-width: 640px) {
  .intro-root { --slat-h: 42px; --bar-h: 54px; }
}

/* ---------- Zone du rideau : toute la fenêtre sous l'en-tête ---------- */
.intro-pending .intro-root {
  display: block;
  position: fixed; left: 0; right: 0; bottom: 0;
  top: calc(var(--header-h) + 1px);
  z-index: 45;                      /* sous l'en-tête (50) : le rideau disparaît dans le caisson */
  overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
}

/* L'en-tête sert de caisson : opaque, contenu masqué jusqu'à la fin */
.intro-pending .site-header {
  background: var(--navy);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.intro-pending .site-header__inner > * { opacity: 0; visibility: hidden; }

/* ---------- Halo au sol quand le rideau se soulève ---------- */
.door-spill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  pointer-events: none; opacity: 0;
  background: radial-gradient(62% 100% at 50% 100%, rgba(var(--door-light), 0.5), rgba(var(--door-light), 0) 72%);
}

/* ---------- Le rideau ---------- */
.door { position: absolute; inset: 0; will-change: transform; }
/* Derrière les lames : l'atelier éclairé, vu par les fentes. Opaque et solidaire du rideau,
   pour ne jamais laisser voir la page à travers les lames écartées. */
.door__back {
  position: absolute; left: 0; right: 0; top: -220px; bottom: var(--bar-h);
  background: #0A1322;
}
.door__backlight {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(60% 58% at 50% 64%,
    rgba(var(--door-light), 0.96) 0%,
    rgba(160, 190, 245, 0.72) 30%,
    rgba(58, 98, 178, 0.36) 62%,
    rgba(58, 98, 178, 0) 92%);
}
.door__slats {
  position: absolute; inset: 0;
  background-image: var(--slat-face);
  background-size: 100% var(--slat-h);
  background-repeat: repeat-y;
  background-position: 0 calc(100% - var(--bar-h));
}
.door__slats.is-split { background: none; }
.door__slats.is-split > .door__paint,
.door__slats.is-split > .door__joints { display: none; }

/* Motif des joints au-dessus de la peinture (avant découpe) */
.door__joints {
  position: absolute; inset: 0; pointer-events: none;
  background-image: var(--slat-over);
  background-size: 100% var(--slat-h);
  background-repeat: repeat-y;
  background-position: 0 calc(100% - var(--bar-h));
}

/* Lames découpées par intro.js */
.slat {
  position: absolute; left: 0; right: 0; overflow: hidden;
  background-image: var(--slat-face);
  background-size: 100% 100%;
  will-change: transform;
}
/* Bords des lames éclairés par la lumière des fentes (--gap-glow animé par intro.js) */
.slat::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--door-light), 0.45) 0, rgba(var(--door-light), 0) 5px),
    linear-gradient(0deg, rgba(var(--door-light), 0.6) 0, rgba(var(--door-light), 0) 6px);
  opacity: var(--gap-glow, 0);
}
.slat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--slat-over);
  background-size: 100% 100%;
}
.slat__inner { position: absolute; left: 0; right: 0; }

/* Peinture sur le rideau : écusson, AUTOPLUS, plaque 01 */
.door__paint {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px, 2.4vh, 28px);
  padding: 0 16px calc(var(--bar-h) + 5vh);
  color: var(--door-paint); text-align: center;
}
.door__shield { width: clamp(58px, 10vh, 108px); height: auto; overflow: visible; }
.door__word {
  display: inline-flex; align-items: flex-start; gap: 0.14em;
  font-family: var(--font-display); font-weight: 800; font-stretch: 125%;
  font-size: clamp(34px, 10.4vw, 132px); line-height: 0.9; letter-spacing: 0.05em;
  white-space: nowrap;
}
.door__plate {
  font-size: 0.36em; font-stretch: 100%; font-weight: 900; letter-spacing: 0.06em;
  line-height: 1; padding: 0.16em 0.26em 0.12em; margin-top: 0.1em;
  border-radius: 0.14em; background: var(--accent); color: #fff;
}
.door__sub {
  font-family: var(--font-body); font-size: clamp(11px, 1.05vw, 15px); font-weight: 800;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--door-paint-dim);
  padding-left: 0.34em;             /* compense l'espacement après la dernière lettre */
}

/* Lame finale : profil plus épais, joint caoutchouc, poignée */
.door__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--bar-h);
  background: linear-gradient(180deg,
    #070D18 0, #070D18 1.5px, #6A7DA2 1.5px, #4B5E84 4px,
    #384A6E 14%, #2A3A5A 56%, #1D2840 84%,
    #05080F 84%, #05080F 100%);
}
.door__handle {
  position: absolute; left: 50%; top: 30%; width: clamp(84px, 9vw, 128px); height: 12px;
  transform: translateX(-50%); border-radius: 6px;
  background: #0A101C;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(169, 180, 200, 0.22);
}
/* Lumière qui passe sous la lame finale quand le rideau se soulève */
.door__edge {
  position: absolute; left: 0; right: 0; top: 100%; height: 130px; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--door-light), 0.55), rgba(var(--door-light), 0.14) 42%, rgba(var(--door-light), 0));
}

/* ---------- Éclairage extérieur (fixe : le rideau glisse dessous) ---------- */
.door-glow,
.door-vignette,
.door-shade { position: absolute; inset: 0; pointer-events: none; }
.door-glow {
  opacity: 0;
  background: radial-gradient(70% 62% at 50% 0%, rgba(var(--door-light), 0.2), rgba(var(--door-light), 0.06) 45%, rgba(var(--door-light), 0) 70%);
}
.door-vignette {
  background: radial-gradient(120% 95% at 50% 10%, rgba(4, 8, 15, 0) 45%, rgba(4, 8, 15, 0.55) 100%);
}
.door-shade { background: rgba(4, 8, 15, 0.82); }

/* Applique fixée sous le caisson */
.door-lamp {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: clamp(120px, 14vw, 200px); height: 10px;
  border-radius: 0 0 6px 6px; background: #121B2E;
  box-shadow: 0 1px 0 rgba(169, 180, 200, 0.14);
}
.door-lamp__tube {
  position: absolute; left: 8px; right: 8px; bottom: 2px; height: 3px; border-radius: 2px;
  opacity: 0;
  background: rgb(var(--door-light));
  box-shadow: 0 0 10px 2px rgba(var(--door-light), 0.75), 0 0 34px 8px rgba(var(--door-light), 0.28);
}

/* ---------- Appel de phares du véhicule à la une ---------- */
.car-lights { position: absolute; pointer-events: none; z-index: 2; }
.car-lights__glow {
  position: absolute; border-radius: 50%; opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(244, 248, 255, 1) 0%, rgba(206, 224, 255, 0.72) 22%, rgba(140, 176, 255, 0.22) 48%, rgba(140, 176, 255, 0) 70%);
  mix-blend-mode: screen;
}
.car-lights__streak {
  position: absolute; height: 2px; opacity: 0;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, rgba(206, 224, 255, 0), rgba(236, 244, 255, 0.95) 50%, rgba(206, 224, 255, 0));
  box-shadow: 0 0 12px 1px rgba(206, 224, 255, 0.55);
  mix-blend-mode: screen;
}

/* ---------- Bouton « Passer l'intro » ---------- */
.intro-pending .intro-skip {
  display: inline-flex; align-items: center; gap: 8px;
  position: fixed; z-index: 46;
  top: calc(var(--header-h) + 18px); right: var(--gutter);
  min-height: 44px; padding: 0 18px;
  border: 1px solid rgba(169, 180, 200, 0.3); border-radius: var(--radius-pill);
  background: rgba(7, 13, 24, 0.72); color: var(--text);
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.intro-pending .intro-skip:hover { border-color: var(--text); background: rgba(7, 13, 24, 0.9); }
.intro-skip .i { font-size: 16px; }

/* ---------- Sans GSAP : levée simple en CSS ---------- */
.intro-root.is-lifting .door {
  transform: translateY(calc(-100% - 140px));
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.intro-root.is-lifting .door-shade,
.intro-root.is-lifting .door-vignette { opacity: 0; transition: opacity 0.4s; }
.intro-pending.intro-lifting .site-header__inner > * {
  opacity: 1; visibility: visible; transition: opacity 0.4s 0.6s;
}

@media print {
  .intro-root, .intro-skip { display: none !important; }
}