/* ─────────────────────────────────────────────────────────────
   Animations d'apparition au scroll — From Arusha
   Tout reste VISIBLE PAR DÉFAUT (sans JS, sans IntersectionObserver,
   ou si l'utilisateur préfère moins de mouvement) : le html ne porte
   la classe .js-anim que si le script inline de head.ejs l'autorise.
   Aucun élément ne doit jamais dépendre du JS pour être vu.
───────────────────────────────────────────────────────────── */

.js-anim .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.68,0,1), transform .7s cubic-bezier(.22,.68,0,1);
}
.js-anim .reveal.is-visible { opacity: 1; transform: none; }

.js-anim .reveal--fade { transform: none; }
.js-anim .reveal--scale { transform: translateY(16px) scale(.94); }
.js-anim .reveal--left  { transform: translateX(-32px); }
.js-anim .reveal--right { transform: translateX(32px); }

/* Grille/liste : les enfants directs se révèlent en cascade légère.
   Le JS ajoute .is-visible sur le CONTENEUR seulement — le décalage
   entre enfants est purement CSS (nth-child), pas de JS par élément. */
.js-anim .reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22,.68,0,1), transform .6s cubic-bezier(.22,.68,0,1);
}
.js-anim .reveal-group.is-visible > * { opacity: 1; transform: none; }
.js-anim .reveal-group.is-visible > *:nth-child(1)  { transition-delay: .03s }
.js-anim .reveal-group.is-visible > *:nth-child(2)  { transition-delay: .10s }
.js-anim .reveal-group.is-visible > *:nth-child(3)  { transition-delay: .17s }
.js-anim .reveal-group.is-visible > *:nth-child(4)  { transition-delay: .24s }
.js-anim .reveal-group.is-visible > *:nth-child(5)  { transition-delay: .31s }
.js-anim .reveal-group.is-visible > *:nth-child(6)  { transition-delay: .38s }
.js-anim .reveal-group.is-visible > *:nth-child(7)  { transition-delay: .45s }
.js-anim .reveal-group.is-visible > *:nth-child(8)  { transition-delay: .52s }
.js-anim .reveal-group.is-visible > *:nth-child(n+9){ transition-delay: .58s }

/* Flottement doux et continu — décoratif UNIQUEMENT (icône, blob),
   jamais sur du texte ou un élément interactif. À doser avec parcimonie. */
@keyframes fa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.js-anim .float-soft { animation: fa-float 5s ease-in-out infinite; }

/* Petit "pop" ponctuel déclenché par du JS existant (panier, favoris). */
@keyframes fa-pop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
.fa-pop-once { animation: fa-pop .35s ease; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-group > *, .float-soft {
    animation: none !important; transition: none !important;
    opacity: 1 !important; transform: none !important;
  }
}