/* Visual Effects */

/* CRT Overlay - contained within screen */
.crt-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
}

.crt-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
}

.crt-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        rgba(0, 0, 0, 0.2) 90%,
        rgba(0, 0, 0, 0.4) 100%
    );
    pointer-events: none;
}

/* Scanline Animation - contained within screen */
@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(480px); }
}

.scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.03);
    z-index: 99998;
    pointer-events: none;
    animation: scanline 8s linear infinite;
}

/* Glitch Effects */
@keyframes glitch-1 {
    0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
    20% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 1px); }
    40% { clip-path: inset(40% 0 40% 0); transform: translate(2px, -1px); }
    60% { clip-path: inset(60% 0 20% 0); transform: translate(-1px, 2px); }
    80% { clip-path: inset(80% 0 5% 0); transform: translate(1px, -2px); }
}

@keyframes glitch-2 {
    0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); filter: hue-rotate(0deg); }
    25% { clip-path: inset(10% 0 70% 0); transform: translate(3px, 0); filter: hue-rotate(90deg); }
    50% { clip-path: inset(50% 0 30% 0); transform: translate(-3px, 0); filter: hue-rotate(180deg); }
    75% { clip-path: inset(70% 0 10% 0); transform: translate(2px, 0); filter: hue-rotate(270deg); }
}

@keyframes glitch-color {
    0%, 100% { text-shadow: none; }
    25% { text-shadow: 2px 0 #ff0000, -2px 0 #00ffff; }
    50% { text-shadow: -2px 0 #ff0000, 2px 0 #00ffff; }
    75% { text-shadow: 1px 0 #ff0000, -1px 0 #00ffff; }
}

.glitch {
    position: relative;
}

.glitch-active {
    animation: glitch-1 0.3s infinite;
}

.glitch-color {
    animation: glitch-color 0.5s infinite;
}

.glitch-intense {
    animation: glitch-2 0.2s infinite;
}

/* Flicker effect */
@keyframes flicker {
    0%, 100% { opacity: 1; }
    3% { opacity: 0.8; }
    6% { opacity: 1; }
    7% { opacity: 0.6; }
    9% { opacity: 1; }
    20% { opacity: 1; }
    21% { opacity: 0.9; }
    23% { opacity: 1; }
    50% { opacity: 1; }
    53% { opacity: 0.7; }
    56% { opacity: 1; }
}

.flicker {
    animation: flicker 4s infinite;
}

/* Static noise overlay for glitchy elements */
@keyframes noise {
    0%, 100% { background-position: 0 0; }
    10% { background-position: -5% -10%; }
    20% { background-position: -15% 5%; }
    30% { background-position: 7% -25%; }
    40% { background-position: 20% 25%; }
    50% { background-position: -25% 10%; }
    60% { background-position: 15% 5%; }
    70% { background-position: 0% 15%; }
    80% { background-position: 25% 35%; }
    90% { background-position: -10% 10%; }
}

.noise-overlay::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.03;
    animation: noise 0.5s steps(10) infinite;
    pointer-events: none;
}

/* Screen tear effect */
@keyframes screen-tear {
    0%, 100% { transform: translateX(0); }
    5% { transform: translateX(2px); }
    10% { transform: translateX(-2px); }
    15% { transform: translateX(0); }
}

.screen-tear {
    animation: screen-tear 10s infinite;
}

/* Error state styling */
.error-state {
    background: #aa0000 !important;
    color: white !important;
}

.error-blink {
    animation: blink 0.3s infinite;
}

/* Warning flash */
@keyframes warning-flash {
    0%, 100% { background-color: inherit; }
    50% { background-color: #ffff00; }
}

.warning-flash {
    animation: warning-flash 1s infinite;
}

/* Data corruption effect */
@keyframes corrupt {
    0%, 100% { filter: none; }
    10% { filter: saturate(0) contrast(1.5); }
    20% { filter: hue-rotate(90deg) brightness(1.2); }
    30% { filter: invert(1); }
    40% { filter: none; }
}

.corrupt {
    animation: corrupt 2s infinite;
}

/* Pixelation effect */
.pixelate {
    image-rendering: pixelated;
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='pixelate'%3E%3CfeFlood x='4' y='4' height='2' width='2'/%3E%3CfeComposite width='8' height='8'/%3E%3CfeTile result='a'/%3E%3CfeComposite in='SourceGraphic' in2='a' operator='in'/%3E%3CfeMorphology operator='dilate' radius='4'/%3E%3C/filter%3E%3C/svg%3E#pixelate");
}

/* Wave distortion for audio visualizer */
@keyframes wave {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.5); }
}

.wave-bar {
    animation: wave 0.5s ease-in-out infinite;
}

/* Loading dots */
@keyframes loading-dots {
    0%, 20% { content: "."; }
    40% { content: ".."; }
    60% { content: "..."; }
    80%, 100% { content: ""; }
}

.loading-dots::after {
    content: "";
    animation: loading-dots 1.5s infinite;
}