/* ============================================================
   STUDYQUEST — ANIMATIONS & KEYFRAMES
   Particles, Glow, Level-Up, Gaming Effects
   ============================================================ */

/* ── Core Keyframes ── */
@keyframes shimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}

@keyframes spinRing {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spinRays {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(0.95); }
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 10px rgba(0,212,255,0.3); }
  50%       { box-shadow: 0 0 30px rgba(0,212,255,0.6), 0 0 60px rgba(0,212,255,0.2); }
}

@keyframes glowPurple {
  0%, 100% { box-shadow: 0 0 10px rgba(124,58,237,0.3); }
  50%       { box-shadow: 0 0 30px rgba(124,58,237,0.6), 0 0 60px rgba(124,58,237,0.2); }
}

@keyframes glowGold {
  0%, 100% { box-shadow: 0 0 10px rgba(255,215,0,0.3); }
  50%       { box-shadow: 0 0 30px rgba(255,215,0,0.6), 0 0 60px rgba(255,215,0,0.2); }
}

@keyframes xpPopIn {
  0%   { opacity: 0; transform: translateY(20px) scale(0.8); }
  60%  { transform: translateY(-4px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes xpPopOut {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-30px) scale(0.8); }
}

@keyframes levelUpBounce {
  0%   { opacity: 0; transform: scale(0.5) rotate(-5deg); }
  60%  { transform: scale(1.05) rotate(2deg); }
  80%  { transform: scale(0.98) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

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

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

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

@keyframes comboPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

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

@keyframes correctBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.08); }
  60%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

@keyframes musicBar {
  0%, 100% { height: 8px; }
  50%       { height: 40px; }
}

@keyframes particleFloat {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-100px) translateX(var(--dx, 20px)) rotate(360deg); opacity: 0; }
}

@keyframes starBurst {
  0%   { transform: scale(0) rotate(0deg); opacity: 1; }
  50%  { transform: scale(1.5) rotate(180deg); opacity: 0.8; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes progressFill {
  from { width: 0%; }
  to   { width: var(--target-width, 100%); }
}

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

@keyframes hpDrain {
  0%   { transform: scaleX(1); }
  50%  { transform: scaleX(0.98); filter: brightness(1.3); }
  100% { transform: scaleX(1); }
}

@keyframes bossShake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%       { transform: translateX(-6px) rotate(-2deg); }
  75%       { transform: translateX(6px) rotate(2deg); }
}

@keyframes attackSlash {
  0%   { transform: translateX(-20px) rotate(-15deg); opacity: 0; }
  50%  { transform: translateX(0) rotate(0deg); opacity: 1; }
  100% { transform: translateX(20px) rotate(15deg); opacity: 0; }
}

@keyframes damageFloat {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-60px) scale(1.3); opacity: 0; }
}

@keyframes streakFire {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  25%       { transform: scaleY(1.1) scaleX(0.95); }
  75%       { transform: scaleY(0.95) scaleX(1.05); }
}

@keyframes badgeReveal {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(10deg); opacity: 1; }
  80%  { transform: scale(0.95) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes sparkle {
  0%   { transform: scale(0) rotate(0deg); opacity: 0; }
  50%  { transform: scale(1) rotate(180deg); opacity: 1; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.4; }
}

@keyframes slideInLeft {
  from { transform: translateX(-30px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(30px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

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

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

@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes orbitDot {
  from { transform: rotate(0deg) translateX(40px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
}

/* ── Applied Animation Classes ── */

/* Entrance animations with stagger */
.animate-in {
  animation: cardEntrance 0.4s ease both;
}

.animate-in:nth-child(1) { animation-delay: 0.05s; }
.animate-in:nth-child(2) { animation-delay: 0.10s; }
.animate-in:nth-child(3) { animation-delay: 0.15s; }
.animate-in:nth-child(4) { animation-delay: 0.20s; }
.animate-in:nth-child(5) { animation-delay: 0.25s; }
.animate-in:nth-child(6) { animation-delay: 0.30s; }
.animate-in:nth-child(7) { animation-delay: 0.35s; }
.animate-in:nth-child(8) { animation-delay: 0.40s; }

/* Floating elements */
.float-anim { animation: float 3s ease-in-out infinite; }
.float-anim-slow { animation: float 5s ease-in-out infinite; }
.float-anim-fast { animation: float 2s ease-in-out infinite; }

/* Glow effects */
.glow-blue   { animation: glow 2s ease-in-out infinite; }
.glow-purple { animation: glowPurple 2s ease-in-out infinite; }
.glow-gold   { animation: glowGold 2s ease-in-out infinite; }

/* Pulse */
.pulse-anim { animation: pulse 2s ease-in-out infinite; }

/* Streak fire */
.streak-fire { animation: streakFire 0.5s ease-in-out infinite; }

/* Gradient animated background */
.gradient-animated {
  background: linear-gradient(270deg, #7c3aed, #00d4ff, #f72585, #7c3aed);
  background-size: 400% 400%;
  animation: gradientShift 6s ease infinite;
}

/* Shake on wrong answer */
.shake { animation: shake 0.4s ease; }

/* Correct answer bounce */
.correct-bounce { animation: correctBounce 0.4s ease; }

/* Boss shake */
.boss-hit { animation: bossShake 0.3s ease; }

/* Typewriter effect */
.typewriter-text {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--neon-blue);
  animation: typewriter 2s steps(40) forwards, blink 0.7s step-end infinite;
}

/* ── Particle System ── */
.particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  animation: particleFloat 1s ease-out forwards;
}

/* ── Confetti ── */
.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 9999;
  animation: confettiFall 2s ease-in forwards;
}

/* ── Damage Numbers ── */
.damage-number {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  animation: damageFloat 1s ease-out forwards;
}

.damage-number.correct { color: var(--neon-green); }
.damage-number.wrong   { color: var(--neon-pink); }
.damage-number.xp      { color: var(--neon-gold); }

/* ── Ripple Effect ── */
.ripple-container { position: relative; overflow: hidden; }

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

/* ── Loading Spinner ── */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-subtle);
  border-top-color: var(--neon-blue);
  border-radius: 50%;
  animation: spinRing 0.8s linear infinite;
}

/* ── Progress Bar Animated Fill ── */
.progress-animated .xp-fill-large,
.progress-animated .subject-progress-fill,
.progress-animated .chapter-bar-fill {
  animation: progressFill 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Card Hover Glow ── */
.subject-card:hover .subject-icon-wrap {
  animation: glow 1.5s ease-in-out infinite;
}

/* ── Boss Arena Animations ── */
.boss-emoji {
  font-size: 80px;
  display: block;
  margin: var(--space-lg) auto;
  animation: float 2s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(247,37,133,0.5));
}

.boss-emoji.hit { animation: bossShake 0.3s ease; }

/* ── Step Transition ── */
.step-content-enter {
  animation: slideInRight 0.3s ease;
}

.step-content-exit {
  animation: slideInLeft 0.3s ease reverse;
}

/* ── Streak Counter ── */
.streak-number {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  color: var(--neon-orange);
  text-shadow: 0 0 20px rgba(255,107,43,0.5);
  animation: streakFire 0.5s ease-in-out infinite;
}

/* ── XP Bar Fill Animation ── */
.xp-fill-animate {
  transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ── Neon Text ── */
.neon-text-blue {
  color: var(--neon-blue);
  text-shadow: 0 0 10px rgba(0,212,255,0.5), 0 0 20px rgba(0,212,255,0.3);
}

.neon-text-purple {
  color: #a78bfa;
  text-shadow: 0 0 10px rgba(124,58,237,0.5), 0 0 20px rgba(124,58,237,0.3);
}

.neon-text-gold {
  color: var(--neon-gold);
  text-shadow: 0 0 10px rgba(255,215,0,0.5), 0 0 20px rgba(255,215,0,0.3);
}

/* ── Orbit Animation ── */
.orbit-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-blue);
  animation: orbitDot 3s linear infinite;
  top: 50%;
  left: 50%;
  margin: -4px;
}

/* ── Hover Lift ── */
.hover-lift {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

/* ── Stagger Children ── */
.stagger-children > * {
  animation: slideInUp 0.4s ease both;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.10s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.20s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.30s; }

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