/* ════════════════════════════════════════════════════════════════
   MOIRA · LANDING v8 — "How it works" instrument
   One pinned frame: header + sphere + caption, all co-visible.
   The sphere morphs build → run → everywhere as you scroll the track.
   ════════════════════════════════════════════════════════════════ */

#mind{position:relative;padding:0}
.mi-track{position:relative;height:300vh}
.mi-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;
  padding:clamp(74px,10.5vh,114px) 0 clamp(18px,3vh,42px)}

/* header — section label + persistent thesis */
.mi-top{flex:none;width:100%}
.mi-top .sec-head{margin-bottom:0}
.mi-lead{font-family:var(--sans);font-stretch:115%;font-weight:560;font-size:clamp(21px,2.5vw,34px);
  letter-spacing:-.02em;line-height:1.06;margin:clamp(12px,1.8vh,24px) 0 0;max-width:24ch;text-wrap:balance}
.mi-lead .serif-i{font-stretch:normal}
@supports (font-stretch:115%){.mi-lead{font-variation-settings:normal}}

/* phase index 01·02·03 */
.mi-pindex{position:absolute;left:clamp(2px,3vw,40px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:18px;z-index:3}
.mi-pindex .pi{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;color:var(--n4);transition:color .5s var(--ease,ease)}
.mi-pindex .pi .dot{width:7px;height:7px;border-radius:50%;border:1px solid var(--n4);transition:.5s var(--ease,ease)}
.mi-pindex .pi.on{color:var(--ink)}
.mi-pindex .pi.on .dot{background:var(--ink);border-color:var(--ink)}
@media(max-width:880px){.mi-pindex{display:none}}

/* the sphere — fills the middle, sized to always fit the frame */
.mi-stage{flex:1 1 auto;min-height:0;width:100%;display:grid;place-items:center}
#mi-scope{display:block;height:min(54vh,520px);width:min(54vh,520px)}

/* caption — words live here, never on the visual */
.mi-cap-wrap{flex:none;position:relative;height:clamp(88px,13vh,122px);width:min(88vw,620px);text-align:center}
.mi-cap-line{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:opacity .5s var(--ease,ease),transform .5s var(--ease,ease)}
.mi-cap-line .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--n5)}
.mi-cap-line .h{font-family:var(--sans);font-stretch:112%;font-weight:560;font-size:clamp(21px,2.6vw,32px);
  letter-spacing:-.025em;line-height:1.05;margin:0}
.mi-cap-line .h .serif-i{font-stretch:normal}
.mi-cap-line .d{font-size:clamp(13px,1.35vw,15px);color:var(--n6);max-width:46ch;line-height:1.5;margin:0}

/* What we're building — breathing room up top */
#build{padding-top:clamp(84px,11vh,150px)}
#build .ws-head{margin-bottom:clamp(46px,6.5vh,94px)}

@media(max-width:640px){
  /* Android fix: the pinned frame uses 100svh (above) so it fits the small,
     toolbar-visible viewport; here we shrink the sphere and grow the caption
     box so the description line always stays on-screen, not clipped below. */
  #mi-scope{height:min(40svh,330px);width:min(40svh,330px)}
  #mind .mi-sticky{padding-top:clamp(56px,8svh,84px);padding-bottom:14px}
  .mi-cap-wrap{height:clamp(168px,27svh,212px)}
}