/* ===================== ANIMATIONS & STATE UTILITIES ===================== */

/* State Utilities */
.option-card.correct {
    filter: drop-shadow(0 0 14px rgba(74, 158, 106, 0.85)) sepia(0.4) hue-rotate(85deg) saturate(2) !important;
}

.option-card.correct .option-letter {
    background: linear-gradient(135deg, #80D0A0, #4A9E6A) !important;
    color: #fff !important;
    border-color: #2E7A4E !important;
}

.option-card.wrong {
    filter: drop-shadow(0 0 14px rgba(184, 90, 48, 0.85)) sepia(0.4) hue-rotate(340deg) saturate(2) !important;
}

.option-card.wrong .option-letter {
    background: linear-gradient(135deg, var(--terracotta), #A05C30) !important;
    color: #fff !important;
    border-color: #7A2E10 !important;
}

/* Animations */
.float-anim {
    animation: none;
}

.dance-anim {
    animation: ganeshaDance 1.2s ease-in-out infinite;
}

@keyframes ganeshaDance {
    0%, 100% { transform: scale(1) translateY(0) rotate(0deg); }
    25% { transform: scale(1.06) translateY(-10px) rotate(-2deg); }
    50% { transform: scale(1.02) translateY(0) rotate(2deg); }
    75% { transform: scale(1.06) translateY(-7px) rotate(-1deg); }
}

.ganesha-pop {
    animation: ganeshaPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes ganeshaPop {
    0% { opacity: 0.5; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

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

@keyframes cardShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.animate-fade-in {
    animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-slide-up {
    animation: slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-scale-in {
    animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.score-pop {
    animation: scorePopEffect 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes scorePopEffect {
    0% { transform: scale(1); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
    50% { transform: scale(1.12); text-shadow: 0 0 8px rgba(212, 160, 23, 0.85), 0 0 15px rgba(255, 215, 0, 0.6); }
    100% { transform: scale(1); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
}

@keyframes unlockCard {
    0% { transform: scale(0.9) rotateY(30deg); filter: brightness(0.8); }
    50% { transform: scale(1.04) rotateY(-10deg); filter: brightness(1.15); }
    100% { transform: scale(1) rotateY(0deg); filter: brightness(1); }
}

@keyframes hintTextFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.hint-content.animate-fade-in {
    animation: hintTextFade 0.4s ease-out 0.2s forwards !important;
}

@keyframes fillShimmer {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.22) saturate(1.25); }
}

@keyframes confFall {
    0% { transform: translateY(-2cqh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(45cqh) rotate(720deg); opacity: 0; }
}

@keyframes bannerPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 4px 14px rgba(90, 60, 25, 0.35)); }
    50% { transform: scale(1.03); filter: drop-shadow(0 8px 20px rgba(212, 160, 23, 0.55)); }
}

.thoughtful-anim {
    animation: none !important;
    transform: none !important;
}