/* ============================================================
   PRELOADER.CSS — Inspiré de erichuguenin.com
   Nathan COLIN alias WillyOL
   ============================================================
   Structure :
   ├── .pl-barre          — barre 4px en haut (mix-blend: difference)
   ├── .pl-marquee-zone   — fond typographique rotaté 10° / scale 1.3×
   │     └── .pl-marquee-ligne × 3  — textes en ::before via data-text
   └── .pl-contenu        — compteur + identité (bas-gauche)
         ├── .pl-label    — "Nathan Colin · WillyOL" mono xs
         └── .pl-count    — 000 → 100 en Bebas Neue
   ============================================================ */

/* ─── Masquage instantané si session déjà vue ─── */
.loader-skip #preloader {
  display: none !important;
}

/* ─────────────────────────────────────────────
   OVERLAY PRINCIPAL
   ───────────────────────────────────────────── */
#preloader {
  position:   fixed;
  inset:      0;
  z-index:    10000;
  background: #0a0a0a;
  overflow:   hidden;
}

/* ─── Sortie : voile qui remonte ─── */
#preloader.pl-sortie {
  transform:  translateY(-101%);
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.18, 1);
}

/* ─────────────────────────────────────────────
   BARRE DE PROGRESSION (haut)
   Mix-blend-mode difference comme erichuguenin
   ───────────────────────────────────────────── */
.pl-barre {
  position:         absolute;
  top:              0;
  left:             0;
  right:            0;
  height:           4px;
  background:       #ffffff;
  mix-blend-mode:   difference;
  z-index:          4;
  transform-origin: left center;
  transform:        scaleX(0);
  /* Mise à jour via JS — pas de transition CSS (RAF suffit) */
}

/* ─────────────────────────────────────────────
   FOND TYPOGRAPHIQUE — MARQUEE ROTATÉ
   Trois lignes à vitesses différentes,
   tournées 10° et agrandies 1.3× comme erichuguenin.
   ───────────────────────────────────────────── */
.pl-marquee-zone {
  position:        absolute;
  /* Zone élargie pour éviter tout clipping lors de la rotation */
  top:    -40%;
  left:   -20%;
  right:  -20%;
  bottom: -40%;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             0;
  transform:       rotate(10deg) scale(1.3);
  pointer-events:  none;
  /* Pas de overflow:hidden ici — le parent #preloader clippe */
}

.pl-marquee-ligne {
  /* display inline-block : la largeur = largeur du contenu ::before */
  display:     block;
  overflow:    hidden; /* clip le texte qui déborde de chaque ligne */
  line-height: 0.82;
}

/* Le texte est fourni via data-text et affiché en ::before */
.pl-marquee-ligne::before {
  content:         attr(data-text);
  display:         block;
  font-family:     'Bebas Neue', sans-serif;
  font-size:       42vh;
  font-weight:     400;
  white-space:     nowrap;
  /* Couleur quasi-invisible, comme erichuguenin (3–4% opacité) */
  color:           rgba(255, 255, 255, 0.038);
  will-change:     transform;
  line-height:     0.85;
  letter-spacing:  -0.01em;
}

/*
  Chaque ligne anime de translateX(0) à translateX(-33.333%).
  Le data-text contient 3 répétitions identiques du texte,
  donc -33.333% = exactement 1 répétition = boucle invisible.
*/
.pl-marquee-ligne:nth-child(1)::before { animation: pl-ttt 6s  linear infinite; }
.pl-marquee-ligne:nth-child(2)::before { animation: pl-ttt 4s  linear infinite; }
.pl-marquee-ligne:nth-child(3)::before { animation: pl-ttt 5s  linear infinite reverse; }

@keyframes pl-ttt {
  from { transform: translateX(0);        }
  to   { transform: translateX(-33.333%); }
}

/* ─────────────────────────────────────────────
   COMPTEUR + IDENTITÉ — BAS GAUCHE
   ───────────────────────────────────────────── */
.pl-contenu {
  position:        absolute;
  bottom:          0;
  right:           0;
  padding:         clamp(1.5rem, 5vw, 4rem);
  z-index:         3;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-end;
  gap:             0.35rem;
}

/* Identité : "Nathan Colin · WillyOL" */
.pl-label {
  font-family:    'DM Mono', monospace;
  font-size:      clamp(0.52rem, 0.85vw, 0.72rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.28);
  display:        flex;
  align-items:    center;
  gap:            0.55em;
  user-select:    none;
}

.pl-label-sep {
  opacity: 0.45;
}

/* Compteur numérique — élément signature */
.pl-count {
  font-family:         'Bebas Neue', sans-serif;
  font-size:           clamp(5.5rem, 15vw, 14rem);
  line-height:         0.85;
  letter-spacing:      -0.04em;
  color:               #ffffff;
  font-variant-numeric: tabular-nums;
  display:             block;
  user-select:         none;
}