.output-visual,
.signal-output-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.signal-output-stage {
  min-height: 260px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background:
    linear-gradient(rgba(255,255,255,0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.042) 1px, transparent 1px),
    rgba(3,6,11,0.64);
  background-size: 34px 34px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 54px rgba(0,0,0,0.24);
}

.signal-core {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(255,240,173,0.62);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, #fff7c4, #f4c96a 42%, #6e4308 86%);
  color: #130c02;
  box-shadow: 0 0 50px rgba(244,201,106,0.42), 0 22px 64px rgba(0,0,0,0.34);
}

.signal-core span {
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.signal-core strong {
  margin-top: -18px;
  font-size: 1.42rem;
  font-weight: 950;
}

.signal-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(244,201,106,0.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: signalWave 3.5s ease-out infinite;
}

.wave-one { width: 144px; height: 144px; }
.wave-two { width: 198px; height: 198px; animation-delay: -1.15s; }
.wave-three { width: 250px; height: 250px; animation-delay: -2.3s; }

@keyframes signalWave {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.48);
  }

  28% {
    opacity: 0.65;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
  }
}