/* ==========================================================================
   REGALITO — ANIMATIONS
   Apparitions au défilement (pilotées par js/reveal.js) + keyframes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   APPARITION AU DÉFILEMENT
   Posez data-reveal sur n'importe quel élément.
   Options :
     data-reveal-variant="up" (défaut) | "fade" | "scale" | "left" | "right"
     data-reveal-delay="0…8"  → décale l'apparition de N × 80 ms
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 780ms var(--ease-out),
    transform 780ms var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 80ms);
  will-change: opacity, transform;
}

[data-reveal-variant='fade'] {
  transform: none;
}

[data-reveal-variant='scale'] {
  transform: scale(0.94);
}

[data-reveal-variant='left'] {
  transform: translateX(-28px);
}

[data-reveal-variant='right'] {
  transform: translateX(28px);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Si JavaScript ne s'exécute pas, rien ne doit rester invisible. */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   KEYFRAMES
   -------------------------------------------------------------------------- */

/* Flottement très léger des pastilles du hero */
@keyframes float-soft {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-11px);
  }
}

/* Bandeau défilant — se déplace de la moitié de la piste, puis boucle.
   js/ui.js duplique le groupe pour que la boucle soit invisible. */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Point de l'indicateur de défilement du hero */
@keyframes scroll-dot {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* Petit rebond du compteur de sélection quand on ajoute un article */
@keyframes bump {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}