/* ==========================================================================
   ANIMATIONS — apparitions au défilement, entrée du hero, mouvement réduit
   Les règles d'apparition ne s'appliquent qu'à travers `html.js` : si le
   script ne se charge pas, tout reste visible et lisible.
   ========================================================================== */

/* --- Apparition au défilement ---------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal--left { transform: translateX(-22px); }
.js .reveal--right { transform: translateX(22px); }
.js .reveal--scale { transform: scale(0.97); }

/* En dessous de 900px les blocs sont empilés : un décalage horizontal
   n'aurait plus de sens et pousserait la page hors de l'écran. */
@media (max-width: 899px) {
  .js .reveal--left,
  .js .reveal--right { transform: translateY(18px); }
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Décalages en cascade, posés directement dans le HTML via data-reveal-step */
.js [data-reveal-step="1"] { --reveal-delay: 90ms; }
.js [data-reveal-step="2"] { --reveal-delay: 180ms; }
.js [data-reveal-step="3"] { --reveal-delay: 270ms; }
.js [data-reveal-step="4"] { --reveal-delay: 360ms; }
.js [data-reveal-step="5"] { --reveal-delay: 450ms; }

/* --- Entrée du hero ---------------------------------------------------------
   Jouée une seule fois au chargement, sans attendre l'observateur.
   -------------------------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes unveil {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

.js .hero__text > * {
  animation: rise var(--dur-slow) var(--ease-out) both;
}

.js .hero__text > :nth-child(1) { animation-delay: 60ms; }
.js .hero__text > :nth-child(2) { animation-delay: 140ms; }
.js .hero__text > :nth-child(3) { animation-delay: 220ms; }
.js .hero__text > :nth-child(4) { animation-delay: 300ms; }
.js .hero__text > :nth-child(5) { animation-delay: 380ms; }

.js .hero__media .frame {
  animation: unveil 1.1s var(--ease-out) both;
  animation-delay: 120ms;
}

.js .hero__badge {
  animation: rise var(--dur-slow) var(--ease-out) both;
  animation-delay: 700ms;
}

/* --- Micro-interactions ------------------------------------------------------ */
@keyframes toast-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.toast.is-visible { animation: toast-in var(--dur-fast) linear; }

/* --- Mouvement réduit --------------------------------------------------------
   Respecte le réglage système : plus aucune animation, aucun défilement
   fluide, tout le contenu reste à sa place définitive.
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .frame img,
  .gallery-item img { transition: none !important; }
  .btn:hover { transform: none; }
}