/* ============================================================
   PULSAR VOLT — la 3D de la page d'accueil
   ------------------------------------------------------------
   Deux morceaux, et deux seulement :
     1) la SECTION « la charge » : un éclair en 3D qui se
        remplit d'électricité au fur et à mesure du défilement ;
     2) le LOGO en 3D dans le bandeau final.

   Règle tenue partout : si la 3D ne peut pas démarrer (pas de
   WebGL, fichier three.js absent, JavaScript coupé), un éclair
   dessiné en SVG reste affiché à la place. Jamais de trou noir.

   Ce fichier est chargé APRÈS css/style.css et css/accueil.css.
   Il ne définit aucune couleur nouvelle : il réutilise le bloc
   « :root » de style.css.
   ============================================================ */

/* ============================================================
   1. SECTION « LA CHARGE »
   ------------------------------------------------------------
   La piste fait un peu plus de deux écrans de haut. Le cadre
   qui contient l'éclair est « sticky » : il reste sous les yeux
   pendant qu'on traverse la piste. Le défilement n'est JAMAIS
   confisqué — la molette avance normalement, on traverse la
   section comme n'importe quelle autre.
   ============================================================ */

.eclair {
  /* Sans JavaScript, l'éclair est montré PLEINEMENT CHARGÉ : l'image
     est belle et finie, elle ne bouge simplement pas. */
  --charge: 1;
  position: relative;
  padding: 0;
  background: var(--noir);
  color: var(--blanc);
  overflow: clip;           /* pas de content-visibility ici, jamais */
}

/* Avec le JavaScript en marche (et sans demande de mouvement réduit),
   l'éclair démarre éteint : c'est le défilement qui le charge. */
html.anim-js .eclair { --charge: 0; }

/* la hauteur de défilement : c'est elle qui donne sa course à la charge */
.eclair-piste { position: relative; height: 230vh; }

/* le remplissage de l'éclair de repli (SVG) suit la même variable */
.eclair-remplissage {
  transform-origin: 50% 100%;
  transform: scaleY(var(--charge));
}

/* le cadre qui reste à l'écran */
.eclair-cadre {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  align-items: center;
}

/* le halo qui se réchauffe avec la charge */
.eclair-halo {
  position: absolute;
  left: 50%; top: 50%;
  width: min(120vh, 900px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(245, 184, 29, 0.20) 0%,
      rgba(245, 184, 29, 0.09) 34%,
      rgba(31, 168, 255, 0.05) 58%,
      rgba(14, 15, 18, 0) 72%);
  opacity: calc(0.12 + 0.88 * var(--charge));
}

/* le fil de fer du fond : de fines lignes horizontales, très discrètes */
.eclair-cadre::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 100% 84px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 12%, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 50%, #000 12%, transparent 72%);
  opacity: calc(0.35 + 0.65 * var(--charge));
}

/* la toile 3D et le repli occupent tout le cadre */
.eclair-toile,
.eclair-repli {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.eclair-toile { opacity: 0; transition: opacity 0.6s var(--courbe); }
.eclair.trois-d-ok .eclair-toile { opacity: 1; }
.eclair.trois-d-ok .eclair-repli { display: none; }

/* --- le repli : le même éclair, dessiné en SVG --- */
.eclair-repli {
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* Sans 3D, on montre simplement la photo du groupe : la section
   reste juste et lisible, elle ne perd que le mouvement. */
.eclair-repli img {
  width: min(58%, 560px);
  height: auto;
  border-radius: var(--r-carte);
  opacity: 0.9;
}
@media (max-width: 900px) { .eclair-repli img { width: 86%; } }

/* --- le texte, posé par-dessus --- */
.eclair-mots {
  position: relative;
  z-index: 2;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0 var(--e4);
}
.eclair-bloc { max-width: 30rem; }
.eclair-mots h2 { margin-top: var(--e2); }
.eclair-mots p {
  margin-top: var(--e3);
  max-width: 32em;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--blanc-2);
}

/* --- la jauge de charge --- */
.eclair-jauge {
  margin-top: var(--e4);
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.eclair-rail {
  position: relative;
  flex: 1 1 auto;
  max-width: 320px;
  height: 3px;
  border-radius: var(--r-pilule);
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.eclair-rail span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bleu) 0%, var(--or) 62%, #ffd977 100%);
  transform: scaleX(var(--charge));
  transform-origin: left;
}
.eclair-pourcent {
  min-width: 4.5ch;
  font-size: var(--t-petit);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--or);
}
.eclair-etat {
  font-size: var(--t-petit);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanc-2);
}

/* ============================================================
   2. LE LOGO EN 3D (bandeau final)
   ------------------------------------------------------------
   Le mot reste du texte — donc lisible, sélectionnable et
   traduisible. Seul l'ÉCLAIR du logo passe en vraie 3D : il
   tourne doucement et suit la souris.
   ============================================================ */

.logo3d {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.4vw, 18px);
  margin: 0 auto var(--e4);
  user-select: none;
}
.logo3d-mot {
  font-size: clamp(1.6rem, 5.4vw, 3.1rem);
  font-weight: 300;
  letter-spacing: 0.16em;
  line-height: 1;
  text-indent: 0.16em;          /* compense l'espacement sur la dernière lettre */
  white-space: nowrap;
}
.logo3d-mot.clair { color: var(--blanc); }
.logo3d-mot.or    { color: var(--or); }   /* sur fond noir : 9,7:1 */

.logo3d-eclair {
  position: relative;
  display: block;
  width: clamp(52px, 9vw, 104px);
  height: clamp(74px, 12.6vw, 146px);
  flex: 0 0 auto;
}
.logo3d-toile,
.logo3d-repli {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.logo3d-toile { opacity: 0; transition: opacity 0.7s var(--courbe); }
.logo3d.trois-d-ok .logo3d-toile { opacity: 1; }
.logo3d.trois-d-ok .logo3d-repli { display: none; }
.logo3d-repli { display: grid; place-items: center; }
.logo3d-repli svg { width: 100%; height: 100%; }

/* ============================================================
   3. ÉCRANS ÉTROITS (jusqu'à 390 px)
   ============================================================ */
@media (max-width: 900px) {
  .eclair-piste { height: 205vh; }
  .eclair-mots { padding: 0 var(--e3); align-self: end; }
  .eclair-cadre { align-items: stretch; }

  /* l'éclair prend le haut de l'écran, le texte se pose dessous
     sur un voile sombre : le texte reste lisible à coup sûr */
  .eclair-mots {
    padding-bottom: var(--e5);
    padding-top: var(--e5);
    display: flex;
    align-items: flex-end;
  }
  .eclair-cadre::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(to top,
      rgba(14, 15, 18, 0.94) 0%,
      rgba(14, 15, 18, 0.78) 30%,
      rgba(14, 15, 18, 0) 62%);
  }
  .eclair-repli svg { height: min(42vh, 300px); }
  .eclair-mots p { font-size: var(--t-base); }
  .eclair-rail { max-width: none; }
  /* la bulle de VOLTA est fixée en bas à droite : on écarte la jauge
     pour que le pourcentage ne passe pas dessous. */
  .eclair-jauge { padding-right: 76px; }

  .logo3d { gap: 4px; }
  .logo3d-mot { letter-spacing: 0.1em; text-indent: 0.1em; }
}

/* ============================================================
   4. MOUVEMENT RÉDUIT
   ------------------------------------------------------------
   Pas d'animation continue : la 3D affiche UNE image, éclair
   pleinement chargé et bien éclairé. Rien ne disparaît.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .eclair { --charge: 1; }
  .eclair-piste { height: auto; }
  .eclair-cadre {
    position: static;
    height: auto;
    min-height: min(88svh, 720px);
    padding: var(--e6) 0;
  }
  .eclair-toile, .logo3d-toile { transition: none; }
  .eclair-rail span { transition: none; }
}