/* Threat Map page: one continuous dark stage (intro + live map) and a single glass panel holding the
   firewalls, stats, 3D globe (assets/threat-globe.js) and attack list, matching the home page hero.
   Same content as before; font sizes are left to the existing stylesheets on purpose. */

/* ---- Stage: one background for the intro and the live map, no seam between them ---- */
body.page-threat-map .tm-stage{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(1000px 560px at 80% 6%,rgba(255,49,49,.13),transparent 70%),
    radial-gradient(900px 640px at 8% 62%,rgba(52,72,104,.16),transparent 70%),
    #0b0d10;
}
body.page-threat-map .tm-stage::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.7;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 85% 55% at 40% 18%,#000 15%,transparent 78%);
  mask-image:radial-gradient(ellipse 85% 55% at 40% 18%,#000 15%,transparent 78%);
}
body.page-threat-map .tm-stage>.subhero,
body.page-threat-map .tm-stage>#threatmap{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important}
body.page-threat-map .tm-stage>.subhero::before,
body.page-threat-map .tm-stage>.subhero::after{display:none!important}
body.page-threat-map .tm-stage>.subhero{padding-bottom:clamp(30px,4vw,48px)}
body.page-threat-map .tm-stage>#threatmap{padding-top:0;padding-bottom:clamp(56px,7vw,96px)}

/* ---- Intro, styled like the home hero ---- */
body.page-threat-map .tm-stage .subhero .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
body.page-threat-map .tm-stage .subhero .wrap>*{margin:0}
body.page-threat-map .tm-stage .subhero .breadcrumb{color:#8e96a6}
body.page-threat-map .tm-stage .subhero .breadcrumb a{color:#c3c8d2}
body.page-threat-map .tm-stage .subhero .eyebrow{
  display:inline-flex;align-items:center;gap:10px;width:fit-content;padding:7px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(8,10,14,.6);
  font-family:"Geist Mono",ui-monospace,Consolas,monospace;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#c3c8d2;
}
body.page-threat-map .tm-stage .subhero .eyebrow::before{content:"";position:static;flex:none;width:7px;height:7px;border-radius:50%;background:#ff3131;animation:tm-ping 1.8s infinite}
body.page-threat-map .tm-stage .subhero h1{font-family:Geist,"Segoe UI",system-ui,sans-serif;font-weight:600;line-height:.98;letter-spacing:-.045em;max-width:none;color:#eef0f4}
body.page-threat-map .tm-stage .subhero h1 span{display:block;color:#ff3131}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  body.page-threat-map .tm-stage .subhero h1 span{
    width:fit-content;max-width:100%;
    background:linear-gradient(95deg,#ff3131 0%,#ff5446 45%,#ff9470 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
}
body.page-threat-map .tm-stage .subhero .lead{color:#c3c8d2;max-width:38em}

/* ---- The glass panel ---- */
body.page-threat-map #threatmap .tm-panel{
  position:relative;display:flex;flex-direction:column;gap:16px;
  padding:clamp(14px,2vw,22px);border-radius:28px;
  background:linear-gradient(180deg,rgba(20,24,32,.72),rgba(12,14,19,.72));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);
}
body.page-threat-map #threatmap .tm-panel>*{margin:0}

/* Panel header: firewall partners */
body.page-threat-map #threatmap .fwbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:4px 6px 2px;text-align:left}
body.page-threat-map #threatmap .fwbar .cap{margin:0;font-family:"Geist Mono",ui-monospace,Consolas,monospace;font-weight:500;letter-spacing:.16em;color:#8e96a6}
body.page-threat-map #threatmap .fwlogos{justify-content:flex-end;gap:10px}
body.page-threat-map #threatmap .fwchip{flex:none;min-width:0;padding:9px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.18)}

/* Stat tiles */
body.page-threat-map #threatmap .tm-stats{gap:12px}
body.page-threat-map #threatmap .tm-stat{
  padding:16px 18px 15px;border-radius:18px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);box-shadow:none;
}
body.page-threat-map #threatmap .tm-stat .lbl{font-family:"Geist Mono",ui-monospace,Consolas,monospace;font-weight:500;letter-spacing:.12em;color:#8e96a6}
body.page-threat-map #threatmap .tm-stat .val{font-family:Geist,"Segoe UI",system-ui,sans-serif;font-weight:600;letter-spacing:-.03em;color:#eef0f4;margin-top:8px}
body.page-threat-map #threatmap #tmBlocked{color:#ff3131}

/* The globe screen */
body.page-threat-map #threatmap .tm-wrap{
  border-radius:22px;border:1px solid rgba(255,255,255,.07);
  background:radial-gradient(ellipse 70% 80% at 56% 48%,#0f1a2b 0%,#0a0e16 62%,#090a0e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body.page-threat-map #threatCanvas{height:clamp(380px,50vw,640px);cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
body.page-threat-map #threatmap .tm-wrap.is-dragging #threatCanvas{cursor:grabbing}

/* Overlays on the globe: hint (top left), legend (top right), feed (bottom left), stop control (bottom right) */
body.page-threat-map #threatmap .tm-legend,
body.page-threat-map #threatmap .tm-hint{
  top:18px;padding:8px 14px;border-radius:999px;
  background:rgba(10,12,16,.72);border:1px solid rgba(255,255,255,.1);
}
body.page-threat-map #threatmap .tm-legend{right:18px;color:#aab2bf}
body.page-threat-map #threatmap .tm-hint{
  position:absolute;left:18px;pointer-events:none;
  font-family:"Geist Mono",ui-monospace,Consolas,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8e96a6;
}
body.page-threat-map #threatmap .tm-hint::before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px 1px 0;border-radius:50%;background:#ff3131;animation:tm-ping 1.8s infinite}
body.page-threat-map #threatmap .tm-feed{
  left:18px;bottom:18px;padding:14px 16px 12px;border-radius:18px;
  background:rgba(10,12,16,.82);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.9);
}
body.page-threat-map #threatmap .tm-feed h4{font-family:"Geist Mono",ui-monospace,Consolas,monospace;font-weight:500;letter-spacing:.14em;color:#8e96a6}
body.page-threat-map #threatmap .tm-feed li{font-family:"Geist Mono",ui-monospace,Consolas,monospace;color:#c3c8d2;border-bottom:1px dashed rgba(255,255,255,.06)}
body.page-threat-map #threatmap .tm-feed li:last-child{border-bottom:0}
body.page-threat-map #threatmap .tm-feed .bk{padding:1px 6px;border-radius:999px;background:rgba(39,192,138,.12);border:1px solid rgba(39,192,138,.3)}
/* "Stop animation" control (required for accessibility, WCAG 2.2.2): kept small and quiet until hovered or focused */
body.page-threat-map #threatmap .tm-wrap .motion-toggle{right:18px;bottom:18px;border-radius:999px;background:transparent;border:1px solid rgba(255,255,255,.12);opacity:.45;transition:opacity .2s ease}
body.page-threat-map #threatmap .tm-wrap .motion-toggle:is(:hover,:focus-visible,[aria-pressed="true"]){opacity:1}

/* Real-time attacks list */
body.page-threat-map #threatmap .rt-attacks{border-radius:22px;border:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.22);box-shadow:none}
body.page-threat-map #threatmap .rt-head{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.07)}
body.page-threat-map #threatmap .rt-head h3{font-family:Geist,"Segoe UI",system-ui,sans-serif;font-weight:600;letter-spacing:-.01em}
body.page-threat-map #threatmap .rt-sub{font-family:"Geist Mono",ui-monospace,Consolas,monospace;font-weight:500;letter-spacing:.14em;color:#8e96a6}
body.page-threat-map #threatmap .rt-list li{padding:12px 20px;transition:background-color .2s ease}
body.page-threat-map #threatmap .rt-list li:hover{background:rgba(255,255,255,.03)}
body.page-threat-map #threatmap .rt-sev{border-radius:999px}
body.page-threat-map #threatmap .rt-sev.sev-Low{color:#9fb0c4;background:rgba(159,176,196,.1);border:1px solid rgba(159,176,196,.28)}
body.page-threat-map #threatmap .rt-time{font-family:"Geist Mono",ui-monospace,Consolas,monospace}
body.page-threat-map #threatmap .tm-note{margin-top:18px;font-family:"Geist Mono",ui-monospace,Consolas,monospace;letter-spacing:.04em;color:#7d8695}

@keyframes tm-ping{0%{box-shadow:0 0 0 0 rgba(255,49,49,.6)}100%{box-shadow:0 0 0 8px rgba(255,49,49,0)}}

@media(max-width:860px){
  body.page-threat-map #threatmap .fwbar{justify-content:center;text-align:center}
  body.page-threat-map #threatmap .fwbar .cap{width:100%}
  body.page-threat-map #threatmap .fwlogos{justify-content:center}
}
@media(max-width:680px){
  body.page-threat-map #threatmap .tm-panel{border-radius:22px;gap:12px}
  body.page-threat-map #threatmap .tm-stat{padding:14px 14px 13px}
  body.page-threat-map #threatmap .tm-stat .lbl{letter-spacing:.05em}
  body.page-threat-map #threatCanvas{height:clamp(340px,92vw,420px)}
  /* Legend moves under the globe so it doesn't cover it; the stop control sits beside it */
  body.page-threat-map #threatmap .tm-legend{position:static;display:flex;flex-wrap:wrap;gap:6px 14px;width:fit-content;max-width:calc(100% - 84px);margin:0 14px 14px;border-radius:16px}
  body.page-threat-map #threatmap .tm-hint{top:14px;left:14px}
  body.page-threat-map #threatmap .tm-wrap .motion-toggle{right:14px;bottom:14px}
  body.page-threat-map #threatmap .rt-head{flex-wrap:wrap;gap:6px 14px}
  body.page-threat-map #threatmap .rt-sub{letter-spacing:.06em}
}
/* The pulsing dots stop with everything else when "Stop animation" is pressed or reduced motion is on */
body.page-threat-map:has(#threatmap [data-motion-toggle][aria-pressed="true"]) .tm-stage .subhero .eyebrow::before,
body.page-threat-map #threatmap:has([data-motion-toggle][aria-pressed="true"]) .tm-hint::before{animation:none}
@media(prefers-reduced-motion:reduce){
  body.page-threat-map .tm-stage .subhero .eyebrow::before,
  body.page-threat-map #threatmap .tm-hint::before{animation:none}
}