/* Build scenes (build-scene.js). Shared by every scene on the site.
   Everything inside .bs-screen is sized in cqw, so the mock site scales as
   one picture from a phone to a 4K film frame. */
.bs{position:relative;padding:0;height:440vh;background:var(--ink,#080808);color:var(--on-ink,#F4F1EC)}
.bs-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:56px;align-items:center;padding:96px 56px 40px;max-width:1440px;margin:0 auto}
.bs-stick::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 70% 55%,rgba(245,130,10,.22),transparent 70%);opacity:calc(.25 + var(--p,0) * .75);pointer-events:none}
.bs-stick{isolation:isolate}

.bs-head h2{font-family:var(--font-head);font-size:clamp(2.2rem,3.6vw,3.4rem);line-height:.95;letter-spacing:.02em;color:#fff;margin:0 0 10px}
.bs-head p{color:var(--on-ink-soft,#C3BCB2);line-height:1.6;margin:0 0 26px;font-size:1rem}
.bs-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:bs}
.bs-steps li{counter-increment:bs;display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:baseline;padding:8px 0;color:var(--on-ink-mute,#9C948A);transition:color .25s}
.bs-steps li::before{content:counter(bs);font-family:var(--font-head);font-size:1.35rem;line-height:1;color:inherit}
.bs-steps li b{font-family:var(--font-sub);font-weight:700;font-size:1.08rem;letter-spacing:.01em}
.bs-steps li span{display:block;grid-column:2;font-size:.9rem;line-height:1.5;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s,opacity .35s}
.bs-steps li.is-done{color:var(--on-ink-soft,#C3BCB2)}
.bs-steps li.is-now{color:#fff}
.bs-steps li.is-now::before{color:var(--orange-lift,#FFB259)}
.bs-steps li.is-now span{max-height:5em;opacity:1;color:var(--on-ink-soft,#C3BCB2)}
.bs-note{margin:22px 0 0;font-size:.8rem;color:var(--on-ink-mute,#9C948A)}
.bs-bar{height:3px;margin-top:18px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.bs-bar i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--orange,#F5820A)}

/* The browser window the scene happens in. */
.bs-win{--live:min(1, max(0, (var(--p,0) - .94) * 16.7));position:relative;width:100%;max-width:1000px;justify-self:center;aspect-ratio:16/10;max-height:calc(100svh - 150px);border-radius:14px;background:#1d1a17;box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);display:flex;flex-direction:column;overflow:hidden}
.bs-win::after{content:"";position:absolute;inset:-2px;border-radius:16px;box-shadow:0 0 70px 4px rgba(245,130,10,.4);opacity:var(--live,0);pointer-events:none}
.bs-chrome{flex:0 0 auto;height:38px;display:flex;align-items:center;gap:8px;padding:0 14px;background:#24201c;border-bottom:1px solid rgba(255,255,255,.06)}
.bs-chrome i{width:11px;height:11px;border-radius:50%;background:#4a433c}
.bs-chrome i:nth-child(1){background:#e2574c}.bs-chrome i:nth-child(2){background:#e7b43f}.bs-chrome i:nth-child(3){background:#54b264}
.bs-url{flex:1;margin-left:10px;height:24px;border-radius:12px;background:#151210;color:#cfc7bd;font:500 13px/24px ui-monospace,SFMono-Regular,Menlo,monospace;padding:0 12px;white-space:nowrap;overflow:hidden}
.bs-url .bs-lock{color:#54b264;margin-right:6px;opacity:var(--live,0)}
.bs-url .bs-caret{display:inline-block;width:1px;height:13px;background:#cfc7bd;vertical-align:-2px;animation:bs-blink 1s steps(1) infinite}
.bs-live{margin-left:auto;font:700 12px/1 var(--font-sub,system-ui);letter-spacing:.06em;color:#0b2810;background:#5fd27a;border-radius:20px;padding:6px 10px;opacity:var(--t,0);transform:scale(calc(.6 + var(--t,0) * .4))}
@keyframes bs-blink{50%{opacity:0}}
.bs-screen{position:relative;flex:1;container-type:inline-size;overflow:hidden;background:#fff;color:#16202a}

/* Generic arrivals any scene can use. */
.bs-rise{opacity:var(--t,0);transform:translateY(calc((1 - var(--t,0)) * 3cqw))}
.bs-drop{opacity:var(--t,0);transform:translateY(calc((var(--t,0) - 1) * 3cqw))}
.bs-pop{opacity:var(--t,0);transform:scale(calc(.85 + var(--t,0) * .15))}
.bs-fade{opacity:var(--t,0)}
.bs-wipe{clip-path:inset(0 calc((1 - var(--t,0)) * 100%) 0 0)}
.bs-grow{transform-origin:left;transform:scaleX(var(--t,0))}

/* Film mode: one scene, the whole viewport, nothing else on the page. */
.bs-filming body>*:not(main),.bs-filming main>*:not(.bs-film),.bs-filming .cf-skip,.bs-filming .skip-link{display:none!important}
.bs-filming,.bs-filming body{overflow:hidden!important;background:#080808}
.bs-filming main{padding:0!important;margin:0!important}
.bs-film{height:100vh!important}
.bs-film .bs-scroll-only{display:none}
.bs-film .bs-stick{position:fixed;inset:0;max-width:none;padding:5vh 5vw;grid-template-columns:minmax(0,26vw) minmax(0,1fr);gap:4vw}
.bs-film .bs-win{max-width:none;max-height:86vh}
.bs-film .bs-head h2{font-size:3.4vw}
.bs-film .bs-head p{font-size:1.1vw}
.bs-film .bs-steps li b{font-size:1.25vw}
.bs-film .bs-steps li span{font-size:1vw}
.bs-film .bs-steps li::before{font-size:1.6vw}
.bs-film .bs-chrome{height:3.4vh}
.bs-film .bs-url{height:2.2vh;font-size:1.2vh;line-height:2.2vh}

/* Reduced motion: a finished picture on a normal page. */
.bs.bs-still{height:auto}
.bs-still .bs-stick{position:relative;height:auto}
.bs-still .bs-steps li span{max-height:none;opacity:1}

@media(max-width:900px){
  .bs{height:380vh}
  .bs-stick{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:18px;padding:84px 16px 20px;align-content:start}
  .bs-head p,.bs-note{display:none}
  .bs-steps{position:relative}
  .bs-steps li{position:absolute;visibility:hidden}
  .bs-steps li.is-now{position:relative;visibility:visible}
  .bs-win{aspect-ratio:auto;height:100%;max-height:none;align-self:stretch}
  .bs-chrome{height:30px}
  .bs-url{font-size:11px;margin-left:4px}
  .bs-screen{container-type:inline-size}
}

@media(max-width:900px) and (max-height:760px){
  .bs-stick{padding-top:72px;gap:12px}
  .bs-head h2{font-size:1.9rem;margin-bottom:6px}
  .bs-steps li.is-now span{display:none}
  .bs-bar{margin-top:8px}
}