/* 3D copy of the home page. Everything here only applies with html.has3d, so without WebGL the page is the normal page. */
.h3d-slot,.win3d{display:none}
#scene3d{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-1;display:block;pointer-events:none}

/* Sections stay solid, so all text sits on a plain background. The scene only shows in the reserved empty areas. */
html.has3d .h3d-slot,html.has3d .win3d{display:block}
html.has3d .win3d{height:clamp(230px,42vh,400px);position:relative}
html.has3d .hero{background:none;padding-block:0 clamp(40px,7vh,72px)}
html.has3d .hero::before{display:none}
html.has3d .show{background:var(--surface);transform-origin:50% 0;will-change:transform}
html[data-theme=light].has3d .show{background:#fff}

/* Wide: words on the left, scene on the right for the whole first screen, showcase below */
@media (min-width:981px){
  html.has3d .hero .wrap{display:block;position:relative}
  html.has3d .h3d-slot{position:absolute;right:0;top:0;width:52%;height:clamp(540px,calc(100vh - 76px),860px)}
  html.has3d .h3d-slot + div{width:46%;min-height:clamp(540px,calc(100vh - 76px),860px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  html.has3d .show{max-width:760px;margin-inline:auto}
}
/* Narrow: scene band on top, then solid background under the words and showcase */
@media (max-width:980px){
  html.has3d{--slot:clamp(230px,32vh,320px)}
  html.has3d .h3d-slot{height:var(--slot)}
  html.has3d .hero{background:linear-gradient(to bottom,transparent calc(var(--slot) - 24px),var(--bg) var(--slot))}
  html.has3d .nav{backdrop-filter:none;background:var(--bg)}
}

/* Cards rise into place in perspective */
html.has3d .rv{opacity:0;transform:perspective(900px) translateY(26px) rotateX(10deg);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
html.has3d .rv.in{opacity:1;transform:none}
html.has3d .rv.tilt{transition:transform .12s linear}

@media (prefers-reduced-motion:reduce){
  html.has3d .win3d{display:none}
  html.has3d .rv{opacity:1;transform:none}
  html.has3d .show{will-change:auto}
}
@media print{html.has3d .rv{opacity:1;transform:none}}

/* Phones: give the showcase enough height so every mock-up fits, with or without 3D */
@media (max-width:640px){
  .stage{aspect-ratio:auto;height:420px}
  .stage .phone{width:min(240px,86%)}
}