/* ====================== ANIMATIONS ======================
   MOT-3 Stagger marque · reveal scroll · compteurs
   ======================================================= */

/* ---- Reveal au scroll (translateY uniquement, JAMAIS translateX — PIEGE PROD #13) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .55s var(--ease-out),
    transform .55s var(--ease-out);
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}

/* MOT-3 Stagger marque : délais échelonnés par index (cascade) */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .5s var(--ease-out),
    transform .5s var(--ease-out);
}
[data-stagger] > *.in { opacity: 1; transform: translateY(0); }

/* Délais stagger (max 8 enfants, .05s entre chaque) */
[data-stagger] > *:nth-child(1)  { transition-delay: .00s; }
[data-stagger] > *:nth-child(2)  { transition-delay: .07s; }
[data-stagger] > *:nth-child(3)  { transition-delay: .14s; }
[data-stagger] > *:nth-child(4)  { transition-delay: .21s; }
[data-stagger] > *:nth-child(5)  { transition-delay: .28s; }
[data-stagger] > *:nth-child(6)  { transition-delay: .35s; }
[data-stagger] > *:nth-child(7)  { transition-delay: .42s; }
[data-stagger] > *:nth-child(8)  { transition-delay: .49s; }

/* ---- Hover cartes gallery ---- */
.gal-item {
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gal-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px oklch(45% 0.12 145 / .15);
}

/* ---- Animation hero zoom très lent (sens de mouvement) ---- */
@keyframes hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.hero-immersif__bg img {
  animation: hero-zoom 18s ease-in-out alternate infinite;
}

/* ---- FAB apparaît après 260px de scroll ---- */
.fab-call {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.fab-call.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Prefers-reduced-motion : tout couper ---- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-immersif__bg img {
    animation: none !important;
  }
  .fab-call {
    opacity: 1;
    pointer-events: auto;
  }
  .gal-item:hover {
    transform: none;
  }
}