Hologram

<!-- Hologram — translucent cyan projection with slow scanning
     interference bands and two brief flicker dips per 4s cycle
     (~0.5/sec) — far under the 3-flash/sec seizure-safety ceiling. -->
<div class="nuda-gd2-hologram">
  <span class="nuda-gd2-hologram__text">HOLO</span>
  <span class="nuda-gd2-hologram__bands" aria-hidden="true"></span>
</div>

.nuda-gd2-hologram {
  position: relative;
  display: grid;
  place-items: center;
  width: 160px;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg,#0a1416,#09090b);
}

.nuda-gd2-hologram__text {
  font: 900 1.5rem/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing: .1em;
  color: #8affe0;
  text-shadow: 0 0 12px rgba(138,255,224,.6);
  animation: _nuda-gd2hologram-flicker 4s steps(1) infinite;
}

.nuda-gd2-hologram__bands {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,rgba(138,255,224,.12) 0 2px,transparent 2px 8px);
  background-size: 100% 200%;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: _nuda-gd2hologram-scan 3s linear infinite;
}

@keyframes _nuda-gd2hologram-flicker {
  0%,7%,100% {
    opacity: 1;
  }
  7.5% {
    opacity: .55;
  }
  8.5% {
    opacity: 1;
  }
  44% {
    opacity: 1;
  }
  44.5% {
    opacity: .6;
  }
  46% {
    opacity: 1;
  }
}

@keyframes _nuda-gd2hologram-scan {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

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