/* BridgeLink Radar Widget
 * ────────────────────────────────────────────────────────────────────────────
 * A SINGLE contained radar element — NOT a screen-wide wallpaper.
 * Renders inside `.radar-mark` containers (typically in the hero corner)
 * with a slow sweep animation honoring prefers-reduced-motion.
 *
 * Usage:
 *   <div class="radar-mark" aria-hidden="true">
 *     <div class="radar-mark__ping"></div>
 *   </div>
 *
 * No body styles. The brand is carried by surfaces and chrome, not by
 * background patterns.
 */

.radar-mark {
  /* Square container, sized via parent or via inline width. */
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  user-select: none;
}

/* Concentric rings + crosshair drawn as a single inline SVG so the entire
   structure remains crisp at any size and a single repaint covers all of it. */
.radar-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='currentColor' stroke-width='1'><circle cx='200' cy='200' r='40'/><circle cx='200' cy='200' r='80' opacity='0.85'/><circle cx='200' cy='200' r='130' opacity='0.7'/><circle cx='200' cy='200' r='180' opacity='0.55'/><circle cx='200' cy='200' r='195' stroke-width='1.4' opacity='0.9'/><line x1='5' y1='200' x2='395' y2='200' opacity='0.45'/><line x1='200' y1='5' x2='200' y2='395' opacity='0.45'/><line x1='59' y1='59' x2='341' y2='341' opacity='0.25'/><line x1='341' y1='59' x2='59' y2='341' opacity='0.25'/><circle cx='200' cy='200' r='3' fill='currentColor' stroke='none'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  color: currentColor;
  opacity: 0.55;
}

/* Sweep beam — a conic-gradient masked to a circle, slowly rotating.
   The "tail" is a 20-degree wedge that tapers into the rings. */
.radar-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, 0) 340deg,
    rgba(255, 255, 255, 0.08) 350deg,
    rgba(255, 255, 255, 0.22) 359deg,
    rgba(255, 255, 255, 0.35) 360deg,
    rgba(255, 255, 255, 0) 360deg
  );
  mask-image: radial-gradient(circle, black 0, black 49%, transparent 50%);
  -webkit-mask-image: radial-gradient(circle, black 0, black 49%, transparent 50%);
  animation: bl-radar-sweep 6s linear infinite;
  mix-blend-mode: screen;
}

/* Optional ping dot that pulses outward — emits at center every cycle. */
.radar-mark__ping {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: bl-radar-ping 6s ease-out infinite;
  opacity: 0.9;
}

@keyframes bl-radar-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes bl-radar-ping {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 0.9; }
  60%  { box-shadow: 0 0 0 70px transparent; opacity: 0; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .radar-mark::after,
  .radar-mark__ping { animation: none; }
  .radar-mark__ping { opacity: 0; }
}

/* Light-on-dark variant for placement on navy hero — sweeps in white. */
.radar-mark.on-dark { color: rgba(255, 255, 255, 0.6); }

/* Dark-on-light variant for placement on white surface — sweeps in navy. */
.radar-mark.on-light { color: rgba(11, 31, 58, 0.5); }
.radar-mark.on-light::after {
  background: conic-gradient(
    from 0deg,
    rgba(11, 31, 58, 0) 0deg,
    rgba(11, 31, 58, 0) 340deg,
    rgba(11, 31, 58, 0.05) 350deg,
    rgba(11, 31, 58, 0.14) 359deg,
    rgba(11, 31, 58, 0.22) 360deg,
    rgba(11, 31, 58, 0) 360deg
  );
  mix-blend-mode: multiply;
}