/* ========================================
   Radar Element
   ======================================== */

.brxe-radar {
  --radar-speed: 8s;
  --radar-sweep-color: var(--lazio-orange, #F97316);
  --radar-dot-color: var(--lazio-orange, #F97316);
  --radar-dot-size: 8px;
  --radar-ring-color: rgba(255, 249, 242, 0.75);
  --radar-ring-width: 2px;
  --radar-crosshair-color: rgba(255, 249, 242, 0.75);
}

/* Root */
.radar {
  position: relative;
  width: 100%;
  max-width: 450px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
}

/* Background layer */
.radar__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Rings */
.radar__ring {
  position: absolute;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: var(--radar-ring-width) solid var(--radar-ring-color);
  box-sizing: border-box;
}

.radar__ring--1 {
  border-width: calc(var(--radar-ring-width) + 1px);
}

.radar__ring--1.radar__ring--glow {
  background: radial-gradient(
    circle at center,
    rgba(249, 115, 22, 0.08) 0%,
    rgba(249, 115, 22, 0.03) 40%,
    transparent 70%
  );
}

/* Crosshairs */
.radar__crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 0;
  border-top: var(--radar-ring-width) solid var(--radar-crosshair-color);
  transform-origin: 0 0;
}

/* Minor ticks — ring-shaped mask */
.radar__minor-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    circle closest-side at center,
    transparent calc(var(--tick-inner, 90%) - 0.5%),
    black var(--tick-inner, 90%),
    black var(--tick-outer, 100%),
    transparent calc(var(--tick-outer, 100%) + 0.5%)
  );
  mask-image: radial-gradient(
    circle closest-side at center,
    transparent calc(var(--tick-inner, 90%) - 0.5%),
    black var(--tick-inner, 90%),
    black var(--tick-outer, 100%),
    transparent calc(var(--tick-outer, 100%) + 0.5%)
  );
}

.radar__tick {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 0;
  border-top: 1px solid var(--radar-crosshair-color);
  opacity: 0.5;
  transform-origin: 0 0;
}

/* Sweep arm */
.radar__sweep {
  position: absolute;
  inset: 0;
  animation: radar-spin var(--radar-speed) linear infinite;
  pointer-events: none;
}

.radar__sweep-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background: conic-gradient(
    from 270deg at 100% 100%,
    transparent 0deg,
    rgba(249, 115, 22, 0.01) 15deg,
    rgba(249, 115, 22, 0.06) 30deg,
    rgba(249, 115, 22, 0.15) 60deg,
    rgba(249, 115, 22, 0.25) 80deg,
    var(--radar-sweep-color) 90deg
  );
  border-radius: 100% 0 0 0;
  transform-origin: 100% 100%;
}

.radar__sweep-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 50%;
  background: var(--radar-sweep-color);
  transform-origin: bottom center;
  transform: translateX(-50%);
  opacity: 0.9;
}

/* Dots */
.radar__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.radar__dot {
  position: absolute;
  width: var(--radar-dot-size);
  height: var(--radar-dot-size);
  background-color: var(--radar-dot-color);
  border-radius: 50%;
}

.radar__label {
  position: absolute;
  white-space: nowrap;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--radar-dot-color);
  opacity: 0.85;
  pointer-events: none;
  transform: translate(50%, -50%);
  padding-left: calc(var(--radar-dot-size) + 6px);
}

/* ----------------------------------------
   Keyframes
   ---------------------------------------- */
@keyframes radar-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/*
 * Ping keyframes for each dwell step (10–90%).
 * Dwell = % of the sweep cycle the dot stays visible.
 * Shape: flash on → hold → fade out by dwell% → invisible until next sweep.
 * PHP rounds to nearest 10 and selects the matching name.
 */
@keyframes radar-ping-10 {
  0%   { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  2%   { opacity: 1;   transform: translate(50%,-50%) scale(1.6); }
  5%   { opacity: 0.6; transform: translate(50%,-50%) scale(1); }
  10%  { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  100% { opacity: 0;   transform: translate(50%,-50%) scale(1); }
}

@keyframes radar-ping-20 {
  0%   { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  2%   { opacity: 1;   transform: translate(50%,-50%) scale(1.6); }
  6%   { opacity: 0.8; transform: translate(50%,-50%) scale(1.2); }
  12%  { opacity: 0.5; transform: translate(50%,-50%) scale(1); }
  20%  { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  100% { opacity: 0;   transform: translate(50%,-50%) scale(1); }
}

@keyframes radar-ping-30 {
  0%   { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  2%   { opacity: 1;   transform: translate(50%,-50%) scale(1.6); }
  6%   { opacity: 0.9; transform: translate(50%,-50%) scale(1.2); }
  15%  { opacity: 0.6; transform: translate(50%,-50%) scale(1); }
  30%  { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  100% { opacity: 0;   transform: translate(50%,-50%) scale(1); }
}

@keyframes radar-ping-40 {
  0%   { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  2%   { opacity: 1;   transform: translate(50%,-50%) scale(1.6); }
  6%   { opacity: 0.9; transform: translate(50%,-50%) scale(1.2); }
  15%  { opacity: 0.7; transform: translate(50%,-50%) scale(1); }
  40%  { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  100% { opacity: 0;   transform: translate(50%,-50%) scale(1); }
}

@keyframes radar-ping-50 {
  0%   { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  2%   { opacity: 1;   transform: translate(50%,-50%) scale(1.6); }
  6%   { opacity: 0.9; transform: translate(50%,-50%) scale(1.2); }
  15%  { opacity: 0.7; transform: translate(50%,-50%) scale(1); }
  50%  { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  100% { opacity: 0;   transform: translate(50%,-50%) scale(1); }
}

@keyframes radar-ping-60 {
  0%   { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  2%   { opacity: 1;   transform: translate(50%,-50%) scale(1.6); }
  6%   { opacity: 0.9; transform: translate(50%,-50%) scale(1.2); }
  15%  { opacity: 0.7; transform: translate(50%,-50%) scale(1); }
  60%  { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  100% { opacity: 0;   transform: translate(50%,-50%) scale(1); }
}

@keyframes radar-ping-70 {
  0%   { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  2%   { opacity: 1;   transform: translate(50%,-50%) scale(1.6); }
  6%   { opacity: 0.9; transform: translate(50%,-50%) scale(1.2); }
  15%  { opacity: 0.7; transform: translate(50%,-50%) scale(1); }
  70%  { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  100% { opacity: 0;   transform: translate(50%,-50%) scale(1); }
}

@keyframes radar-ping-80 {
  0%   { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  2%   { opacity: 1;   transform: translate(50%,-50%) scale(1.6); }
  6%   { opacity: 0.9; transform: translate(50%,-50%) scale(1.2); }
  15%  { opacity: 0.7; transform: translate(50%,-50%) scale(1); }
  80%  { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  100% { opacity: 0;   transform: translate(50%,-50%) scale(1); }
}

@keyframes radar-ping-90 {
  0%   { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  2%   { opacity: 1;   transform: translate(50%,-50%) scale(1.6); }
  6%   { opacity: 0.9; transform: translate(50%,-50%) scale(1.2); }
  15%  { opacity: 0.7; transform: translate(50%,-50%) scale(1); }
  90%  { opacity: 0;   transform: translate(50%,-50%) scale(1); }
  100% { opacity: 0;   transform: translate(50%,-50%) scale(1); }
}

/* Responsive */
@media (max-width: 480px) {
  .radar__label {
    font-size: 9px;
  }
}