/* Shake Animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.shake {
    animation: shake 0.4s ease-in-out;
}

.login-input.shake {
    animation: shake 0.4s ease-in-out;
    border-color: #c94b4b;
}

.riddle-form.shake {
    animation: shake 0.4s ease-in-out;
}

.riddle-container.shake {
    animation: shake 0.4s ease-in-out;
}

/* Door Opening Animation */
@keyframes door-open-left {
    from {
        transform: perspective(1000px) rotateY(0deg);
    }
    to {
        transform: perspective(1000px) rotateY(-90deg);
    }
}

@keyframes door-open-right {
    from {
        transform: perspective(1000px) rotateY(0deg);
    }
    to {
        transform: perspective(1000px) rotateY(90deg);
    }
}

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fade-in {
    animation: fadeIn 0.4s ease forwards;
}

/* Submitting State */
.riddle-option.submitting {
    opacity: 0.6;
    pointer-events: none;
}

.riddle-input input.submitting {
    opacity: 0.6;
}