Signal Loss

<!-- Signal Loss — the caption collapses vertically to a thin bright
     line and recovers once per 6s cycle, like a CRT powering down.
     A single slow event per cycle — no repeated strobing. -->
<div class="nuda-gd2-signal-loss">
  <span class="nuda-gd2-signal-loss__text">NO SIGNAL</span>
</div>

.nuda-gd2-signal-loss {
  position: relative;
  display: grid;
  place-items: center;
  width: 160px;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: #09090b;
}

.nuda-gd2-signal-loss__text {
  font: 900 1.2rem/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing: .1em;
  color: #e4ff54;
  text-shadow: 0 0 14px rgba(228,255,84,.5);
  transform-origin: center;
  animation: _nuda-gd2signal-loss 6s cubic-bezier(.6,0,.4,1) infinite;
}

@keyframes _nuda-gd2signal-loss {
  0%,60% {
    transform: scaleY(1);
    opacity: 1;
  }
  68% {
    transform: scaleY(.04);
    opacity: 1;
  }
  76% {
    transform: scaleY(.04);
    opacity: .6;
  }
  84% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-gd2-signal-loss__text {
    animation: none;
    transform: none;
    opacity: 1;
  }
}