/* ============================================================
   MSJ CONNECT — ANIMATIONS
   Reveal au scroll, keyframes, transitions de page.
   Tout est desactive sous prefers-reduced-motion.
   ============================================================ */

/* ---- Reveal au scroll (piloté par IntersectionObserver, main.js) ---- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal-delay-1{ transition-delay:0.08s; }
.reveal-delay-2{ transition-delay:0.16s; }
.reveal-delay-3{ transition-delay:0.24s; }
.reveal-delay-4{ transition-delay:0.32s; }

/* ---- Hero ---- */
@keyframes heroFadeUp{
  from{ opacity:0; transform:translateY(28px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero-anim-1{ animation:heroFadeUp 0.8s var(--ease) 0.05s both; }
.hero-anim-2{ animation:heroFadeUp 0.8s var(--ease) 0.2s both; }
.hero-anim-3{ animation:heroFadeUp 0.8s var(--ease) 0.35s both; }
.hero-anim-4{ animation:heroFadeUp 0.8s var(--ease) 0.5s both; }

@keyframes meshDrift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-2%,2%,0) scale(1.05); }
}
.mesh-bg{
  position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;
}
.mesh-bg::before, .mesh-bg::after{
  content:'';
  position:absolute;
  width:70%; height:140%;
  border-radius:50%;
  filter:blur(80px);
  opacity:0.35;
  animation:meshDrift 22s ease-in-out infinite;
}
.mesh-bg::before{
  top:-30%; left:-10%;
  background:radial-gradient(circle, var(--gold-light) 0%, transparent 70%);
}
.mesh-bg::after{
  bottom:-40%; right:-15%;
  background:radial-gradient(circle, var(--navy-light) 0%, transparent 70%);
  animation-delay:-11s;
}

/* ---- Compteurs ---- */
.stat-number{ font-variant-numeric:tabular-nums; }

/* ---- Boutons ---- */
.btn{ transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

/* ---- Cartes ---- */
.lift{ transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.lift:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }

/* ---- Accordéon FAQ ---- */
.faq-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 0.35s var(--ease);
}
.faq-answer > div{ overflow:hidden; }
.faq-item.is-open .faq-answer{ grid-template-rows:1fr; }
.faq-icon{ transition:transform var(--dur-base) var(--ease); }
.faq-item.is-open .faq-icon{ transform:rotate(45deg); }

/* ---- Dropdown nav ---- */
.nav-dropdown-panel{
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base);
}
.nav-item-dropdown:hover .nav-dropdown-panel,
.nav-item-dropdown.is-open .nav-dropdown-panel{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* ---- Timeline ---- */
@keyframes timelineFill{
  from{ transform:scaleY(0); }
  to{ transform:scaleY(1); }
}
.timeline-line-fill.is-visible{
  animation:timelineFill 1.4s var(--ease) forwards;
}

/* ---- Spinner (formulaires) ---- */
@keyframes spin{ to{ transform:rotate(360deg); } }
.spinner{ animation:spin 0.8s linear infinite; }

/* ---- View Transitions natives entre pages internes ----
   Chrome/Edge récents animent automatiquement la navigation entre
   pages du même site. Les autres navigateurs ignorent cette règle
   sans erreur (dégradation silencieuse). */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation:vtFadeOut 0.2s var(--ease) both; }
  ::view-transition-new(root){ animation:vtFadeIn 0.25s var(--ease) both; }
}
@keyframes vtFadeOut{ to{ opacity:0; } }
@keyframes vtFadeIn{ from{ opacity:0; transform:translateY(6px); } }

/* ---- Respect total du confort utilisateur ---- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .mesh-bg::before, .mesh-bg::after{ animation:none; }
}