/* ══════════════════════════════════════════════
   Garage Bienvenue — Écran de chargement
   includes/style_loader.css
   ══════════════════════════════════════════════
   Identité visuelle : noir profond / anthracite
   texturé + rouge vif #9E1B1B.
   Animation en 4 actes :
     1. Dessin wireframe du nom (SVG stroke)
     2. Apparition de la baseline
     3. Ligne rouge accélérée de gauche à droite
     4. Fade-out de l'overlay
   ══════════════════════════════════════════════ */

/* ── OVERLAY PRINCIPAL ── */
#gb-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #1A1A1A;
  /* Motif rayures diagonales subtiles — identique au hero du site */
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(255,255,255,0.025) 40px,
    rgba(255,255,255,0.025) 80px
  );
  overflow: hidden;

  /* Transition fade-out finale */
  transition: opacity 0.7s ease 0.3s, visibility 0.7s ease 0.3s;
}

#gb-loader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── CONTENU CENTRÉ ── */
.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.5vh, 20px);
  padding: 0 2rem;
  width: 100%;
  max-width: 640px;
}

/* ── NOM "Garage Bienvenue" — SVG wireframe ── */
.loader-svg-wrap {
  width: 100%;
  max-width: clamp(280px, 60vw, 520px);
  overflow: visible;
}

.loader-svg-wrap svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Texte SVG en mode wireframe : stroke visible, fill transparent */
.loader-text-stroke {
  fill: none;
  stroke: rgba(255,255,255,0.92);
  stroke-width: 1px;
  paint-order: stroke;
}

/* Animation de dessin : la longueur est définie inline par JS */
.loader-text-stroke.animate-draw {
  stroke-dashoffset: var(--dash-len, 3000px);
  animation: drawText 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes drawText {
  to { stroke-dashoffset: 0; }
}

/* Remplissage blanc qui apparaît après le dessin */
.loader-text-fill {
  fill: rgba(255,255,255,0.92);
  opacity: 0;
  animation: fillIn 0.5s ease 1.5s forwards;
}

.loader-text-stroke.animate-draw {
  animation: drawText 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards,
             fadeStroke 0.4s ease 1.6s forwards;
}

@keyframes fadeStroke {
  to { stroke: transparent; }
}

@keyframes fillIn {
  to { opacity: 1; }
}

/* ── BASELINE ── */
.loader-baseline {
  font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
  font-size: clamp(9px, 1.4vw, 13px);
  font-weight: 400;
  letter-spacing: clamp(3px, 0.8vw, 6px);
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  opacity: 0;
  transform: translateY(6px);
  animation: baselineIn 0.6s ease 2s forwards;
  text-align: center;
  white-space: nowrap;
}

@keyframes baselineIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── LIGNE ROUGE D'ACCÉLÉRATION ── */
.loader-line-wrap {
  position: relative;
  width: 100%;
  max-width: clamp(280px, 60vw, 520px);
  height: 2px;
  overflow: hidden;
  /* apparaît en même temps que la baseline */
  opacity: 0;
  animation: lineWrapIn 0s ease 2.05s forwards;
}

@keyframes lineWrapIn {
  to { opacity: 1; }
}

/* Fond de piste (gris très sombre) */
.loader-line-track {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
}

/* La ligne rouge qui avance */
.loader-line-bar {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    #9E1B1B 0%,
    #C53030 60%,
    #FF4444 100%
  );
  box-shadow:
    0 0 8px rgba(197, 48, 48, 0.8),
    0 0 20px rgba(158, 27, 27, 0.4);

  /* Easing personnalisé : lente au début, s'accélère, ralentit brièvement à 80%
     puis s'élance jusqu'à 100% — effet "accélération moteur" */
  animation: redLine 1.4s cubic-bezier(0.12, 0, 0.39, 0) 2.15s forwards;
}

@keyframes redLine {
  0%   { width: 0%; }
  30%  { width: 18%; }
  55%  { width: 48%; }
  75%  { width: 72%; }
  88%  { width: 82%; }
  100% { width: 100%; }
}

/* Éclat lumineux en tête de ligne */
.loader-line-bar::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FF6666;
  box-shadow:
    0 0 6px 3px rgba(255,100,100,0.6),
    0 0 14px 6px rgba(197,48,48,0.3);
  opacity: 1;
}

/* ── TEXTE "CHARGEMENT EN COURS" ── */
.loader-status {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(8px, 1.2vw, 11px);
  letter-spacing: clamp(2px, 0.6vw, 4px);
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  opacity: 0;
  animation: statusIn 0.4s ease 2.1s forwards;
  text-align: center;
}

@keyframes statusIn {
  to { opacity: 1; }
}

/* ── ADAPTATION MOBILE (< 480px) ── */
@media (max-width: 480px) {
  .loader-content {
    gap: 12px;
    padding: 0 1.5rem;
  }

  .loader-svg-wrap {
    max-width: 85vw;
  }

  .loader-line-wrap {
    max-width: 85vw;
  }

  .loader-baseline {
    letter-spacing: 3px;
    font-size: 9px;
  }
}

/* ── ADAPTATION GRAND ÉCRAN (> 1400px) ── */
@media (min-width: 1400px) {
  .loader-svg-wrap {
    max-width: 580px;
  }
  .loader-line-wrap {
    max-width: 580px;
  }
}

/* Masquer le body pendant le chargement pour éviter le flash */
body.gb-loading {
  overflow: hidden;
}