/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS — All @keyframes + Motion System
   ═══════════════════════════════════════════════════════════════ */

/* ── Core Animations ── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes textShimmer {
  to { background-position: 200% center; }
}

@keyframes orbFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -60px) scale(1.05); }
  100% { transform: translate(-20px, 40px) scale(0.95); }
}

/* ── Hero Card Floats ── */
@keyframes heroFloat1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}
@keyframes heroFloat2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
@keyframes heroFloat3 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ── Scroll Bounce ── */
@keyframes scrollBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
  40% { transform: translateY(-15px) translateX(-50%); }
  60% { transform: translateY(-8px) translateX(-50%); }
}

/* ── Marquee ── */
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Step Visuals ── */
@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes bounceMap {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-15px) scale(1.05); }
}

@keyframes growCoins {
  0% { height: 12px; }
  50% { height: 48px; background: var(--gold); }
  100% { height: 12px; }
}

@keyframes travelDot {
  0% { left: 0; opacity: 0; transform: scale(0.5); }
  20% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { left: 100%; opacity: 0; transform: scale(0.5); }
}

/* ── Progress Bar ── */
@keyframes progressGrow {
  from { width: 0; }
  to { width: 65%; }
}

/* ── Pin Pulse ── */
@keyframes pinPulse {
  0% { transform: scale(0.8); opacity: 1; filter: hue-rotate(0deg); }
  100% { transform: scale(1.8); opacity: 0; filter: hue-rotate(45deg); }
}

/* ── Shimmer Loading ── */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Glow Pulse ── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(0,209,178,0.4); opacity: 0.8; }
  50% { box-shadow: 0 0 25px rgba(0,209,178,0.8); opacity: 1; }
}

/* ── Counter Tick ── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Bounce ── */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ── Spin ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Accessibility: Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none !important; }
  .orb { animation: none !important; }
  .hero-card { animation: none !important; }
}