/* ══════════════════════════════════════════════════════════════════════
   ZYRN — SIGNATURE MODULES (service pages)

   One interactive instrument per line. They share a shape: a tall track,
   a stage that pins while you scroll through it, a mono step readout, and
   a note that changes per stage. assets/js/modules/<name>.js drives each
   one off a single 0..1 progress value, so nothing here needs its own
   scroll listener.

   These run alongside a 90k-particle simulation, so everything is CSS
   transitions on compositor properties. No per-frame layout, no canvas.
   ══════════════════════════════════════════════════════════════════════ */

.sig{position:relative}
.sig__track{position:relative;height:340vh}
.sig__stage{
  position:sticky;top:0;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(14px,2.2vh,26px);
  padding:clamp(72px,10vh,110px) 0 clamp(40px,6vh,64px);
}
.sig__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-bottom:1px solid var(--hair);padding-bottom:12px;
}
.sig__step{color:var(--vapor);transition:opacity 260ms}
.sig__pct{color:var(--steel)}
.sig__note{
  max-width:60ch;font-size:14px;line-height:1.75;
  color:rgba(242,243,245,0.72);
  min-height:5.2em;margin:0;
  transition:opacity 240ms;
}
.sig__note.is-swap{opacity:0}
@media (max-width:720px){
  .sig__track{height:300vh}
  .sig__note{min-height:7em;font-size:13px}
}


/* ── 01 · THE BUILD ─────────────────────────────────────────────────
   A surface assembling itself: structure, hierarchy, type, system, live.
   Everything is one element set styled by [data-stage] on the frame, so a
   stage change is a single attribute write and the rest is transitions. */

.bld{
  position:relative;width:min(940px,100%);margin:0 auto;
  aspect-ratio:16/9;max-height:50vh;
  border:1px solid var(--hair);border-radius:10px;overflow:hidden;
  background:rgba(14,15,18,0.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.bld__win{
  height:32px;display:flex;align-items:center;gap:6px;padding:0 12px;
  border-bottom:1px solid var(--hair);
}
.bld__dot{width:7px;height:7px;border-radius:50%;background:rgba(242,243,245,0.16)}
.bld__url{
  margin-left:12px;font-size:10px;color:var(--steel);
  opacity:0;transition:opacity 400ms;
}
.bld__body{
  position:relative;height:calc(100% - 32px);
  padding:clamp(10px,1.6vh,18px) clamp(12px,2vw,22px);
  display:flex;flex-direction:column;gap:clamp(6px,1.1vh,12px);
}

.bld__el{
  border:1px dashed rgba(242,243,245,0.20);
  border-radius:4px;
  display:flex;align-items:center;padding:0 10px;
  transition:height 620ms cubic-bezier(.16,1,.3,1),
             border-color 480ms ease, background 480ms ease,
             opacity 480ms ease, flex 620ms cubic-bezier(.16,1,.3,1);
  opacity:0.55;
}
.bld__el span,.bld__el b{opacity:0;transition:opacity 420ms ease}
.bld__el span{
  font-size:clamp(9px,1.05vw,12px);line-height:1.25;
  color:rgba(242,243,245,0.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.bld__nav{height:26px;justify-content:space-between}
.bld__mark{font-weight:500;letter-spacing:0.06em;font-size:11px !important}
.bld__navlinks{display:flex;gap:8px;opacity:0;transition:opacity 420ms}
.bld__navlinks i{display:block;width:22px;height:4px;border-radius:2px;background:rgba(242,243,245,0.22)}
.bld__h1{height:22px}
.bld__h1 span{font-size:clamp(15px,2.1vw,26px) !important;letter-spacing:-0.02em;white-space:normal}
.bld__lede{height:22px}
.bld__cta{height:22px;width:132px;justify-content:center}
.bld__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1vw,10px);flex:1;min-height:0}
.bld__card{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;height:100%}
.bld__card b{display:block;width:26px;height:2px;background:var(--pulse-mark,#6E56F8)}
.bld__foot{height:20px;justify-content:space-between}
.bld__foot span{font-family:var(--font-mono);font-size:8px !important;color:var(--steel)}

/* stage 1 — structure only: uniform blocks, no hierarchy, no content */
.bld[data-stage="1"] .bld__el{height:20px}
.bld[data-stage="1"] .bld__grid{flex:0 0 20px}
.bld[data-stage="1"] .bld__cta{width:100%}

/* stage 2 — hierarchy: real proportions arrive, still unset */
.bld[data-stage="2"] .bld__h1{height:clamp(30px,5vh,52px)}
.bld[data-stage="2"] .bld__lede{height:clamp(22px,3.4vh,34px)}

/* stage 3 — type: the content lands */
.bld[data-stage="3"] .bld__h1,.bld[data-stage="4"] .bld__h1,.bld[data-stage="5"] .bld__h1{height:clamp(30px,5vh,52px)}
.bld[data-stage="3"] .bld__lede,.bld[data-stage="4"] .bld__lede,.bld[data-stage="5"] .bld__lede{height:clamp(22px,3.4vh,34px)}
.bld[data-stage="3"] .bld__el span,
.bld[data-stage="4"] .bld__el span,
.bld[data-stage="5"] .bld__el span{opacity:1}
.bld[data-stage="3"] .bld__el,
.bld[data-stage="4"] .bld__el,
.bld[data-stage="5"] .bld__el{opacity:1}

/* stage 4 — system: hairlines, tokens, metadata */
.bld[data-stage="4"] .bld__el,.bld[data-stage="5"] .bld__el{
  border-style:solid;border-color:var(--hair);
}
.bld[data-stage="4"] .bld__card,.bld[data-stage="5"] .bld__card{
  background:rgba(242,243,245,0.022);
}
.bld[data-stage="4"] .bld__card b,.bld[data-stage="5"] .bld__card b{opacity:1}
.bld[data-stage="4"] .bld__url,.bld[data-stage="5"] .bld__url{opacity:1}
.bld[data-stage="4"] .bld__navlinks,.bld[data-stage="5"] .bld__navlinks{opacity:1}
.bld[data-stage="4"] .bld__h1,.bld[data-stage="5"] .bld__h1{border-color:transparent}
.bld[data-stage="4"] .bld__lede,.bld[data-stage="5"] .bld__lede{border-color:transparent}
.bld[data-stage="4"] .bld__nav,.bld[data-stage="5"] .bld__nav{border-color:transparent;border-bottom-color:var(--hair)}
.bld[data-stage="4"] .bld__foot,.bld[data-stage="5"] .bld__foot{border-color:transparent;border-top-color:var(--hair)}

/* stage 5 — live */
.bld[data-stage="5"] .bld__cta{
  background:var(--vapor);border-color:var(--vapor);
}
.bld[data-stage="5"] .bld__cta span{color:var(--obsidian);font-weight:500}
.bld__scan{
  position:absolute;left:0;right:0;top:-2px;height:2px;
  background:linear-gradient(90deg,transparent,var(--pulse-mark,#6E56F8),transparent);
  opacity:0;pointer-events:none;
}
.bld[data-stage="5"] .bld__scan{animation:bld-scan 1400ms cubic-bezier(.4,0,.2,1) 1 both}
@keyframes bld-scan{
  0%{opacity:0;transform:translateY(0)}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(52vh)}
}


/* ── 02 · LIVING SPECIMEN ───────────────────────────────────────────── */

.spec{position:relative;min-height:clamp(240px,42vh,380px)}
.spec__panel{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity 420ms cubic-bezier(.16,1,.3,1),
             transform 420ms cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column;justify-content:center;gap:22px;
}
.spec__panel.is-on{opacity:1;pointer-events:auto;transform:none}

.spec__chips{display:flex;gap:12px;flex-wrap:wrap}
.chip{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px 10px 10px;
  border:1px solid var(--hair);border-radius:6px;
  background:rgba(14,15,18,0.5);
  transition:border-color 240ms,background 240ms,transform 240ms;
}
.chip:hover,.chip:focus-visible{border-color:var(--hair-strong);transform:translateY(-2px)}
.chip.is-on{border-color:rgba(242,243,245,0.34);background:rgba(242,243,245,0.05)}
.chip__sw{display:block;width:26px;height:26px;border-radius:4px;flex:0 0 auto}
.chip__n{color:var(--vapor);font-size:11px}
.spec__read{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--hair);padding-top:16px;
}
.spec__hex{font-size:22px;color:var(--vapor);letter-spacing:0.06em}
.spec__use{font-size:13px;color:rgba(242,243,245,0.66);max-width:52ch}

.spec__scale{display:flex;flex-direction:column;gap:clamp(6px,1.4vh,16px)}
.ts{display:flex;align-items:baseline;gap:18px}
.ts__k{color:var(--steel);flex:0 0 auto;width:104px}
.ts__v{
  font-size:calc(var(--s) * clamp(0.42px,0.075vw + 0.28px,1px));
  line-height:1.1;letter-spacing:-0.02em;color:var(--vapor);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ts__v--mono{font-family:var(--font-mono);letter-spacing:0.16em}
.spec__foot{color:var(--steel);border-top:1px solid var(--hair);padding-top:14px;margin:0}

.spec__markstage{
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(110px,20vh,180px);
}
.spec__law{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--hair);padding-top:16px;
}
.spec__law .mono{color:var(--steel)}
.spec__btn{flex:0 0 auto}


/* ── 03 · DECISION RIGHTS ───────────────────────────────────────────── */

.grf{width:100%;height:auto;max-height:46vh;display:block}
.grf__edges path{
  fill:none;stroke:rgba(242,243,245,0.16);stroke-width:1;
}
.grf__edges path.is-esc{stroke:rgba(242,243,245,0.34);stroke-dasharray:3 3}
.grf__edges path.is-own{stroke:var(--pulse-mark,#6E56F8);stroke-width:1.4;stroke-dasharray:none}
.grf__nodes circle{
  fill:rgba(14,15,18,0.9);stroke:rgba(242,243,245,0.42);stroke-width:1;
}
.grf__nodes circle.is-hub{fill:rgba(242,243,245,0.9);stroke:none}
.grf__nodes text{
  font-family:var(--font-mono);font-size:8px;letter-spacing:0.14em;
  fill:rgba(242,243,245,0.6);text-anchor:middle;
}
.grf__legend{
  display:flex;gap:22px;flex-wrap:wrap;align-items:center;
  color:var(--steel);border-top:1px solid var(--hair);padding-top:14px;
}
.grf__legend b{color:var(--vapor);font-weight:400}
.grf__key{display:inline-block;width:16px;height:2px;vertical-align:middle;margin-right:6px}
.grf__key--esc{background:rgba(242,243,245,0.34)}
.grf__key--own{background:var(--pulse-mark,#6E56F8)}


/* ── 04 · READINESS INSTRUMENT ──────────────────────────────────────── */

.rdy{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.rdy__dial{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:clamp(120px,15vw,180px);aspect-ratio:1;
  border:1px solid var(--hair);border-radius:50%;
  background:rgba(14,15,18,0.5);
}
.rdy__num{
  font-family:var(--font-mono);font-size:clamp(38px,5.4vw,64px);line-height:1;
  color:var(--vapor);font-variant-numeric:tabular-nums;
}
.rdy__cap{color:var(--steel);font-size:9px}
.rdy__dims{display:flex;flex-direction:column;gap:clamp(8px,1.6vh,16px)}
.dim{display:grid;grid-template-columns:110px 1fr 28px;gap:14px;align-items:center}
.dim__k{color:var(--steel)}
.dim__bar{display:block;height:2px;background:var(--hair);position:relative;overflow:hidden}
.dim__bar i{
  position:absolute;left:0;top:0;bottom:0;width:100%;
  background:var(--vapor);transform:scaleX(0);transform-origin:left;
  transition:transform 420ms cubic-bezier(.16,1,.3,1);
}
.dim.is-constraint .dim__bar i{background:var(--pulse-mark,#6E56F8)}
.dim.is-constraint .dim__k{color:var(--vapor)}
.dim__v{color:var(--vapor);text-align:right;font-variant-numeric:tabular-nums}
.rdy__constraint{color:var(--steel);margin:0;border-top:1px solid var(--hair);padding-top:14px}
@media (max-width:720px){
  .rdy{grid-template-columns:1fr;justify-items:start}
  .dim{grid-template-columns:88px 1fr 26px;gap:10px}
  .ts__k{width:74px}
}


/* ── reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .bld__el,.bld__el span,.bld__url,.bld__navlinks,
  .spec__panel,.chip,.dim__bar i,.sig__note{transition:none}
  .bld[data-stage="5"] .bld__scan{animation:none;opacity:0}
}