/* welcome-story.css: the sign-up left side, one calm loop that explains SubHub (lane ONB, 2026-10-30).
   Visual language from subhub.io (dark isometric plan, thin orange / purple / teal linework, mono label cards, ruler on the frame).
   Copy and sources: LOGIN_wave/ONB/SUBHUB_IO_COPY.md. Driven by welcome-story.js (data-scene on .ws-canvas). */
.wl-story {
  --ws-ease: cubic-bezier(.22, 1, .36, 1);
  --ws-line: rgba(245, 242, 236, .34);
  --ws-faint: rgba(245, 242, 236, .17);
  --ws-tag: #f7a76b; --ws-key: #66d9e8; --ws-member: #b39dfb; --ws-flag: var(--accent);
  --ws-card: rgba(14, 15, 19, .94);
  position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh;
  padding: clamp(26px, 3.4vh, 48px) clamp(28px, 3.9vw, 72px); display: flex; gap: 0;
}
.ws-inner { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; min-height: 0; display: flex; flex-direction: column; gap: clamp(16px, 2.6vh, 30px); }

/* caption: leads the drawing */
.ws-copy { display: grid; gap: 10px; }
.ws-eyebrow { margin: 0; font: 500 13px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-hi); }
.ws-cap { transition: opacity .32s var(--ws-ease), transform .32s var(--ws-ease), filter .32s var(--ws-ease); will-change: opacity; }
.ws-cap.is-swap { opacity: 0; transform: translateY(-4px); filter: blur(2px); transition-duration: .2s; transition-timing-function: ease-in; }
.ws-title { margin: 0 0 10px; font-weight: 650; font-size: clamp(28px, 2.55vw, 54px); line-height: 1.06; letter-spacing: -.03em; color: var(--ink); }
.ws-title em { display: block; font-style: normal; color: var(--accent); }
.ws-body { margin: 0; max-width: 34em; min-height: 3em; font-size: clamp(15px, 1.06vw, 20px); line-height: 1.5; color: var(--ink-2); }

/* stage: a 4:3 canvas that keeps its shape at every width and height */
.ws-stage { position: relative; flex: 1 1 auto; min-height: 260px; container-type: size; }
.ws-canvas { position: absolute; left: 0; top: 0; width: min(100cqw, calc(100cqh * var(--ar, 1.3333))); height: min(100cqh, calc(100cqw / var(--ar, 1.3333))); container-type: inline-size;
  --fs: max(13px, 1.62cqw); font: 500 var(--fs)/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing: .05em; color: #f5f2ec; }
.ws-frame { position: absolute; inset: 0; border: 1px solid rgba(245, 242, 236, .1);
  background-image: linear-gradient(rgba(245, 242, 236, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 242, 236, .03) 1px, transparent 1px);
  background-size: 5cqw 5cqw; background-position: -1px -1px; }
.ws-frame i { position: absolute; width: 14px; height: 14px; border-color: rgba(245, 242, 236, .55); border-style: solid; border-width: 0; }
.ws-frame i:nth-child(1) { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.ws-frame i:nth-child(2) { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.ws-frame i:nth-child(3) { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.ws-frame i:nth-child(4) { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.ws-ruler { position: absolute; display: flex; justify-content: space-around; pointer-events: none; color: rgba(245, 242, 236, .3); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.ws-ruler-x { left: 0; right: 0; top: -22px; }
.ws-ruler-y { top: 0; bottom: 0; left: -22px; flex-direction: column; align-items: center; width: 14px; }

.ws-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ws-svg path, .ws-svg circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ws-plan path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ws-base path { stroke: var(--ws-line); stroke-width: 1.15; }
.ws-base .ws-furn { stroke: var(--ws-faint); stroke-width: .9; }
.ws-g { transition: opacity .45s var(--ws-ease); }
.ws-tags path { stroke: var(--ws-tag); stroke-width: 1.4; fill: rgba(247, 167, 107, .06); }
.ws-tags .k { stroke: var(--ws-key); fill: rgba(102, 217, 232, .08); }
.ws-members path { stroke: var(--ws-member); stroke-width: 2.6; }
.ws-details path { stroke: var(--ws-key); stroke-width: 1.4; fill: rgba(102, 217, 232, .05); }
.ws-flag path { stroke: var(--ws-flag); stroke-width: 2; fill: rgba(255, 90, 31, .08); }
.ws-dot { stroke: none !important; }
.ws-leader { stroke: var(--ws-key); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--ws-ease) .35s; }

/* scene states: what each scene shows (opacity only; drawing is stroke-dashoffset) */
.ws-tags, .ws-members, .ws-details, .ws-flag, .ws-leader { opacity: 0; }
[data-scene="1"] .ws-tags { opacity: 1; }
[data-scene="2"] .ws-tags { opacity: .22; }
[data-scene="2"] .ws-members { opacity: 1; }
:is([data-scene="3"], [data-scene="4"], [data-scene="5"]) .ws-members { opacity: .32; }
[data-scene="3"] .ws-details, [data-scene="3"] .ws-leader { opacity: 1; }
[data-scene="3"] .ws-leader { stroke-dashoffset: 0; }
[data-scene="4"] .ws-flag { opacity: 1; }
[data-scene="5"] .ws-base { opacity: .5; }
[data-scene="1"] .ws-tags path.dr, [data-scene="2"] .ws-members path.dr, [data-scene="3"] .ws-details path.dr, [data-scene="4"] .ws-flag path.dr { animation: ws-draw .9s var(--ws-ease) both; animation-delay: var(--d, 0ms); }
[data-scene="0"] .ws-base path { animation: ws-draw 1.5s var(--ws-ease) both; animation-delay: calc(var(--d, 0ms) + 200ms); }
@keyframes ws-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ws-canvas[data-out] :is(.ws-g, .ws-chip, .ws-card, .ws-tab) { opacity: 0 !important; transition: opacity .4s ease-in; }

/* label cards (subhub.io story-chip, at a readable size) */
.ws-chip { position: absolute; left: var(--x); top: var(--y); display: grid; gap: 1px; padding: .42em .8em .48em .9em; white-space: nowrap; text-transform: uppercase;
  background: rgba(14, 15, 19, .9); border: 1px solid rgba(245, 242, 236, .16); box-shadow: inset 0 1px rgba(245, 242, 236, .06);
  opacity: 0; transform: translate(0, -100%) translateY(5px); transition: opacity .32s var(--ws-ease), transform .32s var(--ws-ease); transition-delay: 0ms; pointer-events: none; }
.ws-chip::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--hue, var(--ws-tag)); }
.ws-chip b { font-weight: 500; color: #f5f2ec; }
.ws-chip span { color: rgba(245, 242, 236, .62); }
.ws-chip-flag { border-color: rgba(255, 90, 31, .55); }
.ws-chip-flag b { display: flex; align-items: center; gap: .45em; }
.ws-chip-flag b svg { width: .9em; height: .9em; fill: var(--ws-flag); }
.ws-chip-flag em { font-style: normal; letter-spacing: .12em; color: var(--accent-hi); }
[data-scene="1"] .ws-chip-tag, [data-scene="2"] .ws-chip-member, [data-scene="4"] .ws-chip-flag { opacity: 1; transform: translate(0, -100%); transition-delay: var(--d, 0ms); }

/* cards: sheet stack (bid set in), enlarged detail, estimate */
.ws-card { position: absolute; background: var(--ws-card); border: 1px solid rgba(245, 242, 236, .14); border-radius: 10px; box-shadow: inset 0 1px rgba(245, 242, 236, .05), 0 24px 48px -28px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateY(8px); transition: opacity .38s var(--ws-ease), transform .38s var(--ws-ease); pointer-events: none; }
.ws-card-h { display: flex; justify-content: space-between; gap: 12px; padding: .7em .9em .6em; text-transform: uppercase; letter-spacing: .1em; color: rgba(245, 242, 236, .7); border-bottom: 1px solid rgba(245, 242, 236, .08); }
.ws-card-h b { font-weight: 500; color: #f5f2ec; }

.ws-stack { right: 3.5%; top: 6%; width: 31%; padding: 1em 1em .9em; }
[data-scene="0"] .ws-stack { opacity: 1; transform: none; transition-delay: .1s; }
.ws-sheets { position: relative; aspect-ratio: 4 / 2.6; margin: 0 10px 12px 0; }
.ws-sheets i { position: absolute; inset: 0; border: 1px solid rgba(245, 242, 236, .22); border-radius: 3px; background: #121318; opacity: 0; transform: translateY(-10px); transition: opacity .3s var(--ws-ease), transform .42s var(--ws-ease); }
.ws-sheets i:nth-child(1) { translate: 10px 10px; } .ws-sheets i:nth-child(2) { translate: 5px 5px; }
.ws-sheets i:nth-child(3) { display: flex; align-items: flex-end; justify-content: flex-end; padding: 6px 8px; background: linear-gradient(rgba(245, 242, 236, .06) 1px, transparent 1px) 0 0 / 100% 18%, #15161c; }
.ws-sheets i:nth-child(3)::before { content: ''; position: absolute; left: 10%; top: 14%; width: 56%; height: 60%; border: 1px solid rgba(245, 242, 236, .32); }
.ws-sheets i:nth-child(3) b { position: relative; font-weight: 500; color: #f5f2ec; border-left: 2px solid var(--accent); padding-left: 6px; }
[data-scene="0"] .ws-sheets i { opacity: 1; transform: none; }
[data-scene="0"] .ws-sheets i:nth-child(1) { transition-delay: .15s; } [data-scene="0"] .ws-sheets i:nth-child(2) { transition-delay: .3s; } [data-scene="0"] .ws-sheets i:nth-child(3) { transition-delay: .45s; }
.ws-count { display: flex; align-items: baseline; gap: .6em; text-transform: uppercase; color: rgba(245, 242, 236, .66); }
.ws-count b { font: 600 max(20px, 2.4cqw)/1 'Geist Mono', ui-monospace, monospace; color: #f5f2ec; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

.ws-detail { right: 3.5%; top: 6%; width: 40%; }
.ws-detail-h { display: grid; gap: 2px; }
[data-scene="3"] .ws-detail { opacity: 1; transform: none; transition-delay: .55s; }
.ws-detail svg { display: block; width: 100%; height: auto; padding: .4em .7em .7em; }
.ws-detail svg path, .ws-detail svg circle { fill: none; stroke: rgba(245, 242, 236, .62); stroke-width: 1.1; }
.ws-detail svg .k { stroke: var(--ws-key); }
.ws-detail svg .f { stroke: rgba(245, 242, 236, .28); stroke-dasharray: 3 3; }
.ws-detail svg text { fill: #f5f2ec; font: 500 13px 'Geist Mono', ui-monospace, monospace; letter-spacing: .04em; }
.ws-detail svg text.m { fill: rgba(245, 242, 236, .7); }
.ws-detail-h b { color: var(--ws-key); }

.ws-book { right: 3.5%; bottom: 5%; width: 68%; }
[data-scene="5"] .ws-book { opacity: 1; transform: none; transition-delay: .1s; }
.ws-book ol { list-style: none; margin: 0; padding: .35em 0; }
.ws-book li { display: grid; grid-template-columns: 3px 6.4em minmax(0, 1fr) auto 5.2em; gap: .75em; align-items: center; padding: .38em .9em; opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ws-ease), transform .3s var(--ws-ease); }
.ws-book li i { align-self: stretch; border-radius: 2px; background: var(--k); }
.ws-book li code { font: inherit; color: rgba(245, 242, 236, .66); }
.ws-book li span { font-family: 'Geist', sans-serif; letter-spacing: 0; color: #f5f2ec; }
.ws-book li em, .ws-book li b { font-style: normal; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.ws-book li em { color: rgba(245, 242, 236, .75); }
[data-scene="5"] .ws-book li { opacity: 1; transform: none; transition-delay: calc(var(--n) * 120ms + 380ms); }
.ws-book-t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: .65em .9em .75em; border-top: 1px solid rgba(245, 242, 236, .1); text-transform: uppercase; color: rgba(245, 242, 236, .7); }
.ws-book-t b { font: 600 max(19px, 2.3cqw)/1 'Geist Mono', ui-monospace, monospace; color: var(--accent); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* sheet tab: which drawing you are on (flips when a callout is followed) */
.ws-tab { position: absolute; left: 3.5%; bottom: 5%; display: grid; padding: .42em .8em .48em .9em; background: rgba(14, 15, 19, .9); border: 1px solid rgba(245, 242, 236, .16); text-transform: uppercase;
  opacity: 0; transition: opacity .32s var(--ws-ease); }
.ws-tab::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: rgba(245, 242, 236, .5); transition: background .3s; }
.ws-tab b { grid-area: 1 / 1; font-weight: 500; transition: opacity .3s var(--ws-ease), transform .3s var(--ws-ease); }
.ws-tab b + b { opacity: 0; transform: translateY(4px); }
:is([data-scene="1"], [data-scene="2"], [data-scene="3"], [data-scene="4"]) .ws-tab { opacity: 1; }
[data-scene="3"] .ws-tab::before { background: var(--ws-key); }
[data-scene="3"] .ws-tab b:first-child { opacity: 0; transform: translateY(-4px); transition-delay: .7s; }
[data-scene="3"] .ws-tab b + b { opacity: 1; transform: none; transition-delay: .7s; }

/* step indicator: where you are in the loop, as shapes (bar fills over the scene) */
.ws-hud { position: absolute; left: 3.5%; top: 5.5%; list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; text-transform: uppercase; letter-spacing: .1em; }
.ws-hud li { display: flex; align-items: center; gap: .75em; color: rgba(245, 242, 236, .42); transition: color .3s; }
.ws-hud i { position: relative; width: 22px; height: 3px; border-radius: 3px; background: rgba(245, 242, 236, .16); overflow: hidden; transition: width .3s var(--ws-ease); }
.ws-hud i::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.ws-hud li.is-done i::after { transform: none; opacity: .55; }
.ws-hud li.is-on { color: #f5f2ec; }
.ws-hud li.is-on i { width: 34px; }
.ws-hud li.is-on i::after { animation: ws-fill var(--ms, 4000ms) linear both; }
@keyframes ws-fill { from { transform: scaleX(0); } to { transform: none; } }
.ws-canvas.is-paused, .ws-canvas.is-paused *, .ws-canvas.is-paused *::before, .ws-canvas.is-paused *::after { animation-play-state: paused !important; }

/* static frame (prefers-reduced-motion): the finished state, no motion */
.ws-canvas[data-static] .ws-hud li { color: rgba(245, 242, 236, .62); }
.ws-canvas[data-static] .ws-hud li i::after { transform: none; opacity: .55; animation: none; }

@media (max-width: 1100px) { .ws-ruler { display: none; } }
@media (max-width: 900px) { .wl-story { display: none; } } /* phones: the form comes first, as before; the loop does not run */
@media (prefers-reduced-motion: reduce) {
  .ws-cap, .ws-chip, .ws-card, .ws-g, .ws-tab, .ws-tab b, .ws-hud i, .ws-sheets i, .ws-book li, .ws-leader { transition: none !important; }
  .ws-plan path { animation: none !important; }
}