/* =========================
   ANIMATIONS – REUSABLE
   ========================= */

/* état initial commun */
[data-animate] {
  opacity: 0;
  will-change: transform, opacity;
}

/* ----- directions ----- */

/* bas → haut */
.animate-up {
  transform: translateY(40px);
}

/* gauche → droite */
.animate-left {
  transform: translateX(-40px);
}

/* droite → gauche */
.animate-right {
  transform: translateX(40px);
}

/* fade simple */
.animate-fade {
  transform: none;
}

/* ----- état visible ----- */
.animate-in {
  opacity: 1;
  transform: translate(0, 0);
  transition:
    opacity 0.8s cubic-bezier(.4,0,.2,1),
    transform 0.8s cubic-bezier(.4,0,.2,1);
}

/* =========================
   STAGGER (délai automatique)
   ========================= */
[data-stagger] {
  transition-delay: calc(var(--stagger-index) * var(--stagger-delay, 120ms));
}


/* ===== STAGGER BASE ===== */
[data-stagger] {
  --stagger-delay: 0.12s;
}

/* état initial */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

/* état visible */
[data-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}


@media (max-width: 768px) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Respecte la préférence système "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}