/* =========================================================
   MATHQUEST - ANIMATIONS & VISUAL JUICE
   ========================================================= */

/* Floating Coin Rise & Fade */
@keyframes floatUpCoin {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.6);
  }
  20% {
    opacity: 1;
    transform: translateY(-20px) scale(1.3);
  }
  70% {
    opacity: 1;
    transform: translateY(-70px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(-110px) scale(0.8);
  }
}

/* Coin Wobble in HUD */
@keyframes coinBob {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-4px) rotate(12deg) scale(1.1);
  }
}

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

@keyframes blink {
  50% { opacity: 0; }
}

/* Correct Answer Bounce celebration on math card */
.celebrate-bounce {
  animation: celebrate 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes celebrate {
  0% { transform: scale(1); }
  35% { transform: scale(1.08) rotate(1.5deg); }
  65% { transform: scale(0.97) rotate(-1.5deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Gentle wiggle on incorrect answer */
.gentle-wiggle {
  animation: wiggle 0.5s ease-in-out;
}

@keyframes wiggle {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px) rotate(-1.5deg); }
  40% { transform: translateX(10px) rotate(1.5deg); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

/* Streak meter fiery burst */
.streak-burst {
  animation: streakPop 0.5s ease-out;
}

@keyframes streakPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.35) rotate(5deg); }
  100% { transform: scale(1); }
}

/* =========================================================
   PET COMPANION ANIMATIONS & MOODS
   ========================================================= */

.pet-idle {
  animation: petBreathe 3.5s ease-in-out infinite alternate;
}

@keyframes petBreathe {
  0% { transform: translateY(0px) rotate(-1deg) scale(1); }
  50% { transform: translateY(-8px) rotate(1deg) scale(1.03); }
  100% { transform: translateY(0px) rotate(-1deg) scale(1); }
}

.pet-cheer {
  animation: petVictoryDance 0.85s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

@keyframes petVictoryDance {
  0% { transform: translateY(0) scale(1) rotate(0deg); }
  25% { transform: translateY(-36px) scale(1.25) rotate(-12deg); }
  50% { transform: translateY(-48px) scale(1.3) rotate(360deg); }
  75% { transform: translateY(-16px) scale(1.1) rotate(365deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

.pet-encourage {
  animation: petThoughtfulTilt 0.8s ease-in-out !important;
}

@keyframes petThoughtfulTilt {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-15deg) scale(0.95) translateY(4px); }
  50% { transform: rotate(15deg) scale(1.02) translateY(-4px); }
  75% { transform: rotate(-8deg) scale(0.98); }
  100% { transform: rotate(0deg) scale(1); }
}

.pet-petted {
  animation: petHeartPop 0.5s ease-out !important;
}

@keyframes petHeartPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.3) rotate(-5deg); }
  70% { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Hat bobbing on pet */
.pet-hat-layer {
  position: absolute;
  top: -24px;
  right: -4px;
  font-size: 2.2rem;
  z-index: 10;
  pointer-events: none;
  animation: hatWobble 3.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.2));
}

@keyframes hatWobble {
  0% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-2px); }
  100% { transform: rotate(-4deg) translateY(0); }
}

/* Aura Ring Effects for High Streaks */
.streak-aura {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.streak-aura.active-flame {
  opacity: 1;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.45) 0%, rgba(234, 88, 12, 0) 75%);
  animation: auraGlow 1.8s infinite alternate;
}

.streak-aura.active-supernova {
  opacity: 1;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.6) 0%, rgba(236, 72, 153, 0.3) 50%, rgba(0,0,0,0) 80%);
  animation: auraSpin 4s linear infinite;
}

@keyframes auraGlow {
  0% { transform: scale(0.95); opacity: 0.5; }
  100% { transform: scale(1.2); opacity: 0.9; }
}

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

/* =========================================================
   MARIO OVERWORLD MAP ANIMATIONS
   ========================================================= */

/* Mario-style Pet Hop along path */
.pet-map-hop {
  animation: marioHop 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes marioHop {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-28px) scale(1.2) rotate(6deg); }
}

/* Node pulse ring for active unlocked level */
@keyframes nodePulseGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 14px rgba(245, 158, 11, 0);
  }
}

/* Animated dotted trail lines */
@keyframes trailFlow {
  to {
    stroke-dashoffset: -40;
  }
}

/* =========================================================
   WORLD THEME AMBIENT ELEMENT ANIMATIONS
   ========================================================= */

@keyframes floatBubble {
  0% { transform: translateY(105vh) translateX(0) scale(0.8); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.7; }
  100% { transform: translateY(-10vh) translateX(30px) scale(1.2); opacity: 0; }
}

@keyframes twinkleStar {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 0.95; transform: scale(1.3) rotate(45deg); }
}

@keyframes floatCandy {
  0% { transform: translateY(105vh) rotate(0deg); opacity: 0; }
  15% { opacity: 0.6; }
  85% { opacity: 0.6; }
  100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}

@keyframes floatLeaf {
  0% { transform: translateY(-5vh) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.65; }
  50% { transform: translateY(50vh) translateX(40px) rotate(180deg); }
  90% { opacity: 0.65; }
  100% { transform: translateY(105vh) translateX(-20px) rotate(360deg); opacity: 0; }
}

/* =========================================================
   FULL-BODY PET CHARACTER RIG ANIMATIONS
   ========================================================= */

.pet-fullbody-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pet-character-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Tail animations */
.tail-wag {
  transform-origin: 190px 220px;
  animation: petTailWag 0.6s ease-in-out infinite alternate;
}

@keyframes petTailWag {
  0% { transform: rotate(-12deg); }
  100% { transform: rotate(18deg); }
}

.tail-swish {
  transform-origin: 190px 220px;
  animation: petTailSwish 1.4s ease-in-out infinite alternate;
}

@keyframes petTailSwish {
  0% { transform: rotate(-8deg); }
  100% { transform: rotate(14deg); }
}

/* Flippers / Ears */
.pet-flipper-left {
  transform-origin: 90px 180px;
  animation: flipperFlapLeft 1.2s ease-in-out infinite alternate;
}
.pet-flipper-right {
  transform-origin: 210px 180px;
  animation: flipperFlapRight 1.2s ease-in-out infinite alternate;
}

@keyframes flipperFlapLeft {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-18deg); }
}
@keyframes flipperFlapRight {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(18deg); }
}

.pet-ear-left {
  transform-origin: 110px 80px;
  animation: earTwitchLeft 3s ease-in-out infinite;
}
.pet-ear-right {
  transform-origin: 190px 80px;
  animation: earTwitchRight 3.2s ease-in-out infinite;
}

@keyframes earTwitchLeft {
  0%, 85%, 100% { transform: rotate(0deg); }
  90% { transform: rotate(-8deg); }
  95% { transform: rotate(4deg); }
}
@keyframes earTwitchRight {
  0%, 85%, 100% { transform: rotate(0deg); }
  90% { transform: rotate(8deg); }
  95% { transform: rotate(-4deg); }
}

/* Character Action States */
.pet-anim-idle {
  animation: petIdleBreath 2.8s ease-in-out infinite alternate;
}

@keyframes petIdleBreath {
  0% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-4px) scale(1.02, 0.98); }
  100% { transform: translateY(0) scale(1, 1); }
}

.pet-anim-bounce {
  animation: petBounceJoy 0.75s cubic-bezier(0.28, 0.84, 0.42, 1);
}

@keyframes petBounceJoy {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  25% { transform: translateY(-24px) scale(0.96, 1.08) rotate(-3deg); }
  50% { transform: translateY(-38px) scale(1.06, 0.94) rotate(4deg); }
  75% { transform: translateY(-10px) scale(0.98, 1.02); }
}

.pet-anim-flip {
  animation: petBackflip 1.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes petBackflip {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  20% { transform: translateY(10px) scale(1.1, 0.9); }
  50% { transform: translateY(-80px) rotate(-180deg) scale(1.15); }
  85% { transform: translateY(-20px) rotate(-360deg) scale(1.05); }
  100% { transform: translateY(0) rotate(-360deg) scale(1); }
}

.pet-anim-dance {
  animation: petDanceWiggle 1.4s ease-in-out infinite;
}

@keyframes petDanceWiggle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-16px) rotate(-8deg) translateY(-8px); }
  50% { transform: translateX(0) rotate(0deg) translateY(-14px); }
  75% { transform: translateX(16px) rotate(8deg) translateY(-8px); }
}

.pet-anim-spin {
  animation: petQuickSpin 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes petQuickSpin {
  0% { transform: rotateY(0deg) scale(1); }
  50% { transform: rotateY(180deg) translateY(-30px) scale(1.15); }
  100% { transform: rotateY(360deg) scale(1); }
}

.pet-anim-hero {
  animation: petHeroPose 1.5s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}

@keyframes petHeroPose {
  0% { transform: translateY(-6px) scale(1.08) rotate(-2deg); }
  100% { transform: translateY(-12px) scale(1.12) rotate(2deg); }
}

.pet-anim-sleep {
  animation: petSleepBreathing 3s ease-in-out infinite alternate;
  filter: brightness(0.95);
}

@keyframes petSleepBreathing {
  0% { transform: translateY(6px) scale(1.02, 0.92); }
  100% { transform: translateY(0px) scale(0.96, 0.98); }
}

/* Playroom Interactive Props Physics */
.playroom-tossed-treat {
  position: absolute;
  bottom: 20px;
  left: 50%;
  font-size: 2.8rem;
  z-index: 30;
  pointer-events: none;
  animation: tossTreatArc 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes tossTreatArc {
  0% { transform: translate(-50%, 40px) scale(0.6) rotate(0deg); opacity: 1; }
  50% { transform: translate(-50%, -160px) scale(1.3) rotate(180deg); opacity: 1; }
  100% { transform: translate(-50%, -110px) scale(0.3) rotate(360deg); opacity: 0; }
}

.playroom-bouncing-toy {
  position: absolute;
  bottom: 30px;
  left: 20%;
  font-size: 2.8rem;
  z-index: 30;
  pointer-events: none;
  animation: bounceToyAcross 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes bounceToyAcross {
  0% { transform: translate(0, 0) scale(0.8) rotate(0deg); opacity: 1; }
  25% { transform: translate(60px, -90px) scale(1.2) rotate(120deg); }
  50% { transform: translate(120px, 0) scale(0.9) rotate(240deg); }
  75% { transform: translate(160px, -50px) scale(1.1) rotate(320deg); }
  100% { transform: translate(200px, 0) scale(0.4) rotate(400deg); opacity: 0; }
}

.playroom-floating-particle {
  position: absolute;
  font-size: 1.8rem;
  z-index: 25;
  pointer-events: none;
}

@keyframes playroomFloatUp {
  0% { transform: translate(0, 0) scale(0.5); opacity: 1; }
  50% { transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(1.3); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.8); opacity: 0; }
}