/* Refined status pulse for the hero eyebrow. */
.hero .eyebrow {
  gap: .875rem;
}

.hero .pulse {
  position: relative;
  flex: 0 0 auto;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background: #73dcff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .5),
    0 0 .45rem rgba(85, 216, 255, .72),
    0 0 1rem rgba(59, 130, 246, .24);
  animation: hero-dot-glow 2.6s ease-in-out infinite;
}

.hero .pulse::before {
  content: "";
  position: absolute;
  inset: -.3rem;
  border: 1px solid rgba(115, 220, 255, .24);
  border-radius: 50%;
}

.hero .pulse::after {
  content: "";
  position: absolute;
  inset: -.08rem;
  border: 1px solid rgba(115, 220, 255, .72);
  border-radius: 50%;
  animation: hero-dot-pulse 2.6s cubic-bezier(.2, .65, .3, 1) infinite;
}

@keyframes hero-dot-glow {
  0%, 100% {
    background: #73dcff;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .5),
      0 0 .4rem rgba(85, 216, 255, .62),
      0 0 .9rem rgba(59, 130, 246, .2);
  }
  45% {
    background: #a4ebff;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .68),
      0 0 .6rem rgba(85, 216, 255, .82),
      0 0 1.2rem rgba(59, 130, 246, .3);
  }
}

@keyframes hero-dot-pulse {
  0% {
    opacity: .72;
    transform: scale(.85);
  }
  65%, 100% {
    opacity: 0;
    transform: scale(2.65);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .pulse,
  .hero .pulse::after {
    animation: none !important;
  }

  .hero .pulse::after {
    opacity: .35;
    transform: scale(1.55);
  }
}