/* Sparkle animation για αστέρια */
@keyframes sparkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.3) rotate(180deg);
    }
}

.sparkle {
    animation: sparkle 0.5s ease-in-out;
}

/* Confetti burst */
@keyframes confetti {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-200px) rotate(720deg);
        opacity: 0;
    }
}

.confetti {
    animation: confetti 1s ease-out forwards;
}

/* Pop-in effect */
@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

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

/* Shake for wrong answer */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}

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

/* Pulse glow */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(108, 60, 225, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(108, 60, 225, 0.6);
    }
}

.pulse-glow {
    animation: pulseGlow 1.5s ease-in-out infinite;
}

/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Confetti Rain */
@keyframes confettiRain {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

.confetti-piece {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    animation: confettiRain 3s linear forwards;
    z-index: 3000;
    pointer-events: none;
}