/* The product view (BRIEF-V7 section 4): one component, three states (still, spin, splat), one markup, driven by product-view.js.
   The still is the picture until a spin or a splat has drawn its first frame; with no script it is the only state.
   The container places the object with three variables, as percentages of the view:
     --pv-top    the top of the object box
     --pv-floor  the plinth line, where the object stands (the box's bottom edge)
     --pv-side   the left and right inset of the box
   The still and the spin frames stand in that box (contained, bottom aligned). The splat canvas covers the whole view and its
   camera puts the object in the same box, so a turned or zoomed object is never cut at the box's edge.
   --pv-cap-x and --pv-cap-y place the caption from the bottom left corner.
   The three box variables are read as fallbacks, never set on .pv itself, so a container (the product stage, S's ritual
   ground, the Nila niche) sets them and the view inherits them. */
.pv{position:relative;display:block;-webkit-tap-highlight-color:transparent}
.pv--stage{width:100%;height:100%}
.pv--small{width:100%;aspect-ratio:var(--pv-w) / var(--pv-h)}
.pv-still,.pv-spin{position:absolute;left:var(--pv-side,0%);top:var(--pv-top,0%);width:calc(100% - 2 * var(--pv-side,0%));height:calc(var(--pv-floor,100%) - var(--pv-top,0%))}
.pv-still{object-fit:contain;object-position:50% 100%;-webkit-user-drag:none;user-select:none}
.pv-spin canvas{display:block;width:100%;height:100%}
/* the shadows of the still and the spin come from light.css (one rule for every object, v7b 2.1) */
.pv-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.pv-canvas[hidden],.pv-spin[hidden]{display:none}
.pv-cap{position:absolute;left:var(--pv-cap-x,0);bottom:var(--pv-cap-y,0);z-index:2;margin:0;font-size:12px;line-height:1.2;letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:currentColor;opacity:.72;pointer-events:none}
.pv-cap:empty{display:none}
.pv .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* the live states: the still steps back as the first frame arrives (a .4 s fade under lx-live, at once otherwise) */
.pv[data-pv-state="spin"] .pv-still,.pv[data-pv-state="splat"] .pv-still{opacity:0}
html.lx-live .pv-still{transition:opacity .4s var(--ease)}
/* the drag surface: horizontal drags turn it, vertical swipes still scroll the page */
.pv[data-pv-state="spin"],.pv[data-pv-state="splat"]{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pv.is-grabbing{cursor:grabbing}
.pv:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:var(--r)}
@media (prefers-reduced-motion:reduce){html.lx-live .pv-still{transition:none}}