/* Auth Mascot Styling */
.mascot-container {
    width: 200px;
    height: 180px;
    margin: 0 auto 20px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#diky-mascot {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 20px rgba(100, 181, 246, 0.2));
}

/* Base Body Parts */
.mascot-face {
    fill: #0c121e;
    stroke: #64b5f6;
    stroke-width: 2;
}

.eye-bg {
    fill: #1a2639;
}

.eye-pupil {
    fill: #64b5f6;
    filter: drop-shadow(0 0 5px #64b5f6);
}

.hand {
    fill: #64b5f6;
    opacity: 0.8;
}

/* States */
.state-shy .hand-left { transform: translate(30px, -40px) rotate(45deg); }
.state-shy .hand-right { transform: translate(-30px, -40px) rotate(-45deg); }

.state-error .eye-pupil { fill: #ff5252; filter: drop-shadow(0 0 5px #ff5252); }
.state-success .eye-pupil { fill: #4caf50; filter: drop-shadow(0 0 8px #4caf50); }

/* Animation Utils */
.shake-form {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* Hide Mascot on small mobile if needed */
@media (max-height: 700px) {
    .mascot-container {
        height: 120px;
        width: 150px;
    }
}