/* Unclipped paper sculptures are siblings of the printed page faces.
   Each piece has its own hinge, depth, rear surface and side wall. */
:root { --popup-height: calc(var(--ph) * .39); --pop-scale: 1; }
.face.has-popup { background: linear-gradient(100deg,#ece4cf,#fcf8ed 24%,#f3ecda); }
.face.has-popup .paper {
  top: var(--popup-height);
  padding-top: calc(var(--ph) * .035);
  padding-bottom: 36px;
}
.face.has-popup .paper.t-dedication { justify-content: flex-start; }
.face.has-popup .paper.t-quote { justify-content: flex-start; padding-top: 14px; }
.face.has-popup .paper.t-blank { top: 54%; }
.face.has-popup .paper.t-blank .sun { display: none; }
.face.has-popup .paper.t-quote .sun { display: none; }
.face.has-popup .paper.t-quote .quote-title { margin-bottom: .55em; }
.face.has-popup .paper.t-quote .quote { font-size: 1.13em; line-height: 1.9; }
.face.has-popup .paper.light .wash { height: 42%; opacity: .25; }
.face.has-popup .paper.light .kicker { margin-top: 0; }
.face.has-popup .paper.light .wash-cap { position: relative; top: auto; right: auto; font-size: .68em; margin-bottom: .5em; }
.face.has-popup .title { font-size: 1.65em; margin-bottom: .45em; }
.face.has-popup .body p { margin-bottom: .72em; }
.popup-region {
  position: absolute; inset: 0 0 auto; height: var(--popup-height);
  transform-style: preserve-3d; backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  visibility: hidden; pointer-events: none;
  --pop-angle: 0deg;
  --table-rise: 0px;
}
.popup-front { transform: translateZ(7px); }
.popup-back { transform: rotateY(180deg) translateZ(7px); transform-origin: center calc(var(--ph) / 2); }
.popup-region.is-visible { visibility: visible; }
.popup-region.is-up { --pop-angle: -54deg; --table-rise: 91px; }
.pop-stage {
  position: absolute; width: 320px; height: 180px; left: 50%; bottom: 49px;
  transform: translateX(-50%) scale3d(var(--pop-scale),var(--pop-scale),var(--pop-scale)) rotateY(calc(var(--hand-x) * 7deg));
  transform-origin: center bottom; transform-style: preserve-3d;
  transition: transform 1.2s ease-out;
}
.pop-piece {
  position: absolute; transform-style: preserve-3d; transform-origin: 50% 100%;
  transform: rotateX(var(--pop-angle));
  transition: transform 220ms cubic-bezier(.4,0,.8,.7);
}
.is-up .pop-piece { transition: transform 1050ms cubic-bezier(.2,.78,.22,1) var(--delay,0ms); }
.candle-piece, .glass-piece { transform: translateZ(var(--table-rise)) rotateX(var(--pop-angle)); }
.pop-volume { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; }
.pop-front, .pop-back { position: absolute; inset: 0; }
.pop-front { transform: translateZ(var(--depth,4px)); }
.pop-back { filter: brightness(.78) sepia(.12); }
.pop-front svg, .pop-back svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pop-front svg { filter: drop-shadow(.4px .7px .2px #765f3844); }
.pop-wall {
  position: absolute; left: 100%; bottom: 0; height: 65%; width: var(--depth,4px);
  transform: translateZ(var(--depth,4px)) rotateY(90deg); transform-origin: left center;
  background: repeating-linear-gradient(0deg,#ffffff0a 0 3px,transparent 3px 11px), var(--side,#b8aa8b);
  border: .5px solid #9f8a6466;
}
.tree-piece .pop-wall, .mountain-back .pop-wall, .mountain-mid .pop-wall, .mountain-front .pop-wall,
.bowling-pin .pop-wall, .sun-piece .pop-wall, .heart-piece .pop-wall, .glass-piece .pop-wall,
.candle-piece .pop-wall, .cap-piece .pop-wall { display: none; }
.pop-tab {
  position: absolute; left: 32%; bottom: -12px; width: 36%; height: 12px;
  background: #d9cdb0; border: .7px solid #bbaa8655;
  transform: rotateX(90deg); transform-origin: center top;
}
.sun-piece .pop-tab { width: 4px; left: calc(50% - 2px); height: 44px; bottom: -43px; background: #d7c397; transform: none; }
.sun-piece .pop-volume { transform: translateZ(-4px); }
.pop-shadow {
  position: absolute; left: 28px; bottom: -10px; width: 271px; height: 60px;
  border-radius: 50%; background: #5b492735;
  transform: translateZ(1px) skewX(-22deg); filter: blur(12px);
  opacity: 0; transition: opacity .3s;
}
.is-up .pop-shadow { opacity: .85; transition-duration: 1s; }
.pop-ground {
  position: absolute; left: 22px; bottom: -17px; width: 278px; height: 90px;
  border: 1px solid #c2b18d; border-radius: 50%;
  background: #e4d8b9;
  transform: translateZ(2px); box-shadow: 0 2px 0 #c6b797,0 4px 0 #e4dac3,3px 9px 10px #58472f26;
}
.ground-stone { background: repeating-linear-gradient(0deg,transparent 0 17px,#b9ad8d70 17px 18px),repeating-linear-gradient(90deg,#e7deca 0 26px,#c5b798 26px 27px); }
.ground-grass {
  background: radial-gradient(ellipse at 60% 30%,#a4a27c,#7b8760 48%,#536c4c);
  border-color: #74795a;
}
.mountain-art { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 1px #2c3b3333); }
.mountain-back .pop-tab, .mountain-front .pop-tab { background: #737e60; border-color: #64735466; }
.popup-region[data-scene="hiking"] .ground-grass { height: 65px; bottom: -10px; opacity: .65; }
.ground-letter { background: #e5d9bb; width: 237px; left: 42px; height: 73px; }
.ground-light { background: linear-gradient(155deg,#f8e6b4,#dbcdaa); border-radius: 4px; transform: translateZ(2px) skewX(-20deg); }
.ground-rug { background: repeating-linear-gradient(90deg,transparent 0 6px,#b1a57f55 6px 8px),#d0c3a2; border: 5px double #ad9e77; border-radius: 30%; }
.ground-map { background: linear-gradient(35deg,transparent 44%,#dcb77d 45% 46%,transparent 47%),linear-gradient(155deg,#d7debf 30%,#ebe0c4 30% 67%,#b8cdc5 68%); }
.ground-track { background: repeating-linear-gradient(0deg,#b88a6d 0 16px,#e8d5b2 16px 18px); border-color: #a88261; }
.ground-lane {
  left: 71px; width: 184px; height: 133px; bottom: -25px;
  border-radius: 3px; border: 5px solid #71634c;
  background: repeating-linear-gradient(90deg,#ceb381 0 17px,#e2c795 17px 18px,#c2a475 18px 20px);
  box-shadow: inset 9px 0 4px #5b4b3444,inset -9px 0 4px #5b4b3444,0 4px 0 #a9966f,0 7px 0 #e5d6b4,6px 15px 13px #5e452d3d;
}
.ground-lane i { position: absolute; bottom: 33%; left: 35%; width: 4px; height: 7px; background: #816343; clip-path: polygon(50% 0,100% 100%,0 100%); }
.ground-lane i:nth-child(2) { left: 49%; bottom: 38%; }
.ground-lane i:nth-child(3) { left: 63%; }
.ball-shell {
  width: 100%; height: 100%; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 30% 24%,#bad1bd 0%,#60816b 16%,#345847 40%,#1f382c 73%,#142b21);
  box-shadow: inset -3px -5px 6px #081d1799,3px 5px 8px #3d38285c;
  transform: translateZ(18px) rotateX(54deg);
}
.ball-shell i { position: absolute; width: 7px; height: 8px; border-radius: 50%; background: #172a21; box-shadow: inset 1px 2px 2px #0c1a12,0 1px 0 #78937b; left: 47%; top: 23%; }
.ball-shell i:nth-child(2) { left: 66%; top: 28%; }
.ball-shell i:nth-child(3) { left: 52%; top: 47%; width: 9px; height: 10px; }
.is-up .ball-shell { animation: ball-roll 1500ms cubic-bezier(.45,.05,.7,1) 750ms both; }
@keyframes ball-roll { from { transform: translate3d(-24px,24px,18px) rotateX(54deg) rotateZ(-120deg); } to { transform: translate3d(95px,-32px,18px) rotateX(54deg) rotateZ(170deg); } }
.bowling-pin { --pin-fall: 67deg; --pin-slide: 10px; }
.bowling-pin:nth-child(odd) { --pin-fall: -63deg; --pin-slide: -11px; }
.bowling-pin .pop-volume { transform-origin: center bottom; }
.is-up .bowling-pin .pop-volume { animation: pin-fall 750ms ease-out calc(2050ms + var(--delay)) both; }
@keyframes pin-fall { from { transform: rotateX(0) rotateZ(0); } to { transform: translateX(var(--pin-slide)) rotateX(28deg) rotateZ(var(--pin-fall)); } }
.shutter-left .pop-volume { transform: rotateY(-30deg); transform-origin: right center; }
.shutter-right .pop-volume { transform: rotateY(30deg); transform-origin: left center; }
.popup-replay {
  position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%) translateZ(5px);
  background: #f8f2e0e8; border: 1px solid #bdb08b77; border-radius: 18px;
  padding: 5px 11px; min-height: 28px; max-width: 92%;
  display: inline-flex; gap: 10px; align-items: center; justify-content: center;
  white-space: nowrap; font: 11px var(--font-zh); color: #6a674f;
  cursor: pointer; pointer-events: auto; box-shadow: 0 2px 4px #60523712;
}
.popup-replay .replay-icon { font-family: Arial,sans-serif; font-size: 16px; color: #848363; }
.popup-replay:hover { background: #fff8e7; border-color: #9c9a77; }
.popup-replay:disabled { cursor: default; }
.popup-region:not(.is-visible) .popup-replay { pointer-events: none; }
body.open .tilt, body.opening .tilt { transform: rotateX(calc(13deg + var(--hand-y) * -2deg)) rotateY(calc(var(--hand-x) * 2deg)) rotateZ(-.5deg); }
@media (max-width: 719px), (max-height: 559px) {
  body.open .tilt, body.opening .tilt { transform: rotateX(5deg); }
  .popup-replay { min-height: 33px; padding: 5px 12px; font-size: 10px; }
  .face.has-popup .paper { padding-top: 18px; padding-bottom: 30px; }
  .face.has-popup .title { font-size: 1.45em; }
  .face.has-popup .paper.t-quote .quote { font-size: 1.1em; }
}
@media (max-height: 559px) {
  :root { --popup-height: calc(var(--ph) * .44); }
  .pop-stage { bottom: 37px; }
  .popup-replay { font-size: 8px; min-height: 25px; padding: 3px 8px; }
}
@media (max-width: 719px) and (min-height: 560px) and (max-height: 680px) {
  .reading-caption { display: none; }
  .motion-toggle { top: auto; right: 23px; bottom: 83px; min-height: 36px; }
}
.still .pop-piece, .still .pop-shadow { transition: none; }
.still .ball-shell { animation: none; }