/* ============================================================
   Lightworker Collective - Animations (animations.css)
   Page « Réservation » (écran unique). La page ne défile pas :
   AUCUN reveal au scroll - seulement l'entrée orchestrée au
   chargement (escalier .hro), les blooms qui respirent, les
   transitions d'étapes (components.css) et le pop-up minuterie.

   Cohérence : une seule famille d'easing (--ease-soft),
   durées 0,6 à 1,1 s. Les états initiaux cachés sont scopés sous
   html.js : sans JavaScript, tout le contenu est visible.
   ============================================================ */

/* ------------------------------------------------------------
   Nébuleuses ambiantes (blooms) - grands radial-gradients très
   flous qui RESPIRENT (échelle+opacité) ET DÉRIVENT lentement, à
   des rythmes différents -> ciel astral vivant, jamais brusque.
   On anime `translate` (dérive) et `transform` (échelle) séparément
   pour qu'ils se composent sans conflit.
   ------------------------------------------------------------ */

.bloom {
  position: absolute;
  width: min(58vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(96px);
  opacity: 0.72;
  pointer-events: none;
  z-index: 0;
  animation: bloom-breathe 13s ease-in-out infinite alternate,
             bloom-drift-a 30s ease-in-out infinite alternate;
  will-change: transform, translate, opacity;
}

@keyframes bloom-breathe {
  from { transform: scale(1);    opacity: 0.62; }
  to   { transform: scale(1.14); opacity: 0.88; }
}
@keyframes bloom-drift-a { from { translate: 0 0; } to { translate: 7% 5%; } }
@keyframes bloom-drift-b { from { translate: 0 0; } to { translate: -6% -7%; } }
@keyframes bloom-drift-c { from { translate: 0 0; } to { translate: 5% -6%; } }

.bloom--powder { background: radial-gradient(circle, color-mix(in srgb, var(--powder-blue) 58%, transparent), transparent 70%); }
.bloom--light  { background: radial-gradient(circle, color-mix(in srgb, var(--color-celestial-light) 54%, transparent), transparent 70%); }
.bloom--teal   { background: radial-gradient(circle, color-mix(in srgb, var(--color-mermaid-blue) 72%, transparent), transparent 70%); }

.bloom--tl  { top: -14%; left: -10%; }
.bloom--br  { right: -12%; bottom: -14%; animation-duration: 15s, 34s; animation-name: bloom-breathe, bloom-drift-b; }
/* Nébuleuse centrale plus large et plus diffuse, derrière la carte. */
.bloom--mid {
  width: min(70vw, 860px);
  top: 50%; left: 50%;
  margin: -35vh 0 0 -35vw;
  filter: blur(120px);
  opacity: 0.5;
  animation-duration: 17s, 40s;
  animation-name: bloom-breathe, bloom-drift-c;
}

/* ------------------------------------------------------------
   ENTRÉE ORCHESTRÉE - escalier au chargement.
   Chaque élément .hro porte son délai (--d) ; tout démarre quand
   loading.js pose html.lw-ready.
   ------------------------------------------------------------ */

.js .hro {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease-soft) var(--d, 0s),
              transform 0.9s var(--ease-soft) var(--d, 0s);
}

html.lw-ready .hro { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   Pop-up minuterie - entrée douce (montée + fondu) quand .is-in
   est posée par main.js, sortie inverse quand elle est retirée.
   Tant qu'il est transparent, il ne capte AUCUN clic (piège §12.4).
   ------------------------------------------------------------ */
.promo-pop {
  opacity: 0;
  translate: 0 18px;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-soft), translate 0.6s var(--ease-soft);
}
.promo-pop.is-in {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

/* ------------------------------------------------------------
   prefers-reduced-motion : tout apparaît instantanément.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

  .js .hro {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .bloom {
    animation: none !important;
    opacity: 0.7 !important;
    transition: none !important;
  }

  .promo-pop { transition: none !important; }
  .promo-pop.is-in { opacity: 1; translate: none; }

  .btn, .btn-arrow,
  .rsv-etape, .rsv-progres-barre, .rsv-option, .rsv-suiv,
  .rsv-service, .sess-carte, .rsv-coche-ligne {
    transition: none !important;
    animation: none !important;
  }

  .rsv-spin { animation: none !important; }
}