/* Motion layer: layout hooks for Lenis, GSAP ScrollTrigger and the WebGL hero.
   Everything here degrades to the plain page when JS or WebGL is missing, and
   is switched off under prefers-reduced-motion. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}


/* fixed header that hides on scroll down, returns on scroll up */
body.js-motion .hdr{position:sticky;top:0;z-index:30;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
body.js-motion .hdr.is-hidden{transform:translateY(-100%)}
body.js-motion .hdr.is-scrolled{box-shadow:0 1px 0 var(--hairline),0 8px 24px rgba(0,0,0,.06)}

/* WebGL canvases sit under the content; the original image / background stays as the fallback */
canvas.gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero-b canvas.gl{z-index:0}
section.press,section.news-band,.ftr{position:relative;isolation:isolate}section.press>*:not(canvas),section.news-band>*:not(canvas),.ftr>*:not(canvas){position:relative;z-index:1}
.gl-wipe{position:fixed;inset:0;z-index:100;pointer-events:none}.gl-wipe canvas.gl{position:absolute}
.pd-main{position:relative}.pd-main canvas.gl{z-index:1}.pd-main .gl-hint{position:absolute;left:12px;bottom:12px;z-index:2;font-family:var(--font-heading);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(23,23,23,.55);padding:4px 10px;border-radius:999px;pointer-events:none;opacity:0;transition:opacity .4s}.pd-main:hover .gl-hint{opacity:1}
.cu-hero .pic{position:relative}.cu-hero .pic canvas.gl{z-index:1}
.hero-b .copy,.hero-b .dots{z-index:2}
.hero-b .veil{z-index:1}
.hero-b .copy>*{will-change:transform,opacity}

/* fixed chapter label (ScrollTrigger + position:fixed) */
.chapter{position:fixed;left:24px;bottom:120px;z-index:20;display:flex;align-items:center;gap:12px;transform-origin:left bottom;transform:rotate(-90deg) translateX(0);pointer-events:none;mix-blend-mode:difference;color:#fff;font-family:var(--font-heading);font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:0}
.chapter i{display:block;width:40px;height:1px;background:currentColor}
.chapter b{font-weight:600}
@media (max-width:900px){.chapter{display:none}}

/* CSS grid + z-index: layered chapters */
.trust{position:relative;z-index:3;margin:-32px var(--space-6) 0;background:var(--paper)}
.sec-head{position:relative}
.sec-head h2.u-title::before{content:attr(data-num);position:absolute;left:-8px;top:-54px;font-family:var(--font-display);font-weight:300;font-size:120px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--hairline-2);letter-spacing:0;z-index:-1;pointer-events:none}
.sec-head.center h2.u-title::before{left:50%;transform:translateX(-50%)}
.sec{position:relative;z-index:1}

/* Shop by room → sticky showcase: picture pins, rooms reveal in sequence */
body.js-motion .room{display:grid;grid-template-columns:1fr 1fr;min-height:150vh;align-items:start}
body.js-motion .room .pic{position:sticky;top:96px;aspect-ratio:1;z-index:2;margin:var(--space-6) -48px var(--space-6) var(--space-6)}
body.js-motion .room .list{position:sticky;top:96px;min-height:calc(100vh - 96px);padding-left:calc(var(--space-8) + 48px)}
body.js-motion .room .list a{opacity:.25;transform:translateX(12px);transition:opacity .4s,transform .4s,color .2s}
body.js-motion .room .list a.is-active{opacity:1;transform:none}
body.js-motion .room .list a.is-active small{color:var(--bronze)}

/* video block: frame overlaps the text panel */
.video .frame{position:relative;z-index:2;margin-right:-64px}
.video .txt{position:relative;z-index:1;background:var(--cream);padding-left:calc(var(--space-8) + 64px)}

/* product page: gallery sticks while details scroll */
.pd-gallery{position:sticky;top:112px;align-self:start}
/* collection: filters stick */
.cat .sb{position:sticky;top:112px;align-self:start;max-height:calc(100vh - 128px);overflow:auto;scrollbar-width:thin}

/* card hover: image tilts toward the pointer */
.p .art{transform-style:preserve-3d}   /* rotation is eased by GSAP; a CSS transition on the same property made the tilt lag and shudder */
.p .art img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.p:hover .art img{transform:scale(1.04)}

/* marquee is driven by GSAP; keep text on one line */
.marq{display:flex;gap:0}.marq>span{flex:none}

@media (max-width:900px){
  body.js-motion .room{min-height:auto;grid-template-columns:1fr}
  body.js-motion .room .pic,body.js-motion .room .list{position:static;margin:0;min-height:auto;padding-left:var(--space-6)}
  body.js-motion .room .list a{opacity:1;transform:none}
  .video .frame{margin-right:0}.video .txt{padding-left:var(--space-6)}
  .trust{margin:0}.sec-head h2.u-title::before{display:none}
  .pd-gallery,.cat .sb{position:static;max-height:none}
}
@media (prefers-reduced-motion:reduce){
  body.js-motion .hdr{position:static}
  .chapter{display:none}
  body.js-motion .room{min-height:auto}body.js-motion .room .list a{opacity:1;transform:none}
}