/**
 * Dope Economics — Animations
 */

/* ============================
   CARD ANIMATIONS
   ============================ */
.card {
  animation: cardFadeIn 0.3s ease both;
}

.cards-grid .card:nth-child(1) { animation-delay: 0.02s; }
.cards-grid .card:nth-child(2) { animation-delay: 0.04s; }
.cards-grid .card:nth-child(3) { animation-delay: 0.06s; }
.cards-grid .card:nth-child(4) { animation-delay: 0.08s; }
.cards-grid .card:nth-child(5) { animation-delay: 0.10s; }
.cards-grid .card:nth-child(6) { animation-delay: 0.12s; }
.cards-grid .card:nth-child(7) { animation-delay: 0.14s; }
.cards-grid .card:nth-child(8) { animation-delay: 0.16s; }
.cards-grid .card:nth-child(9) { animation-delay: 0.18s; }
.cards-grid .card:nth-child(10) { animation-delay: 0.20s; }
.cards-grid .card:nth-child(11) { animation-delay: 0.22s; }
.cards-grid .card:nth-child(12) { animation-delay: 0.24s; }

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Active card pulse */
.card--active {
  animation: activePulse 2s ease-in-out infinite;
}

@keyframes activePulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(0,255,136,0.12), inset 0 0 15px rgba(0,255,136,0.04);
  }
  50% {
    box-shadow: 0 0 25px rgba(0,255,136,0.2), inset 0 0 20px rgba(0,255,136,0.06);
  }
}


/* ============================
   CONTEXT PANEL
   ============================ */
.context-show {
  animation: slideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* ============================
   MODAL ANIMATIONS
   ============================ */
.modal-overlay {
  animation: fadeIn 0.3s ease;
}

.modal-content {
  animation: modalIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ============================
   HEADER GLOW
   ============================ */
.header-title {
  animation: headerGlow 3s ease-in-out infinite alternate;
}

@keyframes headerGlow {
  0% {
    text-shadow: 0 0 12px rgba(0,255,136,0.3);
  }
  100% {
    text-shadow: 0 0 20px rgba(0,255,136,0.5), 0 0 40px rgba(0,255,136,0.15);
  }
}

/* ============================
   BUTTON HOVER
   ============================ */
.btn-neon--green {
  animation: btnGlow 2.5s ease-in-out infinite alternate;
}

@keyframes btnGlow {
  0% {
    box-shadow: 0 0 20px rgba(0,255,136,0.15);
  }
  100% {
    box-shadow: 0 0 30px rgba(0,255,136,0.25), 0 0 60px rgba(0,255,136,0.08);
  }
}

/* ============================
   SHAKE (for invalid input)
   ============================ */
.shake {
  animation: inputShake 0.5s ease;
}

@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ============================
   PAGE TRANSITION
   ============================ */
.page.active {
  animation: pageIn 0.25s ease;
}

@keyframes pageIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================
   NAV ACTIVE DOT
   ============================ */
.nav-btn.active .nav-label {
  position: relative;
}

.nav-btn.active .nav-label::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--neon-green);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--neon-green-glow);
}

/* ============================
   REDUCED MOTION
   ============================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}