/* v3d — the card image IS a video, blended into the card surface, in 3D.
   Drop-in for the LP's `figure.well.shot` (SkeletonTemplate v3.1, 16:9 YouTube-scale grid).
   Layers: poster (instant) → lazy muted video (in view only) → WebGL layer (video as a texture on a
   depth-parallax plane + floating 3D accents), feathered so the picture fuses with the card. */
.v3d{position:relative;overflow:hidden;perspective:900px;background:var(--card,#141821)}
.v3d .v3d-stage{position:relative;width:100%;aspect-ratio:16/9;transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);will-change:transform}
.v3d video,.v3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:16/9}
.v3d video{background:var(--card,#141821) center/cover no-repeat}
.v3d canvas{pointer-events:none;opacity:0;transition:opacity .6s ease}
.v3d.gl-ready canvas{opacity:1}
.v3d.gl-ready video{opacity:0}                 /* the WebGL layer carries the picture once it runs */
.v3d .v3d-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 55%, var(--card,#141821) 100%);
  mix-blend-mode:multiply;opacity:.55}
.v3d .v3d-glow{position:absolute;inset:-20%;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(40% 40% at var(--mx,50%) var(--my,50%), rgba(255,255,255,.14), transparent 70%);
  mix-blend-mode:screen}
.v3d:hover .v3d-glow,.v3d.is-playing .v3d-glow{opacity:1}
.v3d .v3d-badge{position:absolute;left:.7rem;bottom:.6rem;font:600 .68rem/1 system-ui,sans-serif;letter-spacing:.04em;
  color:#e8ecf3;background:rgba(0,0,0,.42);backdrop-filter:blur(6px);padding:.35rem .5rem;border-radius:4px;pointer-events:none}
.v3d.is-playing .v3d-badge{opacity:0;transition:opacity .4s}
@media (prefers-reduced-motion:reduce){ .v3d .v3d-stage{transition:none;transform:none!important} .v3d .v3d-glow{display:none} }  /* v1.1: video + GL blend stay; tilt/glow off */