/* ent-story.css - the animated "How it works" story (public/ent-story.js builds the markup).
   Operator 2026-10-09: "can we get some more flashy graphics on the site to explain how it works?" Flashy here is
   motion, scale and precision in the site's own square look: 1px ink lines, squares for nodes, no radius, no shadow,
   no blur, no gradient. Violet (--ent-ion) only ever means sealed; saffron (--ent-photon) only a key being spent and
   the flywheel. Tokens come from /ent/theme.css; the fallbacks below only matter on a page that forgot to load it. */
.es{
  --es-ink:var(--ent-ink,#1A1830);--es-ink2:var(--ent-ink-2,#423F5A);--es-ink3:var(--ent-ink-3,#5F5B78);
  --es-bg:var(--ent-plate,#F4F2EE);--es-rule:var(--ent-rule-strong,rgba(32,33,36,.28));
  --es-ion:var(--ent-ion,#5A3FE0);--es-ion-ink:var(--ent-ion-ink,#4328BA);
  --es-photon:var(--ent-photon,#0C8A6A);--es-photon-ink:var(--ent-photon-ink,#08664E);--es-bad:var(--ent-bad,#C2304A);
  --es-mono:var(--ent-mono,"Martian Mono",ui-monospace,Menlo,Consolas,monospace);
  --es-sans:var(--ent-font,"Instrument Sans",ui-sans-serif,system-ui,sans-serif);
  --es-top:76px;
  /* Frames and diagram boxes use the page's box outline (theme.css, operator 2026-10-10: "the outline of the boxes needs
     to be ever so slightly reduced"): a hairline on 2x screens, one step lighter than ink. Nodes, edges, glyphs and the
     vault keep full ink: they are the marks the diagram is about. */
  --es-bw:var(--ent-bw-box,1px);--es-line:var(--ent-line,var(--ent-ink,#1A1830));
    box-sizing:border-box;max-width:var(--ent-max,1180px);margin:0 auto;padding:0 var(--ent-gutter,16px);color:var(--es-ink);
  min-height:100vh;   /* held before the script builds the steps, so nothing under the story moves on screen */
}
.es *,.es *::before,.es *::after{box-sizing:border-box}
.es-steps{list-style:none;margin:0;padding:0}
.es-step{padding:28px 0 40px;border-top:var(--es-bw) solid var(--es-line)}
.es-step:first-child{border-top:0;padding-top:8px}
.es-copy{max-width:34em}
.es-num{margin:0 0 10px;font:500 12px/1 var(--es-mono);font-variation-settings:"wdth" 82;color:var(--es-ink3)}
.es .es-h{margin:0;font-family:var(--es-sans);font-size:clamp(27px,2.3vw + 14px,46px);line-height:1.04;font-weight:640;
  font-stretch:78%;font-variation-settings:"wdth" 78;letter-spacing:-.018em;text-wrap:balance;color:var(--es-ink)}
.es .es-p{margin:12px 0 0;font:400 17px/1.5 var(--es-sans);color:var(--es-ink2);max-width:30em;text-wrap:pretty}
.es .es-p b{font-family:var(--es-mono);font-weight:500;font-size:.86em;font-variation-settings:"wdth" 86;color:var(--es-ink)}
.es-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.es-cta a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:var(--es-bw) solid var(--es-line);background:var(--es-bg);
  color:var(--es-ink);text-decoration:none;font:500 12.5px/1 var(--es-mono);font-variation-settings:"wdth" 82;white-space:nowrap}
.es-cta a:first-child,.es-cta a:hover{background:var(--es-ink);color:var(--ent-on-ink,#FBFAF7)}
.es-cta a:first-child:hover{background:var(--es-bg);color:var(--es-ink)}
.es :is(a,button):focus-visible{outline:2px solid var(--es-ink);outline-offset:2px}

/* ---- a figure: one square frame, an SVG the size of the frame, HTML labels laid over it ---- */
.es-fig{margin:0 0 20px;border:var(--es-bw) solid var(--es-line);background:var(--es-bg)}
.es-canvas{position:relative;aspect-ratio:20/19;overflow:hidden}
.es-canvas svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block;overflow:hidden}
.es-labels{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.es-l{position:absolute;pointer-events:auto;white-space:nowrap;font:500 11px/1.25 var(--es-mono);font-variation-settings:"wdth" 82;
  letter-spacing:0;color:var(--es-ink2);will-change:opacity}
.es-l.es-wrap{white-space:normal}
.es-l.es-ax-c{transform:translateX(-50%)}.es-l.es-ax-r{transform:translateX(-100%)}
.es-l.es-ay-m{transform:translateY(-50%)}.es-l.es-ay-b{transform:translateY(-100%)}
.es-l.es-ax-c.es-ay-m{transform:translate(-50%,-50%)}.es-l.es-ax-c.es-ay-b{transform:translate(-50%,-100%)}
.es-l.es-ax-r.es-ay-m{transform:translate(-100%,-50%)}.es-l.es-ax-r.es-ay-b{transform:translate(-100%,-100%)}
.es-l--strong{color:var(--es-ink);font-weight:600}
.es-l--mute{color:var(--es-ink3)}
.es-l--ion{color:var(--es-ion-ink)}
.es-l--photon{color:var(--es-photon-ink)}
.es-l--bad{color:var(--es-bad)}
.es-l--big{font-size:13px;font-weight:600;color:var(--es-ink)}
.es-l--code{color:var(--es-ink)}

/* SVG paint: shape classes read currentColor, colour classes set it, so a state change is one class swap. */
.es-s{fill:none;stroke:currentColor;stroke-width:1}
.es-s2{fill:none;stroke:currentColor;stroke-width:2}
.es-sd{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:3 3}
.es-sf{fill:var(--es-bg);stroke:currentColor;stroke-width:1}
.es-sff{fill:currentColor;stroke:currentColor;stroke-width:1}
.es-f{fill:currentColor;stroke:none}
.es-canvas rect,.es-canvas polygon{shape-rendering:crispEdges}
.es-c-ink{color:var(--es-ink)}.es-c-line{color:var(--es-line)}.es-c-ink3{color:var(--es-ink3)}.es-c-rule{color:var(--es-rule)}
.es-c-ion{color:var(--es-ion)}.es-c-photon{color:var(--es-photon)}.es-c-bad{color:var(--es-bad)}

/* ---- pinned stage (wide screens): the copy scrolls, the frame stays, the frame's contents follow the scroll ---- */
.es-stage{display:none}
.es[data-es-mode="pin"] .es-track{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px;align-items:start}
.es[data-es-mode="pin"] .es-step{min-height:110vh;display:flex;align-items:center;border:0;padding:0}
.es[data-es-mode="pin"] .es-steps{padding-bottom:40vh}   /* keeps the frame pinned until the last scene has finished */
.es[data-es-mode="pin"] .es-slot{display:none}
.es[data-es-mode="pin"] .es-stage{display:flex;flex-direction:column;position:sticky;
  top:max(var(--es-top),calc(50vh - 340px + var(--es-top) / 2 - 10px));
  height:min(calc(100vh - var(--es-top) - 20px),680px);border:var(--es-bw) solid var(--es-line);background:var(--es-bg)}
.es-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;height:34px;padding:0 12px;border-bottom:var(--es-bw) solid var(--es-line);
  font:500 12px/1 var(--es-mono);font-variation-settings:"wdth" 82;color:var(--es-ink)}
.es-bar span:last-child{color:var(--es-ink3);font-variant-numeric:tabular-nums}
.es-scenes{position:relative;flex:1;min-height:0}
.es[data-es-mode="pin"] .es-fig{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;border:0;visibility:hidden}
.es[data-es-mode="pin"] .es-fig.es-on{visibility:visible}
.es[data-es-mode="pin"] .es-canvas{aspect-ratio:auto;width:100%;height:100%}
.es[data-es-mode="pin"] .es-l{font-size:13px}
.es[data-es-mode="pin"] .es-l--big{font-size:17px}
.es-rail{display:flex;flex:none;border-top:var(--es-bw) solid var(--es-line)}
.es-rail button{position:relative;flex:1;height:44px;margin:0;padding:0;border:0;border-left:var(--es-bw) solid var(--es-line);background:transparent;color:var(--es-ink);
  font:500 12px/1 var(--es-mono);font-variation-settings:"wdth" 82;cursor:pointer;overflow:hidden}
.es-rail button:first-child{border-left:0}
.es-rail button:hover{text-decoration:underline;text-underline-offset:4px}
.es-rail button:focus-visible{outline-offset:-3px}
.es-rail i{position:absolute;left:0;bottom:0;width:100%;height:5px;background:var(--es-ink);transform-origin:0 50%;transform:scaleX(0)}
.es-rail b{font-weight:500}
.es-rail button[aria-current="step"]{background:var(--es-ink);color:var(--ent-on-ink,#FBFAF7)}
.es-rail button[aria-current="step"] i{background:var(--es-bg);bottom:3px;height:3px}

/* ---- the compact loop for the landing hero (data-ent-story="hero") ---- */
.es-hero{--es-bw:var(--ent-bw-box,1px);--es-line:var(--ent-line,var(--ent-ink,#1A1830));--es-bg:var(--ent-plate,#F4F2EE);--es-ink:var(--ent-ink,#1A1830);--es-ink2:var(--ent-ink-2,#423F5A);--es-ink3:var(--ent-ink-3,#5F5B78);
  --es-rule:var(--ent-rule-strong,rgba(32,33,36,.28));--es-ion:var(--ent-ion,#5A3FE0);--es-ion-ink:var(--ent-ion-ink,#4328BA);
  --es-photon:var(--ent-photon,#0C8A6A);--es-photon-ink:var(--ent-photon-ink,#08664E);--es-bad:var(--ent-bad,#C2304A);
  --es-mono:var(--ent-mono,"Martian Mono",ui-monospace,Menlo,Consolas,monospace);
  display:block;margin:0;border:var(--es-bw) solid var(--es-line);background:var(--es-bg);color:var(--es-ink);box-sizing:border-box}
.es-hero *{box-sizing:border-box}
.es-hero{display:flex;flex-direction:column;aspect-ratio:1/1}   /* one fixed square, empty or built: nothing under it moves */
.es-hero .es-fig{margin:0;border:0;flex:1;min-height:0}
.es-hero .es-canvas{aspect-ratio:auto;width:100%;height:100%}
.es-hero .es-bar span{white-space:nowrap}
.es-hero .es-bar span:last-child{color:var(--es-ink2)}
.es-hero .es-bar span.is-ok{color:var(--es-ion-ink)}

/* Before the script runs the mounts are bare elements: these two rules hold their place by attribute, so the hero box
   is already its final square and the story already fills the screen, and nothing on screen moves when they build. */
[data-ent-story="hero"]{display:flex;flex-direction:column;aspect-ratio:1/1;box-sizing:border-box;border:var(--ent-bw-box,1px) solid var(--ent-line,var(--ent-ink,#1A1830))}
[data-ent-story]:not([data-ent-story="hero"]){min-height:100vh}
/* The diagram's boxes take the page's box weight too (a hairline on 2x screens); SVG strokes honour sub-pixel widths. */
.es-canvas .es-c-line{stroke-width:var(--es-bw)}