/* ============================================================
   ANIMATIONS — scroll-driven reveals
   Utilise Intersection Observer via animations.js
   ============================================================ */

/* --- Respect des préférences d'accessibilité --- */
@media (prefers-reduced-motion: reduce) {
  .reveal-item,
  .reveal-phone,
  .reveal-up,
  .reveal-phone-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Hero : entrée au chargement de la page --- */

.reveal-hero .reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--delay, 0ms);
}

.reveal-hero.is-visible .reveal-item {
  opacity: 1;
  transform: translateY(0);
}

/* --- Phone hero : glisse depuis le bas avec légère rotation --- */

.reveal-phone {
  opacity: 0;
  transform: translateY(40px) rotate(-1deg);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 200ms;
}

.reveal-phone.is-visible {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* --- Sections : reveal montant générique --- */

.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: var(--delay, 0ms);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Phone chapters : glisse depuis la gauche --- */

.reveal-phone-left {
  opacity: 0;
  transform: translateX(-40px) rotate(-2deg);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 150ms;
}

.reveal-phone-left.is-visible {
  opacity: 1;
  transform: translateX(0) rotate(-2deg);
}