/* ══════════════════════════════════════════════════════════════════════
   BRAHMASTRA — LIVE THREAT RADAR
   Self-contained band injected before the dashboard section.
   Load AFTER css/style.css
   ══════════════════════════════════════════════════════════════════════ */

.radar-section {
  padding: 70px 20px 90px;
  /* app-style ambient wash so the band blends with the dashboard theme */
  background:
    radial-gradient(1000px 460px at 50% 0%, rgba(124,58,237,0.16), transparent 70%),
    radial-gradient(800px 420px at 88% 100%, rgba(30,58,138,0.14), transparent 65%),
    radial-gradient(600px 380px at 8% 70%, rgba(190,24,93,0.10), transparent 60%);
}
.radar-header { margin-bottom: 46px; }

.radar-wrap {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 340px 1fr; gap: 44px; align-items: center;
}

/* ─── RADAR SCOPE ───────────────────────────────────────────────────── */
.radar-scope {
  position: relative; width: 340px; height: 340px; margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(168, 85, 247, .09), transparent 68%),
    rgba(4, 6, 16, .55);
  border: 1px solid rgba(168, 85, 247, .22);
  box-shadow:
    0 0 80px rgba(168, 85, 247, .22),
    inset 0 0 60px rgba(168, 85, 247, .08);
  overflow: hidden;
}
.radar-scope svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* rotating sweep wedge */
.radar-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(168, 85, 247, .5) 0deg,
    rgba(168, 85, 247, .14) 30deg,
    rgba(168, 85, 247, .03) 58deg,
    transparent 78deg);
  animation: radarSweep 4s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes radarSweep { to { transform: rotate(360deg); } }

/* leading edge line of the sweep */
.radar-hand {
  position: absolute; left: 50%; top: 0; width: 1px; height: 50%;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, rgba(236, 72, 153, 0), rgba(236, 72, 153, .95));
  box-shadow: 0 0 12px rgba(236, 72, 153, .7);
  animation: radarSweep 4s linear infinite;
}

/* contact blips */
.radar-blip {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; opacity: 0;
  background: var(--bc, #ef4444);
  box-shadow: 0 0 14px var(--bc, #ef4444);
  animation: radarBlip 4s ease-out infinite;
}
@keyframes radarBlip {
  0%   { opacity: 1; transform: scale(2.1); }
  12%  { opacity: .95; transform: scale(1); }
  62%  { opacity: 0; }
  100% { opacity: 0; }
}
/* expanding ping ring on each blip */
.radar-blip::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid var(--bc, #ef4444);
  animation: radarPing 4s ease-out infinite;
  animation-delay: inherit;
}
@keyframes radarPing {
  0%   { opacity: .9; transform: scale(.6); }
  35%  { opacity: 0;  transform: scale(3.4); }
  100% { opacity: 0;  transform: scale(3.4); }
}

/* horizon scanline crawling across the scope */
.radar-scan {
  position: absolute; left: 0; right: 0; height: 60px;
  background: linear-gradient(180deg, transparent, rgba(34, 211, 238, .1) 60%, rgba(34, 211, 238, .22) 76%, transparent);
  mix-blend-mode: screen; pointer-events: none;
  animation: radarScan 5.5s ease-in-out infinite;
}
@keyframes radarScan {
  0%, 100% { transform: translateY(-70px); opacity: 0; }
  20%      { opacity: 1; }
  80%      { opacity: 1; }
  50%      { transform: translateY(340px); }
}

/* corner brackets */
.radar-frame { position: absolute; inset: -10px; pointer-events: none; }
.radar-frame i {
  position: absolute; width: 18px; height: 18px;
  border: 0 solid rgba(236, 72, 153, .55);
}
.radar-frame i:nth-child(1) { top: 0; left: 0;     border-top-width: 2px; border-left-width: 2px; }
.radar-frame i:nth-child(2) { top: 0; right: 0;    border-top-width: 2px; border-right-width: 2px; }
.radar-frame i:nth-child(3) { bottom: 0; left: 0;  border-bottom-width: 2px; border-left-width: 2px; }
.radar-frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

/* ─── FEED PANEL ────────────────────────────────────────────────────── */
.radar-panel {
  background: linear-gradient(180deg, rgba(20,28,55,0.55), rgba(8,12,26,0.78));
  border: 1px solid rgba(168,85,247,0.28);
  border-radius: 18px; padding: 22px 24px;
  backdrop-filter: blur(16px);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.55),
    0 0 46px rgba(168,85,247,0.12),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.radar-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.radar-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', monospace; font-size: .66rem;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: #ef4444; font-weight: 700;
}
.radar-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #ef4444; box-shadow: 0 0 10px #ef4444;
  animation: radarPulse 1.2s ease-in-out infinite;
}
@keyframes radarPulse { 50% { opacity: .25; transform: scale(.75); } }
.radar-head h3 { font-size: 1.05rem; font-weight: 700; color: #fff; flex: 1; }
.radar-count {
  font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--text-dim);
}
.radar-count b {
  color: #fff; font-size: .92rem;
  text-shadow: 0 0 14px var(--accent-glow);
}

/* feed rows */
.radar-feed {
  display: flex; flex-direction: column; gap: 8px;
  height: 268px; overflow: hidden;
}
.radar-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 13px; border-radius: 10px;
  background: rgba(255, 255, 255, .022);
  border: 1px solid rgba(255, 255, 255, .06);
  border-left: 2px solid var(--rc, #a855f7);
  font-family: 'JetBrains Mono', monospace; font-size: .73rem;
  animation: radarRowIn .45s cubic-bezier(.2, .85, .3, 1) backwards;
  transition: background .25s ease, border-color .25s ease;
}
.radar-row:hover {
  background: color-mix(in srgb, var(--rc, #a855f7) 9%, transparent);
  border-color: color-mix(in srgb, var(--rc, #a855f7) 42%, transparent);
}
@keyframes radarRowIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}
.radar-row.fresh { animation: radarRowIn .45s cubic-bezier(.2,.85,.3,1) backwards, radarFlash 1.1s ease-out; }
@keyframes radarFlash {
  0%  { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rc, #a855f7) 55%, transparent); }
  100%{ box-shadow: 0 0 0 14px transparent; }
}
.radar-row .sev {
  font-size: .58rem; font-weight: 700; letter-spacing: .6px;
  padding: 3px 7px; border-radius: 4px; flex-shrink: 0;
  color: var(--rc, #a855f7);
  background: color-mix(in srgb, var(--rc, #a855f7) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--rc, #a855f7) 40%, transparent);
}
.radar-row .host { color: #fff; font-weight: 700; min-width: 116px; }
.radar-row .what { color: var(--text-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radar-row .ms   { color: #10b981; font-size: .66rem; flex-shrink: 0; }

/* ─── RESPONSIVE / REDUCED MOTION ───────────────────────────────────── */
@media (max-width: 980px) {
  .radar-wrap { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .radar-scope { width: 260px; height: 260px; }
  .radar-feed { height: 230px; }
  .radar-row .host { min-width: 0; }
  .radar-row .ms { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .radar-sweep, .radar-hand, .radar-blip, .radar-blip::after,
  .radar-scan, .radar-live::before, .radar-row { animation: none !important; }
  .radar-blip { opacity: .9; }
}