/* The enlarged paper scene, opened by tapping the artwork on a page, and the
   one-time swipe hint on touch screens. */

/* The artwork on an open page can be tapped; the rest of the region still lets touches through. */
.popup-region.is-visible .pop-stage { pointer-events: auto; cursor: zoom-in; }
.popup-region.is-visible .pop-stage:focus-visible { outline: 2px solid #fff2c9; outline-offset: 8px; border-radius: 6px; }

.scene-view {
  position: fixed; inset: 0; z-index: 8;
  display: grid; grid-template-rows: 1fr auto; place-items: center; gap: 16px;
  padding: calc(6vh + env(safe-area-inset-top)) 3vw calc(3vh + env(safe-area-inset-bottom));
  /* The eye steps back as the scene grows, so a large scene is the same miniature seen
     bigger and never a wide-angle one with its near corners flung out. */
  background: var(--lightbox-veil); perspective: calc(540px * var(--sv-scale)); perspective-origin: 50% 42%;
  animation: fadein .3s ease; --sv-scale: 1;
}
.scene-view[hidden] { display: none; }
/* The scene stands on a floor laid down at 62°, turned 12° on its own axis: the reader
   looks down on a miniature and sees the side of every piece. Nothing moves, and a scene
   that is one standing picture is left square to the reader, never turned.
   The floor keeps its small layout box whatever size the scene is shown at, so the caption
   and the replay button never move; the enlargement is the transform alone. */
.sv-table {
  position: relative; width: 320px; height: 232px;
  transform-style: preserve-3d; transform-origin: 50% 100%;
  transform: translate(var(--sv-shift, 0px), var(--sv-lift, 0px))
    scale3d(var(--sv-scale), var(--sv-scale), var(--sv-scale)) rotateX(62deg);
}
/* While a scene is being measured it is laid out but never painted, and nothing animates. */
#sceneView.sv-fitting, #sceneView.sv-fitting .sv-region { visibility: hidden; }
#sceneView.sv-fitting * { transition: none !important; animation: none !important; }
#sceneView .sv-region {
  position: absolute; inset: 0; height: auto; visibility: visible; pointer-events: none;
  transform-style: preserve-3d; transform: rotateZ(var(--sv-yaw, -12deg));
}
#sceneView .sv-region.has-diorama { --sv-yaw: 0deg; }
#sceneView .sv-region.is-up { --pop-angle: -80deg; --table-rise: 91px; }
#sceneView .sv-region.is-up .diorama-piece { --pop-angle: -74deg; }
/* Full size for every scene, and no mouse parallax: the id outranks the per-scene stage rules. */
#sceneView .pop-stage { bottom: 6%; transform: translateX(-50%); transition: none; pointer-events: auto; cursor: pointer; }
/* Rasterize cropped miniature artwork at its enlarged size, then counter-scale
   the front surface. Its hinge and measured bounds stay in the same place. */
#sceneView .charis-miniature:has(.charis-art-window) .pop-front {
  inset: auto; left: 0; top: 0;
  width: calc(100% * var(--sv-scale)); height: calc(100% * var(--sv-scale));
  transform: translateZ(var(--depth, 2px)) scale(calc(1 / var(--sv-scale)));
  transform-origin: 0 0;
}
#sceneView .pop-shadow { opacity: .85; }
.sv-foot { display: grid; justify-items: center; gap: 12px; color: #f3e6cc; }
.sv-cap { margin: 0; font: 16px var(--font-zh); letter-spacing: .06em; text-align: center; }
.sv-replay {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 18px;
  border-radius: 20px; border: 1px solid #decea970; background: var(--ui-accent); color: #f6ead1;
  font: 13px var(--font-zh); letter-spacing: .06em; cursor: pointer;
}
.sv-replay .replay-icon { font-family: Arial, sans-serif; font-size: 16px; }
.sv-replay:hover { background: var(--ui-accent-hover); }
.scene-view .sv-close:focus-visible, .sv-replay:focus-visible { outline: 2px solid #edce83; outline-offset: 3px; }
@media (max-width: 719px) { .sv-cap { font-size: 14px; } }

/* Swipe hint: shown once as the book opens on a touch screen. */
.swipe-hint {
  position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 6;
  margin: 0; padding: 9px 16px; border-radius: 20px; background: #3f3c2dd9; color: #f7edda;
  font: 13px var(--font-zh); letter-spacing: .1em; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .6s;
}
.swipe-hint.on { opacity: 1; }