/* Animations */

/* Fade in on scroll */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section {
    animation: fadeIn 1s ease-out;
}

/* Particle animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

.float {
    animation: float 3s ease-in-out infinite;
}

/* Button hover effects */
button:hover {
    transform: scale(1.05);
    transition: transform 0.2s;
}

/* Typing effect for hero */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

.hero h2 {
    overflow: hidden;
    border-right: 2px solid;
    white-space: nowrap;
    animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: currentColor; }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Pulse for active elements */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

button:focus {
    animation: pulse 1s;
}

/* Game animations */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.bounce {
    animation: bounce 2s infinite;
}

/* Sorting bars animation */
@keyframes grow {
    from { height: 0; }
    to { height: var(--bar-height); }
}

.bar {
    animation: grow 0.5s ease-out;
}

/* Audio visualizer bars */
@keyframes audioBar {
    0% { height: 10px; }
    50% { height: 100px; }
    100% { height: 10px; }
}

.audio-bar {
    animation: audioBar 0.5s infinite;
}

/* Theme transition */
* {
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}