@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadeInScale {
    from { 
        opacity: 0;
        transform: scale(0.8);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounceIn {
    0% { transform: scale(0); }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes ganeshaFadeOut {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.95); }
}

@keyframes ganeshaFadeIn {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}



@keyframes flash {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes ganeshaEntry {
    0% { transform: translate(-50%, -150%); }
    100% { transform: translate(-50%, 0); }
}

@keyframes mooshakEntry {
    0% { transform: translateX(-150%); }
    100% { transform: translateX(0); }
}

@keyframes dialoguePop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes bubblePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes titlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes btnDance {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(5deg); }
    50% { transform: scale(1) rotate(-5deg); }
    75% { transform: scale(1.1) rotate(5deg); }
}

@keyframes labelFadeIn {
    0% { opacity: 0; transform: translateX(-1vw) scale(0.95); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes labelPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes resultPop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.2) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes resultPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}






.ganesha-enter {
    animation: ganeshaEntry 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.mooshak-enter {
    animation: mooshakEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.bubble-pop {
    animation: dialoguePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               bubblePulse 3s ease-in-out infinite 0.5s;
    transform-origin: bottom left;
}