/* =====================================================================
   SCENE-FX.CSS — Anime le décor du lobby (l'image de fond du château)
   3 effets combinés, tous très doux pour ne jamais distraire de l'UI :

   1. ZOOM LENT (façon "Ken Burns") : le décor grossit et se déplace
      très légèrement en boucle, sur une minute environ.
   2. PARALLAXE À LA SOURIS : le décor se décale légèrement à l'opposé
      du curseur, ce qui donne une impression de profondeur.
   3. PARTICULES DORÉES : de la poussière de lumière qui monte
      doucement à l'écran (créées en JS, voir js/scene-fx.js).

   Structure HTML attendue (dans .home-scene, tout en premier) :
     <div class="home-bg">              -> calque 1 : bougé par la souris (JS)
       <div class="home-bg-image"></div> -> calque 2 : zoom lent (CSS)
     </div>
     <div class="scene-particles"></div> -> rempli par js/scene-fx.js
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. LE DÉCOR
   L'image de fond elle-même reste parfaitement immobile (plus de zoom,
   plus de suivi de la souris) : c'est le calque des nuages juste en
   dessous, et les particules par-dessus, qui donnent vie à la scène.
   --------------------------------------------------------------------- */
.home-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-bg-image {
  position: absolute;
  inset: 0;
  background: url('../assets/images/bg-lobby-sky.jpg') center/cover no-repeat;
}


/* ---------------------------------------------------------------------
   1c. OISEAU DE PASSAGE
   De temps en temps, un oiseau traverse le ciel en silhouette (clin
   d'œil à celui déjà présent dans l'image). Démarré et rejoué depuis
   js/scene-fx.js, pour qu'il ne passe pas trop souvent.
   --------------------------------------------------------------------- */
.scene-bird {
  position: absolute;
  top: 12%;
  left: -6%;
  width: 26px;
  height: 26px;
  z-index: 1;
  opacity: 0;
  color: rgba(20, 16, 30, 0.75);
  pointer-events: none;
}

.scene-bird svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Classe ajoutée en JS pour déclencher une traversée */
.scene-bird.is-flying {
  animation: bird-cross 9s linear;
}

@keyframes bird-cross {
  0%   { transform: translate(0, 0);         opacity: 0; }
  8%   { opacity: 0.8; }
  50%  { transform: translate(60vw, -30px);  opacity: 0.8; }
  92%  { opacity: 0.7; }
  100% { transform: translate(122vw, -55px); opacity: 0; }
}



/* ---------------------------------------------------------------------
   1d. PERSONNAGE (calque séparé, détouré, posé par-dessus le décor)
   Position calculée pour retomber exactement là où il était quand il
   faisait encore partie de l'image de fond d'origine.
   --------------------------------------------------------------------- */
.hero-figure {
  position: absolute;
  left: -200px;
  top: 65px;
  width: 777px;             /* la hauteur suit automatiquement (image proportionnelle) */
  z-index: 3;                /* au-dessus du décor et des particules, sous le reste de l'UI */
  pointer-events: none;      /* le clic pour parler reste géré par .hero-click-area */
  user-select: none;
}

/* ---------------------------------------------------------------------
   2. PARTICULES DORÉES
   --------------------------------------------------------------------- */
.scene-particles {
  position: absolute;
  inset: 0;
  z-index: 2;               /* au-dessus du décor, sous les cartes et le menu */
  overflow: hidden;
  pointer-events: none;     /* ne bloque jamais un clic */
}

.scene-particle {
  position: absolute;
  bottom: -5%;
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff8dd 0%, var(--gold-light, #ffe18a) 55%, transparent 75%);
  box-shadow: 0 0 6px 1px rgba(255, 225, 138, 0.6);
  opacity: 0;
  /* --x = léger déplacement horizontal pendant la montée (façon poussière portée par l'air) */
  animation: scene-drift var(--d, 14s) ease-in var(--delay, 0s) infinite;
}

/* Montée de bas en haut, avec un balancement doux sur les côtés et un
   fondu à l'entrée/la sortie */
@keyframes scene-drift {
  0%   { transform: translate(0, 0);                opacity: 0; }
  8%   { opacity: 0.8; }
  50%  { transform: translate(var(--x, 20px), -55vh); opacity: 0.6; }
  92%  { opacity: 0.5; }
  100% { transform: translate(calc(var(--x, 20px) * 2), -108vh); opacity: 0; }
}


/* ---------------------------------------------------------------------
   3. ACCESSIBILITÉ : on coupe tout mouvement si demandé par le système
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .scene-bird.is-flying {
    animation: none;
    opacity: 0;
  }

  .scene-particle {
    animation: none;
    opacity: 0;             /* pas de particules figées à moitié visibles */
  }
}