/* ===== Mascot Shared Styles ===== */

.mascot-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
}

.mascot-snail,
.mascot-eagle,
.mascot-lion {
  transition: transform 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Hide sparkles by default */
.snail-sparkles,
.eagle-sparkles,
.lion-sparkles {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* ===== SNAIL ANIMATIONS ===== */

.mascot-snail.mascot-animate-happy {
  animation: snailBob 3s ease-in-out infinite;
}

@keyframes snailBob {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-3px) translateX(2px); }
}

.mascot-snail.mascot-animate-happy .snail-stalk-left {
  animation: stalkWiggleLeft 2s ease-in-out infinite;
  transform-origin: 15px 52px;
}

.mascot-snail.mascot-animate-happy .snail-stalk-right {
  animation: stalkWiggleRight 2s ease-in-out infinite 0.3s;
  transform-origin: 28px 52px;
}

@keyframes stalkWiggleLeft {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-8deg); }
}

@keyframes stalkWiggleRight {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
}

.mascot-snail.mascot-animate-encouraging {
  animation: snailEncourage 1.5s ease-in-out infinite;
}

@keyframes snailEncourage {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.02) rotate(-2deg); }
  75% { transform: scale(1.02) rotate(2deg); }
}

.mascot-snail.mascot-animate-celebrating .snail-sparkles {
  opacity: 1;
}

.mascot-snail.mascot-animate-celebrating {
  animation: snailCelebrate 0.8s ease-in-out infinite;
}

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

.mascot-snail.mascot-animate-thinking {
  animation: snailThink 4s ease-in-out infinite;
}

@keyframes snailThink {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-5px); }
}

.mascot-snail.mascot-animate-exercising {
  animation: snailExercise 2s ease-in-out infinite;
}

@keyframes snailExercise {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

.mascot-snail.mascot-animate-exercising .snail-shell {
  animation: shellBounce 1s ease-in-out infinite;
}

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

.mascot-snail.mascot-animate-proud {
  animation: snailProud 3s ease-in-out infinite;
}

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

.mascot-snail.mascot-animate-sleepy {
  animation: snailSleepy 4s ease-in-out infinite;
}

@keyframes snailSleepy {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(3px) rotate(-2deg); }
}

/* ===== EAGLE ANIMATIONS ===== */

.mascot-eagle.mascot-animate-happy {
  animation: eagleHover 2s ease-in-out infinite;
}

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

.mascot-eagle.mascot-animate-happy .eagle-wing-left,
.mascot-eagle.mascot-animate-happy .eagle-wing-right {
  animation: wingFlap 1s ease-in-out infinite;
  transform-origin: center bottom;
}

.mascot-eagle.mascot-animate-happy .eagle-wing-right {
  animation-delay: 0.1s;
}

@keyframes wingFlap {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-5deg) translateY(-3px); }
}

.mascot-eagle.mascot-animate-encouraging {
  animation: eagleEncourage 1.2s ease-in-out infinite;
}

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

.mascot-eagle.mascot-animate-encouraging .eagle-wing-left {
  animation: wingPumpLeft 0.6s ease-in-out infinite;
  transform-origin: 40px 70px;
}

.mascot-eagle.mascot-animate-encouraging .eagle-wing-right {
  animation: wingPumpRight 0.6s ease-in-out infinite;
  transform-origin: 80px 70px;
}

@keyframes wingPumpLeft {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-15deg); }
}

@keyframes wingPumpRight {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(15deg); }
}

.mascot-eagle.mascot-animate-celebrating .eagle-sparkles {
  opacity: 1;
}

.mascot-eagle.mascot-animate-celebrating {
  animation: eagleCelebrate 0.5s ease-out, eagleCelebrateFloat 0.6s ease-in-out 0.5s infinite;
}

@keyframes eagleCelebrate {
  0% { transform: scale(0.9) translateY(10px); }
  50% { transform: scale(1.1) translateY(-10px); }
  100% { transform: scale(1) translateY(0); }
}

@keyframes eagleCelebrateFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

.mascot-eagle.mascot-animate-thinking {
  animation: eagleThink 3s ease-in-out infinite;
}

@keyframes eagleThink {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(5deg); }
  70% { transform: rotate(-5deg); }
}

.mascot-eagle.mascot-animate-exercising {
  animation: eagleExercise 0.6s ease-in-out infinite;
}

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

.mascot-eagle.mascot-animate-exercising .eagle-wing-left,
.mascot-eagle.mascot-animate-exercising .eagle-wing-right {
  animation: wingPower 0.3s ease-in-out infinite;
}

@keyframes wingPower {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-20deg); }
}

.mascot-eagle.mascot-animate-proud {
  animation: eagleProud 2.5s ease-in-out infinite;
}

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

.mascot-eagle.mascot-animate-sleepy {
  animation: eagleSleepy 4s ease-in-out infinite;
}

@keyframes eagleSleepy {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(5px); }
}

/* ===== LION ANIMATIONS ===== */

.mascot-lion.mascot-animate-happy {
  animation: lionBounce 2s ease-in-out infinite;
}

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

.mascot-lion.mascot-animate-happy .lion-tail {
  animation: tailWag 0.8s ease-in-out infinite;
  transform-origin: 88px 110px;
}

@keyframes tailWag {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(15deg); }
}

.mascot-lion.mascot-animate-encouraging {
  animation: lionEncourage 1s ease-in-out infinite;
}

@keyframes lionEncourage {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.03) rotate(-2deg); }
  75% { transform: scale(1.03) rotate(2deg); }
}

.mascot-lion.mascot-animate-encouraging .lion-mane circle {
  animation: manePulse 0.5s ease-in-out infinite;
}

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

.mascot-lion.mascot-animate-celebrating .lion-sparkles {
  opacity: 1;
}

.mascot-lion.mascot-animate-celebrating {
  animation: lionCelebrate 0.6s ease-out, lionCelebrateWiggle 0.4s ease-in-out 0.6s infinite;
}

@keyframes lionCelebrate {
  0% { transform: scale(0.85) rotate(-5deg); }
  50% { transform: scale(1.12) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes lionCelebrateWiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

.mascot-lion.mascot-animate-thinking {
  animation: lionThink 3.5s ease-in-out infinite;
}

@keyframes lionThink {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(4px); }
  70% { transform: translateX(-4px); }
}

.mascot-lion.mascot-animate-exercising {
  animation: lionExercise 0.7s ease-in-out infinite;
}

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

.mascot-lion.mascot-animate-exercising .lion-mane circle {
  animation: maneShake 0.35s ease-in-out infinite;
}

@keyframes maneShake {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(1px, -1px); }
}

.mascot-lion.mascot-animate-proud {
  animation: lionProud 2.5s ease-in-out infinite;
}

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

.mascot-lion.mascot-animate-proud .lion-mane {
  animation: manePuff 2.5s ease-in-out infinite;
}

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

.mascot-lion.mascot-animate-sleepy {
  animation: lionSleepy 4s ease-in-out infinite;
}

@keyframes lionSleepy {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(5px); }
}

/* ===== SPEECH BUBBLE ===== */
.mascot-speech-bubble {
  background: var(--bg-card, #1f3640);
  border-radius: 16px;
  padding: 10px 16px;
  font-size: 0.875rem;
  color: var(--text-primary, #ffffff);
  position: relative;
  max-width: 180px;
  text-align: center;
  border: 2px solid var(--bg-elevated, #253d49);
  animation: speechIn 0.3s ease-out;
  line-height: 1.4;
}

.mascot-speech-tail {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--bg-card, #1f3640);
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .mascot-snail,
  .mascot-eagle,
  .mascot-lion,
  .mascot-snail *,
  .mascot-eagle *,
  .mascot-lion *,
  .mascot-speech-bubble {
    animation: none !important;
    transition: none !important;
  }
}