/* =================================================================
   HERO — Section d'entrée avec parallax + animations d'entrée
================================================================= */

/* ─────────────────────────────────────────
   SECTION
───────────────────────────────────────── */
/* Section extérieure : fond visible sur les 16px de marge pixel-art */
.hero {
  position: relative;
  width: 100%;
  background: var(--purple-950);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Wrapper intérieur : 960px, clips les layers parallax */
.hero__wrapper {
  position:        relative;
  width:           100%;
  min-height:      960px;
  overflow:        hidden;
  display:         flex;
  flex-direction:  column;
  flex-wrap:       nowrap;
  align-content:   center;
  justify-content: flex-start;
  align-items:     center;
  background:      url('../img/hero/background.png') center center / cover no-repeat;
}

/* ─────────────────────────────────────────
   LAYERS PARALLAX
   Chaque .prl est positionné absolument.
   Le JS applique UNIQUEMENT translateY pour le parallax.
   Les animations CSS d'entrée/idle sont sur l'enfant direct .ent.
   Formule : left: calc(50% + (pos_figma − 720)px)
   (720 = moitié de la largeur maquette 1440px)
───────────────────────────────────────── */
.prl {
  position: absolute;
  pointer-events: none;
}

/* ── Nuages arrière — z-index 1 ─────────────────────────────── */
/* cloud-back-left.png : 790×790 */
.prl--cloud-back-left {
  width:   790px;
  height:  790px;
  left:    calc(50% - 626px);
  top:     309px;
  z-index: 1;
}

/* cloud-back-right.png : 512×512 */
.prl--cloud-back-right {
  width:   512px;
  height:  512px;
  left:    calc(50% + 98px);
  bottom:  48px;
  z-index: 1;
}

/* ── CardrigeSD — image combinée (Figma node 1543:536)
   cardrige-superdesigner.png : 768×679
   Figma : container left:350 top:533 h:572  → image centrée dans 572px
   → top image = 533 + (572−679)/2 ≈ 480px depuis le haut du wrapper ── */
.prl--cardrige-sd {
  width:            768px;
  height:           679px;
  left:             calc(50% - 400px);   /* Figma x=320px depuis gauche wrapper */
  top:              480px;
  z-index:          2;
  transform-origin: center bottom;
}

/* ── Nuages avant — z-index 3 ───────────────────────────────── */
/* cloud-front-left.png : 512×512 */
.prl--cloud-front-left {
  width:   512px;
  height:  512px;
  left:    calc(50% - 772px);
  bottom:  -124px;
  z-index: 3;
}

/* cloud-front-right.png : 908×606 */
.prl--cloud-front-right {
  width:   908px;
  height:  606px;
  left:    calc(50% + 80px);
  bottom:  -177px;
  z-index: 3;
}

/* ── Chaque .ent remplit son .prl et affiche son image ───────── */
.prl--cloud-back-left   > .ent,
.prl--cloud-back-right  > .ent,
.prl--cloud-front-left  > .ent,
.prl--cloud-front-right > .ent,
.prl--cardrige-sd       > .ent {
  display:             block;
  width:               100%;
  height:              100%;
  background-size:     100% 100%;
  background-repeat:   no-repeat;
  background-position: center center;
}

.prl--cloud-back-left   > .ent { background-image: url('../img/hero/cloud-back-left.png');  }
.prl--cloud-back-right  > .ent { background-image: url('../img/hero/cloud-back-right.png'); }
.prl--cloud-front-left  > .ent { background-image: url('../img/hero/cloud-front-left.png'); }
.prl--cloud-front-right > .ent { background-image: url('../img/hero/cloud-front-right.png'); }
.prl--cardrige-sd       > .ent { background-image: url('../img/hero/cardrige-superdesigner.png'); }

/* ─────────────────────────────────────────
   COINS DÉCORATIFS
───────────────────────────────────────── */
.hero__corner {
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 20;
}
.hero__corner--bl { bottom: -3.73px; left:  -4px; }
.hero__corner--tl { top:   -4.27px;  left:  -4px; transform: rotate(90deg); }
.hero__corner--tr { top:   -4.27px;  right: -4px; transform: rotate(180deg); }
.hero__corner--br { bottom: -3.73px; right: -4px; transform: rotate(-90deg); }

/* ─────────────────────────────────────────
   CONTENU TEXTE
───────────────────────────────────────── */
.hero__content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-16) 24px 0;
  width: 100%;
  max-width: 1440px;
  text-align: center;
}

.hero__title {
  font-family:    var(--font-heading);
  font-size:      var(--text-h1);
  font-weight:    var(--fw-regular);   /* Raw Pixel Regular */
  color:          var(--purple-100);   /* #d4c2ff — Figma purple-100 */
  text-transform: uppercase;
  letter-spacing: var(--ls-h1);       /* 6.72px */
  line-height:    var(--lh-h1);       /* 128% */
}

/* "plus vite, moins cher" en blanc */
.hero__title-accent {
  color: #fff;
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size:   var(--text-xl);
  font-weight: var(--fw-medium);
  color:       var(--purple-500);   /* #b493ff */
}

.hero__action {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-2);
}

.hero__tagline {
  font-family: var(--font-body);
  font-size:   var(--text-xl);
  font-weight: var(--fw-bold);
  color:       var(--gold-fill);    /* #ffd794 */
}

/* ─────────────────────────────────────────
   BOUTON PIXEL
   → Styles dans css/btn-pixel.css
   (composant partagé, utilisé sur toutes les pages)
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   ANIMATIONS D'ENTRÉE
   Principe :
   • Cartouche + nuages : translateY pur, PAS d'opacité.
     overflow:hidden sur le wrapper les masque quand ils sont en-dessous.
     fill-mode:both → la frame "from" s'applique dès le début du délai.
   • Cartouche : fusée depuis le bas, impact avec rebonds, puis IMMOBILE.
   • Nuages front → back (décalages minimes, effet profondeur).
   • Texte : fade + translateY, cascade H1 → subtitle → CTA → tagline.

   Séquence approximative :
     0.08s  → cartouche part (impact ~0.83s)
     0.40s  → nuage front gauche
     0.47s  → nuage front droite
     0.56s  → nuage back gauche
     0.63s  → nuage back droite
     1.10s  → H1
     1.23s  → subtitle
     1.36s  → CTA
     1.49s  → tagline
───────────────────────────────────────── */

/* ── États initiaux avant .go ───────────────────────────────── */
/* Éléments visuels : hors-écran en bas (masqués par overflow:hidden) */
.ent--cardrige-sd,
.ent--cloud-bottom-left,
.ent--cloud-right-bottom,
.ent--cloud-left,
.ent--cloud-right-top {
  transform: translateY(800px);
}

/* Texte : masqué par opacité */
.ent--title,
.ent--subtitle,
.ent--btn,
.ent--tagline { opacity: 0; }

/* ── Keyframes entrée ────────────────────────────────────────── */

/* Cartouche — montée en accélération puis impact brutal, SANS rebond visible
   Le choc est confié au kScreenShake sur .hero (JS) */
@keyframes kLaunchCartridge {
  0%   { transform: translateY(800px); animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
  78%  { transform: translateY(0px);   animation-timing-function: cubic-bezier(0, 0, 0.3, 1); } /* IMPACT */
  88%  { transform: translateY(-3px);  animation-timing-function: ease-out; }  /* inertie infime */
  100% { transform: translateY(0);     }                                        /* repos */
}

/* Nuages — glissement fluide depuis le bas */
@keyframes kLaunchCloud {
  from { transform: translateY(800px); }
  to   { transform: translateY(0);     }
}

/* Texte — chute depuis plus haut + rebond explicite à l'atterrissage
   0→65% : accélération gravitationnelle (ease-in)
   65→80% : dépasse légèrement en bas (rebond visible)
   80→100%: remonte et se pose */
@keyframes kFallDown {
  0%   { opacity: 0; transform: translateY(-72px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  65%  { opacity: 1; transform: translateY(10px);  animation-timing-function: ease-out; }
  82%  { opacity: 1; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Keyframes idle nuages ────────────────────────────────────── */
@keyframes kFloat {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-14px); }
}

/* Reflet subtil sur la cartouche (filter, pas de transform) */
@keyframes kGlow {
  0%, 100% { filter: brightness(1)    saturate(1);    }
  50%       { filter: brightness(1.08) saturate(1.15); }
}

/* ── Screen-shake déclenché par JS sur .hero ─────────────────
   Amplitude décroissante sur 4 oscillations → sensation de choc
   physique qui s'amortit. Durée totale : 380ms.            ── */
@keyframes kScreenShake {
  0%   { transform: translate(0,    0);    }
  10%  { transform: translate(-6px,  3px); }
  20%  { transform: translate( 6px, -3px); }
  32%  { transform: translate(-5px,  2px); }
  44%  { transform: translate( 4px, -2px); }
  56%  { transform: translate(-3px,  1px); }
  68%  { transform: translate( 2px, -1px); }
  80%  { transform: translate(-1px,  1px); }
  92%  { transform: translate( 1px,  0px); }
  100% { transform: translate(0,    0);    }
}

.hero.is-shaking {
  animation: kScreenShake 0.38s ease-out;
}

/* ── Cartouche — impact brutal puis repos permanent ─────────── */
.ent--cardrige-sd.go {
  animation:
    kLaunchCartridge 0.45s linear       0.08s both,   /* linear = timing géré par keyframe */
    kGlow            4.5s  ease-in-out  0.53s infinite;
}

/* ── Nuages avant — partent presque avec la cartouche ───────── */
.ent--cloud-bottom-left.go {
  animation:
    kLaunchCloud 0.80s cubic-bezier(.22, 1, .36, 1) 0.10s both,
    kFloat       6.0s  ease-in-out                   0.90s infinite;
}
.ent--cloud-right-bottom.go {
  animation:
    kLaunchCloud 0.80s cubic-bezier(.22, 1, .36, 1) 0.16s both,
    kFloat       5.2s  ease-in-out                   0.96s infinite;
}

/* ── Nuages arrière — 60–80ms derrière, effet de profondeur ─── */
.ent--cloud-left.go {
  animation:
    kLaunchCloud 0.88s cubic-bezier(.22, 1, .36, 1) 0.22s both,
    kFloat       5.6s  ease-in-out                   1.10s infinite;
}
.ent--cloud-right-top.go {
  animation:
    kLaunchCloud 0.88s cubic-bezier(.22, 1, .36, 1) 0.28s both,
    kFloat       4.8s  ease-in-out                   1.16s infinite;
}

/* ── Texte — chute en cascade depuis le choc, H1 → tagline ──── */
/* .ent--title.go : fallback si JS désactivé (bloc entier) */
.ent--title.go {
  animation: kFallDown 0.55s linear 0.50s both;
}

/* ── Mots H1 — chute individuelle, délai aléatoire injecté par JS ─
   JS retire ent/ent--title du <h1> et wraps chaque mot dans
   <span class="ent ent--word" style="--fall-delay: Xms">          */
.ent--word {
  display:        inline-block;   /* transform sur élément inline sinon ignoré */
  vertical-align: baseline;
  opacity:        0;
}
.ent--word.go {
  animation: kFallDown 0.5s linear var(--fall-delay, 500ms) both;
}
.ent--subtitle.go {
  animation: kFallDown 0.55s linear 0.62s both;
}
.ent--btn.go {
  animation: kFallDown 0.55s linear 0.74s both;
}
.ent--tagline.go {
  animation: kFallDown 0.55s linear 0.86s both;
}