/* =================================================================
   SOL · Margaux Nihouarn — Animations
   animations.css — entrées au scroll, micro-interactions, keyframes
   Philosophie : subtil, fluide, au service du contenu. Jamais distrayant.
   ================================================================= */

/* -----------------------------------------------------------------
   1. ENTRÉES AU SCROLL (Intersection Observer ajoute .visible)
   ----------------------------------------------------------------- */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-enter) var(--ease-smooth),
              transform var(--duration-enter) var(--ease-smooth);
  will-change: opacity, transform;
}
[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes d'entrée */
[data-animate="fade"]        { transform: translateY(0); }
[data-animate="left"]        { transform: translateX(-32px); }
[data-animate="left"].visible  { transform: translateX(0); }
[data-animate="right"]       { transform: translateX(32px); }
[data-animate="right"].visible { transform: translateX(0); }
[data-animate="scale"]       { transform: scale(0.94); }
[data-animate="scale"].visible { transform: scale(1); }

/* -----------------------------------------------------------------
   2. STAGGER — décalage séquentiel des enfants d'un groupe
   data-stagger sur le parent ; chaque enfant [data-animate] hérite d'un délai
   ----------------------------------------------------------------- */
[data-stagger] > [data-animate] { transition-delay: 0s; }
[data-stagger] > [data-animate]:nth-child(1) { transition-delay: 0.00s; }
[data-stagger] > [data-animate]:nth-child(2) { transition-delay: 0.10s; }
[data-stagger] > [data-animate]:nth-child(3) { transition-delay: 0.20s; }
[data-stagger] > [data-animate]:nth-child(4) { transition-delay: 0.30s; }
[data-stagger] > [data-animate]:nth-child(5) { transition-delay: 0.40s; }
[data-stagger] > [data-animate]:nth-child(6) { transition-delay: 0.50s; }
[data-stagger] > [data-animate]:nth-child(7) { transition-delay: 0.60s; }
[data-stagger] > [data-animate]:nth-child(8) { transition-delay: 0.70s; }

/* -----------------------------------------------------------------
   3. TIMELINE — points qui s'allument séquentiellement
   ----------------------------------------------------------------- */
.timeline-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-enter) var(--ease-smooth),
              transform var(--duration-enter) var(--ease-smooth);
}
.timeline-item::before {
  transform: scale(0);
  transition: transform 0.45s var(--ease-smooth) 0.12s;
}
.timeline-item.visible {
  opacity: 1;
  transform: translateY(0);
}
.timeline-item.visible::before { transform: scale(1); }

/* -----------------------------------------------------------------
   4. HERO — apparition douce au chargement
   ----------------------------------------------------------------- */
.hero [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  animation: heroIn 0.9s var(--ease-smooth) forwards;
}
.hero [data-reveal="1"] { animation-delay: 0.10s; }
.hero [data-reveal="2"] { animation-delay: 0.24s; }
.hero [data-reveal="3"] { animation-delay: 0.38s; }
.hero [data-reveal="4"] { animation-delay: 0.52s; }
.hero [data-reveal="5"] { animation-delay: 0.66s; }

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Photo du hero : léger float continu */
.hero-photo {
  animation: floatY 7s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* -----------------------------------------------------------------
   5. SCROLL CUE — flèche qui rebondit en boucle
   ----------------------------------------------------------------- */
.scroll-cue svg { animation: bounceArrow 2s var(--ease-smooth) infinite; }
@keyframes bounceArrow {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(7px); }
  60% { transform: translateY(4px); }
}
.scroll-cue { animation: cueFade 2.5s ease-in-out infinite; }
@keyframes cueFade {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.85; }
}

/* -----------------------------------------------------------------
   6. ROUE MO2I — 5 étapes (rotation lente + pulsation au survol)
   ----------------------------------------------------------------- */
.mo2i-wheel { position: relative; }
.mo2i-wheel .wheel-ring {
  animation: spinSlow 60s linear infinite;
  transform-origin: center;
}
@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

/* Bandeau défilant */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.mo2i-step {
  transition: transform var(--duration-micro) var(--ease-smooth),
              background var(--duration-micro) ease,
              color var(--duration-micro) ease,
              box-shadow var(--duration-micro) ease;
}
.mo2i-step:hover,
.mo2i-step.active {
  transform: scale(1.06);
  background: var(--c-primary);
  color: var(--cream);
  box-shadow: 0 12px 30px var(--c-tint);
}
/* Halo pulsant au centre */
.mo2i-core { animation: pulseCore 4s ease-in-out infinite; }
@keyframes pulseCore {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.04); opacity: 0.92; }
}

/* -----------------------------------------------------------------
   7. MICRO-INTERACTIONS diverses
   ----------------------------------------------------------------- */
/* Petit soleil de l'ornement : rotation lente continue */
.ornament img { animation: spinSlow 38s linear infinite; transform-origin: center; }

/* Cartes accompagnement : léger soulèvement au survol */
.service { transition: transform 0.4s var(--ease-smooth); }
.service:hover { transform: translateY(-4px); }

/* Pastille/point décoratif qui respire */
.breathe { animation: breathe 5s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* Soulignement animé sous un mot-clé (à la demande) */
.underline-grow {
  background-image: linear-gradient(var(--c-primary), var(--c-primary));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 8px;
  transition: background-size 0.6s var(--ease-smooth);
}
.underline-grow.visible { background-size: 100% 8px; }

/* Apparition du mega-menu (déjà gérée en hover dans style.css ;
   ici on garantit un easing cohérent) */
.mega { transition-timing-function: var(--ease-smooth); }

/* -----------------------------------------------------------------
   8. ACCESSIBILITÉ — respect de prefers-reduced-motion
   ----------------------------------------------------------------- */
@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;
  }
  [data-animate],
  .timeline-item {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-photo,
  .scroll-cue,
  .scroll-cue svg,
  .mo2i-wheel .wheel-ring,
  .mo2i-core,
  .breathe { animation: none !important; }
}