/* <living-painting>: a carved, gilded frame (an image with a transparent oval
   opening) holding a crystal dome. The glass is positioned under the opening
   by the script from FRAME.opening in scenes.js; only the glass is WebGL.

   Size it from outside, e.g.  living-painting { width: 520px; }
   Its height follows the frame image's proportions. */

living-painting {
  --lp-frame-ar: 887 / 1479;
  --lp-rx: 0deg;                    /* tilt toward the viewer, driven by the script */
  --lp-ry: 0deg;

  display: block;
  position: relative;
  aspect-ratio: var(--lp-frame-ar);
  transform: perspective(1800px) rotateX(var(--lp-rx)) rotateY(var(--lp-ry));
  will-change: transform;
}

/* ---------------------------------------------------------------- the frame */

.lp-frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  /* hung off the wall: a close contact shadow and a long soft one, down-right */
  filter:
    drop-shadow(2px 4px 3px rgba(40, 26, 6, 0.45))
    drop-shadow(10px 22px 26px rgba(40, 26, 6, 0.32));
}

/* ---------------------------------------------------------------- the glass */

.lp-sight {
  position: absolute;               /* left/top/width/height set from FRAME.opening */
  z-index: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #070605;              /* empty black glass until the scene appears */
  transform: translateZ(0);         /* keep the oval clip on its own layer */
}

.lp-canvas,
.lp-fallback,
.lp-fallback-glass,
.lp-rebate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

.lp-fallback { object-fit: cover; }

/* static stand-in for the optical shader when WebGL is unavailable */
.lp-fallback-glass {
  background:
    radial-gradient(ellipse 30% 22% at 32% 22%, rgba(255, 255, 255, 0.16), transparent 70%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(255, 240, 210, 0.10) 82%, rgba(255, 246, 228, 0.28) 100%);
  pointer-events: none;
}

/* where the glass meets the frame: a hairline seat, no recess shadow (the dome is proud) */
.lp-rebate {
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(46, 30, 6, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  living-painting { transform: none; will-change: auto; }
}