/* === Военный PPI-радар V10: захват цели с аннотацией (фоновая сонар-анимация секции «Безопасность») === */
.sonar-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Дальностные кольца (статичные, очень слабые) */
.sonar-rings { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.sonar-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(124,150,255,0.08); border-radius: 50%; transform: translate(-50%, -50%); }

/* Перекрестие */
.sonar-cross-h, .sonar-cross-v { position: absolute; top: 50%; left: 50%; background: rgba(124,150,255,0.07); transform: translate(-50%, -50%); }
.sonar-cross-h { width: 96%; height: 1px; }
.sonar-cross-v { width: 1px; height: 96%; }

/* Вращающийся луч-сектор (conic-gradient) — T=8с, длинный кильватерный след */
.sonar-radar {
  position: absolute; top: 50%; left: 50%; width: 1000px; height: 1000px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(124,150,255,0.30) 0deg, rgba(124,150,255,0.20) 6deg, rgba(124,150,255,0.12) 16deg,
    rgba(124,150,255,0.07) 28deg, rgba(124,150,255,0.035) 40deg, rgba(124,150,255,0.015) 52deg,
    rgba(124,150,255,0.00) 64deg, rgba(124,150,255,0.00) 358deg, rgba(124,150,255,0.30) 360deg);
  animation: sonar-sweep 8s linear infinite;
  -webkit-mask: radial-gradient(circle, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.12) 18%, #000 55%, #000 90%, transparent 100%);
          mask: radial-gradient(circle, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.12) 18%, #000 55%, #000 90%, transparent 100%);
}
@keyframes sonar-sweep { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Блип = контейнер (базовый delay инлайно per-blip = (angle/360)*8с) */
.blip { position: absolute; width: 0; height: 0; }

/* 1. Точка-обнаружение */
.blip-dot { position: absolute; top: 0; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgba(170,200,255,0.95); opacity: 0; animation: blip-dot 8s linear infinite; }
@keyframes blip-dot {
  0%   { opacity: 0; transform: scale(0.7); box-shadow: 0 0 0 0 rgba(124,150,255,0); }
  0.5% { opacity: 1; transform: scale(1.5); box-shadow: 0 0 12px 3px rgba(124,150,255,0.9), 0 0 24px 6px rgba(124,150,255,0.5); }
  3%   { opacity: 0.8; transform: scale(1.2); box-shadow: 0 0 8px 2px rgba(124,150,255,0.6), 0 0 16px 4px rgba(124,150,255,0.3); }
  10%  { opacity: 0.5; transform: scale(1.0); box-shadow: 0 0 5px 1px rgba(124,150,255,0.35); }
  25%  { opacity: 0; transform: scale(0.85); box-shadow: 0 0 0 0 rgba(124,150,255,0); }
  100% { opacity: 0; transform: scale(0.85); box-shadow: 0 0 0 0 rgba(124,150,255,0); }
}

/* 2. Захват цели — 4 угловые скобки */
.blip-lock { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; animation: blip-lock 8s linear infinite; }
@keyframes blip-lock {
  0%   { opacity: 0; transform: scale(1.8); }
  3%   { opacity: 0.75; transform: scale(1.8); }
  6%   { opacity: 0.65; transform: scale(1.3); }
  9%   { opacity: 0.5; transform: scale(1.05); }
  12.5%{ opacity: 0; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(0.9); }
}
.blip-lock .bracket { position: absolute; width: 12px; height: 12px; opacity: inherit; }
.bracket--tl { top: -10px; left: -10px; border-top: 1.5px solid rgba(170,200,255,0.85); border-left: 1.5px solid rgba(170,200,255,0.85); }
.bracket--tr { top: -10px; left: -2px;  border-top: 1.5px solid rgba(170,200,255,0.85); border-right: 1.5px solid rgba(170,200,255,0.85); }
.bracket--bl { top: -2px;  left: -10px; border-bottom: 1.5px solid rgba(170,200,255,0.85); border-left: 1.5px solid rgba(170,200,255,0.85); }
.bracket--br { top: -2px;  left: -2px;  border-bottom: 1.5px solid rgba(170,200,255,0.85); border-right: 1.5px solid rgba(170,200,255,0.85); }

/* 3. Линия-сноска (радиально наружу через --angle) */
.blip-leader { position: absolute; top: 0; left: 0; width: 50px; height: 1px; background: rgba(124,150,255,0.5); transform-origin: 0 50%; opacity: 0; animation: blip-leader 8s linear infinite; }
@keyframes blip-leader {
  0%   { opacity: 0; transform: rotate(var(--angle, 0deg)) scaleX(0); }
  5%   { opacity: 0.6; transform: rotate(var(--angle, 0deg)) scaleX(1); }
  8%   { opacity: 0.5; transform: rotate(var(--angle, 0deg)) scaleX(1); }
  12%  { opacity: 0.3; transform: rotate(var(--angle, 0deg)) scaleX(1); }
  15%  { opacity: 0; transform: rotate(var(--angle, 0deg)) scaleX(1); }
  100% { opacity: 0; transform: rotate(var(--angle, 0deg)) scaleX(1); }
}

/* 4. Текст-идентификатор в конце линии */
.blip-label { position: absolute; top: 0; left: 0; font-family: monospace; font-size: 9.5px; line-height: 1; color: rgba(200,212,255,0.7); letter-spacing: 0.3px; white-space: nowrap; opacity: 0; transform: translate(var(--lx, 50px), var(--ly, -5px)); animation: blip-label 8s linear infinite; }
@keyframes blip-label {
  0%   { opacity: 0; }
  7%   { opacity: 0; }
  9%   { opacity: 0.7; }
  12%  { opacity: 0.55; }
  15%  { opacity: 0.3; }
  17%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Центральный излучатель */
.sonar-core { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: rgba(170,200,255,0.85); box-shadow: 0 0 6px 1px rgba(124,150,255,0.6); }

@media (prefers-reduced-motion: reduce) {
  .sonar-radar { animation: none; }
  .blip-dot, .blip-lock, .blip-leader, .blip-label { animation: none; opacity: 0; }
}