/* ===========================
   CRT RGB Chromatic Aberration Glitch
   Extracted for modularity (LEGO principle)
   =========================== */

.glitch-container {
    position: relative;
}

.glitch {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    position: relative;
    text-shadow:
        0.05em 0 0 rgba(255, 0, 0, 0.75),
        -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
        0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    animation: glitch-anim 500ms infinite;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 rgba(0, 255, 255, 0.8);
    animation: glitch-anim-1 650ms infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: 2px 0 rgba(255, 0, 255, 0.8);
    animation: glitch-anim-2 375ms infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        text-shadow:
            0.05em 0 0 rgba(255, 0, 0, 0.75),
            -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
            -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    }
    14% {
        text-shadow:
            0.05em 0 0 rgba(255, 0, 0, 0.75),
            -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
            -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    }
    15% {
        text-shadow:
            -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
            0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
            -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    49% {
        text-shadow:
            -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
            0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
            -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    50% {
        text-shadow:
            0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
            0.05em 0 0 rgba(0, 255, 0, 0.75),
            0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    99% {
        text-shadow:
            0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
            0.05em 0 0 rgba(0, 255, 0, 0.75),
            0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    100% {
        text-shadow:
            -0.025em 0 0 rgba(255, 0, 0, 0.75),
            -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
            -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
}

@keyframes glitch-anim-1 {
    0% { clip: rect(36px, 9999px, 9px, 0); }
    10% { clip: rect(112px, 9999px, 76px, 0); }
    20% { clip: rect(85px, 9999px, 140px, 0); }
    30% { clip: rect(28px, 9999px, 67px, 0); }
    40% { clip: rect(50px, 9999px, 99px, 0); }
    50% { clip: rect(17px, 9999px, 120px, 0); }
    60% { clip: rect(72px, 9999px, 33px, 0); }
    70% { clip: rect(95px, 9999px, 11px, 0); }
    80% { clip: rect(41px, 9999px, 88px, 0); }
    90% { clip: rect(6px, 9999px, 54px, 0); }
    100% { clip: rect(110px, 9999px, 22px, 0); }
}

@keyframes glitch-anim-2 {
    0% { clip: rect(65px, 9999px, 119px, 0); }
    10% { clip: rect(29px, 9999px, 3px, 0); }
    20% { clip: rect(103px, 9999px, 82px, 0); }
    30% { clip: rect(14px, 9999px, 37px, 0); }
    40% { clip: rect(90px, 9999px, 25px, 0); }
    50% { clip: rect(56px, 9999px, 78px, 0); }
    60% { clip: rect(21px, 9999px, 96px, 0); }
    70% { clip: rect(88px, 9999px, 42px, 0); }
    80% { clip: rect(2px, 9999px, 100px, 0); }
    90% { clip: rect(73px, 9999px, 15px, 0); }
    100% { clip: rect(44px, 9999px, 107px, 0); }
}

/* Responsive */
@media (max-width: 768px) {
    .glitch {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .glitch {
        font-size: 2rem;
    }
}