/* ─────────────────────────────────────────────
   HUNGRY CHAMELEONS — Animations
   ───────────────────────────────────────────── */

/* ── Floating / bobbing ── */
@keyframes float {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-12px); }
}

/* ── Neon pulse (for glow elements) ── */
@keyframes neon-pulse {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50%       { opacity: 0.85; filter: brightness(1.3); }
}

/* ── Glow pulse (radial) ── */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1);    }
  50%       { opacity: 1;   transform: scale(1.15); }
}

/* ── Grid scroll (background grid moves toward viewer) ── */
@keyframes grid-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 60px; }
}
#bg-grid { animation: grid-scroll 2s linear infinite; }

/* ── Stars twinkle ── */
@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 1; }
}
.star {
  position: absolute; border-radius: 50%;
  background: var(--white);
  animation: twinkle var(--d, 3s) ease-in-out var(--delay, 0s) infinite;
}

/* ── Toast in/out ── */
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* ── Hacker chameleon pulse ── */
@keyframes hacker-pulse {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50%       { transform: scale(1.05) rotate(3deg); }
}

/* ── Particle burst (completion) ── */
@keyframes particle-burst {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx,0), var(--ty,-80px)) scale(0); opacity: 0; }
}

/* ── Leaderboard row transitions ── */
@keyframes rank-up {
  0%   { background: rgba(57, 255, 20, 0.3); }
  100% { background: transparent; }
}
@keyframes rank-down {
  0%   { background: rgba(255, 0, 80, 0.3); }
  100% { background: transparent; }
}
.lb-row-rising  { animation: rank-up   0.8s ease forwards; }
.lb-row-falling { animation: rank-down 0.8s ease forwards; }

/* ── Explosion emoji animation ── */
@keyframes explosion {
  0%   { transform: scale(0); opacity: 1; }
  60%  { transform: scale(1.5); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}
.rank-explosion {
  position: absolute; font-size: 1.5rem; pointer-events: none;
  animation: explosion 0.6s ease-out forwards;
}

/* ── Flame rise animation ── */
@keyframes flame-rise {
  0%   { transform: translateY(8px); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateY(-8px); opacity: 0; }
}
.rank-flame {
  position: absolute; font-size: 1rem; pointer-events: none;
  animation: flame-rise 0.6s ease-out forwards;
}

/* ── Activity card hover ── */
@keyframes card-glow-in {
  from { box-shadow: 0 0 0 rgba(74,176,255,0); }
  to   { box-shadow: 0 0 20px rgba(74,176,255,0.5), 0 0 40px rgba(74,176,255,0.2); }
}

/* ── Bug caught ── */
@keyframes bug-caught {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; }
  50%  { transform: scale(1.4) rotate(180deg); }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}
.bug-caught { animation: bug-caught 0.4s ease forwards; }

/* ── Butterfly caught (wrong!) ── */
@keyframes butterfly-wrong {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-10px); }
  75%       { transform: translateX(10px); }
}
.butterfly-wrong { animation: butterfly-wrong 0.3s ease 2; }

/* ── Drag and drop snap ── */
@keyframes snap-into-place {
  0%   { transform: scale(1.1); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.snap-into-place { animation: snap-into-place 0.3s ease forwards; }

/* ── Correct answer flash ── */
@keyframes correct-flash {
  0%, 100% { background: transparent; }
  50%       { background: rgba(57,255,20,0.2); }
}
.correct-flash { animation: correct-flash 0.4s ease; }

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

/* ── Progress bar heat transition ── */
.progress-fill[data-heat="warm"] {
  background: linear-gradient(90deg, var(--blue), #7B61FF) !important;
  box-shadow: 0 0 10px #7B61FF !important;
}
.progress-fill[data-heat="hot"] {
  background: linear-gradient(90deg, #7B61FF, var(--pink)) !important;
  box-shadow: 0 0 10px var(--pink) !important;
}
.progress-fill[data-heat="fire"] {
  background: linear-gradient(90deg, var(--pink), #FF6B00) !important;
  box-shadow: 0 0 14px #FF6B00 !important;
}

/* ── Button click ripple ── */
@keyframes ripple {
  from { transform: scale(0); opacity: 0.4; }
  to   { transform: scale(4); opacity: 0; }
}
.btn-ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  width: 40px; height: 40px; margin: -20px;
  pointer-events: none;
  animation: ripple 0.5s ease-out forwards;
}

/* ── Hub activity card shimmer ── */
@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}
.activity-card-shimmer {
  background: linear-gradient(90deg, transparent, rgba(74,176,255,0.15), transparent);
  background-size: 200%;
  animation: shimmer 1.5s ease infinite;
}

/* ── View transition ── */
.view-exit {
  animation: view-exit 0.3s ease forwards;
}
@keyframes view-exit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}