/* ENDURIA — Preloader (BRIEF §3.3 + BRIEF_PRELOADER_DEGRADE §1).
   Composition centrée : logo Enduria en points avec scan + compteur mono en dessous.
   Sans JS : pas de preloader (contenu visible). Avec JS : il couvre puis se lève. */

.preloader { display: none; }

.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg-primary);
  display: flex;
  align-items: center;       /* centré vertical */
  justify-content: center;   /* centré horizontal */
  padding: 0;
  will-change: transform, clip-path;
  clip-path: inset(0 0 0 0);
}

/* SAFARI/WebKit : on cache .preloader__logo-wrap (les 2 SVG du logo en points). Raison :
   les <rect> du preloader réutilisent les <defs> #hero-dots et #hero-logo-mask définies
   dans le SVG du hero, qui est lui-même display:none sur Safari (cf. hero.css). WebKit
   ne résout PAS les cross-SVG references quand le SVG parent qui contient les defs est
   display:none → les <rect> du preloader se rendent en noir plein (fallback fill quand
   url(#pattern) échoue) → c'est l'origine du "carré noir au milieu" pendant le preloader.
   Bonus : cache aussi le .preloader__logo--scan qui anime mask-position en boucle
   (même tech WebKit-killer que hero-scan qu'on a déjà désactivé).
   Le compteur 00→100 reste visible et fait son job d'indicateur de chargement. */
html.is-safari .preloader__logo-wrap { display: none; }

/* Label "[ Initialisation ]" reste en angle haut-gauche (signature mono) */
.preloader__label {
  position: absolute;
  top: clamp(1.5rem, 4vw, 3rem);
  left: clamp(1.5rem, 4vw, 3rem);
  font-family: var(--font-mono);
  font-size: var(--type-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-tertiary);
}

/* Bloc central : logo au-dessus, compteur en dessous */
.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.2rem, 3vh, 2.2rem);
}

/* ---- Logo en points + scan ---- */
.preloader__logo-wrap {
  position: relative;
  width: clamp(120px, 18vh, 180px);
  aspect-ratio: 83 / 76;
}
.preloader__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--paper);
  opacity: 0.55; /* base visible mais pas trop forte, le scan met l'accent */
  shape-rendering: geometricPrecision;
}
/* Scan : 2e SVG superposé, opacité plus haute mais révélé par une bande linéaire animée.
   Boucle plus rapide qu'en hero (2.5s vs 9s) — le preloader est court, on veut voir
   le balayage avant que le rideau se lève. */
.preloader__logo--scan {
  opacity: 0.95;
  -webkit-mask-image: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%);
  mask-image: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 130% 0;
  mask-position: 130% 0;
  animation: preloader-scan 2.5s linear infinite;
}
@keyframes preloader-scan {
  0%   { -webkit-mask-position: 130% 0; mask-position: 130% 0; }
  100% { -webkit-mask-position: -130% 0; mask-position: -130% 0; }
}

/* ---- Compteur 0→100 ---- */
.preloader__count {
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
}
.preloader__count .pct {
  font-size: 0.55em;
  color: var(--text-tertiary);
  transform: translateY(-0.15em);
}

@media (prefers-reduced-motion: reduce) {
  /* JS gère déjà le bypass complet du preloader en reduced-motion (cf. runPreloader),
     mais on cale le scan au cas où le preloader serait affiché brièvement. */
  .preloader { display: none; }
  .preloader__logo--scan { animation: none; opacity: 0; }
}