/* ─── pipeline anatomy section ─────────────────────────────────────────── */
.pipeline-section{
  position: relative;
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding-top: 80px;
  /* scroll length = phases * ~0.75vh of scroll per phase */
  min-height: 520vh;
}
.pipeline-sticky{
  position: sticky; top: 64px;
  min-height: 100vh;
  padding: 48px 40px 40px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 28px;
  max-width: 1440px; margin: 0 auto;
}
.pipeline-scrollbuf{ height: 1px; } /* the section min-height does the work */

.pipeline-header{ max-width: 1100px; }
.pipeline-eyebrow{
  display:inline-flex; align-items:center; gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted);
  margin-bottom: 14px;
}
.ph-line{ width: 36px; height: 1px; background: var(--muted); }
.pipeline-h2{
  font-family: 'Fraunces', 'Inter Tight', serif; font-weight: 360;
  font-size: clamp(32px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.035em;
  margin: 0; text-wrap: balance;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

/* ─── phase strip ───────────────────────────────────────────────────────── */
.phase-strip{ position: relative; padding: 8px 0 180px; }
.phase-connector{
  position: absolute; left: 6%; right: 6%;
  top: 36px; height: 2px;
  background: transparent;
}
.phase-connector-line{
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 10px);
}
.phase-connector-fill{
  position: absolute; top: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, var(--forest) 0%, var(--forest) 60%, var(--coral) 100%);
  transition: width 450ms cubic-bezier(.4,.0,.2,1);
}
.phase-strip-row{
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 0; position: relative;
}
.phase-cell{
  position: relative; display:flex; flex-direction:column; align-items:center;
  padding-top: 4px;
}

.phase-pill{
  position: relative; z-index: 2;
  display: inline-flex; flex-direction: column; align-items:center; gap: 6px;
  padding: 10px 14px 12px;
  background: var(--cream); color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 4px;
  min-width: 148px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  transition: all 240ms ease;
  text-align: center;
}
.phase-pill:hover{ border-color: var(--forest); }
.phase-num{
  font-size: 10.5px; letter-spacing: 0.14em; color: var(--muted);
  background: transparent; padding: 0; margin-bottom: -2px;
}
.phase-icon{ color: var(--muted); display:inline-flex; }
.phase-name{ font-size: 13.5px; color: var(--ink); font-weight: 500; }
.phase-counter{
  font-size: 10.5px; color: var(--muted); letter-spacing: 0.02em;
  text-transform: lowercase;
}

.is-past .phase-pill{
  border-color: var(--forest);
  background: rgba(45,74,62,0.05);
}
.is-past .phase-num, .is-past .phase-icon{ color: var(--forest); }

.is-active .phase-pill{
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
  box-shadow: 0 12px 28px -14px rgba(45,74,62,0.55);
  transform: translateY(-1px);
}
.is-active .phase-num, .is-active .phase-icon,
.is-active .phase-name, .is-active .phase-counter{ color: var(--cream); }
.is-active .phase-pill::after{
  content:""; position:absolute; inset:-4px; border-radius: 6px;
  border: 1px solid rgba(45,74,62,0.35);
  animation: phasePulse 2.2s ease-in-out infinite;
}
@keyframes phasePulse{
  0%,100%{ opacity: 0; transform: scale(1); }
  50%    { opacity: 1; transform: scale(1.04); }
}

/* ─── fan-out agents ────────────────────────────────────────────────────── */
.phase-fan{ position: absolute; top: 74px; left: 50%; width: 0; height: 0; }
.agent-circle{
  position: absolute; left: -22px; top: 0;
  width: 44px; height: 44px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 2px;
  border-radius: 50%; background: var(--cream-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.02em;
  opacity: 0; transform-origin: center top;
  animation: agentIn 420ms cubic-bezier(.2,.8,.2,1) forwards;
  cursor: pointer;
  padding: 0 2px;
  overflow: hidden;
}
@keyframes agentIn{ to { opacity: 1; } }
.agent-circle-dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--forest);
}
.agent-circle.kind-tool .agent-circle-dot{ background: var(--orange); }
.agent-circle.kind-more .agent-circle-dot{ background: var(--muted); }
.agent-circle-label{ line-height: 1; text-overflow: ellipsis; max-width: 38px; overflow:hidden; }
.agent-circle:hover{
  background: var(--forest); color: var(--cream); border-color: var(--forest);
  transform: translate(var(--tx,0), var(--ty,0)) scale(1.08);
}
.agent-circle.is-selected{
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}
.agent-circle.is-more{ background: transparent; border-style: dashed; }

/* ─── detail panel ──────────────────────────────────────────────────────── */
.phase-detail{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  padding-top: 12px;
}
.phase-detail-left{ min-width: 0; }
.pd-eyebrow{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: 0.08em; color: var(--coral);
  margin-bottom: 8px;
}
.pd-title{
  font-family: 'Fraunces', serif; font-weight: 380;
  font-size: clamp(26px, 2.6vw, 38px); margin: 0 0 10px;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 20;
}
.pd-desc{
  font-size: 15.5px; line-height: 1.55; color: #3A443E;
  margin: 0 0 20px; max-width: 58ch;
}

.pd-agents-title{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: 0.08em; color: var(--muted);
  text-transform: lowercase;
  border-top: 1px solid var(--line); padding-top: 12px; margin-top: 8px;
}
.pd-agents-count{
  color: var(--ink); background: var(--cream-2);
  padding: 2px 8px; border-radius: 2px; font-size: 11px;
}
.pd-agents{
  list-style: none; padding: 0; margin: 10px 0 0;
  max-height: 280px; overflow-y: auto;
  scrollbar-width: thin;
}
.pd-agent{
  display: grid;
  grid-template-columns: 56px auto 1fr;
  gap: 10px; align-items: baseline;
  padding: 7px 8px; cursor: pointer;
  border-radius: 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  transition: background 140ms ease;
}
.pd-agent:hover{ background: var(--cream-2); }
.pd-agent.is-selected{ background: rgba(45,74,62,0.07); }
.pd-agent-kind{
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  padding: 3px 6px; border: 1px solid var(--line); border-radius: 2px;
  text-align: center; line-height: 1;
}
.pd-agent.kind-tool .pd-agent-kind{ color: var(--orange); border-color: rgba(212,145,93,0.5); }
.pd-agent.kind-agent .pd-agent-kind{ color: var(--forest); border-color: rgba(45,74,62,0.4); }
.pd-agent.kind-more .pd-agent-kind{ color: var(--muted); }
.pd-agent-name{ color: var(--ink); font-weight: 500; }
.pd-agent-role{ color: var(--muted); line-height: 1.4; }

.pd-hover-detail{
  margin-top: 14px; padding: 12px 14px;
  background: var(--ink); color: var(--cream);
  border-radius: 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; line-height: 1.5;
}
.pd-hover-label{ color: var(--orange); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; }
.pd-hover-text{ color: #D7DDD9; }

/* ─── code panel ────────────────────────────────────────────────────────── */
.phase-detail-right{ display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pd-code{
  background: var(--term-bg); color: var(--term-fg);
  border: 1px solid #1B2321; border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 40px -24px rgba(11,15,14,0.4);
}
.pd-code-head{
  display:flex; justify-content:space-between; align-items:center;
  padding: 8px 14px; background: var(--term-chrome);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.08em;
  border-bottom: 1px solid #1F2826;
}
.pd-code-lang{ color: var(--orange); text-transform: uppercase; }
.pd-code-title{ color: var(--term-gray); }
.pd-code-body{
  margin: 0; padding: 14px 14px 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; line-height: 1.6;
  overflow: auto;
}
.pd-code-line{ display:flex; gap: 14px; white-space: pre; }
.pd-code-ln{ color: #3A4644; user-select: none; flex-shrink: 0; }
.pd-code-text{ color: var(--term-fg); }
.c-comment{ color: #5C6560; font-style: italic; }
.c-string { color: #B7D4C2; }
.c-num    { color: #E2B48A; }
.c-type   { color: #D4915D; }
.c-key    { color: #8CB4A1; }
.c-kw     { color: #F1B4AE; }

/* ─── chain reveal (phase 5) ────────────────────────────────────────────── */
.chain-reveal{
  background: linear-gradient(180deg, #0E1413 0%, #0B0F0E 100%);
  border: 1px solid #1F2826;
  border-radius: 4px;
  padding: 20px 20px 22px;
  color: var(--term-fg);
  position: relative; overflow: hidden;
}
.chain-reveal::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 200px at 50% 100%, rgba(239,68,68,0.18), transparent 70%);
  pointer-events:none;
}
.chain-caption-top{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.14em; color: var(--coral);
  text-transform: uppercase; margin-bottom: 16px;
}
.chain-cards{
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 0; align-items: center; position: relative;
}
.chain-card{
  padding: 12px 14px; border: 1px solid #2A3431;
  background: #141A18; border-radius: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  opacity: 0; transform: translateY(8px);
  transition: opacity 420ms ease, transform 420ms ease, border-color 420ms ease;
}
.stage-1 .chain-card, .stage-2 .chain-card, .stage-3 .chain-card{ opacity: 1; transform: none; }
.stage-3 .chain-card{ border-color: #4A2320; }
.chain-card-id{ font-size: 10.5px; color: var(--orange); letter-spacing: 0.1em; }
.chain-card-kind{ font-size: 13px; color: var(--term-fg); margin: 4px 0 8px; }
.chain-card-cvss{ display:flex; align-items:baseline; gap: 8px; }
.chain-cvss-num{ font-family: 'Fraunces', serif; font-weight: 400; font-size: 24px; color: #D4915D; }
.chain-cvss-lbl{ font-size: 10px; color: var(--term-gray); letter-spacing: 0.1em; text-transform: uppercase; }
.chain-card-meta{ margin-top: 6px; font-size: 11px; color: var(--term-gray); }

.chain-svg{ width: 120px; height: 90px; margin: 0 4px; }
.chain-path{
  stroke-dasharray: 6 6; stroke-dashoffset: 240;
  transition: stroke-dashoffset 900ms ease;
}
.stage-2 .chain-path, .stage-3 .chain-path{ stroke-dashoffset: 0; animation: chainFlow 2s linear infinite; }
@keyframes chainFlow{ to{ stroke-dashoffset: -48; } }
.chain-knot{
  opacity: 0; transition: opacity 320ms ease;
}
.stage-3 .chain-knot{ opacity: 1; }

.chain-stamp{
  margin-top: 20px; padding: 14px 16px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.35);
  border-radius: 3px;
  opacity: 0; transform: translateY(6px);
  transition: opacity 420ms ease, transform 420ms ease;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.stage-3 .chain-stamp{ opacity: 1; transform: none; }
.chain-stamp-id{ font-size: 11px; letter-spacing: 0.12em; color: #FF5F5F; }
.chain-stamp-cvss{ display:flex; align-items:baseline; gap: 10px; margin-top: 6px; }
.chain-stamp-num{ font-family: 'Fraunces', serif; font-weight: 400; font-size: 42px; color: #FF9A9A; line-height: 1; }
.chain-stamp-lbl{ font-size: 11px; color: #FF9A9A; letter-spacing: 0.06em; }
.chain-stamp-caption{ margin-top: 8px; font-size: 13.5px; color: var(--term-fg); font-style: italic; }

/* ─── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .phase-detail{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  .pipeline-section{ min-height: auto; }
  .pipeline-sticky{ position: static; padding: 32px 20px; }
  .phase-strip-row{ grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .phase-connector{ display: none; }
  .phase-strip{ padding-bottom: 40px; }
  .phase-fan{ display: none; } /* noise on mobile */
  .phase-pill{ min-width: 0; width: 100%; }
}

.pipeline-section.is-reduced{ min-height: auto; }
.pipeline-section.is-reduced .pipeline-sticky{ position: static; }
.pipeline-section.is-reduced .phase-fan{ display: none; }