/* ============================================
   404CTO V2 - Keyframe Animations
   ============================================ */

/* ── Glitch Effect ── */
@keyframes glitch {
    0% {
        transform: translate(0);
        text-shadow: -2px 0 var(--red), 2px 0 var(--cyan);
    }

    2% {
        transform: translate(2px, -1px);
        text-shadow: -2px 0 var(--red), 2px 0 var(--cyan);
    }

    4% {
        transform: translate(-2px, 1px);
        text-shadow: 2px 0 var(--red), -2px 0 var(--cyan);
    }

    6% {
        transform: translate(0);
        text-shadow: none;
    }

    100% {
        transform: translate(0);
        text-shadow: none;
    }
}

/* ── Glitch (more intense) ── */
@keyframes glitchIntense {
    0% {
        clip-path: inset(40% 0 61% 0);
        transform: translate(-2px, 2px);
    }

    20% {
        clip-path: inset(92% 0 1% 0);
        transform: translate(1px, -1px);
    }

    40% {
        clip-path: inset(43% 0 1% 0);
        transform: translate(-1px, 3px);
    }

    60% {
        clip-path: inset(25% 0 58% 0);
        transform: translate(3px, 1px);
    }

    80% {
        clip-path: inset(54% 0 7% 0);
        transform: translate(-3px, -2px);
    }

    100% {
        clip-path: inset(58% 0 43% 0);
        transform: translate(2px, -3px);
    }
}

/* ── Fade In Up ── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Fade In ── */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── Slide In Left ── */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Pulse Glow ── */
@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 5px var(--green-glow), 0 0 10px var(--green-glow);
    }

    50% {
        box-shadow: 0 0 10px var(--green-glow-strong), 0 0 20px var(--green-glow), 0 0 40px var(--green-glow);
    }
}

/* ── Text Pulse ── */
@keyframes textPulse {

    0%,
    100% {
        text-shadow: 0 0 5px var(--green-glow);
    }

    50% {
        text-shadow: 0 0 10px var(--green-glow-strong), 0 0 20px var(--green-glow);
    }
}

/* ── Scroll Indicator Bounce ── */
@keyframes scrollBounce {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.6;
    }

    50% {
        transform: translateY(8px);
        opacity: 1;
    }
}

/* ── Status Dot Pulse ── */
@keyframes statusPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 var(--green-glow-strong);
        opacity: 1;
    }

    50% {
        box-shadow: 0 0 0 6px transparent;
        opacity: 0.8;
    }
}

/* ── Typing Cursor ── */
@keyframes blink {

    0%,
    50% {
        border-color: var(--green);
    }

    51%,
    100% {
        border-color: transparent;
    }
}

/* ── Log Scroll ── */
@keyframes logScroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

/* ── Chaos Bar Fill ── */
@keyframes chaosFill {
    from {
        width: 0;
    }
}

/* ── Float ── */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* ── Rotate ── */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ── Matrix Rain (Easter Egg) ── */
@keyframes matrixFall {
    0% {
        transform: translateY(-100vh);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

/* ── Shake ── */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(-4px);
    }

    20% {
        transform: translateX(4px);
    }

    30% {
        transform: translateX(-4px);
    }

    40% {
        transform: translateX(4px);
    }

    50% {
        transform: translateX(-2px);
    }

    60% {
        transform: translateX(2px);
    }

    70% {
        transform: translateX(-2px);
    }

    80% {
        transform: translateX(2px);
    }

    90% {
        transform: translateX(-1px);
    }
}