/* THE INTERFACE, IN DEPTH: see app_depth.py. Scale --k is set by app-depth.js from the stage size. */
/* the sticky stage needs its ancestors unclipped; here, not in the header's stylesheet, so it also holds
   when the case opens inside the Work page's modal (?embed, where the header's stylesheet isn't loaded) */
html:has(.app-depth),body:has(.app-depth){overflow-x:clip!important;overflow-y:visible!important}
.app-depth{position:relative;height:320svh;margin:0 calc(50% - 50vw);--k:1;--p:0}
.ad-stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;background:#0d0d0c}
.ad-cols{position:absolute;inset:0;pointer-events:none}
/* the passing screens fade at the stage's top and foot, so the header reads over them */
.ad-stage:before,.ad-stage:after{content:"";position:absolute;left:0;right:0;z-index:2;pointer-events:none}
.ad-stage:before{top:0;height:calc(170px + 4vh);background:linear-gradient(#0d0d0c 0,#0d0d0c 96px,#0d0d0c00)}   /* solid under the header, then fades */
.ad-stage:after{bottom:0;height:calc(90px + 4vh);background:linear-gradient(#0d0d0c00,#0d0d0c)}
.ad-col{position:absolute;top:0;left:50%;display:flex;flex-direction:column;gap:calc(44px*var(--k));will-change:transform}
.ad-col[data-col="0"]{--cx:-560;--w:150;opacity:.32}
.ad-col[data-col="1"]{--cx:-330;--w:185;opacity:.5}
.ad-col[data-col="2"]{--cx:330;--w:185;opacity:.5}
.ad-col[data-col="3"]{--cx:560;--w:150;opacity:.32}
.ad-col{width:calc(var(--w)*1px*var(--k));margin-left:calc(var(--cx)*1px*var(--k) - var(--w)*.5px*var(--k))}
/* a light frame for the passing screens: titanium edge, black bezel, the island */
.ad-mini{position:relative;margin:0;aspect-ratio:377/820;border-radius:calc(30px*var(--k));padding:calc(5px*var(--k));
 background:#050505;box-shadow:0 0 0 1px #5d5b58,0 0 0 calc(2.5px*var(--k)) #2a2927,0 30px 60px #0008}
.ad-mini img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(25px*var(--k))}
.ad-mini:after{content:"";position:absolute;top:calc(13px*var(--k));left:50%;width:30%;height:calc(9px*var(--k));translate:-50% 0;border-radius:9px;background:#000}
.ad-home{position:absolute;left:50%;top:50%;width:calc(300px*var(--k));translate:-50% -50%;z-index:3}
.ad-home .model-stage,.ad-home .phone{width:100%!important;margin:0!important}
.ad-bits{position:absolute;inset:0;z-index:4;pointer-events:none}
.ad-bit{position:absolute;left:50%;top:50%;width:calc(var(--w)*1px*var(--k)*var(--m,1));max-width:none;height:auto;will-change:transform,opacity;
 filter:drop-shadow(0 calc(26px*var(--k)) calc(40px*var(--k)) #000a);opacity:0}
@media(max-width:700px){
 .app-depth{height:260svh}
 .ad-col[data-col="0"],.ad-col[data-col="3"]{display:none}
 .ad-col[data-col="1"]{--cx:-300;--w:200;opacity:.38}.ad-col[data-col="2"]{--cx:300;--w:200;opacity:.38}
 .ad-home{width:calc(330px*var(--k))}
 .ad-bits{--m:.68}   /* on a phone the pieces stay smaller and further out, so the home screen still reads */
}
@media(prefers-reduced-motion:reduce){.app-depth{height:auto}.ad-stage{position:relative;height:100svh}.ad-bit{opacity:1}}