/* UN4 Black & Gold Theme - Glitch Effects */

/* ============================================
   RGB SPLIT GLITCH (Gold Version)
   ============================================ */
.glitch-cyber {
    position: relative;
    animation: glitch-gold 5s infinite;
}

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

.glitch-cyber::before {
    color: var(--gold-dark);
    animation: glitch-gold-dark 3s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    transform: translateX(-2px);
}

.glitch-cyber::after {
    color: var(--gold-light);
    animation: glitch-gold-light 2s infinite;
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    transform: translateX(2px);
}

@keyframes glitch-gold {
    0%, 100% {
        text-shadow:
            -2px 0 var(--gold-dark),
            2px 0 var(--gold-light);
    }
    25% {
        text-shadow:
            2px 0 var(--gold-dark),
            -2px 0 var(--gold-light);
    }
    50% {
        text-shadow:
            -1px 0 var(--gold-dark),
            1px 0 var(--gold-light);
    }
    75% {
        text-shadow:
            1px 0 var(--gold-dark),
            -1px 0 var(--gold-light);
    }
}

@keyframes glitch-gold-dark {
    0%, 100% { transform: translateX(-2px); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(0); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(-1px); }
}

@keyframes glitch-gold-light {
    0%, 100% { transform: translateX(2px); }
    20% { transform: translateX(4px); }
    40% { transform: translateX(0); }
    60% { transform: translateX(3px); }
    80% { transform: translateX(1px); }
}

/* ============================================
   SCANLINE OVERLAY (Subtle)
   ============================================ */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.08) 0px,
        rgba(0, 0, 0, 0.08) 1px,
        transparent 1px,
        transparent 2px
    );
    opacity: 0.25;
    animation: scanlines-flicker 0.1s infinite;
}

@keyframes scanlines-flicker {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.23; }
}

/* Gold scanning line */
.scanlines-moving {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(204, 153, 51, 0.03) 50%,
        transparent 100%
    );
    animation: scanline-sweep 10s linear infinite;
}

@keyframes scanline-sweep {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* ============================================
   GLITCH BURST EFFECT
   ============================================ */
.glitch-burst {
    animation: glitch-burst 0.3s ease-out;
}

@keyframes glitch-burst {
    0% {
        transform: translate(0) skew(0);
        filter: brightness(1);
    }
    20% {
        transform: translate(-3px, 2px) skew(3deg);
        filter: brightness(1.2);
    }
    40% {
        transform: translate(3px, -2px) skew(-3deg);
        filter: brightness(0.9);
    }
    60% {
        transform: translate(-2px, 3px) skew(2deg);
        filter: brightness(1.1);
    }
    80% {
        transform: translate(2px, -3px) skew(-2deg);
        filter: brightness(0.95);
    }
    100% {
        transform: translate(0) skew(0);
        filter: brightness(1);
    }
}

/* ============================================
   NOISE EFFECT (Subtle)
   ============================================ */
.noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9997;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' 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");
    animation: noise-shift 0.2s steps(10) infinite;
}

@keyframes noise-shift {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    20% { transform: translate(5%, 5%); }
    30% { transform: translate(-5%, 5%); }
    40% { transform: translate(5%, -5%); }
    50% { transform: translate(-2%, 2%); }
    60% { transform: translate(2%, -2%); }
    70% { transform: translate(-3%, -3%); }
    80% { transform: translate(3%, 3%); }
    90% { transform: translate(-1%, 1%); }
    100% { transform: translate(0, 0); }
}

/* ============================================
   FLICKER EFFECT
   ============================================ */
.flicker {
    animation: flicker 0.15s infinite;
}

@keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.95; }
}

/* Random glitch on hover */
.glitch-hover:hover {
    animation: glitch-burst 0.2s ease-out;
}

/* ============================================
   INTERLACED EFFECT
   ============================================ */
.interlaced {
    position: relative;
}

.interlaced::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        rgba(0, 0, 0, 0.05) 1px,
        rgba(0, 0, 0, 0.05) 2px
    );
    pointer-events: none;
    opacity: 0.5;
}

/* ============================================
   GOLD BORDER ANIMATION
   ============================================ */
.glitch-border {
    position: relative;
    border: 2px solid transparent;
    animation: gold-border 3s infinite;
}

@keyframes gold-border {
    0%, 100% {
        border-color: var(--gold-primary);
        box-shadow: 0 0 5px rgba(204, 153, 51, 0.3);
    }
    33% {
        border-color: var(--gold-light);
        box-shadow: 0 0 8px rgba(230, 179, 71, 0.4);
    }
    66% {
        border-color: var(--gold-dark);
        box-shadow: 0 0 5px rgba(153, 114, 38, 0.3);
    }
}

/* ============================================
   SHINE EFFECT
   ============================================ */
.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 215, 0, 0.2),
        transparent
    );
    animation: shine-sweep 3s ease-in-out infinite;
}

@keyframes shine-sweep {
    0% { left: -50%; }
    50%, 100% { left: 150%; }
}