/* Chapter 9: crumbless-os, an exploded isometric stack. Plates are flat HTML in a 3D scene:
   the container tilts the world once; each plate only moves along its own Z. */

.os { height: 460vh; }
.os__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3vw; align-items: center; padding: 96px var(--gutter) 32px; max-width: 1440px; margin: 0 auto; overflow: hidden; }
.os__kicker { color: #7a6231; background: rgba(201, 166, 97, 0.16); justify-self: start; padding: 5px 11px; border-radius: 999px; margin: 0 0 18px; display: inline-block; }
.os__copy .h { font-size: clamp(36px, 4vw, 64px); }
.os__layers { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 2px; }
.os__layers li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hairline); color: var(--grey-3); transition: color 300ms var(--ease-out); }
.os__layers li .mono { color: inherit; padding-top: 3px; }
.os__layers b { font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; }
.os__layers p { margin: 0; max-height: 0; overflow: hidden; opacity: 0; font-size: 14px; line-height: 1.5; color: var(--grey-1); transition: max-height 500ms var(--ease-out), opacity 400ms var(--ease-out), margin 400ms; }
.os__layers li.is-on { color: var(--ink); }
.os__layers li.is-on p { max-height: 90px; opacity: 1; margin-top: 6px; }
.os__layers li.is-past { color: var(--grey-2); }
.os__layers li.is-on .mono { color: #7a6231; }

.os__stage { position: relative; height: min(78vh, 720px); perspective: 2400px; perspective-origin: 50% 40%; }
.os__iso { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(62deg) rotateZ(-36deg); will-change: transform; }
.pl { position: absolute; left: -200px; top: -200px; width: 400px; height: 400px; transform-style: preserve-3d; will-change: transform; }
.pl__face { padding: 34px !important; gap: 16px !important; }
.pf__win p { font-size: 14px !important; }
.pt { width: 290px !important; height: 290px !important; }
.pt__sat { width: 60px !important; height: 60px !important; margin: -30px !important; }
.pm__row { padding: 12px 14px !important; }
.px__vm { height: 96px !important; }
.pw { width: 280px !important; height: 280px !important; }
.pw__ring i { transform-origin: 3.5px calc((140px - var(--r) * 34px) + 3.5px) !important; }
.pw__core { inset: 118px !important; }
.pl__face {
  position: absolute; inset: 0; border-radius: 34px; padding: 30px; display: grid; align-content: center; gap: 14px;
  background: #fff; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.08), 0 30px 60px -30px rgba(20, 20, 30, 0.35);
  transition: box-shadow 500ms var(--ease-out), background-color 500ms, opacity 500ms;
}
.pl__face::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #f3f1ec; opacity: 0; transition: opacity 500ms var(--ease-out); pointer-events: none; }
.pl__face::after { opacity: var(--veil, 0) !important; transition: none !important; }
.pl--world .pl__face::after { background: #2a2925; }
.pl__face { box-shadow: 0 0 0 calc(var(--glow, 0) * 2px) rgba(201, 166, 97, 0.95), 0 0 0 calc(var(--glow, 0) * 10px) rgba(201, 166, 97, 0.14), 0 30px 60px -30px rgba(20, 20, 30, 0.35) !important; transition: none !important; }
.pl__label { position: absolute; left: 22px; bottom: 16px; color: var(--grey-3); font-size: 12px; }
.pl.is-lit .pl__label { color: #7a6231; }

/* Plate contents. Everything reads --t (0..1, the scroll passing this plate). */
.pl { --t: 0; }

/* 1. Where you talk to it: a chat that plays, a CLI line that types, four circular doors. */
.pf__win { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: #f7f6f2; box-shadow: inset 0 0 0 1px var(--hairline); }
.pf__win p { margin: 0; font-size: 12.5px; line-height: 1.35; }
.pf__me { justify-self: end; max-width: 88%; padding: 8px 11px; border-radius: 14px 14px 4px 14px; background: var(--ink); color: #f1f0eb; clip-path: inset(0 calc((1 - min(1, var(--t) * 2.2)) * 100%) 0 0 round 14px); }
.pf__chip { display: flex; gap: 8px; align-items: center; opacity: clamp(0, calc(var(--t) * 3 - 1.2), 1); transform: translateY(calc((1 - clamp(0, calc(var(--t) * 3 - 1.2), 1)) * 6px)); }
.pf__chip > span:last-child { padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: 0 0 0 1px var(--hairline); }
.pf__dotmark { width: 24px; height: 24px; flex: 0 0 auto; color: var(--ink); }
.pf__dotmark .monad-svg { width: 24px; height: 24px; }
.pf__cli { display: flex; align-items: center; padding: 7px 10px; border-radius: 10px; background: #1b1a17; color: #e9d6a6; font-size: 11px !important; }
.pf__cli span { white-space: nowrap; overflow: hidden; max-width: calc(clamp(0, calc(var(--t) * 2.5 - 1.5), 1) * 100%); }
.pf__caret { width: 6px; height: 12px; background: #e9d6a6; margin-left: 2px; }
.pf__doors { display: flex; gap: 10px; justify-content: center; }
.pf__doors span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 600 10px var(--mono); color: var(--grey-1); background: #fff; box-shadow: 0 0 0 1px var(--hairline), 0 6px 14px -8px rgba(20, 20, 30, 0.3); }
.pl.is-lit .pf__doors span { box-shadow: 0 0 0 1.5px rgba(201, 166, 97, calc(var(--t))), 0 6px 14px -8px rgba(20, 20, 30, 0.3); }

/* 2. The team: tethers draw out from Chip; packets travel them. */
.pt { position: relative; width: 250px; height: 250px; justify-self: center; }
.pt__tethers { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pt__tethers line { stroke: rgba(10, 10, 10, 0.25); stroke-width: 0.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - min(1, var(--t) * 1.6)); }
.pt__packet { fill: var(--gold); opacity: 0; }
.pt__core { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--hairline), 0 0 calc(var(--t) * 40px) rgba(201, 166, 97, 0.45); display: grid; place-items: center; color: var(--ink); }
.pt__core .monad-svg { width: 56px; height: 56px; }
.pt__sat { position: absolute; left: var(--x); top: var(--y); width: 52px; height: 52px; margin: -26px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ink);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) calc(var(--t) * 100%), transparent), 0 8px 16px -10px rgba(20, 20, 30, 0.35);
  transform: scale(calc(0.6 + clamp(0, calc(var(--t) * 2.4 - var(--k) * 0.18), 1) * 0.4)); opacity: calc(0.3 + clamp(0, calc(var(--t) * 2.4 - var(--k) * 0.18), 1) * 0.7); }
.pt__sat .monad-svg { width: 40px; height: 40px; }

/* 3. Memory: rows fill, a scan passes, the skill row lights. */
.pm { position: relative; display: grid; gap: 9px; }
.pm__row { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 999px; box-shadow: 0 0 0 1px var(--hairline); background: #fff; }
.pm__row b { font-size: 11px; color: var(--grey-2); font-weight: 500; }
.pm__row i { height: 7px; border-radius: 4px; background: linear-gradient(90deg, #cfcabd, #e3e0d7); transform-origin: left; transform: scaleX(calc(var(--v) * clamp(0.08, calc(var(--t) * 2 - var(--k) * 0.25), 1))); }
.pm__row.is-skill { background: #1b1a17; box-shadow: 0 0 0 calc(var(--t) * 1.5px) rgba(201, 166, 97, 0.9); }
.pm__row.is-skill b { color: var(--gold); }
.pm__row.is-skill i { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.pm__scan { position: absolute; left: -6px; right: -6px; height: 40px; border-radius: 999px; top: calc(var(--t) * 150px); background: linear-gradient(90deg, transparent, rgba(201, 166, 97, 0.25), transparent); opacity: calc(var(--t) * (1 - var(--t)) * 4); pointer-events: none; }

/* 4. Machines: terminals run, connectors light up one by one. */
.px { display: flex; gap: 10px; }
.px__vm { flex: 1; height: 80px; border-radius: 12px; background: #1b1a17; padding: 10px; display: grid; gap: 6px; align-content: start; }
.px__vm i { height: 5px; border-radius: 3px; background: #4a463d; transform-origin: left; transform: scaleX(clamp(0.15, calc(var(--t) * 2.2 - var(--k) * 0.3), 1)); }
.px__vm i:nth-child(2) { width: 70%; }
.px__vm i:nth-child(3) { width: 85%; }
.px__vm .px__bar { margin-top: 8px; background: #3E9B6B; transform: scaleX(clamp(0, calc(var(--t) * 1.6 - var(--k) * 0.2), 1)); }
.px__dots { display: grid; grid-template-columns: repeat(14, 1fr); gap: 7px; margin-top: 4px; }
.px__dots i { width: 9px; height: 9px; border-radius: 50%; background: #d6d2c7; }
.px__dots i { background: color-mix(in srgb, var(--gold) calc(clamp(0, calc((var(--t) - var(--n)) * 8), 1) * 100%), #d6d2c7); }

/* 5. Guardrails: a credits dial fills, Approve is pressed, the log fills. */
.pg { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto; gap: 12px 16px; align-items: center; }
.pg__dial { grid-row: 1 / 3; width: 96px; height: 96px; transform: rotate(-90deg); }
.pg__track { fill: none; stroke: #ece9e1; stroke-width: 4.5; }
.pg__fill { fill: none; stroke: var(--gold); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t) * 0.72); }
.pg__dial text { transform: rotate(90deg); transform-origin: 22px 22px; font: 500 5px var(--mono); fill: var(--grey-2); }
.pg__approve { position: relative; display: grid; justify-self: start; padding: 11px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; }
.pg__approve b { grid-area: 1 / 1; font-weight: 500; }
.pg__approve b:first-child { opacity: calc(1 - clamp(0, calc((var(--t) - 0.62) * 12), 1)); }
.pg__ok { opacity: clamp(0, calc((var(--t) - 0.62) * 12), 1); }
.pl.is-lit .pg__approve { background: color-mix(in srgb, #2f6b3a calc(clamp(0, calc((var(--t) - 0.62) * 12), 1) * 100%), var(--ink)); }
.pg__log { display: grid; gap: 6px; }
.pg__log i { height: 7px; border-radius: 4px; background: #e3e0d7; transform-origin: left; transform: scaleX(clamp(0, calc(var(--t) * 2.4 - var(--k) * 0.35), 1)); }
.pg__log i:nth-child(2) { width: 80%; } .pg__log i:nth-child(3) { width: 90%; } .pg__log i:nth-child(4) { width: 55%; }

/* 6. The world: rings of places, turning with the scroll. */
.pw { position: relative; width: 240px; height: 240px; justify-self: center; }
.pw__ring { position: absolute; inset: calc(var(--r) * 34px); border-radius: 50%; border: 1px solid rgba(233, 214, 166, 0.18); transform: rotate(calc(var(--t) * (60deg + var(--r) * 40deg) * (1 - var(--r) * 0.8))); }
.pw__ring i { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #e9d6a6; transform-origin: 3.5px calc((120px - var(--r) * 34px) + 3.5px); transform: rotate(var(--a)); opacity: 0.85; }
.pw__core { position: absolute; inset: 100px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 30px 6px rgba(201, 166, 97, 0.5); }

/* With motion allowed, the lit plate also idles: packets travel, the caret blinks, dots breathe. */
@media (prefers-reduced-motion: no-preference) {
  .pl.is-lit .pt__packet { opacity: 1; animation: pt-packet 2.4s calc(var(--k) * 0.4s) ease-in-out infinite; }
  @keyframes pt-packet { 0% { transform: translate(0, 0); } 50% { transform: translate(var(--dx), var(--dy)); } 100% { transform: translate(0, 0); } }
  .pl.is-lit .pf__caret { animation: caret-blink 1s steps(2) infinite; }
  .pl.is-lit .pw__ring { animation: pw-spin calc(30s + var(--r) * 20s) linear infinite; }
  @keyframes pw-spin { to { rotate: 360deg; } }
  .pl.is-lit .px__dots i:nth-child(7n) { animation: px-blink 2.4s calc(var(--n) * 3s) ease-in-out infinite; }
  @keyframes px-blink { 50% { background: #3E9B6B; } }
}

@media (max-width: 900px) {
  .os { height: 520vh; }
  .os__pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; padding-top: 84px; gap: 0; }
  .os__copy .h { font-size: 32px; }
  .os__kicker { margin-bottom: 10px; }
  .os__layers { margin-top: 14px; }
  .os__layers li { display: none; }
  .os__layers li.is-on { display: grid; }
  .os__stage { height: 100%; margin-top: 40px; }
}

@media (min-width: 901px) and (max-height: 860px) {
  .os__pin { padding-top: 80px; }
  .os__layers { margin-top: 18px; }
  .os__layers li { padding: 8px 0; }
}

/* The world plate is the dark base of the stack. */
.pl--world .pl__face { background: #141310; }
.pl--world .pl__label { color: #8f8b82; }