/* mascot-sprite-states.css — State-specific CSS classes + transition animations */

/* Base transition for all state changes */
.mascot-puppet {
    transition-property: transform, opacity;
    transition-duration: var(--state-transition-duration, 500ms);
    transition-timing-function: var(--state-transition-timing, ease-out);
}

/* Idle — default resting pose */
.mascot-state--idle {
    /* Default pose — no transform overrides needed */
    animation: none;
}

/* Talking — slight lean forward */
.mascot-state--talking .mascot-body {
    transform: rotate(2deg);
}

/* Sleeping — droopy, gentle breathing */
.mascot-state--sleeping .mascot-head {
    transform: rotate(15deg) translateY(5px);
}
.mascot-state--sleeping .mascot-ear-left,
.mascot-state--sleeping .mascot-ear-right {
    transform-origin: bottom center;
    transform: scaleY(0.8) rotate(-20deg);
}
.mascot-state--sleeping .mascot-body {
    animation: mascot-breathing 4s ease-in-out infinite;
}

@keyframes mascot-breathing {
    0%, 100% { transform: scaleY(1.0); }
    50% { transform: scaleY(0.97); }
}

/* Celebrating — bounce + sparkle */
.mascot-state--celebrating {
    animation: mascot-celebrate-bounce 0.5s ease 3;
}

@keyframes mascot-celebrate-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.mascot-state--celebrating .mascot-tail {
    animation: mascot-tail-wag-fast 0.3s ease-in-out infinite alternate;
}

@keyframes mascot-tail-wag-fast {
    0% { transform: rotate(-35deg); }
    100% { transform: rotate(35deg); }
}

/* Thinking — head tilt + ear perk */
.mascot-state--thinking .mascot-head {
    transform: rotate(-10deg);
}
.mascot-state--thinking .mascot-ear-right {
    transform: rotate(15deg) scaleY(1.1);
}

/* Excited — bouncy */
.mascot-state--excited {
    animation: mascot-excited-bounce 0.4s ease infinite;
}

@keyframes mascot-excited-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Pointing — lean toward target */
.mascot-state--pointing .mascot-body {
    transform: rotate(-5deg);
}

/* Listening — ear perking animation */
.mascot-state--listening .mascot-ear-right {
    animation: mascot-ear-perk 2s ease-in-out infinite;
}

@keyframes mascot-ear-perk {
    0%, 100% { transform: rotate(20deg) scaleY(1.2); }
    50% { transform: rotate(15deg) scaleY(1.1); }
}

/* Sad — droopy posture */
.mascot-state--sad .mascot-head {
    transform: rotate(10deg) translateY(3px);
}
.mascot-state--sad .mascot-ear-left,
.mascot-state--sad .mascot-ear-right {
    transform: scaleY(0.85) rotate(-25deg);
}

/* Waving — arm wave animation */
.mascot-state--waving .mascot-arm-right {
    animation: mascot-wave 0.6s ease-in-out 4;
    transform-origin: bottom center;
}

@keyframes mascot-wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-20deg); }
    75% { transform: rotate(20deg); }
}

/* Spring timing for celebrate transition */
@keyframes mascot-spring-in {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.08); }
    75% { transform: scale(0.97); }
    100% { transform: scale(1.0); }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .mascot-puppet,
    .mascot-puppet * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}