/**
 * Merkat - Pet SVG Styling and Expressive Animations
 * Keyframe animations for idle breathing, blinking, posture morphs, shivering, and accessory styling.
 */

.merkat-svg {
  width: 100%;
  height: 100%;
  max-width: 320px;
  max-height: 380px;
  overflow: visible;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Idle Breathing */
.pet-body-group {
  transform-origin: 160px 330px;
  animation: breathe 3.6s ease-in-out infinite;
}

.pet-head-group {
  transform-origin: 160px 175px;
  animation: headBob 3.6s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
    transform: scaleY(1.025) scaleX(0.985);
  }
}

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

/* Ear Twitching */
.pet-ear-left {
  transform-origin: 108px 120px;
  animation: twitchLeft 6s ease-in-out infinite;
}

.pet-ear-right {
  transform-origin: 212px 120px;
  animation: twitchRight 7s ease-in-out infinite;
}

@keyframes twitchLeft {
  0%, 92%, 100% { transform: rotate(0deg); }
  94% { transform: rotate(-12deg); }
  96% { transform: rotate(4deg); }
  98% { transform: rotate(-8deg); }
}

@keyframes twitchRight {
  0%, 90%, 100% { transform: rotate(0deg); }
  93% { transform: rotate(14deg); }
  95% { transform: rotate(-5deg); }
  97% { transform: rotate(9deg); }
}

/* Tail Sway */
.pet-tail {
  transform-origin: 215px 300px;
  animation: tailSway 3s ease-in-out infinite;
}

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

/* Posture Morphs */

/* 1. Happy & Bouncy */
.body-bouncy {
  animation: petBounce 0.9s ease-in-out infinite alternate;
}

@keyframes petBounce {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-16px);
  }
}

.body-bouncy .ground-shadow {
  animation: shadowShrink 0.9s ease-in-out infinite alternate;
}

@keyframes shadowShrink {
  0% { transform: scale(1); opacity: 0.18; }
  100% { transform: scale(0.85); opacity: 0.12; }
}

/* 1b. Extremely Happy & Ecstatic */
.body-ecstatic {
  animation: ecstaticBounce 0.55s cubic-bezier(0.28, 0.84, 0.42, 1) infinite alternate;
}

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

.body-ecstatic .ground-shadow {
  animation: ecstaticShadow 0.55s cubic-bezier(0.28, 0.84, 0.42, 1) infinite alternate;
}

@keyframes ecstaticShadow {
  0% { transform: scale(1); opacity: 0.18; }
  100% { transform: scale(0.72); opacity: 0.08; }
}

.body-ecstatic .pet-tail {
  animation: ecstaticTail 0.3s ease-in-out infinite alternate !important;
}

@keyframes ecstaticTail {
  0% { transform: rotate(-5deg); }
  100% { transform: rotate(22deg); }
}

/* 1c. Full & Satisfied (Plump & Contented) */
.body-satisfied .pet-body-group {
  transform: scaleX(1.10) scaleY(1.02);
  transform-origin: 160px 330px;
  animation: satisfiedBreathe 4.5s ease-in-out infinite;
}

@keyframes satisfiedBreathe {
  0%, 100% {
    transform: scaleX(1.10) scaleY(1.02);
  }
  50% {
    transform: scaleX(1.13) scaleY(1.05);
  }
}

.body-satisfied .pet-tail {
  animation: satisfiedTail 4s ease-in-out infinite;
}

@keyframes satisfiedTail {
  0%, 100% { transform: rotate(2deg); }
  50% { transform: rotate(14deg); }
}

/* 2. Deflated (Hungry) */
.body-deflated .pet-body-group {
  transform: scaleX(0.88) scaleY(0.98);
  transition: transform 0.4s ease;
}

/* 3. Drooping & Tired */
.body-droop {
  transform: translateY(10px);
}

.body-droop .pet-head-group {
  transform: translateY(6px) rotate(2deg);
}

/* 4. Puffed & Annoyed / Angry */
.body-puffed .pet-body-group {
  transform: scaleX(1.14) scaleY(1.06);
  animation: angryTremble 0.25s infinite alternate;
}

@keyframes angryTremble {
  0% { transform: scaleX(1.14) scaleY(1.06) rotate(-1deg); }
  100% { transform: scaleX(1.14) scaleY(1.06) rotate(1deg); }
}

/* 5. Sleeping Posture */
.body-sleeping {
  transform: translateY(12px) scale(0.96);
}

.body-sleeping .pet-head-group {
  transform: translateY(8px) rotate(-3deg);
}

.body-sleeping .pet-tail {
  animation: none;
  transform: rotate(5deg);
}

/* 6. Unconscious Gentle Collapse */
.body-collapsed {
  transform: rotate(82deg) translate(80px, -60px) scale(0.92);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.body-collapsed .ground-shadow {
  transform: scale(1.35);
  opacity: 0.25;
}

/* Shivering Effect (Cold Weather / Low Thermal Comfort) */
.shivering-effect {
  animation: shiver 0.18s infinite alternate !important;
}

@keyframes shiver {
  0% { transform: translateX(-2.5px); }
  100% { transform: translateX(2.5px); }
}

/* Chewing Animation */
.chew-anim {
  animation: chew 0.22s ease-in-out infinite alternate;
}

@keyframes chew {
  0% { transform: scaleY(0.4) translateY(2px); transform-origin: 160px 172px; }
  100% { transform: scaleY(1.3) translateY(-1px); transform-origin: 160px 172px; }
}

/* Sniffles Droplet Wiggle */
.sniffle-drop {
  animation: dropWiggle 1.4s ease-in-out infinite;
}

@keyframes dropWiggle {
  0%, 100% { transform: scale(0.9) translateY(0); transform-origin: 160px 165px; }
  50% { transform: scale(1.25) translateY(3px); transform-origin: 160px 165px; }
}

/* Fever Flushed Cheek Pulse */
.fever-cheek {
  animation: feverGlow 2s ease-in-out infinite alternate;
}

@keyframes feverGlow {
  0% { opacity: 0.35; transform: scale(0.95); transform-origin: center; }
  100% { opacity: 0.75; transform: scale(1.15); transform-origin: center; }
}

/* Water Dripping */
.water-drip-1 { animation: dripDown 1.6s infinite 0.2s; }
.water-drip-2 { animation: dripDown 1.9s infinite 0.7s; }
.water-drip-3 { animation: dripDown 1.4s infinite 1.1s; }

@keyframes dripDown {
  0% { opacity: 0.8; transform: translateY(0); }
  80% { opacity: 0.8; transform: translateY(15px); }
  100% { opacity: 0; transform: translateY(22px); }
}

/* Thought Bubble Floating */
.thought-bubble-group {
  animation: bubbleFloat 3s ease-in-out infinite alternate;
}

@keyframes bubbleFloat {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-6px); }
}

/* Cozy Wrap Knitted Scarf */
.cozy-wrap-accessory {
  filter: drop-shadow(0px 3px 5px rgba(0,0,0,0.2));
  animation: cozyBreathe 3.6s ease-in-out infinite;
  transform-origin: 160px 195px;
}

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

/* Umbrella */
.umbrella-accessory {
  filter: drop-shadow(0px 5px 8px rgba(0,0,0,0.22));
  animation: umbrellaSway 4s ease-in-out infinite alternate;
  transform-origin: 105px 160px;
}

@keyframes umbrellaSway {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-4deg); }
}

/* Bored Posture (Slumped, Sighing) */
.body-bored {
  animation: boredSigh 4s ease-in-out infinite alternate;
  transform-origin: 160px 350px;
}

@keyframes boredSigh {
  0% { transform: scale(1, 0.96) rotate(-1.5deg); }
  50% { transform: scale(0.98, 0.94) rotate(1deg); }
  100% { transform: scale(1, 0.95) rotate(-2deg); }
}

/* Irritated Posture (Puffed, Fuming, Tense Twitch) */
.body-irritated {
  animation: irritatedFume 1.4s ease-in-out infinite;
  transform-origin: 160px 350px;
}

@keyframes irritatedFume {
  0%, 100% { transform: scale(1.04, 1.02) rotate(0deg); }
  25% { transform: scale(1.05, 1.03) rotate(-1.8deg); }
  75% { transform: scale(1.05, 1.03) rotate(1.8deg); }
}

/* Dedicated Container for SVG inside pet-stage */
.pet-svg-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pet-svg-container .merkat-svg {
  pointer-events: auto;
}

/* Enlarged High-Contrast Speech/Thought Bubble Floating Directly Above Pet */
.pet-speech-bubble {
  position: absolute;
  bottom: 285px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(340px, 92%);
  width: max-content;
  min-width: 140px;
  padding: 11px 18px;
  background: #ffffff;
  border: 2px solid #37474f;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  pointer-events: none;
  z-index: 50;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pet-speech-bubble.hidden {
  display: none !important;
}

.pet-speech-bubble .speech-emoji {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.pet-speech-bubble .speech-text {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a202c;
  line-height: 1.35;
  word-break: break-word;
}

.pet-speech-bubble .speech-bubble-tail {
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid #ffffff;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18));
}

[data-theme="dark"] .pet-speech-bubble {
  background: #1e293b;
  border-color: #64748b;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .pet-speech-bubble .speech-text {
  color: #f8fafc;
}

[data-theme="dark"] .pet-speech-bubble .speech-bubble-tail {
  border-top-color: #1e293b;
}