/* FN SOLUTIONS — css/booster-hero.css
   Hero extras for network-booster.html: signal rings visual */

.signal-rings {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 420px;
  height: 420px;
  pointer-events: none;
}

.ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(59, 130, 246, .18);
  animation: ring-pulse 3s ease-in-out infinite;
}

.ring-1 {
  inset: 35%;
  animation-delay: 0s;
}

.ring-2 {
  inset: 22%;
  animation-delay: .5s;
}

.ring-3 {
  inset: 10%;
  animation-delay: 1s;
}

.ring-4 {
  inset: 0;
  animation-delay: 1.5s;
  border-color: rgba(59, 130, 246, .08);
}

.ring-center {
  position: absolute;
  inset: 42%;
  background: var(--accent-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(37, 99, 235, .2), 0 0 40px rgba(37, 99, 235, .4);
}

@keyframes ring-pulse {

  0%,
  100% {
    opacity: .6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@media(max-width:960px) {
  .signal-rings {
    display: none;
  }
}