Scanline Glitch

<!-- Scanline Glitch — CRT scanlines + a single rolling band. -->
<div class="nuda-glitch-scanline">
  <span>SIGNAL</span>
  <span class="nuda-glitch-scanline__grid"></span>
  <span class="nuda-glitch-scanline__roll"></span>
</div>

/* ── Scanline Glitch ─────────────────────────────────────────
   Static CRT scanline grid plus one soft lime band that rolls down
   the surface continuously (smooth, never strobing).
   Customize:
     --nuda-gsc-roll  : roll duration
   ──────────────────────────────────────────────────────────── */
.nuda-glitch-scanline {
  --nuda-gsc-roll: 4s;

  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #09090b;
  color: #e4ff54;
  font: 900 1.4rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-shadow: 0 0 10px rgba(228, 255, 84, 0.4);
}

.nuda-glitch-scanline__grid {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.35) 0 2px,
    transparent 2px 4px
  );
  pointer-events: none;
}

.nuda-glitch-scanline__roll {
  position: absolute;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(228, 255, 84, 0.18),
    transparent
  );
  pointer-events: none;
  animation: glitch-scanline-roll var(--nuda-gsc-roll) linear infinite;
}

@keyframes glitch-scanline-roll {
  0%   { transform: translateY(-40%); }
  100% { transform: translateY(170%); }
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-glitch-scanline__roll { animation: none; opacity: 0; }
}