*, *::before, *::after {
  box-sizing: border-box;
}

.radar-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  isolation: isolate;
  --radar-size: min(1120px, 108vw);
  --radar-left: 50%;
  --radar-top: -18%;
  --radar-opacity: 0.78;
  --radar-grid-alpha: 0.12;
  --radar-beam-alpha: 0.34;
  --radar-glow-alpha: 0.18;
  --radar-vignette-alpha: 0.88;
  --radar-speed: 16s;
}

.radar-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 8%, rgba(7, 8, 12, 0) 0%, rgba(7, 8, 12, 0.18) 36%, rgba(7, 8, 12, 0.58) 66%, rgba(7, 8, 12, var(--radar-vignette-alpha)) 100%),
    linear-gradient(180deg, rgba(7, 8, 12, 0.08), rgba(7, 8, 12, 0.28) 45%, rgba(7, 8, 12, 0.16) 100%);
}

.radar-bg__scope,
.radar-bg__glow,
.radar-bg__sweep,
.radar-bg__blips {
  position: absolute;
  left: var(--radar-left);
  top: var(--radar-top);
  width: var(--radar-size);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
}

.radar-bg__scope {
  opacity: var(--radar-opacity);
  background:
    radial-gradient(circle at center, rgba(112, 255, 176, 0.1) 0 1px, transparent 1px),
    linear-gradient(rgba(34, 197, 94, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 197, 94, 0.04) 1px, transparent 1px),
    repeating-radial-gradient(
      circle at center,
      transparent 0 12.5%,
      rgba(34, 197, 94, var(--radar-grid-alpha)) 12.7% 12.95%,
      transparent 13.2% 25%,
      rgba(34, 197, 94, calc(var(--radar-grid-alpha) - 0.02)) 25.2% 25.45%,
      transparent 25.7% 37.5%,
      rgba(34, 197, 94, calc(var(--radar-grid-alpha) - 0.03)) 37.7% 37.95%,
      transparent 38.2% 50%,
      rgba(34, 197, 94, calc(var(--radar-grid-alpha) - 0.04)) 50.2% 50.45%,
      transparent 50.7% 62.5%,
      rgba(34, 197, 94, calc(var(--radar-grid-alpha) - 0.05)) 62.7% 62.95%,
      transparent 63.2% 75%
    );
  background-size:
    auto,
    100% 112px,
    112px 100%,
    auto;
  background-position: center;
  mask-image: radial-gradient(circle at center, transparent 0 10%, rgba(0, 0, 0, 0.95) 15%, rgba(0, 0, 0, 0.84) 70%, transparent 84%);
}

.radar-bg__scope::before,
.radar-bg__scope::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: rgba(34, 197, 94, 0.12);
  transform: translate(-50%, -50%);
}

.radar-bg__scope::before {
  width: 2px;
  height: 72%;
  border-radius: 999px;
}

.radar-bg__scope::after {
  width: 72%;
  height: 2px;
  border-radius: 999px;
}

.radar-bg__glow {
  background: radial-gradient(circle at center, rgba(34, 197, 94, var(--radar-glow-alpha)) 0%, rgba(34, 197, 94, 0.08) 38%, transparent 68%);
  filter: blur(32px);
  opacity: 0.72;
}

.radar-bg__sweep {
  background: conic-gradient(
    from -90deg,
    rgba(34, 197, 94, 0.02) 0deg,
    rgba(78, 232, 137, 0.08) 10deg,
    rgba(118, 255, 178, var(--radar-beam-alpha)) 18deg,
    rgba(78, 232, 137, 0.16) 28deg,
    rgba(34, 197, 94, 0.05) 40deg,
    transparent 54deg 360deg
  );
  mask-image: radial-gradient(circle at center, transparent 0 12%, rgba(0, 0, 0, 0.98) 18%, rgba(0, 0, 0, 0.86) 70%, transparent 84%);
  mix-blend-mode: screen;
  opacity: 0.88;
  will-change: transform;
  animation: radar-sweep-spin var(--radar-speed) linear infinite;
}

.radar-bg__blips {
  opacity: 0.92;
}

.radar-bg__blip {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--blip-size, 8px);
  height: var(--blip-size, 8px);
  --blip-distance: calc(var(--radar-size) * 0.3);
  --blip-transform: translate(-50%, -50%) rotate(var(--blip-angle, 0deg)) translateY(calc(var(--blip-distance) * -1));
  transform: var(--blip-transform) scale(0.58);
  border-radius: 50%;
  background: rgba(187, 247, 208, 0.98);
  box-shadow:
    0 0 0 1px rgba(7, 8, 12, 0.24),
    0 0 10px rgba(34, 197, 94, 0.5);
  opacity: 0;
  will-change: transform, opacity;
  animation: radar-contact var(--radar-speed) linear infinite;
  animation-delay: calc(var(--radar-speed) * var(--blip-phase, 0) * -1);
}

.radar-bg__blip::after {
  content: "";
  position: absolute;
  inset: calc(var(--blip-size, 8px) * -0.9);
  border-radius: 50%;
  border: 1px solid rgba(134, 239, 172, 0.38);
  opacity: 0;
  animation: radar-contact-ring var(--radar-speed) linear infinite;
  animation-delay: calc(var(--radar-speed) * var(--blip-phase, 0) * -1);
}

.radar-bg__blip--1 { --blip-angle: 254deg; --blip-distance: calc(var(--radar-size) * 0.29); --blip-size: 7px; --blip-phase: 0.705; }
.radar-bg__blip--2 { --blip-angle: 320deg; --blip-distance: calc(var(--radar-size) * 0.25); --blip-size: 6px; --blip-phase: 0.889; }
.radar-bg__blip--3 { --blip-angle: 186deg; --blip-distance: calc(var(--radar-size) * 0.17); --blip-size: 9px; --blip-phase: 0.517; }
.radar-bg__blip--4 { --blip-angle: 66deg; --blip-distance: calc(var(--radar-size) * 0.14); --blip-size: 7px; --blip-phase: 0.183; }
.radar-bg__blip--5 { --blip-angle: 40deg; --blip-distance: calc(var(--radar-size) * 0.34); --blip-size: 5px; --blip-phase: 0.111; }
.radar-bg__blip--6 { --blip-angle: 111deg; --blip-distance: calc(var(--radar-size) * 0.31); --blip-size: 8px; --blip-phase: 0.308; }
.radar-bg__blip--7 { --blip-angle: 11deg; --blip-distance: calc(var(--radar-size) * 0.37); --blip-size: 6px; --blip-phase: 0.031; }
.radar-bg__blip--8 { --blip-angle: 312deg; --blip-distance: calc(var(--radar-size) * 0.46); --blip-size: 5px; --blip-phase: 0.867; }

@keyframes radar-sweep-spin {
  from {
    transform: translateX(-50%) rotate(0deg);
  }

  to {
    transform: translateX(-50%) rotate(360deg);
  }
}

@keyframes radar-contact {
  0%,
  2%,
  100% {
    opacity: 0;
    transform: var(--blip-transform) scale(0.58);
  }

  4%,
  7% {
    opacity: 0.98;
    transform: var(--blip-transform) scale(1);
  }

  12% {
    opacity: 0.28;
    transform: var(--blip-transform) scale(0.86);
  }

  18% {
    opacity: 0;
    transform: var(--blip-transform) scale(0.7);
  }
}

@keyframes radar-contact-ring {
  0%,
  3%,
  100% {
    opacity: 0;
    transform: scale(0.45);
  }

  7% {
    opacity: 0.42;
    transform: scale(1);
  }

  15% {
    opacity: 0;
    transform: scale(1.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .radar-bg__sweep,
  .radar-bg__blip,
  .radar-bg__blip::after {
    animation: none;
  }

  .radar-bg__sweep {
    opacity: 0.28;
  }

  .radar-bg__blip {
    opacity: 0.28;
  }

  .radar-bg__blip::after {
    opacity: 0;
  }
}

@media (max-width: 900px) {
  .radar-bg {
    --radar-size: min(960px, 150vw);
    --radar-top: -10%;
  }
}

@media (max-width: 640px) {
  .radar-bg {
    --radar-size: min(840px, 176vw);
    --radar-top: 0;
    --radar-left: 50%;
    --radar-opacity: 0.58;
  }
}