/* ===== Hero attack-graph visualization (desktop scroll-through) =====
   Ported from the animation-cursor project: a GSAP timeline scrubbed by the
   scrolly progress — see js/hero-viz-a.js. All selectors are scoped under
   .hviz-a so nothing leaks into the rest of the site. */

/* Scale the scene up past the panel box; anchored left so the extra width
   bleeds right into the empty page margin, away from the copy column. */
.hviz-a{justify-content:flex-start}
.hviz-a .graphic{position:relative;flex:none;width:116%;aspect-ratio:960/683;overflow:hidden;isolation:isolate}

.hviz-a .network{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hviz-a .network path{fill:none;vector-effect:non-scaling-stroke}
.hviz-a .network__base path{stroke:#282828;stroke-width:1}
.hviz-a .network__nodes circle{fill:#5f5f5f;opacity:.7}
.hviz-a .network__active path,
.hviz-a .spawn-lines path{stroke:#7b393e;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hviz-a .network__active-nodes circle{fill:#fda5a5}

.hviz-a .node,
.hviz-a .action-tag,
.hviz-a .signal-badge,
.hviz-a .breach-target{position:absolute;will-change:transform,opacity}

.hviz-a .node{display:grid;place-items:center;border:1px solid #543834;border-radius:50%;background:#3b2023;transform-origin:center}
.hviz-a .node svg{width:58%;height:58%}

/* Bad actor uses the self-contained orange user icon from the mesh-pathway viz —
   the icon IS the circle, so the chip background/border are dropped. */
.hviz-a .bad-actor{top:43.9%;left:10.4%;width:8.65%;aspect-ratio:1;background:transparent;border:0}
.hviz-a .bad-actor img{width:100%;height:100%;display:block}

.hviz-a .agent{left:32.8%;width:5.2%;aspect-ratio:1}
.hviz-a .agent--1{top:23.4%}
.hviz-a .agent--2{top:46.3%}
.hviz-a .agent--3{top:68.8%}
.hviz-a .agent svg{fill:none;stroke:#ff9181;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.hviz-a .action-tag{z-index:3;padding:clamp(3px,.42vw,5px) clamp(5px,.66vw,8px);border:1px solid #282828;border-radius:4px;
  background:#111112;color:#a8a8a8;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(8px,.78vw,12px);line-height:1.35;letter-spacing:-.02em;white-space:nowrap}
.hviz-a .tag--two{border-color:#42282a;background:#151112;color:#fda5a5}
.hviz-a .tag--top-one{top:17.9%;left:47.4%}
.hviz-a .tag--top-two{top:25.9%;left:63.5%}
.hviz-a .tag--middle-one{top:41.9%;left:48.9%}
.hviz-a .tag--middle-two{top:51.2%;left:65.6%}
.hviz-a .tag--bottom-one{top:64.1%;left:47.4%}
.hviz-a .tag--bottom-two{top:72.5%;left:65.6%}

.hviz-a .signal-badge{z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid #454545;border-radius:8px;background:#000;color:#fff;
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif;font-size:clamp(9px,1.05vw,16px);line-height:1.25;box-sizing:border-box}
.hviz-a .signal-badge strong{font-weight:700}

/* Intent chip (Paper design 9-1/1XK9): maroon card, "INTENT" label over a "Malicious" value,
   growing to reveal a Detected → Locked status pill + the TruU mark on the resolution beat. */
.hviz-a .intent-chip-wrap{position:absolute;top:63%;left:calc(14.725% + 1px);z-index:4;width:190px;height:111px;translate:-50% 0}
.hviz-a .intent-chip{position:absolute;top:0;left:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  width:190px;height:68px;gap:2px;padding:12px 8px;overflow:hidden;
  border:1px solid #93261E;border-radius:10px;background:#411412;color:#fff;
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif}
.hviz-a .intent-label{flex:0 0 auto;font-size:14px;font-weight:700;line-height:18px;color:#fff;white-space:nowrap;will-change:opacity}
.hviz-a .intent-value{flex:0 0 auto;font-size:20px;font-weight:600;line-height:24px;color:#FFBCB1;white-space:nowrap;will-change:opacity}
.hviz-a .truu-mark{position:absolute;top:-16px;left:50%;z-index:5;display:grid;place-items:center;width:32px;height:32px;padding:8px;
  border-radius:50%;outline:1px solid #454545;background:#262626;translate:-50% 0;transform-origin:center;box-sizing:border-box;will-change:transform,opacity}
.hviz-a .truu-mark svg{width:17px;height:14px;overflow:visible;fill:#fff}
.hviz-a .chip-status-window{flex:0 0 28px;align-self:stretch;width:100%;height:28px;margin-top:4px;overflow:hidden;border-radius:6px;background:#ce7c23;color:#fff;
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:20px}
.hviz-a .chip-status-track{display:grid;grid-template-rows:repeat(2,28px);width:100%;height:56px;will-change:transform,filter}
.hviz-a .chip-status-track span{display:flex;align-items:center;justify-content:center;height:28px;line-height:20px;white-space:nowrap}

.hviz-a .breach-badge{top:34.1%;left:79.9%;width:19.8%;min-width:124px;aspect-ratio:190/46;font-size:clamp(9px,.8vw,12px);white-space:nowrap}
.hviz-a .breach-target{z-index:3;top:41.5%;left:84.5%;width:10.5%;aspect-ratio:1;transform-origin:center}
/* Concentric rings breathe (animated on the spans — gsap owns the wrapper's transform) */
.hviz-a .breach-target span{position:absolute;border-radius:50%;background:rgb(255 0 5/20%);animation:hvizBreachPulse 2s ease-in-out infinite}
.hviz-a .breach-target span:first-child{inset:0}
.hviz-a .breach-target span:nth-child(2){inset:22%;animation-delay:.25s}
.hviz-a .breach-target span:last-child{inset:41%;background:rgb(255 0 5/70%);box-shadow:0 0 14px rgb(239 68 68/48%);animation-delay:.5s}
@keyframes hvizBreachPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.16);opacity:.72}}
@media (prefers-reduced-motion:reduce){.hviz-a .breach-target span{animation:none}}

/* ===== Catchline: "TOTAL catches them at Intent" =====
   The viz driver adds .catch to the step-2 cap when the TruU detection
   beat lands: the blind-spot copy nudges up and dims, the catchline fades in. */
.cap[data-step="2"] .eyebrow,
.cap[data-step="2"] h2.cap-long:not(.total-catchline){
  transition:transform .6s var(--ease),opacity .6s ease}
.cap[data-step="2"].catch .eyebrow,
.cap[data-step="2"].catch h2.cap-long:not(.total-catchline){
  transform:translateY(-30px);opacity:.5}
.total-catchline{margin-top:26px;opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.cap[data-step="2"].catch .total-catchline{opacity:1;transform:translateY(-14px)}

/* ===== Mobile: the scene scaled to fit the fixed panel (see .hero-viz mobile rules in
   styles.css) — js/hero-viz-a.js measures the panel and scales .graphic (fixed 960×683,
   some fixed-px chips inside) to fit its width. */
@media (max-width:760px){
  .hviz-a .graphic{position:absolute;top:0;left:0;width:960px;aspect-ratio:960/683;transform-origin:top left}
  /* The intent chip is enlarged 1.5x here (desktop keeps the Paper native size) since the whole
     .graphic gets scaled down ~0.35x to fit the mobile panel — this keeps the text legible after
     that shrink instead of getting proportionally tiny along with the network. */
  .hviz-a .intent-chip-wrap{width:285px;height:167px}
  .hviz-a .intent-chip{width:285px;height:102px;gap:3px;padding:18px 12px}
  .hviz-a .intent-label{font-size:21px;line-height:27px}
  .hviz-a .intent-value{font-size:30px;line-height:36px}
  .hviz-a .truu-mark{top:-24px;width:48px;height:48px;padding:12px}
  .hviz-a .truu-mark svg{width:25.5px;height:21px}
  .hviz-a .chip-status-window{flex:0 0 42px;height:42px;margin-top:6px;border-radius:9px;font-size:24px;line-height:30px}
  .hviz-a .chip-status-track{grid-template-rows:repeat(2,42px);height:84px}
  .hviz-a .chip-status-track span{height:42px;line-height:30px}
}