/* ═══════════════════════════════════════
   MICRO-ANIMATIONS
═══════════════════════════════════════ */
@keyframes popIn {
  0%   { transform: scale(0.75); opacity: 0; }
  65%  { transform: scale(1.12); }
  100% { transform: scale(1);    opacity: 1; }
}

@keyframes bounceUp {
  0%, 100% { transform: translateY(0); }
  35%       { transform: translateY(-14px); }
  65%       { transform: translateY(-6px); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25%       { transform: rotate(-8deg) scale(1.05); }
  75%       { transform: rotate(8deg) scale(1.05); }
}

/* ── Skeleton loading pulse ── */
@keyframes skeletonPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}
.skeleton-pulse {
  background: linear-gradient(90deg, var(--border) 25%, var(--surface2) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: 10px;
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Correct answer arena flash ── */
@keyframes flashCorrect {
  0%   { opacity: 0; }
  25%  { opacity: 0.18; }
  100% { opacity: 0; }
}
.arena-flash-correct {
  position: fixed;
  inset: 0;
  background: #4ade80;
  pointer-events: none;
  z-index: 7900;
  animation: flashCorrect 0.4s ease-out forwards;
}

/* ── Wrong answer shake ── */
@keyframes shakeIt {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}
.shake { animation: shakeIt 0.42s ease both; }

/* ── Spring tap bounce (enhanced) ── */
@keyframes springTap {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.88); }
  65%  { transform: scale(1.08); }
  85%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* ── Nav tab tap feedback ── */
.nav-item:active .nav-icon { transform: scale(0.85); }

/* ── Home stat cards ── */
.stat-card { animation: popIn 0.4s var(--spring) both; }
.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.2s; }

.app {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding-top: var(--top-h);
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  scroll-padding-top: var(--top-h);
}

/* ═══════════════════════════════════════
   PHASE 1 — SECTION TRANSITIONS
═══════════════════════════════════════ */
@keyframes secOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-10px) scale(0.98); }
}
.section.sec-leaving {
  display: block !important;
  animation: secOut 0.18s ease forwards;
  pointer-events: none;
}