/* ============================================================
   NEONODE — GLITCH, GRAFICA. Strato cosmetico SOPRA l'app.
   pointer-events:none → non blocca mai l'uso (regola di ferro).
   ============================================================ */

.nn-glitch { position: fixed; inset: 0; z-index: 2000; pointer-events: none; overflow: hidden; }

.nn-glitch .cy, .nn-glitch .mg { position: absolute; inset: 0; mix-blend-mode: screen; }
.nn-glitch .cy { background: rgba(0,229,255,.10);  animation: nn-gl-shift .15s steps(3) infinite; }
.nn-glitch .mg { background: rgba(255,43,214,.10); animation: nn-gl-shift .12s steps(3) infinite reverse; }
.nn-glitch .sc { position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.20) 2px 3px); }

@keyframes nn-gl-shift {
  0% { transform: translate(0,0); }   25% { transform: translate(-3px,1px); }
  50% { transform: translate(2px,-2px); } 75% { transform: translate(-2px,2px); }
  100% { transform: translate(0,0); }
}
@keyframes nn-gl-tear {
  0%,100% { clip-path: inset(0 0 0 0); } 20% { clip-path: inset(28% 0 60% 0); }
  45% { clip-path: inset(70% 0 12% 0); } 70% { clip-path: inset(8% 0 82% 0); }
  90% { clip-path: inset(52% 0 30% 0); }
}

/* intensità per set-up */
.nn-glitch.disturbo       .cy, .nn-glitch.disturbo       .mg { opacity: .6; }
.nn-glitch.rottura        .cy, .nn-glitch.rottura        .mg { opacity: 1; animation-duration: .08s; }
.nn-glitch.rottura        .sc { animation: nn-gl-tear .22s steps(2) infinite; }
.nn-glitch.corruzione     .cy, .nn-glitch.corruzione     .mg { opacity: .5; }
.nn-glitch.errore-sistema .cy, .nn-glitch.errore-sistema .mg { opacity: .8; }

/* testo corrotto (set-up "corruzione") */
.nn-gl-cor { position: absolute; left: 0; right: 0; top: 42%; text-align: center;
  font-family: var(--font-mono); font-size: 18px; letter-spacing: 2px; color: var(--lime);
  text-shadow: var(--glow-lime); word-break: break-all; padding: 0 16px; opacity: .9; }

/* finto box errore (set-up "errore-sistema") */
.nn-gl-err { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  min-width: 240px; background: #160608; border: 1px solid var(--err);
  box-shadow: 0 0 14px rgba(255,43,80,.5); padding: 14px 16px;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px)); }
.nn-gl-err__t { font-family: var(--font-mono); color: var(--err); letter-spacing: 1px; font-size: 14px; }
.nn-gl-err__c { font-family: var(--font-mono); color: #ff9aa6; font-size: 12px; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .nn-glitch .cy, .nn-glitch .mg, .nn-glitch .sc { animation: none; }
}

/* ------------------------------------------------------------
   glitchSu: deforma l'elemento SUL POSTO (non un overlay a sé).
   Separazione RGB (drop-shadow ciano/magenta) + jitter/strappo.
   Cosmetico: nessun blocco input; si pulisce da solo (classi tolte).
   ------------------------------------------------------------ */
.nn-glitchsu { will-change: transform, filter; animation: nn-su-jit .18s steps(2) infinite; }

.nn-glitchsu.disturbo {
  animation-duration: .2s;
  filter: drop-shadow(2px 0 rgba(0,229,255,.55)) drop-shadow(-2px 0 rgba(255,43,214,.55));
}
.nn-glitchsu.rottura {
  animation: nn-su-tear .16s steps(2) infinite;
  filter: drop-shadow(3px 0 rgba(0,229,255,.7)) drop-shadow(-3px 0 rgba(255,43,214,.7));
}
.nn-glitchsu.corruzione {
  animation-duration: .1s;
  filter: drop-shadow(2px 0 rgba(0,229,255,.5)) drop-shadow(-2px 0 rgba(212,255,0,.5)) contrast(1.1);
}
.nn-glitchsu.errore-sistema {
  animation: nn-su-tear .12s steps(2) infinite;
  filter: drop-shadow(2px 0 rgba(255,43,80,.7)) drop-shadow(-2px 0 rgba(0,229,255,.6));
}

@keyframes nn-su-jit {
  0%,100% { transform: translate(0,0); }   25% { transform: translate(-2px,1px); }
  50% { transform: translate(2px,-1px); }   75% { transform: translate(-1px,1px); }
}
@keyframes nn-su-tear {
  0%,100% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
  30% { transform: translate(-3px,0); clip-path: inset(20% 0 55% 0); }
  60% { transform: translate(3px,0);  clip-path: inset(62% 0 18% 0); }
  85% { transform: translate(-2px,0); clip-path: inset(6% 0 80% 0); }
}

@media (prefers-reduced-motion: reduce) {
  .nn-glitchsu { animation: none; }
}