/* 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));
  background: #23291df4; perspective: 1600px; perspective-origin: 50% 45%;
  animation: fadein .3s ease; --sv-scale: 1;
}
.scene-view[hidden] { display: none; }
/* The scene's floor is laid down at 64° and the pieces stand up at 58° from it, so every
   piece faces the reader almost squarely, seen from just above, and nothing moves. */
.sv-table { position: relative; width: calc(320px * var(--sv-scale)); height: calc(300px * var(--sv-scale)); transform-style: preserve-3d; transform-origin: 50% 100%; transform: rotateX(64deg); }
#sceneView .sv-region { position: absolute; inset: 0; height: auto; visibility: visible; pointer-events: none; transform: none; transform-style: preserve-3d; }
#sceneView .sv-region.is-up { --pop-angle: -58deg; --table-rise: 91px; }
#sceneView .sv-region.is-up .diorama-piece { --pop-angle: -58deg; }
/* Full size for every scene, and no mouse parallax: the id outranks the per-scene stage rules. */
#sceneView .pop-stage { --pop-scale: var(--sv-scale); bottom: 6%; transform: translateX(-50%) scale3d(var(--sv-scale), var(--sv-scale), var(--sv-scale)); transition: none; pointer-events: auto; cursor: pointer; }
#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: #424831e6; 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: #595c43; }
.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; }