/* components/glitch-mode.css — GlitchZone · easter egg Konami "GLITCH MODE" (Step 2.4)
   ------------------------------------------------------------------
   Estratto dal <style> inline di index_v13 (identico sulle pagine che lo hanno:
   tutte tranne 404). Easter egg GLOBALE: il <body> riceve la classe .glitch-mode
   via Konami code (logica JS in glitchzone-shared.js, micro-step 2.5) → effetti
   RGB-split / scanlines / tear / flicker + banner "GLITCH MODE ON". Auto-off dopo
   30s o con ESC (gestito dal JS).
   Dipendenza: gz-base. Caricato SEMPRE (incl. 404: easter egg ovunque).
   Firewall: zero riferimenti a techzone.
   NB: @keyframes onlineBlink lo usa il pallino del banner (gm-dot); da centralizzare
   in un animations.css se servirà. */

@keyframes gm-rgb-split {
    0%, 100% { text-shadow: 2px 0 var(--accent), -2px 0 var(--primary); transform: translate(0); }
    20% { text-shadow: -3px 0 var(--accent), 3px 0 var(--primary); transform: translate(-1px, 1px); }
    40% { text-shadow: 3px 0 var(--accent), -3px 0 var(--primary); transform: translate(2px, -1px); }
    60% { text-shadow: -2px 0 var(--accent), 2px 0 var(--primary); transform: translate(-2px, 0); }
    80% { text-shadow: 2px 0 var(--accent), -2px 0 var(--primary); transform: translate(1px, 2px); }
}
@keyframes gm-scanlines {
    0% { background-position: 0 0; }
    100% { background-position: 0 100vh; }
}
@keyframes gm-tear {
    0%, 100% { transform: translate(0); filter: hue-rotate(0deg); }
    10% { transform: translate(-8px, 0); filter: hue-rotate(20deg); }
    12% { transform: translate(8px, 0); filter: hue-rotate(-20deg); }
    14% { transform: translate(0); filter: hue-rotate(0deg); }
    50% { transform: translate(0); }
    52% { transform: translate(-4px, 2px) skewX(-2deg); filter: invert(0.1); }
    54% { transform: translate(0); filter: invert(0); }
}
@keyframes gm-flicker {
    0%, 100% { opacity: 1; }
    45%, 47% { opacity: 0.85; }
    46% { opacity: 0.6; }
}
@keyframes onlineBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

body.glitch-mode {
    animation: gm-tear 7s infinite;
}
body.glitch-mode h1, body.glitch-mode h2, body.glitch-mode h3,
body.glitch-mode .hero-title, body.glitch-mode .article-title, body.glitch-mode .section-title,
body.glitch-mode .logo {
    animation: gm-rgb-split 0.4s infinite linear !important;
}
body.glitch-mode main {
    animation: gm-flicker 3s infinite;
}
body.glitch-mode::before {
    content: '';
    position: fixed; inset: 0;
    background: repeating-linear-gradient(0deg,
        transparent 0, transparent 2px,
        rgba(0, 255, 136, 0.06) 2px, rgba(0, 255, 136, 0.06) 3px,
        transparent 3px, transparent 5px,
        rgba(255, 0, 128, 0.04) 5px, rgba(255, 0, 128, 0.04) 6px);
    pointer-events: none; z-index: 9998;
    animation: gm-scanlines 1.5s linear infinite;
    mix-blend-mode: screen;
}
body.glitch-mode::after {
    content: '';
    position: fixed; inset: 0;
    background: repeating-linear-gradient(90deg,
        transparent, transparent 80px,
        rgba(255, 0, 128, 0.02) 80px, rgba(255, 0, 128, 0.02) 82px);
    pointer-events: none; z-index: 9997;
}

/* Banner GLITCH MODE ON */
.glitch-mode-banner {
    position: fixed; top: 16px; left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: var(--accent); color: white;
    padding: 10px 20px; border-radius: var(--radius-sm);
    font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.85rem;
    letter-spacing: 2px; text-transform: uppercase;
    box-shadow: 0 0 30px var(--accent-glow), 0 0 60px var(--accent-glow);
    z-index: 9999; transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--primary);
}
body.glitch-mode .glitch-mode-banner {
    transform: translateX(-50%) translateY(0);
    animation: gm-rgb-split 0.5s infinite linear;
}
.glitch-mode-banner .gm-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary); box-shadow: 0 0 10px var(--primary);
    animation: onlineBlink 0.8s infinite;
}
.glitch-mode-banner .gm-hint {
    font-size: 0.65rem; opacity: 0.8; font-weight: 400; letter-spacing: 1px;
}

@media (prefers-reduced-motion: reduce) {
    body.glitch-mode, body.glitch-mode * { animation: none !important; }
}
