/* ==========================================================================
   MOMO MASCOT STYLING & ANIMATIONS
   Karakter hewan lucu 2D ekspresif ramah anak TK
   ========================================================================== */

.momo-container {
  position: relative;
  display: inline-block;
  user-select: none;
  touch-action: manipulation;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.momo-container:hover {
  transform: scale(1.05);
}

.momo-container:active {
  transform: scale(0.95);
}

.momo-svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
  display: block;
}

/* ==========================================================================
   MOMO EMOTION STATES & ANIMATIONS
   ========================================================================== */

/* 1. IDLE ANIMATION */
.momo-state-idle .momo-body-group {
  animation: momoBreathe 3s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

.momo-state-idle .momo-ear-left {
  animation: earTwitchLeft 4s ease-in-out infinite;
  transform-origin: bottom right;
}

.momo-state-idle .momo-ear-right {
  animation: earTwitchRight 4s ease-in-out infinite 0.5s;
  transform-origin: bottom left;
}

.momo-state-idle .momo-eye-normal {
  animation: momoBlink 3.5s infinite;
  transform-origin: center;
}

.momo-state-idle .momo-tail {
  animation: tailWag 2s ease-in-out infinite alternate;
  transform-origin: top left;
}

/* 2. WAVE ANIMATION (Menyapa) */
.momo-state-wave .momo-arm-right {
  animation: momoWaveHand 1s ease-in-out infinite;
  transform-origin: top right;
}

.momo-state-wave .momo-body-group {
  animation: momoGentleBounce 1s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

/* 3. JUMP ANIMATION (Melompat saat benar) */
.momo-state-jump {
  animation: momoHighJump 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.momo-state-jump .momo-arm-left {
  transform: rotate(-45deg) translateY(-8px);
  transform-origin: top right;
}

.momo-state-jump .momo-arm-right {
  transform: rotate(45deg) translateY(-8px);
  transform-origin: top left;
}

/* 4. SMILE & HAPPY (Tersenyum gembira) */
.momo-state-smile .momo-body-group {
  animation: momoHappyWiggle 1.2s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

.momo-state-smile .momo-cheeks {
  filter: drop-shadow(0 0 8px rgba(255, 107, 129, 0.8));
}

/* 5. CELEBRATION (Merayakan kemenangan) */
.momo-state-celebrate {
  animation: momoCelebrationDance 1.2s ease-in-out infinite;
}

.momo-state-celebrate .momo-arm-left {
  animation: armCheerLeft 0.6s ease-in-out infinite alternate;
  transform-origin: top right;
}

.momo-state-celebrate .momo-arm-right {
  animation: armCheerRight 0.6s ease-in-out infinite alternate 0.3s;
  transform-origin: top left;
}

/* 6. SAD / POUTING CUTE (Salah / Coba lagi - tetap lucu tanpa menakutkan) */
.momo-state-sad {
  animation: momoCuteSadTilt 1.5s ease-in-out infinite alternate;
}

.momo-state-sad .momo-ear-left {
  transform: rotate(-15deg);
  transform-origin: bottom right;
}

.momo-state-sad .momo-ear-right {
  transform: rotate(15deg);
  transform-origin: bottom left;
}

.momo-state-sad .momo-question-mark {
  opacity: 1;
  animation: floatQuestion 1.2s infinite ease-in-out;
}

/* 7. CLAP (Tepuk tangan) */
.momo-state-clap .momo-arm-left {
  animation: clapLeft 0.35s ease-in-out infinite alternate;
  transform-origin: top right;
}

.momo-state-clap .momo-arm-right {
  animation: clapRight 0.35s ease-in-out infinite alternate;
  transform-origin: top left;
}

/* ==========================================================================
   MOMO SVG ELEMENT CONTROLS
   ========================================================================== */

.momo-eye-happy,
.momo-eye-sad,
.momo-eye-stars,
.momo-mouth-open,
.momo-mouth-sad,
.momo-mouth-laugh,
.momo-question-mark {
  display: none;
}

/* Tampilkan ekspresi sesuai state */
.momo-state-smile .momo-eye-normal,
.momo-state-jump .momo-eye-normal,
.momo-state-celebrate .momo-eye-normal {
  display: none;
}

.momo-state-smile .momo-eye-happy,
.momo-state-celebrate .momo-eye-happy {
  display: block;
}

.momo-state-jump .momo-eye-stars {
  display: block;
}

.momo-state-smile .momo-mouth-normal,
.momo-state-jump .momo-mouth-normal,
.momo-state-celebrate .momo-mouth-normal {
  display: none;
}

.momo-state-smile .momo-mouth-laugh,
.momo-state-jump .momo-mouth-open,
.momo-state-celebrate .momo-mouth-laugh {
  display: block;
}

.momo-state-sad .momo-eye-normal {
  display: none;
}
.momo-state-sad .momo-eye-sad {
  display: block;
}
.momo-state-sad .momo-mouth-normal {
  display: none;
}
.momo-state-sad .momo-mouth-sad {
  display: block;
}
.momo-state-sad .momo-question-mark {
  display: block;
}

/* ==========================================================================
   KOSTUM & AKSESORIS MOMO
   ========================================================================== */

.momo-accessory-hat,
.momo-accessory-glasses,
.momo-accessory-cape,
.momo-accessory-crown {
  display: none;
}

.momo-has-hat-explorer .momo-accessory-hat-explorer { display: block; }
.momo-has-hat-crown .momo-accessory-crown { display: block; }
.momo-has-hat-party .momo-accessory-hat-party { display: block; }

.momo-has-glasses-star .momo-accessory-glasses-star { display: block; }
.momo-has-glasses-smart .momo-accessory-glasses-smart { display: block; }

.momo-has-cape-hero .momo-accessory-cape { display: block; }

/* ==========================================================================
   MOMO ANIMATION KEYFRAMES
   ========================================================================== */

@keyframes momoBreathe {
  0% { transform: scale(1) translateY(0); }
  100% { transform: scale(1.02, 0.98) translateY(2px); }
}

@keyframes momoBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

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

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

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

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

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

@keyframes momoHighJump {
  0% { transform: scale(1.1, 0.85) translateY(0); }
  35% { transform: scale(0.9, 1.15) translateY(-50px); }
  65% { transform: scale(1.05, 0.95) translateY(-20px); }
  85% { transform: scale(0.95, 1.05) translateY(-5px); }
  100% { transform: scale(1) translateY(0); }
}

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

@keyframes momoCelebrationDance {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25% { transform: translateY(-30px) rotate(-8deg) scale(1.08); }
  50% { transform: translateY(-10px) rotate(0deg) scale(1.02); }
  75% { transform: translateY(-30px) rotate(8deg) scale(1.08); }
}

@keyframes armCheerLeft {
  0% { transform: rotate(-30deg) translateY(-10px); }
  100% { transform: rotate(-65deg) translateY(-16px); }
}

@keyframes armCheerRight {
  0% { transform: rotate(30deg) translateY(-10px); }
  100% { transform: rotate(65deg) translateY(-16px); }
}

@keyframes momoCuteSadTilt {
  0% { transform: rotate(-3deg) translateY(2px); }
  100% { transform: rotate(3deg) translateY(6px); }
}

@keyframes floatQuestion {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.9; }
  50% { transform: translateY(-8px) scale(1.15); opacity: 1; }
}

@keyframes clapLeft {
  0% { transform: rotate(0deg) translateX(0); }
  100% { transform: rotate(20deg) translateX(8px); }
}

@keyframes clapRight {
  0% { transform: rotate(0deg) translateX(0); }
  100% { transform: rotate(-20deg) translateX(-8px); }
}