/* scene3d.css — reserved box + static poster for the 3D lot visual in the
   dark app band (#screens .v3-app). Loaded from inside the container. */

.scene3d{
  --s3d-w:100%;
  position:relative;display:block;width:var(--s3d-w);max-width:520px;
  aspect-ratio:16/9;                 /* reserved size: no layout shift */
  margin:calc(-1 * var(--s5,24px)) 0 var(--s6,32px);
  pointer-events:none;user-select:none;
}
/* Soft elliptical fade so the visual dissolves into the navy band. */
.scene3d-poster,.scene3d-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 62%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 62%,transparent 100%);
}
.scene3d-poster{object-fit:cover;transition:opacity .9s ease}
.scene3d-canvas{opacity:0;transition:opacity .9s ease}
.scene3d-canvas.is-live{opacity:1}
.scene3d.is-live .scene3d-poster{opacity:0}

/* Desktop: float in the empty space to the right of the section heading. */
@media (min-width:1025px){
  .v3-app .wrap{position:relative}
  .scene3d{
    --s3d-w:clamp(380px,40vw,600px);
    position:absolute;top:calc(-1 * var(--s8,64px));right:var(--gutter,48px);
    max-width:none;margin:0;
  }
  /* Keep the heading clear of the visual, and tall enough that the phone
     row below never slides under it (static rules, so no shift). */
  .v3-app .wrap:has(> .scene3d) > .sec-head{
    max-width:min(760px,calc(100% - var(--s3d-w,600px) - var(--s5,24px)));
    min-height:calc(clamp(380px,40vw,600px) * .5625 - var(--s8,64px) - var(--s5,24px));
  }
  .v3-app .wrap:has(> .scene3d){--s3d-w:clamp(380px,40vw,600px)}
}

/* Phones/tablets: no 3D block at all (owner decision) */
@media (max-width:1024px),(pointer:coarse){.scene3d{display:none!important}}