/* ── de pijplijn: hoe één opdracht door het team loopt ───────────────
   Overgezet uit de losse demo. Alles onder .pipe zodat de variabelen
   en de generieke klassenamen niets van de pagina raken. Typografie op
   Signifier/Public Sans, kleuren op tokens, maten op de schaal. */
.pipe{
    /* alles uit de tokenlaag; geen eigen kleuren of families meer.
       DM Mono is vervallen, dus de mono-rollen gaan naar Public Sans met
       spatiëring — dat draagt hetzelfde 'label'-signaal zonder tweede familie. */
    --surface:var(--t-surface); --subtle:var(--t-subtle);
    --border:var(--t-border); --border2:var(--t-border-strong);
    --ink:var(--t-ink); --ink2:var(--t-ink2);
    --butter50:var(--t-butter-50); --butter100:var(--t-butter-100); --olive:var(--t-butter-ink);
    --cobalt:var(--t-cobalt-deep);
    --serif:var(--t-display); --sans:var(--t-sans); --mono:var(--t-label);
  }
  .pipe *{box-sizing:border-box}
  /* de hele sectie op wit — kop, pijplijn en slotregel op één vlak */
  .pipe{background:var(--surface);font-family:var(--sans);color:var(--ink)}

  /* ── Lead ── */
  .pipe-lead{max-width:760px;margin:0 auto;padding:var(--v2-section) var(--t-s5) var(--t-s6);text-align:center}
  .pipe-lead h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,5vw,44px);letter-spacing:-.018em;line-height:1.08;text-wrap:balance}
  .pipe-lead p{color:var(--ink2);font-size:16px;line-height:1.6;margin:var(--t-s4) auto 0;max-width:50ch}
  .pipe-cue{margin-top:var(--t-s6);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);display:inline-flex;align-items:center;gap:var(--t-s2)}
  .pipe-cue .pipe-arr{width:16px;height:25px;border:1.5px solid var(--ink2);border-radius:10px;position:relative}
  .pipe-cue .pipe-arr::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:5px;border-radius:2px;background:var(--ink2);transform:translateX(-50%);animation:scr 1.6s ease-in-out infinite}
  @keyframes scr{0%,100%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}70%{opacity:0;transform:translate(-50%,8px)}}

  /* ── Track + pin ── */
  .pipe-track{position:relative;height:700vh}
  .pipe-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
  .pipe-stage{position:relative;width:100%;height:100%}
  /* One uniform edge-fade over the whole rail. Agents and lines live in the
     same layer, so they always fade together — nothing can drift apart. */
  .pipe-railwrap{position:absolute;inset:0;
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.10) 9%,rgba(0,0,0,1) 33%,rgba(0,0,0,1) 67%,rgba(0,0,0,.10) 91%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.10) 9%,rgba(0,0,0,1) 33%,rgba(0,0,0,1) 67%,rgba(0,0,0,.10) 91%,rgba(0,0,0,0) 100%);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;mask-size:100% 100%}
  .pipe-rail{position:absolute;top:0;left:0;height:100%;will-change:transform}

  /* line layer behind the stations */
  .pipe-lines{position:absolute;left:0;top:0;overflow:visible;z-index:0;pointer-events:none}
  .pipe-lines .pipe-base{fill:none;stroke:var(--border2);stroke-width:1.25;stroke-dasharray:2 8;stroke-linecap:round;opacity:.65}
  .pipe-lines .pipe-flow{fill:none;stroke:var(--cobalt);stroke-width:1.75;stroke-linecap:round;opacity:.92}
  .pipe-lines .pipe-node{fill:var(--cobalt);opacity:0;transition:opacity .4s ease}
  .pipe-lines .pipe-node.pipe-on{opacity:1}

  /* ── Stations: a zero-size anchor sitting exactly on the flow axis ──
     Cards are placed relative to it so every avatar centre lands on a
     mathematically exact offset. Symmetry is guaranteed by construction. */
  .pipe-station{position:absolute;left:0;width:0;height:0;z-index:2}
  .pipe-card,.pipe-ocard{position:absolute;left:0;transform:translateX(-50%)}
  .pipe-card{width:320px;display:flex;flex-direction:column;align-items:center;text-align:center}

  .pipe-ava{position:relative;width:104px;height:104px;border-radius:50%;flex:none}
  .pipe-ava .pipe-ph{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--subtle);box-shadow:0 6px 20px -10px rgba(23,24,30,.35)}
  .pipe-ava .pipe-ph img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
  .pipe-ava::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:var(--butter100);opacity:0;filter:blur(13px);transition:opacity .55s ease;z-index:-1}
  .pipe-station.pipe-active .pipe-ava::before{opacity:.22}
  .pipe-ava::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--butter100);opacity:0;transition:opacity .5s ease}
  .pipe-station.pipe-active .pipe-ava::after{opacity:.45}

  /* LLM badge — white circle, subtle shadow, centred logo */
  .pipe-llm{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;background:var(--surface);box-shadow:0 3px 10px -2px rgba(23,24,30,.22),0 0 0 1px rgba(23,24,30,.05);display:flex;align-items:center;justify-content:center}
  .pipe-llm svg,.pipe-llm img{width:14px;height:14px;display:block}

  .pipe-meta{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:var(--t-s3)}
  .pipe-nm{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.25;color:var(--ink);letter-spacing:-.005em}
  .pipe-nm .pipe-rl{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink)}
  .pipe-ds{font-size:14px;line-height:1.6;color:var(--ink2);max-width:34ch}
  /* status = butter pill with ink text; always present so heights stay even */
  .pipe-working{display:inline-flex;align-items:center;gap:var(--t-s2);background:var(--butter50);border:1px solid var(--butter100);
    border-radius:9999px;padding:var(--t-s2) var(--t-s4);font-family:var(--mono);font-size:12px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .45s ease}
  .pipe-station.pipe-active .pipe-working{opacity:1}
  .pipe-working .pipe-dot{width:5px;height:5px;border-radius:50%;background:var(--cobalt);animation:bp 1.1s ease-in-out infinite}
  @keyframes bp{0%,100%{opacity:.25}50%{opacity:1}}

  .pipe-station.pipe-solo .pipe-ava{width:176px;height:176px}
  .pipe-station.pipe-solo .pipe-nm,.pipe-station.pipe-solo .pipe-nm .pipe-rl{font-size:24px}
  .pipe-station.pipe-solo .pipe-ds{font-size:14px;max-width:26ch}
  .pipe-station.pipe-solo .pipe-llm{width:34px;height:34px}
  .pipe-station.pipe-solo .pipe-llm svg,.pipe-station.pipe-solo .pipe-llm img{width:17px;height:17px}
  .pipe-station.pipe-solo .pipe-meta{margin-top:24px;gap:var(--t-s3)}

  .pipe-station.pipe-multi .pipe-ava{width:92px;height:92px}
  .pipe-station.pipe-multi .pipe-meta{margin-top:16px;gap:var(--t-s2)}
  .pipe-station.pipe-multi .pipe-nm,.pipe-station.pipe-multi .pipe-nm .pipe-rl{font-size:16px}
  .pipe-station.pipe-multi .pipe-ds{font-size:12px}
  .pipe-station.pipe-multi .pipe-llm{width:25px;height:25px}
  .pipe-station.pipe-multi .pipe-llm svg,.pipe-station.pipe-multi .pipe-llm img{width:13px;height:13px}

  /* compact parallel cards — switched on when the viewport is short */
  body.pipe-compact .pipe-station.pipe-multi .pipe-ava{width:72px;height:72px}
  body.pipe-compact .pipe-station.pipe-multi .pipe-meta{margin-top:12px;gap:var(--t-s2)}
  body.pipe-compact .pipe-station.pipe-multi .pipe-nm,body.pipe-compact .pipe-station.pipe-multi .pipe-nm .pipe-rl{font-size:16px}
  body.pipe-compact .pipe-station.pipe-multi .pipe-ds{font-size:12px}
  body.pipe-compact .pipe-station.pipe-multi .pipe-working{padding:var(--t-s1) var(--t-s3);font-size:12px}
  body.pipe-compact .pipe-station.pipe-multi .pipe-llm{width:22px;height:22px}
  body.pipe-compact .pipe-station.pipe-multi .pipe-llm svg,body.pipe-compact .pipe-station.pipe-multi .pipe-llm img{width:12px;height:12px}
  body.pipe-compact .pipe-station.pipe-solo .pipe-ava{width:150px;height:150px}

  /* output card */
  /* De uitkomst is het slot van het verhaal, dus die kaart mag zwaarder wegen
     dan de agenten ervoor: 1,3x zo breed, en het woord Package draagt hem. */
  .pipe-ocard{width:325px;background:var(--butter50);border:1px solid var(--border);border-radius:18px;box-shadow:0 18px 46px -24px rgba(23,24,30,.4);overflow:hidden}
  .pipe-ocard .pipe-oc-top{height:4px;background:var(--cobalt)}
  .pipe-ocard .pipe-oc-b{padding:var(--t-s6) var(--t-s5);text-align:center}
  .pipe-ocard .pipe-oc-ic{width:66px;height:66px;border-radius:50%;background:var(--cobalt);color:var(--t-on-cobalt-deep);display:flex;align-items:center;justify-content:center;margin:0 auto var(--t-s5)}
  .pipe-ocard .pipe-oc-ic svg{width:30px;height:30px}
  /* Twee regels, tweede fors groter: het zetsel zelf zegt dat hier iets af is. */
  .pipe-ocard .pipe-oc-t{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:.98;letter-spacing:-.02em}
  .pipe-oc-t1{display:block;font-size:32px}
  .pipe-oc-t2{display:block;font-size:32px}
  .pipe-ocard p{font-size:14px;color:var(--ink2);line-height:1.6;margin-top:var(--t-s3)}
  .pipe-chn{display:flex;justify-content:center;gap:var(--t-s3);margin-top:var(--t-s5);padding-top:var(--t-s5);border-top:1px solid var(--border)}
  .pipe-chn .pipe-c{width:42px;height:42px;border-radius:50%;background:var(--surface);box-shadow:0 3px 10px -2px rgba(23,24,30,.22),0 0 0 1px rgba(23,24,30,.05);display:flex;align-items:center;justify-content:center}
  .pipe-chn .pipe-c svg,.pipe-chn .pipe-c img{width:22px;height:22px;display:block}

  /* ── Slot: de vraag ────────────────────────────────────────────────
     Staat in de etalage en niet in de rail — de rail schuift, dit blok
     hoort stil in de baan rechts van de kaart. Plaats en breedte komen
     uit de layout-berekening, want ze hangen af van waar de kaart
     uitkomt. Verborgen tot de kaart stilstaat, en dan ook echt verborgen:
     opacity alleen laat de knop bereikbaar voor de tabtoets. */
  /* Kolom, geen tekstblok: een inline-flex knop hangt anders in een regelbak
     en trekt daar het gat tussen kop en knop mee open. */
  .pipe-ask{position:absolute;z-index:2;text-align:center;
    display:flex;flex-direction:column;align-items:center;
    transform:translate(-50%,-50%);
    visibility:hidden;transition:visibility 0s linear .9s}
  .pipe-ask.pipe-on{visibility:visible;transition-delay:0s}
  /* Alles hieronder hangt aan de scrollstand, niet aan een klok: de js zet de
     letters, de breedte en de doorzichtigheid per frame. Vandaar geen enkele
     transition — die zou tegen de scroll in werken. De knop houdt wel zijn
     eigen hover. */
  .pipe-ask__h{margin:0;font-family:var(--serif);font-weight:400;font-size:36px;
    line-height:1.1;letter-spacing:-.018em;color:var(--ink);white-space:nowrap}
  /* De regel staat gecentreerd, dus letter voor letter aanvullen laat hem
     vanuit het midden naar twee kanten groeien. */
  .pipe-ask__cur{display:inline-block;width:2px;height:.72em;margin-left:2px;
    background:var(--ink);vertical-align:-.03em;opacity:0}
  .pipe-typing .pipe-ask__cur{opacity:1}

  .pipe-ask__bw{margin-top:var(--t-s5);opacity:0}
  /* Begint als cirkel van 46x46 en groeit mee met de scroll naar zijn eigen
     breedte; die maat wordt gemeten, want hij hangt aan de knoptekst. */
  /* 48 = 2 x 24px binnenruimte. Smaller kan niet: bij border-box duwt de
     padding de doos toch weer open, en dan is de cirkel geen cirkel maar
     een liggende ovaal van 48 bij 46. */
  /* De breedte wordt per frame door de scroll gezet; de hover-veeg van de
     knop mag daar gewoon naast blijven lopen. */
  .pipe-ask__b{width:48px;min-height:48px;height:48px;padding:0 var(--t-s5);
    overflow:hidden;white-space:nowrap;font-size:var(--t-body);
    transition:box-shadow .28s var(--v2-ease),transform .28s var(--v2-ease)}
  .pipe-ask__l{opacity:0}

  /* ── Slot: de confetti ─────────────────────────────────────────────
     Het doek hangt in de etalage en niet in de rail — de rail schuift,
     en de confetti hoort bij het scherm. Boven de kaart én boven het
     stapblok: confetti die achter iets langs gaat leest als een fout,
     niet als een viering. */
  .pipe-burst{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
  @media (prefers-reduced-motion:reduce){.pipe-burst{display:none}}

  /* step indicator — anchored at the bottom of the viewport */
  /* De Ask-AI-balk plakt onderaan de viewport en is 49px hoog; op 46px liep
   het stapblok er recht tegenaan. 88px laat er 39px lucht onder. */
  .pipe-foot{position:absolute;left:50%;bottom:calc(var(--t-s8) + var(--t-s5));transform:translateX(-50%);display:flex;flex-direction:column;
    align-items:center;gap:var(--t-s4);z-index:3;text-align:center;pointer-events:none}
  .pipe-dots{display:flex;gap:var(--t-s2)}
  .pipe-dots i{width:6px;height:6px;border-radius:50%;background:var(--border2);transition:background .35s,width .35s}
  .pipe-dots i.pipe-on{background:var(--cobalt);width:22px;border-radius:3px}
  .pipe-beat{white-space:nowrap}
  .pipe-beat .pipe-k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
  .pipe-beat .pipe-t{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink);margin-top:8px;transition:opacity .3s}
  @media (prefers-reduced-motion:reduce){.pipe-cue .pipe-arr::after,.pipe-working .pipe-dot{animation:none}}

  /* ── smal: één station tegelijk ────────────────────────────────────
     De rail is 690px breed en de kaarten 320px. Op een telefoon staan de
     buren daardoor half in beeld en valt hun naam over de tekst van het
     actieve station heen; op de tussenmaat worden hun namen halverwege
     afgekapt tegen de schermrand. Alleen het actieve station tonen lost dat
     op zonder aan de opzet te komen: de beweging blijft, de rommel niet.
     Vanaf 1025px is er wel ruimte voor de buren en blijft het een rail. */
  @media (max-width: 1024px) {
    .pipe-station { transition: opacity 0.4s ease; }
    .pipe-station:not(.pipe-active) { opacity: 0; pointer-events: none; }
    .pipe-card { width: min(320px, calc(100vw - 2 * var(--t-s5))); }
    /* zonder buren hoeft de rand niet meer weggemaskerd te worden */
    .pipe-railwrap { -webkit-mask-image: none; mask-image: none; }
  }

  /* ── de parallelle stap op een telefoon ────────────────────────────
     Stap 3 zet drie kaarten onder elkaar. Die kolom is 577px hoog terwijl er
     554px beschikbaar is tussen de balk en het stapblok, dus de onderste
     kaart liep over "STEP 3 / 5" heen. De motor kiest dan bewust voor krap
     onderaan boven onzichtbaar bovenaan — hier is de kolom zelf te hoog.

     Twee dingen eraf en het past: het portret een maat kleiner, en de
     toelichtingsregel weg. Naam, rol en de status blijven staan, en dat is
     precies wat deze stap laat zien — drie mensen die tegelijk werken. Op
     de losse stappen blijft de toelichting gewoon staan. */
  @media (max-width: 700px) {
    body.pipe-compact .pipe-station.pipe-multi .pipe-ava { width: 60px; height: 60px; }
    .pipe-station.pipe-multi .pipe-ds { display: none; }
    .pipe-station.pipe-multi .pipe-meta { margin-top: 12px; }
  }

  /* De verbindingslijnen stonden hier op display:none. Reden destijds: op een
     telefoon werd de bocht een samengeknepen verticale haal die als een kras
     las. Dat klopte, maar het was het symptoom — de oorzaak zat in de
     meetkunde. De stapafstand was 46% van de schermbreedte (172px op een
     telefoon) terwijl één portret al 150px breed is; met 30px vaste
     ademruimte aan weerszijden kwam het eindpunt links van het beginpunt te
     liggen en werd de lijn achterstevoren getekend. Sinds pipeline.js de
     stapafstand uit de portretmaat afleidt en de ademruimte meeschaalt, is er
     op een telefoon weer een echte baan om in te tekenen — de lijnen mogen
     dus gewoon mee. */