@keyframes confetti {
    0% {
        transform: translateY(-10vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0;
    }
}

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

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
    }
    50% {
        box-shadow: 0 0 40px rgba(139, 92, 246, 0.8), 0 0 60px rgba(236, 72, 153, 0.5);
    }
}

.epic-mode {
    animation: epic-shake 0.1s infinite;
}

@keyframes epic-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px) rotate(-1deg); }
    75% { transform: translateX(5px) rotate(1deg); }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.8);
}

/* Smooth transitions for everything */
* {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Mobile touch improvements */
@media (max-width: 768px) {
    button {
        -webkit-tap-highlight-color: transparent;
    }
}

/* Background grid pattern */
body {
    background-image: 
        linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Glassmorphism enhancement */
.backdrop-blur {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Neon text glow for headers */
h1 {
    text-shadow: 0 0 20px rgba(139, 92, 246, 0.5), 0 0 40px rgba(236, 72, 153, 0.3);
}

/* Button hover glow */
button:hover {
    box-shadow: 0 0 20px currentColor;
}

/* Card hover lift effect */
.hover\:scale-\[1\.02\]:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}