Datamosh

<!-- Datamosh — blocky displacement bands sweep down the frame. -->
<div class="nuda-glitch-datamosh">
  <span>DATA</span>
  <span class="nuda-glitch-datamosh__block"></span>
  <span class="nuda-glitch-datamosh__block"></span>
  <span class="nuda-glitch-datamosh__block"></span>
</div>

/* ── Datamosh ────────────────────────────────────────────────
   Translucent "compression-artifact" blocks sweep vertically in a
   brief burst every few seconds (staggered cyan / magenta / lime).
   Each block fades and moves — no full-frame flashing.
   ──────────────────────────────────────────────────────────── */
.nuda-glitch-datamosh {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #101014, #09090b);
  color: #e4ff54;
  font: 900 1.4rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.1em;
}

.nuda-glitch-datamosh__block {
  position: absolute;
  left: 0;
  right: 0;
  height: 22%;
  background: rgba(228, 255, 84, 0.12);
  mix-blend-mode: screen;
  opacity: 0;
  animation: glitch-datamosh-sweep 5s ease-in-out infinite;
}

.nuda-glitch-datamosh__block:nth-child(2) {
  animation-delay: 1.6s;
  background: rgba(0, 229, 255, 0.12);
}

.nuda-glitch-datamosh__block:nth-child(3) {
  animation-delay: 3.2s;
  background: rgba(255, 0, 212, 0.1);
}

@keyframes glitch-datamosh-sweep {
  0%, 70%, 100% { opacity: 0; transform: translateY(0) scaleX(1); }
  74% { opacity: 1; transform: translateY(120%) scaleX(1.04); }
  80% { opacity: 1; transform: translateY(240%) scaleX(0.96); }
  86% { opacity: 0; transform: translateY(340%) scaleX(1); }
}

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