/*
 * FICHIER   : assets/css/hero.css
 * RÔLE      : Styles de la section héro — première impression du site.
 *             Splash screen, particules, photo droite, contenu gauche,
 *             animations d'entrée, indicateur de défilement.
 *
 * OÙ MODIFIER QUOI
 *   Splash screen (écran de chargement)   → bloc SPLASH
 *   Photo de fond droite                  → .hero-photo (background injecté PHP)
 *   Masque dégradé sur la photo           → .hero-photo-mask
 *   Titre héro (taille, police)           → .hero h1
 *   Sous-titre héro                       → .hero-p
 *   Boutons héro                          → base.css .btn-gold / .btn-ghost
 *   Particules flottantes                 → .particle (générées par app.js)
 *   Indicateur de défilement              → .hero-scroll, .scroll-stem
 *   Animations d'entrée (délais, durées)  → @keyframes + animation sur éléments
 *
 * DÉPENDANCES
 *   base.css    → variables, .btn-gold, .btn-ghost, @keyframes globaux
 *   app.js      → génère les .particle dans #particles
 *   splash.js   → anime et masque #splash
 *   hero_image  → injecté via style="background-image:url(...)" dans hero.php
 */


/* ══════════════════════════════════════════════════════════════
   SPLASH SCREEN
   Affiché au chargement, masqué par splash.js après 2s.
   Modifier la durée d'affichage → splash.js (setTimeout 2000)
   Modifier le logo/texte → templates/partials/splash.php
══════════════════════════════════════════════════════════════ */
#splash {
  position:        fixed;
  inset:           0;
  z-index:         9999;
  background:      var(--g1);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             2rem;
}

/* Logo animé */
.splash-logo {
  display:     flex;
  align-items: center;
  gap:         1.4rem;
  opacity:     0;
  transform:   translateY(20px);
  animation:   logoReveal .8s ease forwards .4s;
}
@keyframes logoReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Emblème rotatif */
.splash-emblem {
  width:    72px;
  height:   72px;
  position: relative;
  display:  flex;
  align-items:     center;
  justify-content: center;
}
.ring {
  position:      absolute;
  border-radius: 50%;
  border:        1.5px solid transparent;
  animation:     spinRing linear infinite; /* @keyframes dans base.css */
}
.ring1 { width: 72px; height: 72px; border-top-color: var(--g4); border-right-color: var(--g4); animation-duration: 2s; }
.ring2 { width: 54px; height: 54px; border-bottom-color: var(--gold); border-left-color: var(--gold); animation-duration: 1.5s; animation-direction: reverse; }
.ring3 { width: 36px; height: 36px; border-top-color: rgba(57,181,74,.35); animation-duration: 3s; }

.emblem-core {
  position:  relative;
  z-index:   1;
  font-size: 2rem;
  animation: pulseCore 2s ease-in-out infinite;
}
@keyframes pulseCore {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.12); }
}

/* Texte du splash */
.splash-wordmark  { display: flex; flex-direction: column; }
.splash-name      { font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 400; letter-spacing: .08em; color: var(--cream); line-height: 1; }
.splash-tagline   { font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; color: var(--g4); margin-top: .4rem; font-weight: 400; }

/* Barre de progression */
.splash-progress {
  width:     280px;
  margin-top: 1rem;
  opacity:   0;
  animation: fadeIn .4s ease forwards 1s; /* @keyframes dans base.css */
}
.progress-track  { width: 100%; height: 1px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.progress-fill   { height: 100%; background: linear-gradient(90deg, var(--g4), var(--gold)); width: 0; animation: fillBar 1.8s ease forwards 1.1s; }
@keyframes fillBar { to { width: 100%; } }

.progress-label { display: flex; justify-content: space-between; margin-top: .6rem; }
.prog-txt       { font-size: .65rem; letter-spacing: .1em; color: rgba(255,255,255,.3); text-transform: uppercase; }

/* Animation de sortie */
#splash.exit { animation: splashExit .9s cubic-bezier(.77,0,.18,1) forwards; }
@keyframes splashExit {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}


/* ══════════════════════════════════════════════════════════════
   HÉRO PRINCIPAL
══════════════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  position:   relative;
  overflow:   hidden;
  display:    flex;
  align-items: center;
  background:  var(--g1);
}

/* Fond radial ambiance verte */
.hero-bg {
  position: absolute;
  inset:    0;
  background:
    radial-gradient(ellipse 70% 55% at 65% 45%, rgba(57,181,74,.15) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 15% 75%, rgba(201,169,110,.05) 0%, transparent 60%),
    var(--g1);
}

/* Particules (générées par app.js dans #particles)
   Modifier la densité → app.js (boucle for)
   Modifier l'apparence → .particle ci-dessous */
.hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.particle {
  position:      absolute;
  border-radius: 50%;
  background:    rgba(57,181,74,.12);
  animation:     ptFloat linear infinite;
}
@keyframes ptFloat {
  0%   { transform: translateY(100vh); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: .3; }
  100% { transform: translateY(-15vh); opacity: 0; }
}

/* Photo droite plein hauteur */
.hero-right-panel {
  position: absolute;
  right:    0;
  top:      0;
  bottom:   0;
  width:    48%;
  overflow: hidden;
}
.hero-photo {
  width:      100%;
  height:     100%;
  background: center/cover no-repeat;
  /* URL injectée inline dans hero.php via style="background-image:url(...)" */
  filter:     brightness(.6);
}
.hero-photo-mask {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to right, var(--g1) 0%, rgba(6,13,10,.4) 45%, transparent 72%);
}

/* Contenu texte gauche */
.hero-content {
  position:   relative;
  z-index:    2;
  padding:    10rem 5vw 7rem;
  max-width:  680px;
}

/* Eyebrow animé */
.eyebrow {
  display:     flex;
  align-items: center;
  gap:         .8rem;
  margin-bottom: 2rem;
  opacity:     0;
  transform:   translateX(-20px);
  animation:   slideIn .7s ease forwards 2.5s; /* @keyframes dans base.css */
}
.eyebrow-line { width: 36px; height: 1px; background: var(--g4); }
.eyebrow-txt  { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--g4); font-weight: 400; }

/* Titre héro animé */
.hero h1 {
  font-family:   'Playfair Display', serif;
  font-size:     clamp(2.8rem, 5.5vw, 5.8rem);
  font-weight:   400;
  line-height:   1.06;
  color:         white;
  margin-bottom: 1.8rem;
  opacity:       0;
  transform:     translateY(30px);
  animation:     slideUp .9s ease forwards 2.75s; /* @keyframes dans base.css */
}
.hero h1 em { font-style: italic; color: var(--g4); display: block; }
body.light-mode .hero h1 { color: #1a2e1e; }

/* Sous-titre */
.hero-p {
  font-size:     1rem;
  line-height:   1.9;
  color:         rgba(255,255,255,.5);
  max-width:     460px;
  margin-bottom: 2.5rem;
  font-weight:   300;
  opacity:       0;
  animation:     slideUp .7s ease forwards 3s;
}

/* Boutons */
.hero-btns {
  display:    flex;
  gap:        1rem;
  flex-wrap:  wrap;
  opacity:    0;
  animation:  slideUp .7s ease forwards 3.2s;
}

/* Indicateur de défilement */
.hero-scroll {
  position:    absolute;
  bottom:      2.5rem;
  left:        5vw;
  display:     flex;
  align-items: center;
  gap:         .8rem;
  opacity:     0;
  animation:   fadeIn .6s ease forwards 3.5s;
}
.scroll-stem {
  width:    1px;
  height:   48px;
  background: rgba(255,255,255,.12);
  position: relative;
  overflow: hidden;
}
.scroll-stem::after {
  content:    '';
  position:   absolute;
  top:        -100%;
  left:       0;
  width:      100%;
  height:     100%;
  background: var(--g4);
  animation:  stemDrop 2s ease infinite 4s;
}
@keyframes stemDrop {
  0%   { top: -100%; }
  100% { top: 200%; }
}
.scroll-lbl {
  font-size:      .62rem;
  letter-spacing: .15em;
  color:          rgba(255,255,255,.25);
  text-transform: uppercase;
}