/* ==========================================================================
   Zana Pizza & Grill — 3D stage (pizza3d.js)
   The canvas lives in the sticky #stage-canvas-host and never takes pointer
   events; orbit happens on .stage-hit boxes the script places inside the
   slots. While the product sheet shows a 3D pizza the canvas element moves
   into #sheet-slot.
   ========================================================================== */

#stage-canvas-host canvas{pointer-events:none}
#stage-canvas{display:block;touch-action:none}

/* canvas inside the sheet: fill the stage box */
#sheet-slot > #stage-canvas,
#stage-canvas.is-in-sheet{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---------- hit areas (drag / touch / keyboard orbit) -------------------- */
.stage-hit{
  position:absolute;inset:0;z-index:2;border-radius:inherit;
  pointer-events:auto;touch-action:none;cursor:grab;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  outline-offset:-4px
}
/* On touch screens a vertical swipe on the pizza must still scroll the page:
   horizontal drags orbit, vertical pans scroll (tilt stays a mouse gesture). */
@media (pointer:coarse){.stage-hit{touch-action:pan-y}}
.stage-hit.is-dragging{cursor:grabbing}
.stage-hit[aria-hidden="true"]{pointer-events:none;cursor:default}
.stage-hit[hidden]{display:none}
#hero-slot .stage-hit,#pizza-slot .stage-hit{border-radius:var(--r-l)}
#sheet-slot .stage-hit{border-radius:inherit}

/* the empty-plate ring in the hero is a placeholder for the pizza itself */
.has-stage:not(.no-webgl) #hero-slot::after{opacity:0}

/* ---------- still overlays ----------------------------------------------- */
/* Used for products without a 3D model (visual="still"), for the no-WebGL
   fallback and after a lost context. The stills sit on ink/black; a soft
   circular mask (closest-side = the contained image's radius) drops the
   square background so only the dish shows — no visible image box, and no
   blend mode (the hero grid is its own stacking context, blends can't reach
   the page glow). On mobile the box stays inside the opaque 78 % of the
   sticky slot. */
.stage-still{
  position:absolute;left:8%;right:8%;top:4%;bottom:23%;width:84%;height:73%;margin:0;
  object-fit:contain;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle closest-side,#000 95.5%,transparent 99.5%);
  mask-image:radial-gradient(circle closest-side,#000 95.5%,transparent 99.5%);
  opacity:0;transition:opacity .25s var(--ease)
}
.stage-still.is-show{opacity:1}
#sheet-slot > .stage-still{left:0;right:0;top:0;bottom:0;width:100%;height:100%;object-fit:contain}
@media (min-width:900px){
  #hero-slot .stage-still,#pizza-slot .stage-still{left:8%;right:8%;top:8%;bottom:10%;width:84%;height:82%}
}

/* ---------- fallbacks ---------------------------------------------------- */
.no-webgl #stage-canvas-host,.stage-lost #stage-canvas{display:none}
.no-webgl #hero-slot::after{opacity:0}
.no-webgl #pizza-slot,.stage-lost #pizza-slot{pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .stage-still{transition:none}
}