/* ════════════════════════════════════════════════════════════════
   MBS — Motion & Behaviour System · interactive specimens
   CH-BOS Volume 03.5. Powers the live Type A–G motion demos, the
   rhythm sequencer, behaviour states, and motion-token playback
   inside the BOS document. Motion exists to reveal intelligence.
   All families key off the canonical motion tokens.
   ════════════════════════════════════════════════════════════════ */

/* demo stage shared shell */
.mbs-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0;}
.mbs-demo{position:relative;border:1px solid var(--bos-line);border-radius:6px;background:#fff;overflow:hidden;min-height:182px;display:flex;flex-direction:column;}
.mbs-demo .md-head{display:flex;justify-content:space-between;align-items:baseline;padding:13px 16px 11px;border-bottom:1px solid var(--bos-line-soft);}
.mbs-demo .md-type{font-family:var(--f-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--bos-green);}
.mbs-demo .md-tok{font-family:var(--f-mono);font-size:9px;letter-spacing:0.06em;color:var(--ch-text-light,#9AB09E);}
.mbs-demo .md-name{font-family:var(--f-display);font-size:18px;letter-spacing:-0.01em;color:var(--bos-ink);padding:0 16px;margin-top:11px;}
.mbs-demo .md-purpose{font-size:12.5px;line-height:1.5;color:#6A8A6E;padding:4px 16px 0;}
.mbs-stage{position:relative;flex:1;margin:14px 16px 16px;border-radius:4px;background:#0A130C;overflow:hidden;min-height:92px;}
.mbs-stage.light{background:#F4F2EB;border:1px solid var(--bos-line-soft);}
.mbs-replay{position:absolute;top:11px;right:14px;z-index:5;font-family:var(--f-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--bos-green);background:rgba(177,218,185,0.18);border:1px solid rgba(14,62,21,0.2);border-radius:2px;padding:4px 9px;cursor:pointer;}
.mbs-replay:hover{background:rgba(177,218,185,0.32);}

/* primitive specimen objects on a stage */
.mo{position:absolute;}
.mo-node{width:11px;height:11px;border-radius:50%;background:#C9EDD0;}
.mo-card{width:74px;height:46px;border-radius:4px;background:rgba(177,218,185,0.1);border:1px solid rgba(177,218,185,0.4);}
.mo-chip{font-family:var(--f-mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:#C9EDD0;padding:4px 9px;border:1px solid rgba(177,218,185,0.4);border-radius:2px;}
.mo-num{font-family:var(--f-body);font-weight:300;font-size:34px;color:#C9EDD0;line-height:1;}
.mo-conn{position:absolute;height:1.5px;background:#B1DAB9;transform-origin:left center;}
.mo-pulse{position:absolute;width:5px;height:5px;border-radius:50%;background:#C9EDD0;box-shadow:0 0 6px rgba(201,237,208,0.8);}

/* ── Type A · Arrival ── */
@keyframes mbs-arrival{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.run-arrival .mo{animation:mbs-arrival var(--motion-arrival) var(--ease-arrival) both;}
.run-arrival .mo:nth-child(2){animation-delay:60ms;}
.run-arrival .mo:nth-child(3){animation-delay:120ms;}

/* ── Type B · Qualification (stroke draw + glow) ── */
@keyframes mbs-qual-draw{from{stroke-dashoffset:var(--len,120);}to{stroke-dashoffset:0;}}
@keyframes mbs-qual-glow{0%,70%{filter:none;}82%{filter:drop-shadow(0 0 5px rgba(201,237,208,0.9));}100%{filter:drop-shadow(0 0 2px rgba(201,237,208,0.5));}}
.run-qual svg path{stroke-dasharray:var(--len,120);animation:mbs-qual-draw var(--motion-qualification) var(--ease-inspect) both, mbs-qual-glow calc(var(--motion-qualification) + 300ms) ease-out both;}

/* ── Type C · Relationship (line draws, single pulse, stays) ── */
@keyframes mbs-rel-draw{from{width:0;}to{width:var(--cw,90px);}}
.run-rel .mo-conn{animation:mbs-rel-draw var(--motion-relationship) var(--ease-inspect) both;}
@keyframes mbs-rel-pulse{0%{opacity:0;}30%{opacity:1;}100%{opacity:0;left:var(--px,90px);}}
.run-rel .mo-pulse{animation:mbs-rel-pulse 700ms ease-out var(--motion-relationship) both;}

/* ── Type D · Propagation (one travelling light, one direction) ── */
@keyframes mbs-prop{0%{opacity:0;}12%{opacity:1;}88%{opacity:1;}100%{opacity:0;transform:translateX(var(--travel,120px));}}
.run-prop .mo-pulse{animation:mbs-prop var(--motion-signal) linear both;}

/* ── Type E · Confidence (count once, stop) — JS drives the number ── */

/* ── Type F · Inspection (border thickens, glow, neighbours soften) ── */
.run-insp .mo-card.subject{transition:border-color var(--motion-inspection) var(--ease-inspect),box-shadow var(--motion-inspection) var(--ease-inspect);border-color:#C9EDD0;box-shadow:0 0 0 1px #C9EDD0,0 0 14px rgba(201,237,208,0.4);}
.run-insp .mo-card:not(.subject){transition:opacity var(--motion-inspection) var(--ease-inspect);opacity:0.28;}

/* ── Type G · Transition (cross-fade) ── */
@keyframes mbs-out{from{opacity:1;}to{opacity:0;}}
@keyframes mbs-in{from{opacity:0;}to{opacity:1;}}
.run-trans .frame-a{animation:mbs-out var(--motion-transition) ease both;}
.run-trans .frame-b{animation:mbs-in var(--motion-transition) ease both;}

/* ── Rhythm sequencer (causal chain, paced) ── */
.mbs-rhythm{margin:26px 0;border:1px solid var(--bos-line);border-radius:6px;background:#0A130C;padding:26px 24px;position:relative;}
.mbs-rhythm .rh-track{display:flex;align-items:center;gap:0;flex-wrap:wrap;}
.mbs-rhythm .rh-step{display:flex;align-items:center;gap:14px;opacity:0;transform:translateY(6px);}
.mbs-rhythm.playing .rh-step.on{opacity:1;transform:translateY(0);transition:opacity 400ms var(--ease-arrival),transform 400ms var(--ease-arrival);}
.mbs-rhythm .rh-node{display:flex;flex-direction:column;align-items:center;gap:7px;}
.mbs-rhythm .rh-dot{width:13px;height:13px;border-radius:50%;background:#C9EDD0;}
.mbs-rhythm .rh-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(177,218,185,0.8);}
.mbs-rhythm .rh-arr{width:36px;height:1.5px;background:rgba(177,218,185,0.4);margin:0 6px;align-self:flex-start;margin-top:6px;}
.mbs-rhythm .rh-foot{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-top:16px;border-top:1px solid rgba(177,218,185,0.14);}
.mbs-rhythm .rh-cap{font-family:var(--f-mono);font-size:10px;letter-spacing:0.1em;color:rgba(177,218,185,0.55);}

/* behaviour state machine viz */
.statemachine{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0;}
.statemachine .st{font-family:var(--f-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:#33442f;border:1px solid var(--bos-line);border-radius:3px;padding:7px 13px;background:#fff;transition:all var(--motion-inspection) var(--ease-inspect);}
.statemachine .st.active{background:var(--bos-green);color:#fff;border-color:var(--bos-green);}

/* motion-token bars */
.tok-bars{margin:22px 0;display:flex;flex-direction:column;gap:9px;}
.tok-bar{display:grid;grid-template-columns:170px 1fr 64px;align-items:center;gap:14px;}
.tok-bar .tb-name{font-family:var(--f-mono);font-size:11px;color:var(--bos-green);}
.tok-bar .tb-track{height:8px;background:var(--bos-paper-2);border-radius:4px;overflow:hidden;}
.tok-bar .tb-fill{height:100%;background:var(--bos-green);border-radius:4px;width:0;}
.tok-bar.run .tb-fill{transition:width var(--d) linear;width:100%;}
.tok-bar .tb-ms{font-family:var(--f-mono);font-size:10px;color:var(--ch-text-light,#9AB09E);text-align:right;}

/* card behaviour live specimens */
.beh-row{display:flex;gap:16px;flex-wrap:wrap;margin:22px 0;}
.beh-card{width:150px;padding:18px;border:1px solid var(--bos-line);border-radius:5px;background:#fff;transition:transform var(--motion-inspection) var(--ease-inspect),box-shadow var(--motion-inspection) var(--ease-inspect),border-color var(--motion-inspection) var(--ease-inspect);cursor:pointer;}
.beh-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px -16px rgba(7,13,8,0.5);}
.beh-card.sel{border-color:var(--bos-green);box-shadow:0 0 0 1px var(--bos-green);}
.beh-card .bc-k{font-family:var(--f-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:#6A8A6E;margin-bottom:8px;}
.beh-card .bc-v{font-family:var(--f-display);font-size:21px;letter-spacing:-0.01em;color:var(--bos-ink);}
.beh-btn{font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:11px 22px;border-radius:4px;border:none;background:var(--bos-green);color:#fff;cursor:pointer;transition:background var(--motion-inspection) var(--ease-inspect),transform 120ms ease;}
.beh-btn:hover{background:#0A2E10;}
.beh-btn:active{transform:scale(0.97);}

@media(prefers-reduced-motion:reduce){
  .run-arrival .mo,.run-qual svg path,.run-rel .mo-conn,.run-rel .mo-pulse,.run-prop .mo-pulse,
  .mbs-rhythm .rh-step,.tok-bar.run .tb-fill{animation:none !important;transition:none !important;opacity:1 !important;transform:none !important;}
}
@media(max-width:880px){ .mbs-grid{grid-template-columns:1fr;} .tok-bar{grid-template-columns:130px 1fr 52px;} }
@media print{ .mbs-replay{display:none;} .mbs-stage,.mbs-rhythm{background:#0A130C !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;} .mbs-demo,.mbs-rhythm{break-inside:avoid;} }