/* Mascot Reaction Animations */

/* Shake Head (Error) */
@keyframes headShake {

    0%,
    100% {
        transform: translateX(-50%) rotateZ(0deg);
    }

    15% {
        transform: translateX(-50%) rotateZ(-15deg);
    }

    30% {
        transform: translateX(-50%) rotateZ(15deg);
    }

    45% {
        transform: translateX(-50%) rotateZ(-10deg);
    }

    60% {
        transform: translateX(-50%) rotateZ(10deg);
    }

    75% {
        transform: translateX(-50%) rotateZ(-5deg);
    }

    90% {
        transform: translateX(-50%) rotateZ(5deg);
    }
}

.mascot-head.shake {
    animation: headShake 0.8s ease-in-out;
}

/* Sad Eyes (Error) */
@keyframes eyesSad {

    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(0.6);
    }
}

.mascot-eye.sad {
    animation: eyesSad 0.5s ease-in-out;
}

/* Worried Expression (Error) */
@keyframes mouthWorried {

    0%,
    100% {
        border-radius: 0 0 18px 18px;
        transform: translateX(-50%) translateY(0);
    }

    50% {
        border-radius: 18px 18px 0 0;
        transform: translateX(-50%) translateY(-3px);
    }
}

.mascot-mouth.worried {
    animation: mouthWorried 0.6s ease-in-out;
}

/* Bounce (Happy/Success) */
@keyframes mascotBounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0) scale(1);
    }

    25% {
        transform: translateX(-50%) translateY(-15px) scale(1.05);
    }

    50% {
        transform: translateX(-50%) translateY(0) scale(1);
    }

    75% {
        transform: translateX(-50%) translateY(-8px) scale(1.02);
    }
}

.mascot-body.bounce {
    animation: mascotBounce 0.8s ease-in-out;
}

/* Blink Animation */
@keyframes blink {

    0%,
    90%,
    100% {
        transform: scaleY(1);
    }

    95% {
        transform: scaleY(0.1);
    }
}

.mascot-eye.blink {
    animation: blink 3s ease-in-out infinite;
}

/* Thinking Animation */
@keyframes thinking {

    0%,
    100% {
        transform: translateX(-50%) rotateZ(0deg);
    }

    25% {
        transform: translateX(-50%) rotateZ(-5deg);
    }

    75% {
        transform: translateX(-50%) rotateZ(5deg);
    }
}

.mascot-head.thinking {
    animation: thinking 2s ease-in-out infinite;
}

/* Surprised Eyes */
@keyframes eyesSurprised {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }
}

.mascot-eye.surprised {
    animation: eyesSurprised 0.5s ease-in-out;
}

/* Error Reaction - Full Combo */
.mascot.error-reaction .mascot-head {
    animation: headShake 0.8s ease-in-out;
}

.mascot.error-reaction .mascot-eye {
    animation: eyesSad 0.5s ease-in-out;
}

.mascot.error-reaction .mascot-mouth {
    animation: mouthWorried 0.6s ease-in-out;
}

/* Success Reaction */
.mascot.success-reaction .mascot-body {
    animation: mascotBounce 0.8s ease-in-out;
}

.mascot.success-reaction .mascot-eye {
    animation: eyesSurprised 0.5s ease-in-out;
}

/* Greeting Message Variations */
.mascot-bubble.greeting-morning {
    background: linear-gradient(145deg, #FFF5E1, #FFE4B5);
    color: #8B4513;
    border-color: rgba(255, 165, 0, 0.3);
}

.mascot-bubble.greeting-afternoon {
    background: linear-gradient(145deg, #E0F2FE, #BAE6FD);
    color: #0C4A6E;
    border-color: rgba(14, 165, 233, 0.3);
}

.mascot-bubble.greeting-evening {
    background: linear-gradient(145deg, #E0E7FF, #C7D2FE);
    color: #3730A3;
    border-color: rgba(99, 102, 241, 0.3);
}

.mascot-bubble.greeting-night {
    background: linear-gradient(145deg, #1E293B, #334155);
    color: #F1F5F9;
    border-color: rgba(148, 163, 184, 0.3);
}

.mascot-bubble.error-message {
    background: linear-gradient(145deg, #FEE2E2, #FECACA);
    color: #991B1B;
    border-color: rgba(239, 68, 68, 0.3);
}

.mascot-bubble.success-message {
    background: linear-gradient(145deg, #D1FAE5, #A7F3D0);
    color: #065F46;
    border-color: rgba(34, 197, 94, 0.3);
}