/* ============================================================
   rogue-agents.css — TOTAL Rogue Agents (AGR) page
   Reuses the shared product-page system (styles.css + idv.css).
   Theme: a MYTHOS = one actor's intent spread across hundreds of
   agents, each drift too small to see. Bespoke graphics: the Mythos
   swarm (hero) and the below-the-threshold bars. Shared theme with
   NHI Discovery: stewardship & agent intent.
   Orange stays reserved for the Persona; red is the threat.
   ============================================================ */

/* Persona foundation pill stretches the full content width. */
.idv-foundation { max-width: none; margin-left: 0; margin-right: 0; }

/* Framed panel for the bespoke graphics (matches the page's screenshot panels). */
.ra-frame { position: relative; margin: 48px 0 0; padding: 40px 46px 36px; background: #0c0c0d; border: .5px solid var(--border); border-radius: 16px; box-shadow: 0 50px 130px -58px rgba(0,0,0,.92); }
.ra-frame::after { content: ""; position: absolute; inset: 0; border-radius: 16px; border: 1px solid rgba(255,255,255,.045); pointer-events: none; }
.ra-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ra-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; aspect-ratio: 16 / 9; border: 1px dashed rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.012); color: var(--text-3); }
.ra-ph .material-symbols-outlined { font-size: 42px; opacity: .55; }
.ra-ph-t { font-family: "Inter Tight", system-ui, sans-serif; font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }

/* ---- Hero: the Mythos swarm ----
   A field of agent dots (calm). A hidden correlated subset drifts toward one
   red intent. The eye should find the pattern in the noise. */
.ra-dot { fill: rgba(255,255,255,.085); }
.ra-dot-m { fill: rgba(255,255,255,.5); }
.ra-drift { stroke: rgba(255,255,255,.42); stroke-width: 1; stroke-linecap: round; }
.ra-intent { fill: #ef4444; transform-box: fill-box; transform-origin: center; }
.ra-intent-halo { fill: #ef4444; opacity: .14; transform-box: fill-box; transform-origin: center; }
.reveal.in .ra-intent-halo { animation: ra-pulse 2.8s var(--ease) .3s infinite; }
@keyframes ra-pulse { 0%, 100% { opacity: .16; transform: scale(1); } 50% { opacity: .04; transform: scale(1.7); } }

/* ---- The below-the-threshold bars ----
   Each agent's activity sits under the alarm line; the sum clears a breach line. */
.ra-bar { fill: rgba(255,255,255,.2); }
.ra-bar-sum { fill: #ef4444; }
.ra-base { stroke: var(--border); stroke-width: 1; }
.ra-thresh { stroke: rgba(255,255,255,.28); stroke-width: 1; stroke-dasharray: 4 5; }
.ra-thresh-red { stroke: #ef4444; stroke-width: 1; stroke-dasharray: 4 5; }
.ra-lbl { fill: var(--text-3); font-family: "Inter Tight", sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ra-lbl-red { fill: #ef6a6a; }
.ra-sum-mark { fill: var(--text-2); font-family: "Inter Tight", sans-serif; font-size: 30px; font-weight: 300; }

@media (max-width: 760px) {
  .ra-frame { padding: 22px 16px 20px; }
}