/* === ANIMATIONS CSS === */

/* Glitch keyframes */
@keyframes glitch1 {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-3px, 2px); }
    40% { transform: translate(3px, -1px); }
    60% { transform: translate(-1px, -2px); }
    80% { transform: translate(2px, 3px); }
}

@keyframes glitch2 {
    0%, 100% { transform: translate(0); }
    25% { transform: translate(2px, -2px); }
    50% { transform: translate(-2px, 1px); }
    75% { transform: translate(1px, 3px); }
}

@keyframes glitchClip1 {
    0%, 100% { clip-path: inset(20% 0 60% 0); }
    25% { clip-path: inset(40% 0 40% 0); }
    50% { clip-path: inset(60% 0 20% 0); }
    75% { clip-path: inset(10% 0 70% 0); }
}

@keyframes glitchClip2 {
    0%, 100% { clip-path: inset(60% 0 20% 0); }
    25% { clip-path: inset(20% 0 60% 0); }
    50% { clip-path: inset(10% 0 80% 0); }
    75% { clip-path: inset(50% 0 30% 0); }
}

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

/* Pulse glow */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 5px var(--glow-color, #8b00ff),
                    0 0 20px var(--glow-color, #8b00ff),
                    0 0 40px var(--glow-color, #8b00ff);
    }
    50% {
        box-shadow: 0 0 10px var(--glow-color, #8b00ff),
                    0 0 40px var(--glow-color, #8b00ff),
                    0 0 80px var(--glow-color, #8b00ff);
    }
}

/* Typing blink */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Spin */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Scanline move */
@keyframes scanlineMove {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

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

/* Neon flicker */
@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 
            0 0 7px #fff,
            0 0 10px #fff,
            0 0 21px #fff,
            0 0 42px #8b00ff,
            0 0 82px #8b00ff,
            0 0 92px #8b00ff,
            0 0 102px #8b00ff,
            0 0 151px #8b00ff;
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

/* Utility classes */
.animate-in {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
}

.delay-200 { animation-delay: 0.2s; }
.delay-400 { animation-delay: 0.4s; }
.delay-600 { animation-delay: 0.6s; }
.delay-800 { animation-delay: 0.8s; }