/* ==========================================================================
   ANIMATIONS — apparition au scroll (piloté par assets/js/modules/reveal.js)
   Tout est scopé à html.reveal-ready : sans JS, le contenu reste visible.
   ========================================================================== */

:root {
  --reveal-duration: 1s;
}

/* ---- Monte + fondu ---- */
.reveal-ready [data-reveal="up"] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity var(--reveal-duration) var(--ease-out),
    transform var(--reveal-duration) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ---- Fondu seul ---- */
.reveal-ready [data-reveal="fade"] {
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready [data-reveal="up"].is-visible,
.reveal-ready [data-reveal="fade"].is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Lettres / mots qui sortent d'un masque ---- */
.reveal-word {
  display: inline-block;
  white-space: nowrap;
}
.reveal-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* marge pour ne pas couper les accents / jambages */
  padding-block: 0.12em 0.25em;
  margin-block: -0.12em -0.25em;
}
.reveal-unit { display: inline-block; }

.reveal-ready .reveal-unit {
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--i, 0) * 45ms);
}
.reveal-ready .is-visible .reveal-unit { transform: none; }

/* ---- Grille produits re-rendue après un filtrage ---- */
@keyframes card-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.product-grid.is-refreshing > * {
  animation: card-in 700ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
  .product-grid.is-refreshing > * { animation: none; }
}

/* Boutons : on garde la transition de couleur au survol en plus de l'apparition */
.reveal-ready .btn[data-reveal="up"] {
  transition:
    opacity var(--reveal-duration) var(--ease-out),
    transform var(--reveal-duration) var(--ease-out),
    background-color var(--transition);
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms;
}
.reveal-ready .btn[data-reveal].is-visible:active { transform: scale(0.97); }