/* ============================================================
   AGENTIC CORE DIAGRAM — agentic.css
   Faithful replica of the "Autonomous SOC" architecture map,
   tuned to the ThreatLens design system.
   ============================================================ */

:root {
  /* Brand pillar palette */
  --ag-detect:  #F08821;   /* DETECT  — orange */
  --ag-analyze: #2a9fe0;   /* ANALYZE — blue (lightened from #0b83c6 for dark-bg legibility) */
  --ag-defend:  #40b549;   /* DEFEND  — green */
  --ag-detect-glow:  rgba(240,136,33,0.7);
  --ag-defend-glow:  rgba(64,181,73,0.7);

  /* legacy aliases (flow layer) now mapped to brand pillars */
  --ag-green:   var(--ag-detect);
  --ag-purple:  #a78bfa;
  --ag-violet:  #8b5cf6;
  --ag-blue:    #6ea8ff;
  --ag-panel:   rgba(12,19,36,0.72);
  --ag-panel-bd: rgba(255,255,255,0.08);
  --ag-ink:     #c9d4ec;
  --ag-ink-dim: #6f7f9f;
}

/* ── Section shell ───────────────────────────────────────── */
.ag-section {
  position: relative;
  padding: 70px 0 110px;
  z-index: 1;
}
.ag-head {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}
.ag-head h1 {
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.ag-head h1 .em-g { color: var(--ag-detect); }
.ag-head h1 .em-p { color: var(--ag-defend); }
.ag-head p {
  color: var(--text-secondary);
  font-size: 18px;
  margin-top: 16px;
}

/* ── Scaling wrapper ─────────────────────────────────────── */
.ag-scale {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.ag-stage {
  position: absolute;
  top: 0; left: 50%;
  width: 1280px;
  height: 752px;
  transform-origin: top center;
  font-family: var(--font-sans);
}

/* ── Generic floating panel ──────────────────────────────── */
.ag-panel {
  position: absolute;
  background: var(--ag-panel);
  border: 1px solid var(--ag-panel-bd);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ag-ptitle {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ag-psub {
  font-size: 12.5px;
  color: var(--ag-ink-dim);
  margin-top: 3px;
}

/* icons */
.ag-ic { display:block; }
.ag-ic svg { width: 100%; height: 100%; display:block; }

/* ── OBSERVE (left) ──────────────────────────────────────── */
.ag-observe {
  left: 36px; top: 40px; width: 200px; height: 540px;
  padding: 20px 20px 12px;
}
.ag-observe .ag-ptitle { color: var(--ag-detect); }
.ag-obs-list {
  display: flex; flex-direction: column;
  margin-top: 14px; gap: 2px;
}
.ag-obs-item {
  display: flex; align-items: center; gap: 13px;
  height: 42px;
  color: var(--ag-ink);
  font-size: 14.5px;
  font-weight: 500;
}
.ag-obs-item .ag-ic { width: 21px; height: 21px; color: #aeb9d2; }

/* ── ORCHESTRATE (top center) ────────────────────────────── */
.ag-orch {
  left: 322px; top: 12px; width: 556px; height: 156px;
  padding: 14px 22px 10px;
  text-align: center;
}
.ag-orch .ag-ptitle { color: var(--ag-analyze); letter-spacing: 0.12em; }
.ag-orch-sub { font-size: 14px; color: var(--ag-ink); margin-top: 4px; }
.ag-agents {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-top: 10px; padding: 0 2px;
}
.ag-agent {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; width: 72px;
}
.ag-agent .ag-ic { width: 24px; height: 24px; color: #b9c4ff; }
.ag-agent .lbl {
  font-size: 10px; line-height: 1.18; color: var(--ag-ink);
  text-align: center; font-weight: 500; text-wrap: balance;
}

/* ── ACT (right) ─────────────────────────────────────────── */
.ag-act {
  left: 940px; top: 36px; width: 228px; height: 552px;
  padding: 20px 20px 12px;
}
.ag-act .ag-ptitle { color: var(--ag-defend); }
.ag-act-list {
  display: flex; flex-direction: column;
  margin-top: 12px; gap: 9px;
}
.ag-act-item { display: flex; gap: 13px; }
.ag-act-item .ag-ic {
  width: 30px; height: 30px; flex-shrink: 0; margin-top: 2px;
  color: var(--ag-defend);
}
.ag-act-name { font-size: 14.5px; font-weight: 600; color: #eef2fb; }
.ag-act-desc { font-size: 12px; line-height: 1.4; color: var(--ag-ink-dim); margin-top: 2px; }

/* ── KNOWLEDGE & CONTEXT (bottom center) ─────────────────── */
.ag-know {
  left: 322px; top: 456px; width: 556px; height: 132px;
  padding: 14px 18px 12px;
  text-align: center;
}
.ag-know .ag-ptitle { color: #dce3f5; letter-spacing: 0.1em; font-size: 16px; }
.ag-know-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-top: 12px; padding: 0 2px;
}
.ag-know-cell {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; width: 88px;
}
.ag-know-cell .ag-ic { width: 24px; height: 24px; color: #9fb0d4; flex-shrink: 0; }
.ag-know-cell .lbl { font-size: 11px; color: var(--ag-ink); text-align: center; line-height: 1.22; text-wrap: balance; }

/* ── BUILT FOR OUTCOMES (bottom left) ────────────────────── */
.ag-outcomes {
  left: 36px; top: 592px; width: 824px; height: 152px;
  padding: 16px 22px 14px;
}
.ag-outcomes .ag-ptitle { color: #dce3f5; letter-spacing: 0.1em; font-size: 16px; }
.ag-out-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-top: 16px; }
.ag-out-item { display: flex; align-items: flex-start; gap: 10px; flex: 1; }
.ag-out-item .ag-ic { width: 24px; height: 24px; color: var(--ag-violet); flex-shrink: 0; margin-top: 1px; }
.ag-out-name { font-size: 12.5px; line-height: 1.2; color: #eef2fb; font-weight: 600; }
.ag-out-desc { font-size: 10.5px; line-height: 1.25; color: var(--ag-ink-dim); margin-top: 3px; }

/* ── HUMAN + AI (bottom right) ───────────────────────────── */
.ag-human {
  left: 880px; top: 592px; width: 284px; height: 152px;
  padding: 16px 20px;
}
.ag-human .ag-ptitle { color: var(--ag-purple); letter-spacing: 0.06em; font-size: 15px; }
.ag-human p { font-size: 11px; line-height: 1.38; color: var(--ag-ink-dim); margin-top: 7px; max-width: 168px; }
.ag-human-icons {
  position: absolute; right: 16px; bottom: 14px;
  display: flex; gap: 3px; color: var(--ag-purple);
}
.ag-human-icons .ag-ic { width: 22px; height: 22px; }

/* ── CORE ────────────────────────────────────────────────── */
.ag-core-wrap {
  position: absolute; left: 600px; top: 312px;
  transform: translate(-50%,-50%);
  width: 300px; height: 300px;
}
/* dashed orbit ring (static) */
.ag-orbit {
  position: absolute; inset: 22px;
  border-radius: 50%;
  border: 1px dashed rgba(167,139,250,0.32);
}
.ag-orbit::after {
  content: ''; position: absolute; inset: 26px;
  border-radius: 50%;
  border: 1px dashed rgba(110,168,255,0.22);
}
@keyframes ag-spin { to { transform: rotate(360deg); } }

.ag-core {
  position: absolute; left: 600px; top: 312px;
  transform: translate(-50%,-50%);
  width: 168px; height: 168px;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(167,139,250,0.45) 0%, rgba(76,40,130,0.35) 45%, rgba(20,16,46,0.9) 100%);
  border: 1.5px solid rgba(167,139,250,0.6);
  box-shadow:
    0 0 0 6px rgba(139,92,246,0.08),
    0 0 60px rgba(139,92,246,0.5),
    inset 0 0 40px rgba(167,139,250,0.3);
  z-index: 3;
  animation: ag-core-breathe 5.5s ease-in-out infinite;
}
@keyframes ag-core-breathe {
  0%, 100% {
    transform: translate(-50%,-50%) scale(1);
    box-shadow:
      0 0 0 6px rgba(139,92,246,0.08),
      0 0 55px rgba(139,92,246,0.45),
      inset 0 0 40px rgba(167,139,250,0.3);
    border-color: rgba(167,139,250,0.55);
  }
  50% {
    transform: translate(-50%,-50%) scale(1.12);
    box-shadow:
      0 0 0 10px rgba(139,92,246,0.14),
      0 0 110px rgba(139,92,246,0.85),
      inset 0 0 55px rgba(167,139,250,0.5);
    border-color: rgba(190,160,255,0.95);
  }
}
.ag-core::before {
  content: ''; position: absolute; inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(110,168,255,0.25);
  animation: ag-pulse 3.2s ease-in-out infinite;
}
@keyframes ag-pulse {
  0%,100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 0.2; }
}
.ag-core-name {
  font-size: 22px; font-weight: 800; letter-spacing: 0.02em;
  color: #fff; line-height: 1.05;
}
.ag-core-tag {
  font-size: 12.5px; color: #c9b6ff; margin-top: 8px; font-weight: 500;
}

/* satellite nodes around core */
.ag-sat {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  z-index: 4; width: 120px; text-align: center;
}
.ag-sat .ag-ic { width: 26px; height: 26px; color: #b9c4ff; }
@keyframes ag-rock {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(-360deg); }   /* once left */
  50%  { transform: rotate(-360deg); }   /* brief hold */
  90%  { transform: rotate(0deg); }      /* once right, back */
  100% { transform: rotate(0deg); }      /* brief hold */
}
.ag-sat.top .ag-ic svg    { animation: ag-spin 7s linear infinite; transform-origin: 50% 50%; }
.ag-sat.bottom .ag-ic svg { animation: ag-spin 7s linear infinite reverse; transform-origin: 50% 50%; }
.ag-sat .lbl { font-size: 11.5px; color: var(--ag-ink-dim); line-height: 1.2; }
.ag-sat.top    { left: 600px; top: 222px; transform: translate(-50%,-100%); }
.ag-sat.bottom { left: 600px; top: 436px; transform: translateX(-50%); }
.ag-sat.left   { left: 452px; top: 312px; transform: translate(-50%,-50%); }
.ag-sat.right  { left: 748px; top: 312px; transform: translate(-50%,-50%); }

/* vertical connector arrows (orchestrate <-> core <-> knowledge) */
.ag-vlink {
  position: absolute; left: 600px; width: 1px;
  border-left: 1px dashed rgba(167,139,250,0.3);
  transform: translateX(-50%);
}
.ag-vlink.up   { top: 168px; height: 16px; }
.ag-vlink.down { top: 452px; height: 10px; }

/* ── SVG connector layer ─────────────────────────────────── */
.ag-svg {
  position: absolute; inset: 0;
  width: 1280px; height: 752px;
  pointer-events: none; z-index: 1;
}
.ag-flow-green {
  fill: none; stroke: var(--ag-detect);
  stroke-width: 1.4; opacity: 0.32;
  stroke-dasharray: 1 7; stroke-linecap: round;
}
.ag-flow-purple {
  fill: none; stroke: var(--ag-defend);
  stroke-width: 1.4; opacity: 0.32;
  stroke-dasharray: 1 7; stroke-linecap: round;
}

/* traveling particles */
.ag-token {
  position: absolute; top: 0; left: 0;
  width: 7px; height: 7px; border-radius: 50%;
  offset-rotate: 0deg;
  z-index: 2;
  animation: ag-travel 3.4s linear infinite;
  will-change: offset-distance;
}
.ag-token.g {
  background: var(--ag-detect);
  box-shadow: 0 0 8px 2px var(--ag-detect-glow);
}
.ag-token.p {
  background: var(--ag-defend);
  box-shadow: 0 0 8px 2px var(--ag-defend-glow);
}
@keyframes ag-travel {
  from { offset-distance: 0%; opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  to   { offset-distance: 100%; opacity: 0; }
}

/* labeled data chips riding the inflow into the core */
.ag-chip {
  position: absolute; top: 0; left: 0;
  offset-rotate: 0deg; offset-anchor: 50% 50%;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 8px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; white-space: nowrap;
  color: #f3d8b3;
  background: rgba(10,12,18,0.9);
  border: 1px solid rgba(240,136,33,0.55);
  box-shadow: 0 0 12px rgba(240,136,33,0.22);
  transform: translate(-50%,-50%);
  animation: ag-travel-chip 6s linear infinite;
  will-change: offset-distance;
}
.ag-chip::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ag-detect); box-shadow: 0 0 6px var(--ag-detect-glow);
  flex-shrink: 0;
}
@keyframes ag-travel-chip {
  from { offset-distance: 0%; opacity: 0; }
  10%  { opacity: 1; }
  82%  { opacity: 1; }
  to   { offset-distance: 100%; opacity: 0; }
}

/* green outflow chips (core -> Defend) */
.ag-chip.out {
  color: #c4f0cf;
  border-color: rgba(64,181,73,0.55);
  box-shadow: 0 0 12px rgba(64,181,73,0.22);
}
.ag-chip.out::before {
  background: var(--ag-defend); box-shadow: 0 0 6px var(--ag-defend-glow);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 760px) {
  .ag-section { padding: 40px 0 70px; }
}