.sonar-wrapper {
  height: 100%;
}

.sonar-wrapper {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 7rem 0;
}

.sonar-emitter {
  position: relative;
  margin: 0 auto;
  width: 250px;
  height: 250px;
  border-radius: 9999px;
  background-color: rgba(255, 210, 7, 0.7);
}

.sonar-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background-color: HSL(49,100%,51%);
  opacity: 0;
  z-index: -2;
  pointer-events: none;
}

.sonar-wave {
  animation: sonarWave 1.2s linear infinite;
}

@keyframes sonarWave {
  from {
    opacity: 0.4;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}