/* Radar Aero (Frutiger Aero) — único estilo do radar de carregamento.
   Usado pelo overlay "LOCALIZANDO..." do login e pelo radar_loading.js (home e indicadores).
   Markup: .radar-aero > .radar-aero-sweep + 8 × .radar-aero-point[.yellow|.red].
   Tamanho via --radar-aero-size. Só anima com o overlay visível (display:none pausa). */
.radar-aero {
  --radar-aero-size: clamp(150px, 40vw, 220px);
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  width: var(--radar-aero-size);
  height: var(--radar-aero-size);
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 5px rgba(120, 220, 255, 0.3),
    0 0 26px rgba(90, 210, 255, 0.7),
    0 12px 32px rgba(0, 40, 110, 0.45),
    inset 0 0 22px rgba(0, 35, 100, 0.5);
  background:
    repeating-radial-gradient(circle, transparent 0 17%, rgba(225, 247, 255, 0.55) 17% 17.8%, transparent 18.4% 25%),
    linear-gradient(transparent calc(50% - 0.75px), rgba(230, 248, 255, 0.6) 0 calc(50% + 0.75px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - 0.75px), rgba(230, 248, 255, 0.6) 0 calc(50% + 0.75px), transparent 0),
    radial-gradient(circle at 50% 38%, #6fd8ff 0%, #2a9ae8 45%, #0b5cc4 80%, #083f96 100%);
}

/* Centro (hub) */
.radar-aero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, #b9f0ff 60%, #5cc8f5);
  box-shadow: 0 0 10px rgba(180, 240, 255, 0.95);
  z-index: 2;
}

/* Reflexo glossy na metade de cima */
.radar-aero::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 70% 38% at 50% 8%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 49%, rgba(255, 255, 255, 0) 50%);
  pointer-events: none;
  z-index: 3;
}

.radar-aero-sweep {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  border-right: 1.5px solid rgba(205, 255, 150, 0.9);
  border-radius: 100% 0 0 0;
  transform-origin: 100% 100%;
  background: linear-gradient(50deg, rgba(160, 235, 80, 0) 55%, rgba(170, 240, 90, 0.7));
  animation: radarAeroSweep 4s infinite linear;
  will-change: transform;
  z-index: 1;
}

@keyframes radarAeroSweep {
  to {
    transform: rotate(360deg);
  }
}

/* Blips nas cores da logo: verde-limão (padrão), dourado (.yellow), aqua claro (.red/.blue) */
.radar-aero-point {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: radial-gradient(circle at 35% 35%, #eaffc8, #9be94a 55%, #5fbf1c);
  box-shadow: 0 0 8px rgba(155, 233, 74, 0.9), 0 0 16px rgba(155, 233, 74, 0.5);
  animation: radarAeroPoint 3s ease-in-out infinite;
  opacity: 0;
  z-index: 2;
}

.radar-aero-point.yellow {
  background: radial-gradient(circle at 35% 35%, #fff6c8, #ffd23f 55%, #e0a800);
  box-shadow: 0 0 8px rgba(255, 210, 63, 0.95), 0 0 16px rgba(255, 210, 63, 0.5);
}

.radar-aero-point.red,
.radar-aero-point.blue {
  background: radial-gradient(circle at 35% 35%, #ffffff, #c9f4ff 55%, #6fd3f7);
  box-shadow: 0 0 8px rgba(200, 244, 255, 0.95), 0 0 16px rgba(111, 211, 247, 0.55);
}

.radar-aero-point:nth-child(2) { top: 30%; left: 60%; animation-delay: 0s; }
.radar-aero-point:nth-child(3) { top: 45%; left: 75%; animation-delay: 0.5s; }
.radar-aero-point:nth-child(4) { top: 65%; left: 55%; animation-delay: 1s; }
.radar-aero-point:nth-child(5) { top: 55%; left: 30%; animation-delay: 1.5s; }
.radar-aero-point:nth-child(6) { top: 25%; left: 38%; animation-delay: 2s; }
.radar-aero-point:nth-child(7) { top: 70%; left: 70%; animation-delay: 2.5s; }
.radar-aero-point:nth-child(8) { top: 38%; left: 22%; animation-delay: 3s; }
.radar-aero-point:nth-child(9) { top: 78%; left: 45%; animation-delay: 3.5s; }

@keyframes radarAeroPoint {
  0% { opacity: 0; transform: scale(0.3); }
  20% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .radar-aero-sweep {
    animation: none;
    transform: rotate(40deg);
  }

  .radar-aero-point {
    animation: none;
    opacity: 1;
  }
}