Pixel Streak

<!-- Pixel Streak — vertical columns "pull" pixels up/down in a burst. -->
<div class="nuda-glitch-streak">
  <span>STREAK</span>
  <span class="nuda-glitch-streak__col"></span>
  <span class="nuda-glitch-streak__col"></span>
  <span class="nuda-glitch-streak__col"></span>
  <span class="nuda-glitch-streak__col"></span>
</div>

/* ── Pixel Streak ────────────────────────────────────────────
   A few vertical gradient columns (lime / cyan / magenta) briefly
   stretch on the Y axis to fake "stuck pixel" smearing, then vanish.
   The burst happens once per ~4.5s cycle — well under 3 flashes/sec.
   ──────────────────────────────────────────────────────────── */
.nuda-glitch-streak {
  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;
}

.nuda-glitch-streak__col {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8%;
  width: 8%;
  background: linear-gradient(180deg, transparent, rgba(228, 255, 84, 0.5), transparent);
  opacity: 0;
  animation: glitch-streak-pull 4.5s ease-in-out infinite;
}

.nuda-glitch-streak__col:nth-child(2) {
  left: 22%;
  animation-delay: 0.3s;
  background: linear-gradient(180deg, transparent, rgba(0, 229, 255, 0.45), transparent);
}

.nuda-glitch-streak__col:nth-child(3) {
  left: 54%;
  animation-delay: 0.6s;
}

.nuda-glitch-streak__col:nth-child(4) {
  left: 78%;
  animation-delay: 0.15s;
  background: linear-gradient(180deg, transparent, rgba(255, 0, 212, 0.4), transparent);
}

@keyframes glitch-streak-pull {
  0%, 82%, 100% { opacity: 0;   transform: scaleY(0.2); }
  86%           { opacity: 0.9; transform: scaleY(1); }
  92%           { opacity: 0.6; transform: scaleY(1.4); }
}

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