/* ========================================
   PIXELQUIZ - 80s NEON EFFECTS
   Spezielle Neon Animationen und Effekte
   ======================================== */

/* Neon Flicker Animation */
@keyframes neonFlicker {
    0%, 100% {
        opacity: 1;
        text-shadow: 
            0 0 10px currentColor,
            0 0 20px currentColor,
            0 0 30px currentColor,
            0 0 40px currentColor,
            0 0 50px currentColor;
    }
    10% {
        opacity: 0.8;
    }
    20% {
        opacity: 1;
    }
    30% {
        opacity: 0.9;
    }
    40% {
        opacity: 1;
    }
    50% {
        opacity: 0.95;
    }
    60% {
        opacity: 1;
    }
    70% {
        opacity: 0.85;
    }
    80% {
        opacity: 1;
    }
}

/* Neon Pulse Animation */
@keyframes neonPulse {
    0%, 100% {
        text-shadow: 
            0 0 10px currentColor,
            0 0 20px currentColor,
            0 0 30px currentColor;
    }
    50% {
        text-shadow: 
            0 0 20px currentColor,
            0 0 30px currentColor,
            0 0 40px currentColor,
            0 0 50px currentColor;
    }
}

/* Neon Border Pulse */
@keyframes neonBorderPulse {
    0%, 100% {
        box-shadow: 
            0 0 10px currentColor,
            0 0 20px currentColor,
            inset 0 0 10px rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 
            0 0 20px currentColor,
            0 0 40px currentColor,
            0 0 60px currentColor,
            inset 0 0 20px rgba(255, 255, 255, 0.2);
    }
}

/* Neon Glow Rotate */
@keyframes neonGlowRotate {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* Electric Spark Effect */
@keyframes electricSpark {
    0%, 100% {
        box-shadow: 
            0 0 5px var(--neon-cyan),
            0 0 10px var(--neon-cyan);
    }
    10% {
        box-shadow: 
            0 0 20px var(--neon-cyan),
            0 0 40px var(--neon-cyan),
            5px 5px 10px var(--neon-magenta);
    }
    20% {
        box-shadow: 
            0 0 5px var(--neon-cyan),
            0 0 10px var(--neon-cyan);
    }
    30% {
        box-shadow: 
            0 0 30px var(--neon-magenta),
            0 0 50px var(--neon-magenta),
            -5px -5px 10px var(--neon-cyan);
    }
}

/* Neon Text Glow */
.neon-text {
    color: var(--neon-cyan);
    text-shadow: 
        0 0 10px var(--neon-cyan),
        0 0 20px var(--neon-cyan),
        0 0 30px var(--neon-cyan),
        0 0 40px var(--neon-cyan);
}

/* Neon Border */
.neon-border {
    border: 3px solid var(--neon-magenta);
    box-shadow: 
        0 0 10px var(--neon-magenta),
        0 0 20px var(--neon-magenta),
        0 0 30px var(--neon-magenta),
        inset 0 0 10px rgba(255, 0, 255, 0.2);
}

/* Neon Box Glow */
.neon-box {
    box-shadow: 
        0 0 20px var(--neon-cyan),
        0 0 30px var(--neon-cyan),
        inset 0 0 20px rgba(0, 243, 255, 0.1);
}

/* 80s Scanline Overlay */
.scanlines {
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 243, 255, 0.03) 0px,
        rgba(255, 0, 255, 0.03) 1px,
        transparent 1px,
        transparent 3px
    );
    animation: scanlineMove 8s linear infinite;
}

@keyframes scanlineMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100px;
    }
}

/* Neon Grid Background */
.neon-grid {
    background-image: 
        linear-gradient(rgba(0, 243, 255, 0.1) 2px, transparent 2px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.1) 2px, transparent 2px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

/* Neon Glow Particle */
@keyframes neonParticle {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-50px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) scale(0.5);
    }
}

/* Cyberpunk Glitch Effect */
@keyframes glitch {
    0% {
        transform: translate(0);
        text-shadow: 
            0 0 10px var(--neon-cyan),
            0 0 20px var(--neon-cyan);
    }
    20% {
        transform: translate(-2px, 2px);
        text-shadow: 
            2px 0 10px var(--neon-magenta),
            -2px 0 20px var(--neon-cyan);
    }
    40% {
        transform: translate(-2px, -2px);
        text-shadow: 
            2px 2px 10px var(--neon-cyan),
            -2px -2px 20px var(--neon-magenta);
    }
    60% {
        transform: translate(2px, 2px);
        text-shadow: 
            -2px 0 10px var(--neon-magenta),
            2px 0 20px var(--neon-cyan);
    }
    80% {
        transform: translate(2px, -2px);
        text-shadow: 
            0 2px 10px var(--neon-cyan),
            0 -2px 20px var(--neon-magenta);
    }
    100% {
        transform: translate(0);
        text-shadow: 
            0 0 10px var(--neon-cyan),
            0 0 20px var(--neon-cyan);
    }
}

/* Neon Line Scan */
@keyframes neonScan {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}

/* Retro Wave Animation */
@keyframes retroWave {
    0% {
        transform: translateY(0) rotateX(0deg);
    }
    50% {
        transform: translateY(-10px) rotateX(5deg);
    }
    100% {
        transform: translateY(0) rotateX(0deg);
    }
}

/* Neon Rainbow Shift */
@keyframes rainbowShift {
    0% {
        color: var(--neon-cyan);
        text-shadow: 0 0 20px var(--neon-cyan);
    }
    25% {
        color: var(--neon-magenta);
        text-shadow: 0 0 20px var(--neon-magenta);
    }
    50% {
        color: var(--neon-pink);
        text-shadow: 0 0 20px var(--neon-pink);
    }
    75% {
        color: var(--neon-purple);
        text-shadow: 0 0 20px var(--neon-purple);
    }
    100% {
        color: var(--neon-cyan);
        text-shadow: 0 0 20px var(--neon-cyan);
    }
}

/* Neon Button Activate */
@keyframes neonActivate {
    0% {
        box-shadow: 
            0 0 10px currentColor,
            inset 0 0 10px rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 
            0 0 30px currentColor,
            0 0 50px currentColor,
            inset 0 0 30px rgba(255, 255, 255, 0.3);
    }
    100% {
        box-shadow: 
            0 0 10px currentColor,
            inset 0 0 10px rgba(255, 255, 255, 0.1);
    }
}

/* Utility Classes */
.glow-cyan {
    color: var(--neon-cyan);
    text-shadow: 
        0 0 10px var(--neon-cyan),
        0 0 20px var(--neon-cyan),
        0 0 30px var(--neon-cyan);
}

.glow-magenta {
    color: var(--neon-magenta);
    text-shadow: 
        0 0 10px var(--neon-magenta),
        0 0 20px var(--neon-magenta),
        0 0 30px var(--neon-magenta);
}

.glow-pink {
    color: var(--neon-pink);
    text-shadow: 
        0 0 10px var(--neon-pink),
        0 0 20px var(--neon-pink),
        0 0 30px var(--neon-pink);
}

.border-glow-cyan {
    border-color: var(--neon-cyan);
    box-shadow: 
        0 0 10px var(--neon-cyan),
        0 0 20px var(--neon-cyan),
        inset 0 0 10px rgba(0, 243, 255, 0.2);
}

.border-glow-magenta {
    border-color: var(--neon-magenta);
    box-shadow: 
        0 0 10px var(--neon-magenta),
        0 0 20px var(--neon-magenta),
        inset 0 0 10px rgba(255, 0, 255, 0.2);
}

/* Apply flicker to elements */
.neon-flicker {
    animation: neonFlicker 5s ease-in-out infinite;
}

.neon-pulse-animation {
    animation: neonPulse 2s ease-in-out infinite;
}

.electric-spark {
    animation: electricSpark 3s ease-in-out infinite;
}

.glitch-effect {
    animation: glitch 1s ease-in-out infinite;
}

.rainbow-shift {
    animation: rainbowShift 5s linear infinite;
}