/* 3D: a modeling viewport. Mono HUD labels, perspective grid floor, reference -> output scenes */
[data-page="3d"]{--mono:'JetBrains Mono',ui-monospace,monospace}
.h3d{position:relative;overflow:hidden;padding:var(--s9) 0 var(--s8);min-height:min(88svh,820px);display:flex;align-items:center}
.h3d::before{content:"";position:absolute;width:70vw;height:70vw;max-width:900px;max-height:900px;right:-10%;top:-25%;background:radial-gradient(closest-side,rgba(110,231,192,.16),transparent);pointer-events:none}
.floor{position:absolute;left:-30%;right:-30%;bottom:-6%;height:62%;background:repeating-linear-gradient(90deg,rgba(110,231,192,.22) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,rgba(110,231,192,.22) 0 1px,transparent 1px 64px);transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 90%);mask-image:linear-gradient(to top,#000 10%,transparent 90%)}
.h3d .wrap{position:relative;width:100%;display:grid;gap:var(--s7);align-items:center}
@media(min-width:900px){.h3d .wrap{grid-template-columns:1.05fr .95fr}}
.h3d h1{font-size:clamp(2.2rem,6vw,4.5rem);line-height:1;margin:var(--s4) 0 var(--s5)}
.h3d h1 .big{display:block;font-size:clamp(7rem,21vw,16rem);line-height:.8;color:transparent;-webkit-text-stroke:2px var(--accent);letter-spacing:-.04em;margin-bottom:var(--s3)}
.vpt{position:relative;margin:0 10px;outline:1px solid var(--accent);outline-offset:10px}
.vpt .t{border:0;border-radius:0}
.vpt model-viewer{display:block;width:100%;height:auto;aspect-ratio:1/1;background:#12161A;--poster-color:#fff;--progress-bar-color:#6EE7C0;outline:none}
.hud{position:absolute;z-index:2;font:500 .7rem var(--mono);letter-spacing:.16em;color:#0E0F12;background:var(--accent);padding:3px 8px}
.hud.tl{top:0;left:0}.hud.tr{top:0;right:0}.hud.bl{bottom:0;left:0;display:flex;gap:8px;align-items:center}.hud.br{bottom:0;right:0}
.gz{width:12px;height:12px;border-left:2px solid #0E0F12;border-bottom:2px solid #0E0F12;display:inline-block}
[data-page="3d"] .sec h2::before{content:"//";color:var(--accent);margin-right:.4em;font-family:var(--mono)}
.scene{display:grid;grid-template-columns:1fr 56px 1fr;gap:var(--s4);align-items:center;margin-bottom:var(--s7)}
.scene figure{display:flex;flex-direction:column-reverse;gap:var(--s3)}
.scene figcaption{font:500 .72rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0}
.scene>.ico{width:40px;height:40px;color:var(--accent);transform:rotate(45deg);justify-self:center}
.scene .out .t{outline:1px solid var(--accent);outline-offset:6px}
.scene .out .t::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:repeating-linear-gradient(90deg,rgba(110,231,192,.7) 0 1px,transparent 1px 12px);pointer-events:none}
@media(max-width:700px){.scene{grid-template-columns:1fr}.scene>.ico{transform:rotate(135deg)}}
.vp-grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.vp-card{position:relative;padding:14px}
.vp-card::before,.vp-card::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--accent)}
.vp-card::before{top:0;left:0;border-right:0;border-bottom:0}.vp-card::after{bottom:0;right:0;border-left:0;border-top:0}
.vp-card b{display:block;margin-bottom:var(--s2);font:500 .72rem var(--mono);letter-spacing:.16em;color:var(--accent)}
[data-page="3d"] .step .num{font-family:var(--mono)}

/* loading animation shown until the model is ready */
.mv-load{width:100%;height:100%;display:grid;place-content:center;justify-items:center;gap:32px;background:#12161A;perspective:420px}
.mv-load b{font:500 .7rem var(--mono);letter-spacing:.22em;color:var(--accent)}
.mv-cube{position:relative;width:56px;height:56px;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(0);animation:mvspin 2.6s linear infinite}
.mv-cube i{position:absolute;inset:0;border:2px solid var(--accent);background:rgba(110,231,192,.07)}
.mv-cube i:nth-child(1){transform:translateZ(28px)}.mv-cube i:nth-child(2){transform:rotateY(90deg) translateZ(28px)}.mv-cube i:nth-child(3){transform:rotateY(180deg) translateZ(28px)}
.mv-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(28px)}.mv-cube i:nth-child(5){transform:rotateX(90deg) translateZ(28px)}.mv-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(28px)}
@keyframes mvspin{to{transform:rotateX(-24deg) rotateY(360deg)}}
@media(prefers-reduced-motion:reduce){.mv-cube{animation:none}}

/* picture -> video scenes: the client's image is exactly as tall as the video */
@media(min-width:701px){
  .scene.eq{grid-template-columns:calc((100% - 56px - 2*var(--s4))*var(--k)) 56px 1fr;gap:var(--s4);align-items:start}
  .scene.eq>.ico{align-self:center;margin-top:calc(-1 * var(--s6))}
}
@media(max-width:700px){
  .scene.eq figure:first-child .t{aspect-ratio:16/9!important}
  .scene.eq figure:first-child img{object-fit:contain;background:var(--surface)}
}