/* =========================================================================
   ANIMATIONS & INTERACTIONS — réimplémentation vanilla du design system source
   (équivalents Framer Motion `whileInView` -> IntersectionObserver + CSS).
   Dépend de styles/tokens.css. Piloté par js/reveal.js.
   ========================================================================= */

/* ---- Reveal au scroll (classes posées par JS -> progressive enhancement) ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-slow) var(--ease-smooth),
              transform var(--duration-slow) var(--ease-smooth);
  will-change: opacity, transform;
}
.reveal--left  { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }
.reveal--scale { transform: scale(.94); }
.reveal.is-in { opacity: 1; transform: none; }

/* Apparition en cascade : délai piloté par --i (index posé en JS) */
.stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---- Hover cartes ---- */
.hover-lift { transition: transform var(--duration-base) var(--ease-standard),
                          box-shadow var(--duration-base) var(--ease-standard); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }

/* ---- Header : état « scrollé » ---- */
.site-header {
  transition: background-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

/* ---- Voile & contenu du hero ---- */
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(44, 36, 32, .82) 0%,
    rgba(44, 36, 32, .42) 45%,
    rgba(44, 36, 32, .15) 100%);
  z-index: 1;
}
.hero__content { position: relative; z-index: 2; }

/* Indice de défilement */
.scroll-cue {
  position: absolute; left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 2;
  width: 26px; height: 42px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: var(--radius-full);
}
.scroll-cue::before {
  content: ""; position: absolute; left: 50%; top: 8px;
  width: 4px; height: 8px; border-radius: var(--radius-full);
  background: #fff; transform: translateX(-50%);
  animation: scrollCue 1.8s var(--ease-smooth) infinite;
}
@keyframes scrollCue {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}

/* Léger flottement (badges / icônes) */
.float { animation: floatY 6s var(--ease-smooth) infinite alternate; }
@keyframes floatY { to { transform: translateY(-10px); } }

/* Dérive lente du fond de hero (remplace la vidéo, très économe) */
.hero__media--animated { animation: heroDrift 24s ease-in-out infinite alternate; }
@keyframes heroDrift {
  0%   { transform: scale(1.05) translate(0, 0); }
  100% { transform: scale(1.12) translate(-2%, -2%); }
}

/* ---- Accordéon FAQ (icône) ---- */
.faq-item summary::after {
  transition: transform var(--duration-base) var(--ease-standard);
}

/* ---- Respect des préférences de mouvement ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hover-lift:hover { transform: none; }
  .scroll-cue::before,
  .float,
  .hero__media--animated { animation: none !important; }
  * { scroll-behavior: auto !important; }
}