/* Scroll-built closet: the homepage hero.
   The default markup is the static fallback: the finished closet with the three lines stacked.
   An inline <head> script adds .bs-js to <html> when motion is allowed and canvas works, so the
   300vh scroll track is reserved from first paint (no layout shift). build-sequence.js (GSAP) does the rest.
   Only one picture is ever fetched by CSS: the finished closet (static) or the first frame (scroll version). */

.bseq{position:relative;background:var(--white);padding:calc(var(--nav-h) + 24px) var(--m) var(--sec);}
.bseq-media{position:relative;max-width:1600px;margin:0 auto;aspect-ratio:16/9;overflow:hidden;
  background:var(--sand) url(../img/site/build-sequence/build-end.webp) center/cover no-repeat;}
.bseq-canvas{display:none;}
.bseq-copy{max-width:1600px;margin:clamp(40px,5vw,72px) auto 0;display:grid;gap:1.6rem;}
.bseq-line{margin:0;font-weight:300;font-size:clamp(34px,4.4vw,68px);line-height:1.12;letter-spacing:-.025em;color:var(--ink);max-width:22ch;}
.bseq-line h2{font:inherit;letter-spacing:inherit;margin:0;}
.bseq-line .btn{display:inline-flex;margin-top:2.4rem;}
.bseq-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.4rem;}
.bseq-btns .btn{margin-top:0;}
.bseq-btns .btn-light{background:rgba(255,255,255,.88);color:var(--ink);border-color:var(--ink);}
.bseq-btns .btn-light:hover{background:var(--ink);color:#fff;}
@media (max-width:560px){.bseq-btns .btn{flex:1 1 100%;}}
.bseq-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* scroll-driven version: the 300vh track is reserved here; GSAP ScrollTrigger pins the stage inside it
   (CSS sticky can't be used: ScrollSmoother moves the page with transforms) */
.bs-js .bseq{height:300vh;padding:0;}
.bs-js .bseq-stage{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--mist);}
/* the first frame paints from CSS straight away (preloaded in <head>); the canvas covers it once frames decode */
.bs-js .bseq-media{position:absolute;inset:0;max-width:none;margin:0;aspect-ratio:auto;
  background:var(--mist) url(../img/site/build-sequence/desktop/frame-001.webp) center/cover no-repeat;}
.bs-js .bseq-canvas{display:block;width:100%;height:100%;}
/* soft light wash under the copy so dark text stays AA over the wood; JS fades it with the captions */
.bs-js .bseq-media::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--bs-scrim,0);
  background:linear-gradient(to top,rgba(255,255,255,.76) 0%,rgba(255,255,255,.64) 26%,rgba(255,255,255,.32) 44%,rgba(255,255,255,0) 62%);}
/* faint wash behind the fixed nav, so its dark links stay readable once the wood fills the top of the frame */
.bs-js .bseq-media::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--nav-h) * 1.8);pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.6),rgba(255,255,255,0));}
.bs-js .bseq-copy{position:absolute;left:var(--m);right:var(--m);bottom:clamp(40px,8vh,104px);margin:0;max-width:none;}
.bs-js .bseq-line{grid-area:1/1;align-self:end;opacity:0;pointer-events:none;}
.bs-js .bseq-line.is-on{pointer-events:auto;}
.bs-js .bseq-line:focus-within{opacity:1 !important;transform:none !important;}

/* same breakpoint the script uses to pick the 900px frame set */
@media (max-width:767px){
  .bs-js .bseq-media{background-image:url(../img/site/build-sequence/mobile/frame-001.webp);}
}

/* narrow or portrait screens: cover-cropping would cut the wall, so show the whole 16:9 frame with the copy below */
@media (max-width:767px),(max-aspect-ratio:1/1){
  .bs-js .bseq-stage{display:flex;flex-direction:column;justify-content:center;padding-top:var(--nav-h);background:var(--white);}
  .bs-js .bseq-media{position:relative;inset:auto;width:100%;aspect-ratio:16/9;flex:none;}
  .bs-js .bseq-media::before,.bs-js .bseq-media::after{display:none;}
  .bs-js .bseq-copy{position:relative;left:auto;right:auto;bottom:auto;padding:clamp(28px,5vh,48px) var(--m) 0;}
  .bs-js .bseq-line{align-self:start;}
}