/* "How it works" story: a sticky full-screen stage scrubbed by scroll (js/story/story.js).
   The replica mirrors the real studio admin (apps/admin): 44px top bar, sidebar, floating
   Nurel AI panel, Geist, lime accent. Motion = CSS transitions on classes the scenes toggle. */

.story{position:relative;background:#0d0b0a;color:#f3ebe2}
.story-intro{padding:clamp(88px,11vw,150px) 0 clamp(36px,5vw,64px)}
.story-intro .kicker{color:#bfae9c}
.story-intro .lede{color:#d9cdc0}
.story-intro h2{max-width:16ch}
.story-cta{display:none;align-items:center;gap:18px;flex-wrap:wrap;margin:30px 0 0;color:#bfae9c;font-size:15px}
.js .story:not(.story-failed) .story-cta{display:flex}
.story-cta .btn{gap:10px}
.story-cta svg{width:13px;height:13px;fill:currentColor}
.story-cta small{font-weight:600;color:var(--muted)}
.story-track{position:relative}
/* Reserve the scroll length before the story code loads, so mounting it never shifts the page
   (anchors like #worlds must land where they point). 8 chapters × 100vh + the sticky screen. */
.js .story-track{height:1100vh} /* 8 chapters × 125vh + 100vh = STORY_SCROLL in story-script.js */
.story-failed .story-track{display:none}
.story-stage{display:none}
.story-live .story-stage{display:block;position:sticky;top:0;height:100svh;overflow:hidden;
  background:radial-gradient(120% 90% at 72% 36%,#2b1b10 0%,#140e0a 55%,#0b0908 100%)}
.story-live .story-static-list,.js .story:not(.story-failed) .story-static-list{display:none}

/* ---------- static fallback (no JS / reduced motion) ---------- */
.story-static-list{list-style:none;margin:0 auto;padding:0 0 clamp(80px,10vw,140px);display:grid;gap:56px}
.story-static-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:40px;align-items:center}
.story-static-list h3{font-size:clamp(26px,2.6vw,36px);margin:6px 0 10px;color:#fff}
.story-static-list p{margin:0;color:#d9cdc0;max-width:46ch}
.story-static-list .n{font:700 12.5px var(--text);letter-spacing:.14em;color:#bfae9c}
.story-static-list img{width:100%;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
@media (max-width:760px){.story-static-list li{grid-template-columns:1fr;gap:18px}}

/* ---------- stage layout ---------- */
.st-grid{position:absolute;inset:0;display:grid;grid-template-columns:minmax(270px,330px) 1fr;gap:clamp(20px,2.6vw,44px);
  padding:calc(var(--nav-h) + 18px) clamp(20px,4vw,64px) 44px}
.st-copy{align-self:center;position:relative;z-index:3}
.st-kicker{color:#c9b8a5;margin:0 0 14px}
.st-kicker b{color:var(--amber)}
.st-title{font-size:clamp(34px,3.3vw,54px);line-height:1.02;color:#fff;margin:0 0 16px;transition:opacity .35s ease,transform .35s ease}
.st-body{font-size:clamp(16px,1.2vw,18.5px);line-height:1.55;color:#dccfc2;margin:0 0 28px;max-width:34ch;transition:opacity .35s ease .05s,transform .35s ease .05s}
.st-copy.is-swap .st-title,.st-copy.is-swap .st-body{opacity:0;transform:translateY(8px)}
.st-nav{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.st-nav button{all:unset;cursor:pointer;display:flex;gap:12px;align-items:baseline;padding:6px 0;font:600 14px var(--text);color:#8f8174;transition:color .2s}
.st-nav button i{font-style:normal;font:600 11.5px 'Geist Mono',ui-monospace,monospace;color:#6f6257;width:20px}
.st-nav button:hover,.st-nav button:focus-visible{color:#fff}
.st-nav button.is-done{color:#b3a495}
.st-nav button.is-on{color:#fff}
.st-nav button.is-on i{color:var(--amber)}
.st-skip{display:inline-block;margin-top:22px;font:600 13.5px var(--text);color:#bfae9c;text-decoration:none}
.st-skip:hover{color:#fff}
.st-screen{position:relative;min-width:0;min-height:0}
/* chapter rail: same language as the hero's world rail. Fills as you scroll or play; click to jump. */
.st-rail{position:absolute;left:clamp(20px,4vw,64px);right:clamp(20px,4vw,64px);bottom:12px;z-index:6;display:flex;gap:6px}
.st-seg{all:unset;cursor:pointer;flex:1;height:24px;display:flex;align-items:center;position:relative}
.st-seg i{display:block;width:100%;height:3px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden;transition:height .15s}
.st-seg i::after{content:"";display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--fill,0));background:linear-gradient(90deg,#FFD58A,#FF8A1A)}
.st-seg:hover i,.st-seg:focus-visible i,.st-seg.on i{height:5px}
.st-seg span{position:absolute;left:0;bottom:24px;white-space:nowrap;font:600 12.5px var(--text);color:#fff;background:rgba(13,11,10,.85);padding:5px 9px;border-radius:8px;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;pointer-events:none}
.st-seg:last-child span{left:auto;right:0}
.st-seg:hover span,.st-seg:focus-visible span{opacity:1;transform:none}
/* scroll hint: at the start and whenever the reader pauses */
.st-hint{position:absolute;left:clamp(20px,4vw,64px);bottom:46px;z-index:6;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;background:rgba(13,11,10,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(255,255,255,.08);color:#f3ebe2;font:600 13.5px var(--text);white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;pointer-events:none}
.st-hint.is-in{opacity:1;transform:none}
.st-hint span{color:#bfae9c;font-weight:500}
.st-mouse{flex:none;width:15px;height:23px;border:1.8px solid #f3ebe2;border-radius:9px;position:relative}
.st-mouse i{position:absolute;left:50%;top:5px;width:2px;height:5px;margin-left:-1px;border-radius:2px;background:#f3ebe2;animation:stWheel 1.6s ease-in-out infinite}
@keyframes stWheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(8px);opacity:0}100%{opacity:0}}
/* play / pause */
.st-play{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;margin-top:24px;height:46px;padding:0 18px 0 7px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font:700 15px var(--text);transition:background .2s}
.st-play:hover{background:rgba(255,255,255,.17)}
.st-play:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.st-play i{flex:none;width:32px;height:32px;border-radius:50%;background:var(--amber);display:grid;place-items:center}
.st-play svg{width:13px;height:13px;fill:var(--ink)}
.st-play .pz{display:none}.st-play.is-playing .pz{display:inline}.st-play.is-playing .pl{display:none}
.st-play small{font-weight:600;color:#bfae9c}
.st-play small:empty{display:none}
.st-copy .st-skip{display:block;margin-top:14px}
.st-replay{all:unset;cursor:pointer;color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- end card ---------- */
.st-end{position:absolute;inset:0;z-index:8;display:grid;place-items:center;text-align:center;padding:24px;
  background:radial-gradient(90% 80% at 50% 45%,rgba(43,27,16,.96),rgba(11,9,8,.98));opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.st-end.is-in{opacity:1;visibility:visible;transition:opacity .6s ease}
.st-end h2{font-size:clamp(44px,6vw,92px);color:#fff;margin:0 0 10px}
.st-end h2 span{display:block;color:var(--amber)}
.st-end p{color:#d9cdc0;margin:0 0 26px}
.st-end .prompt{margin:0 auto;max-width:620px}

/* ---------- mobile stage: one panel at a time ---------- */
@media (max-width:760px){
  .st-grid{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:14px;padding:calc(var(--nav-h) + 6px) 14px 22px}
  .st-copy{align-self:start}
  .st-kicker{margin-bottom:8px}
  .st-title{font-size:28px;margin-bottom:8px}
  .st-body{font-size:14.5px;margin-bottom:0;max-width:none}
  .st-nav,.st-copy .st-skip{display:none}
  .st-grid{padding-bottom:50px}
  .st-copy{position:static}
  .st-play{position:absolute;right:12px;bottom:7px;z-index:7;margin:0;width:34px;height:34px;padding:0;justify-content:center;background:none}
  .st-play span,.st-play small{display:none!important}
  .st-play i{width:34px;height:34px}
  .st-rail{left:14px;right:56px;bottom:12px}
  .st-seg span{display:none}
  .st-hint{left:50%;bottom:62px;transform:translate(-50%,8px)}
  .st-hint.is-in{transform:translate(-50%,0)}
}

@media (prefers-reduced-motion:reduce){
  .st-mouse i{animation:none}
  .js .story .story-cta{display:none}
  .story-live .story-stage{display:none}
  .js .story:not(.story-failed) .story-static-list,.js .story .story-static-list{display:grid}
  .js .story-track{height:auto!important}
}