/* ==========================================================
   Ulia.Radio — Animations génériques

   Généralise en classes utilitaires le pattern déjà utilisé sur le hero
   de l'accueil (voir hero.css : hero-fade/hero-rise, même easing) pour les
   grilles/listes de cartes des autres pages publiques. `prefers-reduced-motion`
   toujours respecté — convention systématique du projet, jamais d'exception.
   ========================================================== */

@keyframes u-reveal-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Apparition simple d'un élément isolé (bannière, carte seule...). */
.u-reveal {
  animation: u-reveal-rise 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) backwards;
}

/* Apparition en cascade des enfants directs d'une grille/liste de cartes.
   Délais explicites par nth-child plutôt qu'une variable inline posée en
   PHP : reste 100% CSS, aucune page n'a à s'en soucier au-delà de la classe. */
.u-reveal-stagger > * {
  animation: u-reveal-rise 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) backwards;
}
.u-reveal-stagger > *:nth-child(1) { animation-delay: 0ms; }
.u-reveal-stagger > *:nth-child(2) { animation-delay: 60ms; }
.u-reveal-stagger > *:nth-child(3) { animation-delay: 120ms; }
.u-reveal-stagger > *:nth-child(4) { animation-delay: 180ms; }
.u-reveal-stagger > *:nth-child(5) { animation-delay: 240ms; }
.u-reveal-stagger > *:nth-child(6) { animation-delay: 300ms; }
.u-reveal-stagger > *:nth-child(7) { animation-delay: 360ms; }
.u-reveal-stagger > *:nth-child(8) { animation-delay: 420ms; }
/* Au-delà de 8 cartes : plafond, pour ne pas faire attendre le reste de la
   grille de plus en plus longtemps sur une longue liste. */
.u-reveal-stagger > *:nth-child(n+9) { animation-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
  .u-reveal,
  .u-reveal-stagger > * {
    animation: none;
  }
}

/* ==========================================================
   Transition de page (assets/js/page-fade.js)

   Volontairement 100% CSS pour l'entrée : une classe posée en dur dans le
   HTML (pas ajoutée par JS) garantit que la page reste visible même si le
   script ne charge pas/plante — jamais de opacity:0 par défaut qui
   dépendrait du JS pour être retiré. Seule la sortie (fade au clic sur un
   lien sortant) est pilotée en JS, et reste elle aussi purement cosmétique :
   si le script ne s'exécute pas, le clic navigue normalement, instantanément.
   ========================================================== */

@keyframes u-page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.u-page-fade {
  animation: u-page-fade-in 0.25s ease;
}

body.u-page-fade.is-leaving {
  animation: u-page-fade-in 0.15s ease reverse forwards;
}

@media (prefers-reduced-motion: reduce) {
  body.u-page-fade,
  body.u-page-fade.is-leaving {
    animation: none;
  }
}