/* scroll-3d-stage: pinned 3D product story. Zyqor Components, MIT. */
.s3{position:relative;height:var(--s3-len,420vh)}
.s3-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid}
.s3-canvas{position:absolute;inset:0}
.s3-canvas canvas{width:100%!important;height:100%!important;display:block}
.s3-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .4s}
.s3:not(.s3--ready) .s3-poster,.s3--poster .s3-poster{opacity:1}
.s3--ready:not(.s3--poster) .s3-poster{opacity:0}
.s3-copy{position:absolute;inset:0;pointer-events:none}
.s3-ch{position:absolute;left:var(--pad,40px);top:50%;margin-top:-120px;width:min(380px,36vw);opacity:0;will-change:opacity,transform}
.s3-ch:nth-child(even){left:auto;right:var(--pad,40px)}
.s3-ch>*{pointer-events:auto}
.s3-bar{position:absolute;left:var(--pad,40px);right:var(--pad,40px);bottom:28px;height:2px;background:color-mix(in srgb,var(--ink,#2B3A33) 16%,transparent)}
.s3-bar i{position:absolute;inset:0;background:var(--acc,#C8553D);transform-origin:left;transform:scaleX(0)}
@media (max-width:760px){
  .s3-ch,.s3-ch:nth-child(even){left:var(--pad,18px);right:var(--pad,18px);width:auto;top:auto;bottom:64px;margin:0}
  .s3-canvas{bottom:28%}
  .s3-poster{bottom:28%;height:72%}
}
@media (prefers-reduced-motion:reduce){.s3-ch{transform:none!important}}
/* demo page only */
.s3-ch .mono{color:var(--acc)}
.s3-ch h3{font:740 clamp(34px,4.6vw,64px)/.95 var(--display);letter-spacing:-.035em;font-stretch:86%;margin:.25em 0 .3em}
.s3-ch p{margin:0;color:var(--soft);font-size:clamp(15px,1.3vw,18px);max-width:34ch}
.s3-ch .s3-spec{display:flex;gap:18px;margin-top:16px;font:600 14px/1.2 var(--body)}
.s3-ch .s3-spec b{display:block;font:700 26px/1 var(--display)}
.s3-head{position:absolute;left:0;right:0;top:clamp(70px,10vh,110px);text-align:center;pointer-events:none}
.s3-head .mono{color:var(--soft)}
.s3-after{min-height:60vh;display:grid;place-items:center;text-align:center;padding:10vh var(--pad)}
.s3-after h2{font:740 clamp(36px,6vw,88px)/.95 var(--display);letter-spacing:-.04em;margin:0 0 .3em}
@media (max-width:760px){.s3-head{top:76px}}