/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,179,0,.35); }
  50% { box-shadow: 0 0 0 6px rgba(255,179,0,0); }
}

@keyframes spinIn {
  from { opacity: 0; transform: scale(.9) rotate(-4deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }
  .reveal-stagger > *.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-inner, .hero-stats {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   World map dot pulse for highlighted countries
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .map-country {
    animation: pulseDot 3s ease-in-out infinite;
  }
}