/**
 * ============================================================
 *  animations.css — KEYFRAMES & EFFETS DE SCROLL
 * ============================================================
 */

/* ---- Reveal générique au scroll (piloté par animations.js) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="left"].is-revealed { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="right"].is-revealed { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="scale"].is-revealed { transform: scale(1); }

/* délais échelonnés pour groupes d'éléments (grilles de cartes) */
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---- Flottement ambiant ---- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

/* ---- Pulsation (points de départ sur la carte) ---- */
@keyframes pulseDot {
  0% { transform: scale(0.9); opacity: 0.9; }
  70% { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ---- Défilement du pointillé de route (dash offset) ---- */
@keyframes dashFlow {
  to { stroke-dashoffset: -400; }
}

/* ---- Cargo se déplaçant le long d'une route ---- */
@keyframes moveAlong {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ---- Grain / respiration du hero ---- */
@keyframes drift {
  0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-120px,-60px,0); }
}

/* ---- Fondu d'entrée pour le chargement de page ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-anim-1 { animation: fadeUp 0.9s var(--ease) 0.05s both; }
.hero-anim-2 { animation: fadeUp 0.9s var(--ease) 0.2s both; }
.hero-anim-3 { animation: fadeUp 0.9s var(--ease) 0.35s both; }
.hero-anim-4 { animation: fadeUp 0.9s var(--ease) 0.5s both; }

/* ---- Compteurs "flip" du panneau de départs ---- */
.stat-cell__value[data-counting]::after {
  content: "";
}

/* ---- Icone flottante décorative ---- */
.floaty { animation: float 5s ease-in-out infinite; }
.floaty-slow { animation: floatSlow 7s ease-in-out infinite; }

/* ---- Marquee (bande défilante des destinations) ---- */
.marquee {
  overflow: hidden;
  border-top: 1px solid rgba(246,242,233,0.1);
  border-bottom: 1px solid rgba(246,242,233,0.1);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 60px;
  padding-block: 18px;
  animation: marqueeScroll 28s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--text-light-60);
  white-space: nowrap;
}
.marquee__item svg { width: 14px; height: 14px; color: var(--amber); }

/* ---- Loader de page ---- */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
#page-loader.is-hidden { opacity: 0; visibility: hidden; }
.loader-mark { width: 56px; height: 56px; animation: pulseLoader 1.1s var(--ease) infinite; }
@keyframes pulseLoader {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.82); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee__track, .floaty, .floaty-slow { animation: none !important; }
}