/* ==========================================================================
   ANIMATIONS — apparitions franches 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. Aucun flou, aucun
   fondu mou : les blocs se posent net, comme des plaques qui s'encastrent.
   ========================================================================== */

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

.js .reveal--left { transform: translateX(-18px); }
.js .reveal--right { transform: translateX(18px); }

@media (max-width: 899px) {
  .js .reveal--left,
  .js .reveal--right { transform: translateY(14px); }
}

.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: 70ms; }
.js [data-reveal-step="2"] { --reveal-delay: 140ms; }
.js [data-reveal-step="3"] { --reveal-delay: 210ms; }
.js [data-reveal-step="4"] { --reveal-delay: 280ms; }
.js [data-reveal-step="5"] { --reveal-delay: 350ms; }

/* --- Entrée du hero -----------------------------------------------------------
   La photo se dévoile par un volet net (clip-path), pas un fondu : l'effet
   rappelle un panneau de chantier qui se lève.
   -------------------------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  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: 40ms; }
.js .hero__text > :nth-child(2) { animation-delay: 110ms; }
.js .hero__text > :nth-child(3) { animation-delay: 180ms; }
.js .hero__text > :nth-child(4) { animation-delay: 250ms; }
.js .hero__text > :nth-child(5) { animation-delay: 320ms; }

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

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

/* --- 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:active { transform: none; }
}