/* space. radar blip animation — drop-in, no dependencies */
.space-radar{
  --radar-size: 420px;          /* change size here (or use width:100%) */
  --radar-speed: 4s;            /* one full sweep */
  --radar-bg1: #4EB2CA;
  --radar-bg2: #3CD9CF;
  --radar-line: rgba(255,255,255,.28);
  --radar-sweep: rgba(255,255,255,.45);
  --radar-blip: #ffffff;
  --offset: 0s;
  position: relative;
  width: var(--radar-size);
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 9.5%, var(--radar-line) 9.5% 10%, transparent 10% 24.5%, var(--radar-line) 24.5% 25%, transparent 25% 39.5%, var(--radar-line) 39.5% 40%, transparent 40% 54.5%, var(--radar-line) 54.5% 55%, transparent 55% 69.5%, var(--radar-line) 69.5% 70%),
    radial-gradient(circle at 35% 30%, var(--radar-bg2), var(--radar-bg1));
  box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 20px 60px rgba(78,178,202,.35), inset 0 0 60px rgba(11,31,36,.25);
}
.space-radar.square{ border-radius: 24px; }   /* optional: square card version */
.space-radar .sweep{
  position:absolute; inset:0;
  background: conic-gradient(from 0deg, transparent 0deg 290deg, var(--radar-sweep) 360deg);
  animation: space-radar-spin var(--radar-speed) linear infinite;
  animation-delay: calc(0s - var(--offset));
}
.space-radar .sweep::after{          /* bright leading edge */
  content:""; position:absolute; left:50%; top:0; width:2px; height:50%;
  transform:translateX(-50%); background:linear-gradient(to top, rgba(255,255,255,.9), rgba(255,255,255,.2));
}
.space-radar .core{
  position:absolute; left:50%; top:50%; width:3.2%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%); background:var(--radar-blip);
  box-shadow:0 0 12px 4px rgba(255,255,255,.7), 0 0 30px 10px rgba(11,31,36,.35);
}
.space-radar .blip{
  position:absolute; width:2.6%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%); background:var(--radar-blip);
  animation: space-radar-blip var(--radar-speed) ease-out infinite;
  animation-delay: calc(var(--a) * var(--radar-speed) / 360 - var(--radar-speed) - var(--offset));
}
.space-radar .blip::after{           /* ping ring */
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--radar-blip);
  animation: space-radar-ping var(--radar-speed) ease-out infinite;
  animation-delay: inherit;
}
@keyframes space-radar-spin{ to{ transform: rotate(360deg); } }
@keyframes space-radar-blip{
  0%  { opacity:1; transform:translate(-50%,-50%) scale(1.5); box-shadow:0 0 16px 6px rgba(255,255,255,.85); }
  45% { opacity:.35; transform:translate(-50%,-50%) scale(1);   box-shadow:0 0 6px 2px rgba(255,255,255,.3); }
  100%{ opacity:.2; transform:translate(-50%,-50%) scale(1);   box-shadow:none; }
}
@keyframes space-radar-ping{
  0%  { opacity:.9; transform:scale(1); }
  30% { opacity:0;  transform:scale(5); }
  100%{ opacity:0;  transform:scale(5); }
}
.space-radar.paused *, .space-radar.paused *::after{ animation-play-state:paused !important; }
@media (prefers-reduced-motion: reduce){
  .space-radar *, .space-radar *::after{ animation-play-state:paused !important; }
}