/* Glitch effect on logo */
.glitch {
    position: relative;
    animation: glitch-anim 3s infinite steps(2, end);
}

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

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--glitch-color-1);
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 var(--glitch-color-2);
    animation: glitch-anim-2 2s infinite linear alternate-reverse;
    clip-path: polygon(0 66%, 100% 66%, 100% 100%, 0 100%);
}

@keyframes glitch-anim {
    0% { text-shadow: 1px 0 var(--primary-color); }
    10%, 100% { text-shadow: none; }
}

@keyframes glitch-anim-1 {
    0%   { clip-path: polygon(0 2%,  100% 2%,  100% 28%, 0 28%); }
    25%  { clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); }
    50%  { clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%); }
    75%  { clip-path: polygon(0 80%, 100% 80%, 100% 95%, 0 95%); }
    100% { clip-path: polygon(0 50%, 100% 50%, 100% 52%, 0 52%); }
}

@keyframes glitch-anim-2 {
    0%   { clip-path: polygon(0 75%, 100% 75%, 100% 76%, 0 76%); }
    25%  { clip-path: polygon(0 15%, 100% 15%, 100% 45%, 0 45%); }
    50%  { clip-path: polygon(0 90%, 100% 90%, 100% 91%, 0 91%); }
    75%  { clip-path: polygon(0 30%, 100% 30%, 100% 35%, 0 35%); }
    100% { clip-path: polygon(0 1%,  100% 1%,  100% 10%, 0 10%); }
}

/* CRT flicker — subtle brightness jitter */
@keyframes crt-flicker {
    0%    { opacity: 0.97; }
    5%    { opacity: 0.95; }
    10%   { opacity: 0.98; }
    15%   { opacity: 0.96; }
    20%   { opacity: 0.99; }
    25%   { opacity: 0.94; }
    30%   { opacity: 0.98; }
    35%   { opacity: 0.97; }
    40%   { opacity: 1.0;  }
    45%   { opacity: 0.95; }
    50%   { opacity: 0.98; }
    55%   { opacity: 0.96; }
    60%   { opacity: 0.99; }
    65%   { opacity: 0.95; }
    70%   { opacity: 0.97; }
    75%   { opacity: 0.96; }
    80%   { opacity: 0.98; }
    85%   { opacity: 0.94; }
    90%   { opacity: 0.99; }
    95%   { opacity: 0.96; }
    100%  { opacity: 0.97; }
}

.crt-flicker {
    animation: crt-flicker 0.15s infinite;
}

/* Occasional full-screen horizontal tear */
@keyframes h-tear {
    0%, 95%, 100% { transform: translateX(0); }
    96%           { transform: translateX(-3px); }
    97%           { transform: translateX(2px); }
    98%           { transform: translateX(-1px); }
    99%           { transform: translateX(0); }
}

.h-tear {
    animation: h-tear 8s infinite;
}