/* Home page compliance band (index.html #compliance): a radar sweeping across the six compliance
   frameworks. The section layout around it lives in assets/home-security.css.
   One 4.8s cycle drives everything: the beam turns once per cycle, and each tag and blip waits
   --d (its angle / 360 x 4.8s) so it lights up as the beam passes it.
   Pausing: the button uses the site's shared pause control (assets/live-motion.js toggles
   aria-pressed). Under reduced motion the radar shows one still frame and the button is hidden.
   Geist Mono is declared in assets/site-footer.css. */

.fw-radar{position:relative;width:min(100%,500px);justify-self:center;margin:0 0 34px}
.fw-radar-scope{
  position:relative;aspect-ratio:1;border-radius:50%;overflow:visible;
  background:radial-gradient(circle,rgba(255,49,49,.1),rgba(5,6,8,.75) 68%);
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 80px rgba(255,49,49,.08);
}
.fw-radar-grid{position:absolute;inset:0;width:100%;height:100%}
.fw-radar-grid :is(circle,line){fill:none;stroke:rgba(255,255,255,.1);stroke-width:.4}
/* The beam turns inside a clipped circle: a rotating square's corners would otherwise poke past the
   circle and past the screen edge (phones and laptops alike), making the page scroll sideways as it spins. */
.fw-radar-beam{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.fw-radar-sweep{
  position:absolute;inset:0;border-radius:50%;will-change:transform;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 290deg,rgba(255,49,49,.05) 320deg,rgba(255,49,49,.5) 360deg);
  animation:fw-radar-spin 4.8s linear infinite;
}
.fw-radar-shield{
  position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);
  display:grid;place-items:center;border-radius:50%;background:#0a0c10;border:1px solid rgba(255,49,49,.5);
  box-shadow:0 0 50px rgba(255,49,49,.45);
}
.fw-radar-shield svg{width:46%;fill:none;stroke:#ff3131;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fw-radar-tag{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  padding:clamp(5px,1.2vw,7px) clamp(9px,2vw,13px);border-radius:999px;white-space:nowrap;
  font:600 clamp(10.5px,2.6vw,12.5px)/1.2 "Geist Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  letter-spacing:.06em;color:#c5cad2;background:rgba(10,12,17,.9);border:1px solid rgba(255,255,255,.14);
  animation:fw-radar-ping 4.8s linear var(--d) infinite;
}
.fw-radar-blip{
  position:absolute;left:var(--x);top:var(--y);width:7px;height:7px;margin:-3.5px;border-radius:50%;
  background:#ff3131;opacity:0;animation:fw-radar-blip 4.8s linear var(--d) infinite;
}
/* Specific selector on purpose: older band rules (".band-grid>div>p", 18px) would otherwise win */
body.home-preserved #compliance .fw-radar>.fw-radar-cap{
  position:absolute;left:50%;top:calc(100% + 16px);transform:translateX(-50%);margin:0;white-space:nowrap;
  font-family:"Geist Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;font-weight:500;font-size:11.2px;line-height:1.4;
  letter-spacing:.13em;text-transform:uppercase;color:#9aa3b1;
}
/* Pause button: bottom-right corner of the square, outside the circle (same control as the NOC and Threat Map).
   Resting opacity .7 keeps the icon above 3:1 contrast (WCAG 1.4.11). */
.fw-radar .motion-toggle{position:absolute;right:0;bottom:0;opacity:.7;transition:opacity .2s ease}
.fw-radar .motion-toggle:is(:hover,:focus-visible,[aria-pressed="true"]){opacity:1}

.fw-radar:has([data-motion-toggle][aria-pressed="true"]) :is(.fw-radar-sweep,.fw-radar-tag,.fw-radar-blip){animation-play-state:paused}

@keyframes fw-radar-spin{to{transform:rotate(360deg)}}
@keyframes fw-radar-ping{
  0%{color:#fff;border-color:#ff3131;box-shadow:0 0 0 4px rgba(255,49,49,.18),0 0 26px rgba(255,49,49,.45)}
  30%,100%{color:#c5cad2;border-color:rgba(255,255,255,.14);box-shadow:none}
}
@keyframes fw-radar-blip{
  0%{opacity:1;box-shadow:0 0 0 0 rgba(255,49,49,.7)}
  40%{opacity:.15;box-shadow:0 0 0 12px rgba(255,49,49,0)}
  100%{opacity:0}
}

@media(max-width:860px){
  .fw-radar{width:min(100%,440px);margin-top:8px}
}
@media(prefers-reduced-motion:reduce){
  .fw-radar :is(.fw-radar-sweep,.fw-radar-tag,.fw-radar-blip){animation-play-state:paused}
  .fw-radar-blip{opacity:.5}
  .fw-radar .motion-toggle{display:none}
}