/* The pinned stage and the task field: glass nodes over a rendered plate.
   Geometry: sticky 100vh stage with overflow clip, a beat column with 112vh
   slots and an 80vh tail; beats set state on the stage and CSS transitions do
   the motion with cubic-bezier(.32,.72,0,1). */

.sequence { position: relative; }

.stage {
  position: sticky; top: 0; height: 100vh; overflow: clip;
  background: var(--ink); color: var(--paper);
  --fit: 1; --cx: 61%; --cy: 50%;
  --beat-s: .7; --fx: 0; --fy: 0;
}

/* The rendered plate stays under the glass the whole time; it recedes (darker, softer) once the nodes open. */
.stage-plate { position: absolute; inset: 0; background: var(--ink); }
.stage-plate img {
  width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%;
  animation: plate-drift 40s ease-in-out infinite alternate; animation-play-state: var(--anim);
  transition: filter var(--dur-cam) var(--ease-beat), opacity var(--dur-cam) var(--ease-beat);
}
.stage-plate::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 34%, transparent); transition: background var(--dur-cam) var(--ease-beat); }
.stage[data-ground="stage"] .stage-plate img { filter: blur(5px) saturate(85%); }
.stage[data-ground="stage"] .stage-plate::after { background: color-mix(in srgb, var(--ink) 58%, transparent); }
@keyframes plate-drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1%, .5%); } }

/* The camera: a zero-size anchor at (--cx, --cy); the world sits at its origin. */
.camera {
  position: absolute; left: var(--cx); top: var(--cy); width: 0; height: 0;
  --s: calc(var(--beat-s) * var(--fit));
  transform: translate(calc(-1px * var(--fx) * var(--s)), calc(-1px * var(--fy) * var(--s))) scale(var(--s));
  transition: transform var(--dur-cam) var(--ease-beat);
  will-change: transform;
}
.world { position: absolute; left: -800px; top: -450px; width: 1600px; height: 900px; font-family: var(--font-body); }
.wires { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; overflow: visible; color: var(--brand-teal); }
.world[data-swapping="true"] .nodes, .world[data-swapping="true"] .docs, .world[data-swapping="true"] .request, .world[data-swapping="true"] .wires { opacity: 0; transition: opacity .2s var(--ease-ui); }
.nodes, .docs, .request, .wires { transition: opacity .3s var(--ease-ui); }

/* ---------- the request (hero) ---------- */
.request {
  position: absolute; left: 610px; top: 356px; width: 380px; padding: var(--space-lg); text-align: center;
  transition: opacity var(--dur-tile) var(--ease-beat), transform var(--dur-cam) var(--ease-beat);
}
.world:not([data-mode="hero"]) .request { opacity: 0; transform: scale(1.3); pointer-events: none; }
.request-text { display: flex; flex-direction: column; font: 700 26px/1.15 var(--font-display); margin: 0 0 var(--space-xs); color: var(--paper); }
.request-sub { font: 500 12px/1.3 var(--font-mono); color: var(--gray-300); margin: 0; }

/* ---------- nodes ---------- */
.node { position: absolute; left: 0; top: 0; width: 200px; height: 104px; --i: 0;
  transition: transform var(--dur-tile) var(--ease-beat) calc(var(--i) * 30ms); will-change: transform; }
.node-in {
  position: absolute; inset: 0; box-sizing: border-box; padding: 32px 14px 12px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transition: opacity var(--dur-tile) var(--ease-beat) calc(var(--i) * 30ms), transform var(--dur-tile) var(--ease-beat) calc(var(--i) * 30ms), border-color var(--dur-tile) var(--ease-beat), filter var(--dur-tile) var(--ease-beat), box-shadow var(--dur-tile) var(--ease-beat);
}
.node-in::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 6px 6px 0 0; background: var(--gray-400); transition: background var(--dur-tile) var(--ease-beat); }
.node[data-hidden="true"] .node-in { opacity: 0 !important; transform: scale(.4); filter: none; }
.node .role { position: absolute; left: 14px; top: 11px; font: 500 12px/1 var(--font-mono); letter-spacing: .03em; color: var(--gray-300); transition: color var(--dur-tile) var(--ease-beat); }
.node .label { display: flex; flex-direction: column; font: 600 17px/1.2 var(--font-body); color: var(--paper); text-wrap: balance; }

.node[data-role="person"] .node-in::before { background: var(--paper); }
.node[data-role="person"] .role { color: var(--paper); }
.node[data-role="agent"] .node-in { border-color: color-mix(in srgb, var(--brand-teal) 75%, transparent); }
.node[data-role="agent"] .node-in::before { background: var(--brand-teal); }
.node[data-role="agent"] .role { color: var(--brand-teal-light); }
.node[data-role="rules"] .node-in { border-color: color-mix(in srgb, var(--brand-teal-dark) 90%, transparent); }
.node[data-role="rules"] .node-in::before { background: var(--brand-teal-dark); }
.node[data-role="rules"] .role { color: var(--brand-teal-light); }
.node[data-role="review"] .node-in { border-style: dashed; border-color: var(--gray-300); }
.node[data-role="review"] .node-in::before { height: 0; background: transparent; border-top: 3px dashed var(--gray-300); }
.node[data-role="review"] .role { color: var(--gray-200); }

/* Depth of field: the nodes under discussion come forward, the rest soften. */
.node[data-focus="out"] .node-in { filter: blur(1.6px); opacity: .5; }
.node[data-focus="in"] .node-in { transform: scale(1.06); box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--brand-teal-light) 55%, transparent); }

/* Exception: the paused node */
.node[data-paused="true"] .node-in { border-color: var(--warning); opacity: .8; }
.node[data-paused="true"] .role::after { content: ": paused"; color: var(--warning); }

/* Friction (the warning token, for state only) */
.friction { position: absolute; right: -8px; top: -8px; display: flex; align-items: flex-start; flex-direction: row-reverse; gap: 6px; opacity: 0; transform: scale(.6); transform-origin: right top;
  transition: opacity .3s var(--ease-beat) calc(.35s + var(--i) * 40ms), transform .3s var(--ease-beat) calc(.35s + var(--i) * 40ms); }
.f-friction .friction { opacity: 1; transform: none; }
.friction .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--warning); border: 2px solid var(--ink); box-sizing: border-box; }
.friction .f-label { font: 500 12px/1 var(--font-mono); color: var(--gray-200); background: color-mix(in srgb, var(--ink) 82%, transparent); padding: 4px 6px; border-radius: var(--radius-sm); white-space: nowrap; transform: translateY(-22px); }

/* Controls attached to nodes (permission limit, approval boundary) */
.node .control { position: absolute; left: 0; right: 0; top: 100%; margin-top: 8px; font: 500 12px/1.3 var(--font-mono); color: var(--brand-teal-light); opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--ease-beat) .4s, transform .35s var(--ease-beat) .4s; display: flex; gap: 6px; align-items: flex-start; }
.node .control::before { content: ""; flex: none; width: 9px; height: 7px; margin-top: 3px; border: 1.5px solid currentColor; border-top-width: 3px; border-radius: 2px 2px 1px 1px; }
.node[data-control="true"] .control { opacity: 1; transform: none; }

/* ---------- sources (beat 6) ---------- */
.docs { position: absolute; left: 60px; top: 72px; width: 180px; opacity: 0; transform: translateX(-14px); transition: opacity var(--dur-tile) var(--ease-beat), transform var(--dur-tile) var(--ease-beat); }
.f-controls .docs { opacity: 1; transform: none; }
.docs-title { font: 700 20px/30px var(--font-display); margin: 0 0 12px; color: var(--paper); }
.doc { position: relative; height: 72px; margin: 0 0 24px; padding: 10px 12px 10px 50px; display: flex; align-items: center; font: 600 13px/1.25 var(--font-body); color: var(--paper); border-radius: var(--radius-md); }
.doc-shape { position: absolute; left: 14px; top: 18px; width: 24px; height: 34px; border: 1.5px solid var(--paper); border-radius: 2px; clip-path: polygon(0 0, 70% 0, 100% 24%, 100% 100%, 0 100%); }
.doc-shape::after { content: ""; position: absolute; left: 5px; right: 5px; top: 12px; height: 0; border-top: 1.5px solid var(--gray-400); box-shadow: 0 6px 0 var(--gray-400), 0 12px 0 var(--gray-400); }
.docs-owner { display: flex; gap: 6px; align-items: flex-start; font: 500 11px/1.35 var(--font-mono); color: var(--gray-300); margin: 0; }
.docs-owner .lock { flex: none; width: 9px; height: 7px; margin-top: 3px; border: 1.5px solid currentColor; border-top-width: 3px; border-radius: 2px 2px 1px 1px; }
.leader { fill: none; stroke: var(--brand-teal); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-line) var(--ease-beat) calc(.35s + var(--i) * 120ms); }
.f-controls .leader { stroke-dashoffset: 0; }

/* ---------- rules path (beat 3) ---------- */
.rule-path { fill: none; stroke: var(--brand-teal-dark); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--ease-beat) .3s; }
.f-rules .rule-path { stroke-dashoffset: 0; }
.rule-text { font: 500 12px var(--font-mono); fill: var(--gray-300); opacity: 0; transition: opacity .3s var(--ease-beat) .85s; }
.f-rules .rule-text { opacity: 1; }

/* ---------- exception route (beat 7) ---------- */
.ex-path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ex-up { stroke: var(--warning); color: var(--warning); transition: stroke-dashoffset .5s var(--ease-beat) .25s; }
.ex-down { stroke: var(--gray-300); color: var(--gray-300); transition: stroke-dashoffset .5s var(--ease-beat) 1.1s; }
.f-exception .ex-path { stroke-dashoffset: 0; }
.ex-text { font: 500 12px var(--font-mono); fill: var(--gray-200); text-anchor: end; opacity: 0; transition: opacity .3s var(--ease-beat) .8s; }
.ex-text-right { text-anchor: start; transition-delay: 1.5s; }
.f-exception .ex-text { opacity: 1; }
.owner-chip { position: absolute; left: 0; top: 0; width: 220px; padding: 10px 14px; opacity: 0; transition: opacity .35s var(--ease-beat) .6s; border-radius: var(--radius-md); }
.owner-chip .role { display: block; font: 500 11px/1 var(--font-mono); color: var(--warning); margin-bottom: 4px; }
.owner-chip .label { font: 600 15px/1.2 var(--font-body); color: var(--paper); }
.owner-chip[data-on="true"] { opacity: 1; }

/* ---------- lanes (beat 8) ---------- */
.lane-band { fill: var(--gray-800); opacity: 0; transition: opacity var(--dur-cam) var(--ease-beat) .2s; }
.lane-band.alt { fill: none; stroke: var(--gray-700); stroke-width: 1; }
.f-lanes .lane-band { opacity: .9; }
.lane-labels .lane-label { position: absolute; left: 0; font: 700 18px/1 var(--font-display); color: var(--paper); opacity: 0; transition: opacity var(--dur-cam) var(--ease-beat) .3s; }
.f-lanes .lane-label { opacity: 1; }
.systems { position: absolute; left: -190px; right: -190px; top: 800px; height: 60px; display: flex; align-items: center; gap: 28px; padding: 0 16px; border: 1px dashed var(--gray-500); border-radius: var(--radius-sm); opacity: 0; transition: opacity var(--dur-cam) var(--ease-beat) .5s; }
.f-lanes .systems { opacity: 1; }
.systems-title { font: 500 12px var(--font-mono); color: var(--gray-400); margin-right: auto; }
.systems .chip { font: 600 14px/1 var(--font-body); color: var(--gray-200); padding-left: 12px; border-left: 2px solid var(--brand-teal); }
.route { fill: none; stroke: var(--gray-400); stroke-width: 1.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease-beat) .7s; }
.f-lanes .route { stroke-dashoffset: 0; }
.route-pulse { fill: var(--brand-teal-light); opacity: 0; offset-rotate: 0deg; transition: opacity .3s var(--ease-beat) 1.8s; animation: route-pulse 9s ease-in-out infinite; animation-play-state: var(--anim); }
.f-lanes .route-pulse { opacity: 1; }
@keyframes route-pulse { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* ---------- stage controls, beat index, legend, cards ---------- */
.stage-controls { position: absolute; left: var(--space-lg); bottom: var(--space-lg); z-index: 4; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; transition: opacity .3s var(--ease-ui); }
.stage-controls[data-beat="1"] { opacity: 0; pointer-events: none; }
.stage-controls[data-beat="2"] .ctl-group:nth-child(n+2) { display: none; }
.stage-controls[data-beat="8"] .ctl-group:nth-child(3) { display: none; }
.ctl-group { display: inline-flex; gap: 4px; padding: 4px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-sm); }
.ctl { font: 600 13px/1 var(--font-body); color: var(--paper); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 10px 12px; min-height: 36px; cursor: pointer; transition: background var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui); }
.ctl:hover { background: var(--gray-700); }
.ctl:active { background: var(--gray-600); }
.ctl[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.ctl-ex[aria-pressed="true"] { background: var(--warning); color: var(--ink); }

.beat-index {
  position: absolute; right: var(--space-lg); top: 50%; transform: translateY(-50%); z-index: 3;
  margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; color: var(--paper);
}
.beat-index a { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; color: inherit; text-decoration: none; font: 500 12px/1 var(--font-mono); min-height: 24px; padding: 2px 0; }
.beat-index a::before { content: ""; display: block; width: 14px; height: 1px; background: currentColor; opacity: .55; transition: width var(--dur-ui) var(--ease-ui), opacity var(--dur-ui) var(--ease-ui); }
.beat-index .bi-name { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .35s var(--ease-ui), opacity .35s var(--ease-ui); }
.beat-index a[aria-current="true"] .bi-name, .beat-index a:hover .bi-name, .beat-index a:focus-visible .bi-name { max-width: 240px; opacity: 1; }
.beat-index a[aria-current="true"] { color: var(--brand-teal-light); }
.beat-index a[aria-current="true"]::before { width: 28px; opacity: 1; }
.beat-index a:hover::before { opacity: 1; }

.stage .legend {
  position: absolute; right: var(--space-lg); bottom: var(--space-lg); z-index: 3;
  transform: translateY(12px); opacity: 0; transition: opacity .45s var(--ease-beat), transform .45s var(--ease-beat);
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  padding: 8px 14px; pointer-events: none; white-space: nowrap; color: var(--paper);
}
.stage[data-legend="true"] .legend { opacity: 1; transform: none; }
.swatch { position: relative; display: inline-block; width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--glass-border); background: var(--glass-bg); overflow: hidden; }
.swatch::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.swatch[data-role="person"]::before { background: var(--paper); }
.swatch[data-role="agent"]::before { background: var(--brand-teal); }
.swatch[data-role="rules"]::before { background: var(--brand-teal-dark); }
.swatch[data-role="review"] { border-style: dashed; border-color: var(--gray-300); }

.beats { position: relative; z-index: 2; margin-top: -100vh; pointer-events: none; }
.slot { min-height: 112vh; display: flex; align-items: center; padding: 0 var(--space-lg); }
.slot-hero { min-height: 100vh; padding-top: var(--header-h); }
.card { pointer-events: auto; width: min(420px, 100%); background: color-mix(in srgb, var(--ink) 80%, transparent); border: 1px solid var(--gray-700); border-radius: var(--radius-md); padding: var(--space-lg); color: var(--paper); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.card h2 { font-size: var(--text-3xl); margin-bottom: var(--space-xs); }
.card p { margin: 0; }
.card p + p { margin-top: var(--space-xs); color: var(--gray-300); }
.tail { height: 80vh; }
.hero-copy { pointer-events: auto; max-width: 680px; color: var(--paper); }
.hero-copy h1 { margin-bottom: var(--space-lg); }
.hero-copy .glass { max-width: 600px; }
.hero-copy .glass p { margin-bottom: var(--space-md); font-size: var(--text-lg); }
.hero-areas { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.hero-areas a { color: var(--paper); text-decoration: none; font: 600 14px/1.3 var(--font-body); display: inline-flex; gap: 8px; align-items: baseline; padding: 4px 0; }
.hero-areas a::before { content: ""; width: 8px; height: 2px; background: var(--brand-teal); flex: none; transform: translateY(-4px); }
.hero-areas a:hover { color: var(--brand-teal-light); }

@media (max-width: 899px) {
  .slot { align-items: flex-end; padding-bottom: 14vh; }
  .card { width: 100%; }
  .hero-copy h1 { font-size: clamp(38px, 10vw, 60px); }
  .hero-areas { grid-template-columns: 1fr; }
  .stage .legend { display: none; }
  /* narrow: the header rail carries progress; the index would sit on the copy */
  .beat-index { display: none; }
  .stage-controls { left: 8px; bottom: 8px; gap: 6px; }
  .ctl { padding: 8px 10px; font-size: 12px; }
  .node .label { font-size: 22px; }
  .node .role { font-size: 15px; }
  .friction .f-label { display: none; }
  .node .control { font-size: 15px; }
}

/* Practice pages: a narrower hero column so the scene owns the right two thirds. */
.slot-hero .hero-copy:not(:has(.glass)) { max-width: 520px; }
.slot-hero .hero-copy:not(:has(.glass)) .lede { font-size: var(--text-base); margin-bottom: var(--space-lg); }
@media (max-width: 899px) {
  /* narrow: the copy sits on the scene, so it gets the same glass panel as the home hero */
  .slot-hero .hero-copy:not(:has(.glass)) { background: color-mix(in srgb, var(--ink) 80%, transparent); border: 1px solid var(--gray-700); border-radius: var(--radius-md); padding: var(--space-lg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
  .slot-hero .hero-copy:not(:has(.glass)) h1 { margin-bottom: var(--space-md); }
}