/**
 * NEON ANIMATIONS
 * CSS Keyframe Animations for Neon Cyberpunk Theme
 */

/* ===== NEON PULSE ===== */
@keyframes neonPulse {
    0%, 100% {
        text-shadow: 
            0 0 5px var(--neon-purple),
            0 0 10px var(--neon-purple),
            0 0 20px var(--neon-purple),
            0 0 40px var(--neon-pink);
    }
    50% {
        text-shadow: 
            0 0 10px var(--neon-purple),
            0 0 20px var(--neon-purple),
            0 0 40px var(--neon-purple),
            0 0 80px var(--neon-pink),
            0 0 120px var(--neon-cyan);
    }
}

/* ===== NEON GLOW ===== */
@keyframes neonGlow {
    0%, 100% {
        box-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);
    }
    50% {
        box-shadow: 0 0 20px var(--neon-purple), 0 0 40px var(--neon-purple), 0 0 60px var(--neon-pink);
    }
}

/* ===== NEON BORDER GLOW ===== */
@keyframes borderGlow {
    0%, 100% {
        border-color: var(--neon-purple);
        box-shadow: 0 0 10px var(--neon-purple), inset 0 0 10px rgba(176, 38, 255, 0.1);
    }
    33% {
        border-color: var(--neon-pink);
        box-shadow: 0 0 10px var(--neon-pink), inset 0 0 10px rgba(255, 0, 128, 0.1);
    }
    66% {
        border-color: var(--neon-cyan);
        box-shadow: 0 0 10px var(--neon-cyan), inset 0 0 10px rgba(0, 243, 255, 0.1);
    }
}

/* ===== GLITCH EFFECT ===== */
@keyframes glitch {
    0% {
        transform: translate(0);
        text-shadow: none;
    }
    20% {
        transform: translate(-2px, 2px);
        text-shadow: 2px 0 var(--neon-pink), -2px 0 var(--neon-cyan);
    }
    40% {
        transform: translate(-2px, -2px);
        text-shadow: 2px 0 var(--neon-cyan), -2px 0 var(--neon-pink);
    }
    60% {
        transform: translate(2px, 2px);
        text-shadow: 2px 0 var(--neon-pink), -2px 0 var(--neon-purple);
    }
    80% {
        transform: translate(2px, -2px);
        text-shadow: 2px 0 var(--neon-purple), -2px 0 var(--neon-cyan);
    }
    100% {
        transform: translate(0);
        text-shadow: none;
    }
}

/* ===== GLITCH TEXT ===== */
@keyframes glitchText {
    0%, 100% {
        clip-path: inset(0 0 95% 0);
        transform: translate(0);
    }
    20% {
        clip-path: inset(40% 0 30% 0);
        transform: translate(-5px);
    }
    40% {
        clip-path: inset(60% 0 20% 0);
        transform: translate(5px);
    }
    60% {
        clip-path: inset(20% 0 70% 0);
        transform: translate(-5px);
    }
    80% {
        clip-path: inset(80% 0 5% 0);
        transform: translate(5px);
    }
}

/* ===== SCANLINE EFFECT ===== */
@keyframes scanline {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100vh);
    }
}

/* ===== FLOAT ANIMATION ===== */
@keyframes neonFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        filter: drop-shadow(0 0 10px var(--neon-purple));
    }
    25% {
        transform: translateY(-20px) rotate(5deg);
        filter: drop-shadow(0 0 20px var(--neon-pink));
    }
    50% {
        transform: translateY(-10px) rotate(-5deg);
        filter: drop-shadow(0 0 30px var(--neon-cyan));
    }
    75% {
        transform: translateY(-25px) rotate(3deg);
        filter: drop-shadow(0 0 20px var(--neon-purple));
    }
}

/* ===== ROTATING GLOW ===== */
@keyframes rotatingGlow {
    0% {
        transform: rotate(0deg);
        filter: drop-shadow(0 0 10px var(--neon-purple));
    }
    25% {
        filter: drop-shadow(0 0 20px var(--neon-pink));
    }
    50% {
        transform: rotate(180deg);
        filter: drop-shadow(0 0 30px var(--neon-cyan));
    }
    75% {
        filter: drop-shadow(0 0 20px var(--neon-purple));
    }
    100% {
        transform: rotate(360deg);
        filter: drop-shadow(0 0 10px var(--neon-pink));
    }
}

/* ===== NEON FLICKER ===== */
@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        opacity: 1;
        text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);
    }
    20%, 24%, 55% {
        opacity: 0.8;
        text-shadow: none;
    }
    22% {
        opacity: 0.4;
        text-shadow: none;
    }
}

/* ===== TYPING EFFECT ===== */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    50% { border-color: transparent; }
}

/* ===== REVEAL ANIMATION ===== */
@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes revealDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes revealLeft {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes revealRight {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== SCALE IN ===== */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== ROTATE IN ===== */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/* ===== SHIMMER EFFECT ===== */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* ===== RAINBOW BORDER ===== */
@keyframes rainbowBorder {
    0% {
        border-color: var(--neon-purple);
        box-shadow: 0 0 10px var(--neon-purple);
    }
    25% {
        border-color: var(--neon-pink);
        box-shadow: 0 0 10px var(--neon-pink);
    }
    50% {
        border-color: var(--neon-cyan);
        box-shadow: 0 0 10px var(--neon-cyan);
    }
    75% {
        border-color: var(--neon-blue);
        box-shadow: 0 0 10px var(--neon-blue);
    }
    100% {
        border-color: var(--neon-purple);
        box-shadow: 0 0 10px var(--neon-purple);
    }
}

/* ===== PARTICLE FLOAT ===== */
@keyframes particleFloat {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty));
        opacity: 0;
    }
}

/* ===== WAVE EFFECT ===== */
@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-10px);
    }
    75% {
        transform: translateY(10px);
    }
}

/* ===== RGB SPLIT ===== */
@keyframes rgbSplit {
    0%, 100% {
        text-shadow: 
            -2px 0 var(--neon-pink),
            2px 0 var(--neon-cyan);
    }
    25% {
        text-shadow: 
            -2px 0 var(--neon-cyan),
            2px 0 var(--neon-purple);
    }
    50% {
        text-shadow: 
            -2px 0 var(--neon-purple),
            2px 0 var(--neon-pink);
    }
    75% {
        text-shadow: 
            -2px 0 var(--neon-pink),
            2px 0 var(--neon-cyan);
    }
}

/* ===== MORPHING BLOB ===== */
@keyframes morphBlob {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    25% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    50% {
        border-radius: 50% 60% 30% 60% / 30% 40% 70% 60%;
    }
    75% {
        border-radius: 60% 40% 60% 30% / 70% 50% 40% 60%;
    }
}

/* ===== PULSE RING ===== */
@keyframes pulseRing {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ===== DATA STREAM ===== */
@keyframes dataStream {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

/* ===== MATRIX RAIN (Vertical) ===== */
@keyframes matrixRain {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100vh);
    }
}

/* ===== HOLOGRAPHIC GLITCH ===== */
@keyframes holographicGlitch {
    0%, 100% {
        filter: hue-rotate(0deg);
        transform: translate(0);
    }
    25% {
        filter: hue-rotate(90deg);
        transform: translate(-2px, 2px);
    }
    50% {
        filter: hue-rotate(180deg);
        transform: translate(2px, -2px);
    }
    75% {
        filter: hue-rotate(270deg);
        transform: translate(-2px, -2px);
    }
}

/* ===== NEON LOADING BAR ===== */
@keyframes neonLoadingBar {
    0% {
        width: 0%;
        background: var(--neon-purple);
        box-shadow: 0 0 10px var(--neon-purple);
    }
    25% {
        background: var(--neon-pink);
        box-shadow: 0 0 10px var(--neon-pink);
    }
    50% {
        background: var(--neon-cyan);
        box-shadow: 0 0 10px var(--neon-cyan);
    }
    75% {
        background: var(--neon-blue);
        box-shadow: 0 0 10px var(--neon-blue);
    }
    100% {
        width: 100%;
        background: var(--neon-purple);
        box-shadow: 0 0 10px var(--neon-purple);
    }
}

/* ===== ENTRANCE ANIMATIONS ===== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== UTILITY CLASSES FOR ANIMATIONS ===== */
.animate-pulse {
    animation: neonPulse 2s ease-in-out infinite;
}

.animate-glow {
    animation: neonGlow 2s ease-in-out infinite;
}

.animate-border-glow {
    animation: borderGlow 3s ease-in-out infinite;
}

.animate-glitch {
    animation: glitch 0.5s ease-in-out infinite;
}

.animate-float {
    animation: neonFloat 6s ease-in-out infinite;
}

.animate-flicker {
    animation: neonFlicker 3s ease-in-out infinite;
}

.animate-reveal-up {
    animation: revealUp 0.8s ease-out forwards;
}

.animate-reveal-down {
    animation: revealDown 0.8s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.6s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* ===== DELAY UTILITIES ===== */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }