/* THE UNSCRAMBLE (26 Oct 2026): landing section, before the hero. Prefix x-see-. Light scene (cream), so the fixed nav stays legible.
   Without JS: the copy and the figures show as a plain block. With JS (x-see-on): a pinned stage, ~4 screens of scroll. */
.x-see{position:relative;background:var(--cream)}
.x-see-stage{position:relative;padding:110px var(--pad) 48px}
.x-see canvas{display:none}
.x-see-copy{position:relative;max-width:var(--max);margin:0 auto}
.x-see-state[data-s="1"]{display:none}
.x-see-state + .x-see-state{margin-top:40px}
.x-see h2{font-size:clamp(34px,5.4vw,88px);line-height:.98;letter-spacing:-.045em;font-weight:600;color:var(--ink);margin-top:14px;max-width:15em}
.x-see h2 em{font-style:normal;color:var(--teal-d)}
.x-see-state p{margin-top:16px;font-size:clamp(15px,1.25vw,19px);line-height:1.45;color:var(--grey);max-width:34em}
.x-see-nodes{max-width:var(--max);margin:32px auto 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.x-see-node{font-size:13px;line-height:1.25;color:var(--grey)}
.x-see-node b{display:block;font-size:clamp(17px,1.5vw,22px);font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.x-see-key b{color:var(--teal-d)}
.x-see-warn b{color:#9A6B00}
.x-see-hint{display:none}
.x-see-wall{display:none}
.x-see-on .x-see-wall{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
.x-see-track{position:absolute;left:0;top:0;display:flex;align-items:center;will-change:transform}
.x-see-dev{margin:0;flex:0 0 auto;will-change:transform,opacity}
.x-see-scr{position:relative;overflow:hidden;background:#fff;border:solid #0E2225}
.x-see-scr img,.x-see-scr svg{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.x-see-dev.lap .x-see-scr{aspect-ratio:16/10;border-width:8px 8px 10px;border-radius:14px 14px 4px 4px;box-shadow:0 34px 70px -30px rgba(6,38,42,.55)}
.x-see-dev.lap .x-see-scr:after{content:"";position:absolute;left:50%;top:-6px;width:5px;height:5px;margin-left:-2px;border-radius:50%;background:#2A3E41}
.x-see-base{display:block;height:11px;margin:0 -6%;border-radius:0 0 14px 14px;background:linear-gradient(#DDE2E0,#B6BEBC);box-shadow:0 16px 26px -16px rgba(6,38,42,.5)}
.x-see-dev.ph .x-see-scr{aspect-ratio:360/780;border-width:7px;border-radius:30px;box-shadow:0 30px 60px -26px rgba(6,38,42,.55)}
.x-see-dev.ph figcaption{width:calc(100% + 56px)}
.x-see-dev figcaption{margin-top:18px;font-size:14px;line-height:1.35;color:var(--grey);max-width:30em}
.x-see-dev figcaption b{display:block;font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin-bottom:2px}

/* ---- enhanced (JS on) ---- */
.x-see.x-see-on{height:720vh}
.x-see-on .x-see-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding:0}
.x-see-on canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.x-see-on .x-see-copy{position:absolute;left:var(--pad);right:var(--pad);top:clamp(86px,12vh,128px);z-index:2;margin:0 auto;pointer-events:none}
.x-see-on .x-see-state{display:block;position:absolute;left:0;top:0;width:100%;margin:0;opacity:0;transform:translateY(-14px);
  transition:opacity .22s ease-out,transform .3s ease-out}
.x-see-on .x-see-state.on{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.2,.7,.2,1) .2s,transform .8s cubic-bezier(.2,.7,.2,1) .2s}
.x-see-on .x-see-nodes{display:block;margin:0;max-width:none}
.x-see-on .x-see-node{position:absolute;left:0;top:0;z-index:2;white-space:nowrap;opacity:0;
  transition:opacity .5s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1);translate:0 10px}
.x-see-on .x-see-node.on{opacity:1;translate:0 0}
.x-see-on .x-see-cost b{color:var(--grey)}
.x-see-on .x-see-hint{background:var(--cream);padding:4px 10px;border-radius:999px}
.x-see-on .x-see-hint{display:flex;align-items:center;gap:8px;position:absolute;right:var(--pad);bottom:20px;z-index:2;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);transition:opacity .4s}
.x-see-hint i{font-style:normal;display:inline-block;animation:xseeb 1.6s cubic-bezier(.2,.7,.2,1) infinite}
.x-see-hint.off{opacity:0}
@keyframes xseeb{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (max-width:700px){
  .x-see.x-see-on{height:640vh}
  .x-see-dev.ph .x-see-scr{border-width:5px;border-radius:22px}.x-see-dev.lap .x-see-scr{border-width:5px 5px 7px;border-radius:10px 10px 3px 3px}
  .x-see-dev figcaption{font-size:12px;margin-top:12px}.x-see-dev figcaption b{font-size:14px}
  .x-see-on .x-see-copy{top:84px}
  .x-see h2{font-size:clamp(30px,9vw,44px)}
  .x-see-on .x-see-node{font-size:11px}
  .x-see-on .x-see-node b{font-size:15px}
  .x-see-on .x-see-hint{bottom:74px}
}
/* reduced motion: no pin, no scroll story; the finished picture, drawn once */
.x-see.x-see-still{height:auto}
.x-see-still .x-see-stage{position:relative;height:100vh;height:100svh;min-height:640px}
.x-see-still .x-see-state,.x-see-still .x-see-node{transition:none}
.x-see-still .x-see-hint{display:none}
@media (prefers-reduced-motion:reduce){.x-see-hint i{animation:none}}