/* product-scene.css (AE for Honeybloom, 2026-10-13): the scene layer behind the 3D product. Adds only; loads
   after product-viewer.css + hb-product.css. Stack inside the stage (isolation:isolate): stage background <
   .product-scene (-2) < contact shadow ::after (-1) < poster (0) < canvas (1) < hotspots (2). */
.product-scene{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .45s ease}
.product-scene[data-ready]{opacity:1}
/* cover + the ground line: the image's (50%,91%) contact point stays 9% from the stage's bottom at any aspect */
.product-scene img,.product-scene video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;
  border:0;object-fit:cover;object-position:50% 91%}
/* the loop sits over its own frame 0 (= the still); it fades in once it is actually playing, so the small
   decode difference between the still and the video's first frame never pops */
.product-scene video{opacity:0;transition:opacity .3s ease}
.product-scene video[data-playing]{opacity:1}
/* each scene's contact shadow (from scenes.json, set by product-scene.js), under the product's real base (9% on
   desktop, higher on a tall phone stage: --product-scene-ground); plain studio keeps the site's own */
[data-product-stage][data-scene-active]::after{background:var(--product-scene-shadow,#2E1F0E1f);bottom:var(--product-scene-ground,9%)}
/* belt and braces for the quiet modes product-scene.js already applies */
@media(max-width:700px){.product-scene video{display:none}}
@media(prefers-reduced-motion:reduce){.product-scene{transition:none}.product-scene video{display:none}}
/* high-contrast users get the plain card, not a picture behind the product */
@media(forced-colors:active){.product-scene{display:none}}
@media print{.product-scene video{display:none}}