/* ============================================================
   ENIGMA — HERO ACCUEIL (CORR2-A)
   Animation propre à la page d'accueil. NE touche PAS à la charte
   (styles.css / colors_and_type.css). Chargé via @push('head').

   Séquence :
     1. Le VRAI logotype SVG (charte, inliné) découpé en 6 lettres
        E-N-I-G-M-A : effet decryption « machine Enigma » PAR LETTRE
        (public.js → initHeroDecrypt). Chaque lettre défile à travers
        des glyphes aléatoires (<text> SVG centré) puis se fige sur la
        vraie lettre charte (<path>), G→D avec léger chevauchement.
        Fallback CSS auto-joué si JS absent. État final = vrai logo net.
     2. Villes de luxe en pop à des positions aléatoires (encryption).
     3. Tunnel 3D : les villes voyagent en translateZ vers la caméra,
        EN PROFONDEUR (couche dédiée, stacking context propre) → elles
        n'empiètent jamais sur le logo qui reste net au premier plan.
   Respecte prefers-reduced-motion (fallback statique).
   ============================================================ */

/* Fond du hero — casse l'aplat bleu foncé : halo de lumière chaude
   centré derrière le logo + vignette pour donner profondeur et relief.
   (override de .hero__media défini dans styles.css, hero.css est chargé après) */
.hero__media {
  background-color: var(--navy-900);
  background-image:
    radial-gradient(62% 52% at 50% 40%, rgba(178,155,140,.34) 0%, rgba(60,55,95,.16) 40%, transparent 68%),
    radial-gradient(125% 105% at 50% 48%, transparent 52%, rgba(0,0,18,.62) 100%),
    url("assets/ground-navy.jpg");
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}

/* Scène 3D — remplit le centre du hero, donne la perspective */
.hero3d {
  position: absolute;
  inset: 0;
  perspective: 1100px;
  perspective-origin: 50% 50%;
  z-index: 3;
  pointer-events: none;
}

/* ---- Couche tunnel (villes) : sous le logo, stacking context propre ---- */
.hero3d__field {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d; /* crée un stacking context → reste derrière le logo */
  z-index: 1;
}

/* ---- Le VRAI logotype SVG (charte), couche au-dessus du tunnel ---- */
.hero3d__logo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  z-index: 5; /* toujours au premier plan, devant les villes */
}
.hero3d__logomark {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.hero3d__svg {
  width: min(440px, 76vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 40px rgba(0, 0, 30, .5));
  overflow: visible; /* les glyphes scramble peuvent légèrement déborder */
  transition: opacity .45s ease;
}

/* ---- Mot ville : s'affiche À LA PLACE du wordmark ENIGMA ----
   Superposé exactement au SVG, même centre, même esprit display.
   Crossfade piloté par la classe .is-word sur .hero3d__logomark. */
.hero3d__word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "At Gambit", "Bodoni Moda", "Didot", serif;
  font-weight: 400;
  font-size: clamp(34px, 7.4vw, 86px);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 4px 36px rgba(0, 0, 20, .5);
  filter: drop-shadow(0 0 13px rgba(255, 255, 255, .4));
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.hero3d__logomark.is-word .hero3d__word { opacity: .96; }
.hero3d__logomark.is-word .hero3d__svg { opacity: 0; }

/* ---- Decryption « machine Enigma » PAR LETTRE ------------------------ */
/* Vraies lettres charte : cachées au départ. Un fallback CSS auto-joué les
   révèle si le JS est absent (le logo final reste toujours garanti). */
.hero3d__glyph {
  fill: #fff;
  opacity: 0;
  animation: heroGlyphFallback .9s ease 1.6s forwards;
}
@keyframes heroGlyphFallback { to { opacity: 1; } }

/* Quand le JS prend la main (classe is-js), il coupe le fallback et pilote
   la révélation lettre par lettre à la résolution de chaque scramble. */
.hero3d.is-js .hero3d__glyph { animation: none; }
.hero3d.is-js .hero3d__glyph.is-revealed {
  animation: heroGlyphSettle .42s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes heroGlyphSettle {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Glyphes de défilé : <text> centré sur chaque lettre. Cachés par défaut
   (no-JS / reduced-motion = vraies lettres directes), montrés par le JS. */
.hero3d__scramble {
  fill: #fff;
  font-family: "At Gambit", "Bodoni Moda", "Didot", serif;
  font-weight: 400;
  font-size: 252px;
  text-anchor: middle;
  opacity: 0;
  filter: drop-shadow(0 0 13px rgba(255, 255, 255, .5));
}
.hero3d.is-js .hero3d__scramble.is-on { opacity: .92; }

.hero3d__baseline {
  font-size: 12px;
  color: var(--bronze-300);
  opacity: 0;
  animation: heroBaselineIn .8s ease 1.9s forwards;
}
@keyframes heroBaselineIn { to { opacity: 1; } }

/* ---- Phase 2/3 : villes dans le tunnel ---- */
.hero3d__city {
  position: absolute;
  z-index: 1;
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .26em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bronze-300, #d8c4a4);
  text-shadow: 0 2px 22px rgba(0, 0, 20, .6);
  opacity: 0;
  will-change: transform, opacity;
  /* spawn bien plus en profondeur → les villes émergent du fond et
     s'effacent avant d'atteindre le plan du logo */
  transform: translate(-50%, -50%) translateZ(-1600px);
  animation-name: hero3dCity;
  animation-timing-function: cubic-bezier(.5, 0, .85, .65); /* accélère vers la caméra */
  animation-fill-mode: forwards;
}

@keyframes hero3dCity {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateZ(-1600px); }
  18%  { opacity: 1; }
  62%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translateZ(420px); }
}

@media (max-width: 860px) {
  .hero3d__svg  { width: min(320px, 76vw); }
  .hero3d__word { font-size: clamp(22px, 7vw, 44px); letter-spacing: .03em; }
  .hero3d__city { font-size: 12px; letter-spacing: .2em; }
}

/* ---- Accessibilité : mouvement réduit → rendu statique ---- */
@media (prefers-reduced-motion: reduce) {
  .hero3d__glyph {
    opacity: 1;
    animation: none;
  }
  .hero3d__scramble { display: none; }
  .hero3d__baseline {
    opacity: 1;
    animation: none;
  }
  .hero3d__city {
    animation: none;
    opacity: .9;
    transform: translate(-50%, -50%);
  }
}