.type-target {
  visibility: hidden;
}

:root {
  --tetra-grid-size: 42px;
}

.tetra-atmosphere-streaks {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.tetra-atmosphere-grid {
  display: none;
}

.tetra-atmosphere-streaks {
  opacity: .2;
  mix-blend-mode: screen;
}

.tetra-atmosphere-streaks::before,
.tetra-atmosphere-streaks::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tetra-atmosphere-streaks::before {
  background:
    linear-gradient(90deg, transparent 0 47%, rgba(245, 199, 107, .18) 49%, rgba(245, 199, 107, .48) 50%, rgba(0, 255, 213, .16) 51%, transparent 54%),
    linear-gradient(90deg, transparent 0 50%, rgba(0, 255, 213, .14) 51%, transparent 53%);
  background-size: 840px var(--tetra-grid-size), 1260px var(--tetra-grid-size);
  background-repeat: repeat;
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px var(--tetra-grid-size));
  mask-image: repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px var(--tetra-grid-size));
  animation: tetraHorizontalStreaks 18s linear infinite;
}

.tetra-atmosphere-streaks::after {
  background:
    linear-gradient(180deg, transparent 0 47%, rgba(245, 199, 107, .16) 49%, rgba(245, 199, 107, .4) 50%, rgba(0, 255, 213, .14) 51%, transparent 54%),
    linear-gradient(180deg, transparent 0 50%, rgba(0, 255, 213, .12) 51%, transparent 53%);
  background-size: var(--tetra-grid-size) 924px, var(--tetra-grid-size) 1344px;
  background-repeat: repeat;
  -webkit-mask-image: repeating-linear-gradient(to right, #000 0 1px, transparent 1px var(--tetra-grid-size));
  mask-image: repeating-linear-gradient(to right, #000 0 1px, transparent 1px var(--tetra-grid-size));
  animation: tetraVerticalStreaks 22s linear infinite;
}

@keyframes tetraHorizontalStreaks {
  from { background-position: -840px 0, 1260px calc(var(--tetra-grid-size) * 3); }
  to { background-position: 840px 0, -1260px calc(var(--tetra-grid-size) * 3); }
}

@keyframes tetraVerticalStreaks {
  from { background-position: 0 -924px, calc(var(--tetra-grid-size) * 5) 1344px; }
  to { background-position: 0 924px, calc(var(--tetra-grid-size) * 5) -1344px; }
}

.type-target.typing,
.type-target.typed {
  visibility: visible;
}

.type-target.typing::after {
  content: "\258B";
  display: inline-block;
  margin-left: .12em;
  color: var(--cyan, #00ffd5);
  animation: tacticalCursorBlink .42s steps(1) infinite;
  text-shadow: 0 0 12px rgba(0, 255, 213, .8);
}

@keyframes tacticalCursorBlink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tetra-atmosphere-grid,
  .tetra-atmosphere-streaks {
    animation: none;
  }

  .tetra-atmosphere-streaks {
    display: none;
  }

  .type-target {
    visibility: visible;
  }

  .type-target.typing::after {
    content: none;
  }
}