/* ==========================================================================
   Animations — Séverine Houcke
   Classes pilotées par assets/js/animations.js (IntersectionObserver).
   Ne jamais poser .reveal sur du contenu injecté dynamiquement en JS :
   il ne serait pas observé et resterait invisible.
   ========================================================================== */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes draw-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes slow-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* --- Apparition au scroll ------------------------------------------------ */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 900ms cubic-bezier(.2, .7, .2, 1),
    transform 900ms cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}

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

.js .reveal-d1 { transition-delay: 120ms; }
.js .reveal-d2 { transition-delay: 240ms; }
.js .reveal-d3 { transition-delay: 360ms; }
.js .reveal-d4 { transition-delay: 480ms; }

/* --- Filet doré qui se dessine ----------------------------------------- */
.js .rule-draw {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1100ms cubic-bezier(.2, .7, .2, 1) 200ms;
}

.js .rule-draw.is-visible {
  transform: scaleX(1);
}

/* --- Hero : entrée au chargement ---------------------------------------- */
.hero-anim {
  animation: fade-up 1000ms cubic-bezier(.2, .7, .2, 1) both;
}

.hero-anim-d1 { animation-delay: 150ms; }
.hero-anim-d2 { animation-delay: 300ms; }
.hero-anim-d3 { animation-delay: 450ms; }

.hero-media img,
.page-hero-media img {
  animation: slow-zoom 2400ms cubic-bezier(.2, .7, .2, 1) both;
}

/* --- Accessibilité : mouvement réduit ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .rule-draw,
  .hero-anim,
  .hero-media img,
  .page-hero-media img {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}