/* Build story: pinned stage, chapters swap as the scene builds */
.bs{position:relative;height:620vh}
.bs-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.bs-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s ease;z-index:1}
.bs-stage canvas.ready{opacity:1}
.bs-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to right,rgba(10,11,14,.78),rgba(10,11,14,0) 52%)}
.bs-copy{position:absolute;left:clamp(20px,5vw,72px);bottom:clamp(44px,9vh,96px);width:min(600px,88vw);z-index:5;display:grid}
.bs-ch{grid-area:1/1;align-self:end;opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.bs-ch.on{opacity:1;transform:none;pointer-events:auto}
.bs-ch .n{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#aab2bd;margin:0 0 12px}
.bs-ch h1,.bs-ch h2{font-family:var(--serif,var(--display));font-weight:400;font-size:clamp(40px,5.2vw,84px);line-height:1;margin:0 0 16px;letter-spacing:-.015em}
.bs-ch h1 em,.bs-ch h2 em{font-style:italic;background:none;color:var(--pink-soft);-webkit-text-fill-color:var(--pink-soft)}
.bs-ch>p:not([class]){font-size:clamp(18px,1.5vw,21px);max-width:44ch;margin:0;text-shadow:0 1px 14px rgba(10,11,14,.9)}
.bs-ch .lede{margin-top:0}
.bs-ch .cta-row{margin-top:28px}
.bs-rail{position:absolute;right:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:6}
.bs-rail i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28);transition:background .3s,transform .3s}
.bs-rail i.on{background:var(--pink);transform:scale(1.5)}
.bs-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#b9b0d4;transition:opacity .4s;z-index:6;margin:0}
@media (max-width:760px){
  .bs-stage::after{background:linear-gradient(to top,rgba(10,11,14,.94) 30%,rgba(10,11,14,0) 68%)}
  .bs-copy{bottom:56px}
  .bs-rail{display:none}
  .bs-ch h1,.bs-ch h2{font-size:40px}
  .bs-ch .fine{display:none}
  .bs-ch .lede{font-size:18px;line-height:1.45}
  .bs-ch .kicker{margin-bottom:12px;font-size:13px}
  .bs-ch .cta-row{margin-top:20px;gap:10px}
  .bs-ch .cta-row .btn{min-height:46px;padding:0 22px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .bs{height:auto}
  .bs-stage{position:relative}
  .bs-hint,.bs-rail{display:none}
  .bs-ch{transition:none}
  .bs.hero-bs .bs-ch:not(:first-child){display:none}
  .bs:not(.hero-bs) .bs-stage{height:auto;padding-top:70vh}
  .bs:not(.hero-bs) .bs-stage canvas{height:70vh}
  .bs:not(.hero-bs) .bs-copy{position:static;width:auto;display:block;padding:32px clamp(20px,5vw,72px)}
  .bs:not(.hero-bs) .bs-ch{opacity:1;transform:none;margin-bottom:34px}
}

.shot .bar,.shot .bs-copy,.shot .bs-rail,.shot .bs-hint{display:none!important}

/* thin progress line while a 3D model is still downloading */
.bs-stage::after{content:"";position:absolute;left:0;top:0;height:2px;width:34%;background:linear-gradient(90deg,transparent,#ff6a1a,transparent);opacity:0;pointer-events:none;z-index:5}
.bs-stage:has(canvas[data-model="pending"])::after{opacity:1;animation:bsload 1.3s linear infinite}
@keyframes bsload{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
@media (prefers-reduced-motion:reduce){.bs-stage:has(canvas[data-model="pending"])::after{animation:none;width:100%;opacity:.5}}