/* Closing keepsakes. The globe and travel case use the existing folding
   mechanism, with separate surfaces and depth that remain visible laid flat. */
.ground-hope {
  width: 301px; height: 92px; left: 10px; bottom: -22px;
  overflow: hidden; border: 2px solid #a7b190;
  background: radial-gradient(ellipse at 48% 24%, #cbd7aa, #8cab83 60%, #688e77);
  box-shadow: 0 3px 0 #a6b58e, 0 7px 0 #d4c89e, 4px 12px 13px #4b664435;
}
.hope-route {
  position: absolute; width: 250px; height: 73px; left: 23px; top: -8px;
  border: 9px solid #e5d7a8; border-top-color: transparent; border-radius: 50%;
  box-shadow: 0 2px 0 #b4aa7c;
}
.hope-path-light { position: absolute; width: 4px; height: 4px; top: 61px; left: 87px; border-radius: 50%; background: #fff0b5; box-shadow: 0 0 4px 2px #ffe6a288; }
.hope-path-light:nth-of-type(2) { left: 153px; top: 65px; }
.hope-path-light:nth-of-type(3) { left: 214px; top: 52px; }
.hope-globe .pop-volume { transform: rotateZ(-11deg); }
.hope-globe .pop-front { border-radius: 50%; filter: drop-shadow(1px 4px 3px #204f5140); }
.hope-globe .pop-back { border-radius: 50%; transform: translateZ(-12px) rotateY(180deg); }
.hope-globe .pop-volume::before, .hope-globe .pop-volume::after {
  content: ''; position: absolute; inset: 4%; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #9cd2c4, #568f96 58%, #2b5d6b);
  transform: translateZ(5px); backface-visibility: hidden;
}
.hope-globe .pop-volume::after { inset: 7%; transform: translateZ(-5px) rotateY(180deg); }
.hope-globe .pop-wall, .hope-meridian .pop-wall, .hope-sun .pop-wall,
.hope-tree .pop-wall, .hope-sparkles .pop-wall, .keepsake-bouquet .pop-wall,
.keepsake-mountains .pop-wall, .keepsake-pin .pop-wall, .keepsake-ball .pop-wall,
.hope-stand .pop-wall { display: none; }
.hope-meridian .pop-volume { transform: rotateY(-17deg); }
.hope-meridian .pop-tab, .hope-globe .pop-tab, .hope-sun .pop-tab, .hope-sparkles .pop-tab { display: none; }
.hope-sun .pop-front { filter: drop-shadow(0 0 10px #edcf9266); }
.hope-cottage .pop-volume { transform: rotateY(-13deg); }
.hope-cottage .pop-wall { left: 85.2%; bottom: 5.8%; height: 58%; }
.hope-tree .pop-volume { transform: rotateY(9deg); }
.hope-sparkles .pop-front { opacity: .75; }
.is-up .hope-sparkles .pop-front { animation: hope-light 5.6s ease-in-out 1.3s infinite; }
.is-up .hope-path-light { animation: hope-path 5.6s ease-in-out 1.3s infinite; }
.is-up .hope-path-light:nth-of-type(2) { animation-delay: 2s; }
.is-up .hope-path-light:nth-of-type(3) { animation-delay: 2.7s; }
@keyframes hope-light { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
@keyframes hope-path { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

.ground-keepsake {
  left: 22px; bottom: -25px; width: 279px; height: 115px;
  border: 7px solid #99734f; border-radius: 11px 11px 17px 17px;
  background: #3f655e;
  box-shadow: inset 0 0 0 2px #d0b581, inset 3px 7px 14px #263d384d,
    0 5px 0 #78573e, 0 10px 0 #a17b54, 5px 14px 14px #46352335;
}
.keepsake-velvet { position: absolute; inset: 5px; border-radius: 4px; background: repeating-linear-gradient(90deg, #a1b39c0d 0 1px, transparent 1px 5px); }
.keepsake-lid .pop-volume { transform: rotateX(9deg); transform-origin: center bottom; }
.keepsake-lid .pop-wall { left: 97.1%; bottom: 5%; height: 83%; border-radius: 0 11px 8px 0; }
.keepsake-front .pop-volume { transform: rotateX(-7deg); transform-origin: center bottom; }
.keepsake-front .pop-wall { left: 97.5%; bottom: 10%; height: 73%; }
.keepsake-front .pop-tab, .keepsake-lid .pop-tab { display: none; }
.keepsake-letter .pop-volume { transform: rotateZ(-13deg) rotateY(7deg); transform-origin: center bottom; }
.keepsake-map .pop-volume { transform: rotateZ(9deg) rotateY(-13deg); transform-origin: center bottom; }
.keepsake-pin .pop-volume { transform: rotateZ(12deg); transform-origin: center bottom; }
.keepsake-bouquet .pop-volume { transform: rotateZ(13deg); transform-origin: center bottom; }
.keepsake-mountains .pop-volume { transform: rotateY(-7deg); }
.keepsake-ball .pop-front { filter: drop-shadow(2px 3px 2px #203e3850); }
.keepsake-map .pop-wall { left: 93.6%; bottom: 8%; height: 75%; }
.keepsake-letter .pop-wall { left: 93.1%; bottom: 5.7%; height: 43%; }
.keepsake-letter .pop-tab, .keepsake-map .pop-tab, .keepsake-pin .pop-tab,
.keepsake-bouquet .pop-tab, .keepsake-mountains .pop-tab, .keepsake-ball .pop-tab { display: none; }

/* A stopped book still holds the light. The animations never move the paper
   hinge, and paused/hidden scenes spend no frames on the small glints. */
.popup-region:not(.is-visible) .hope-sparkles .pop-front,
.popup-region:not(.is-visible) .hope-path-light { animation-play-state: paused; }
.still .hope-sparkles .pop-front, .still .hope-path-light { animation: none; opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  .hope-sparkles .pop-front, .hope-path-light { animation: none !important; opacity: .85; }
}

/* A reply beneath the luggage, followed by two quiet letters from Hillman. */
.face.has-popup .paper.keepsake-note { justify-content: center; padding-top: 24px; padding-bottom: 42px; }
.face.has-popup .paper.keepsake-note .title { text-align: center; margin-bottom: .95em; }
.face.has-popup .paper.keepsake-note .body p { text-align: center; margin-bottom: .95em; }
.face.has-popup .paper.keepsake-note .body p:last-child { margin-bottom: 0; }
.face .paper.t-afterword {
  top: 0; left: 0; padding: calc(var(--ph) * .11) calc(var(--pw) * .095) calc(var(--ph) * .08);
  font-size: var(--fs); line-height: 1.85;
}
.paper.t-afterword .kicker { font-size: .78em; letter-spacing: .16em; margin-bottom: 1em; }
.paper.t-afterword .title { font-size: 1.65em; line-height: 1.45; margin-bottom: 1em; padding-bottom: .65em; border-bottom: 1px solid #bca77770; }
.paper.t-afterword .body p { text-align: left; margin-bottom: 1em; }
.paper.t-afterword .body p:last-child { margin-bottom: 0; }
.paper.t-afterword .sign { margin-top: 1.6em; padding-top: 0; font-size: 1.1em; letter-spacing: .06em; }
@media (max-width: 719px) and (min-height: 560px) {
  .face .paper.t-afterword { padding-top: calc(var(--ph) * .075); padding-bottom: calc(var(--ph) * .06); }
  .paper.t-afterword .title { font-size: 1.5em; letter-spacing: .02em; text-wrap: balance; }
  .paper.t-afterword .sign { margin-top: 1em; }
}
@media (max-height: 559px) {
  .face.has-popup .paper.keepsake-note { padding-top: 12px; padding-bottom: 22px; line-height: 1.55; }
  .face.has-popup .paper.keepsake-note .title { margin-bottom: .6em; }
  .face.has-popup .paper.keepsake-note .body p { margin-bottom: .6em; }
  .face .paper.t-afterword {
    display: grid; grid-template-columns: 26% 1fr; grid-template-rows: auto 1fr auto;
    column-gap: 28px; padding: 18px 32px 26px; line-height: 1.48;
  }
  .paper.t-afterword .kicker { grid-column: 1; grid-row: 1; margin-bottom: .6em; font-size: .72em; }
  .paper.t-afterword .title { grid-column: 1; grid-row: 2; align-self: start; font-size: 1.35em; margin: 0; padding-bottom: .5em; }
  .paper.t-afterword .body { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .paper.t-afterword .body p { margin-bottom: .65em; }
  .paper.t-afterword .sign { grid-column: 1; grid-row: 3; margin: 0; text-align: left; font-size: .95em; }
}
/* Compact phones keep the same readable body size and both complete letters. */
@media (max-width: 380px) and (min-height: 560px) and (max-height: 720px) {
  .face .paper.t-afterword { padding: 12px 18px 18px; line-height: 1.4; }
  .paper.t-afterword .kicker { font-size: .72em; margin-bottom: .55em; }
  .paper.t-afterword .title { font-size: 1.3em; line-height: 1.35; margin-bottom: .6em; padding-bottom: .45em; }
  .paper.t-afterword .body p { margin-bottom: .45em; }
  .paper.t-afterword .sign { font-size: 1em; margin-top: .5em; }
  .face.has-popup .paper.keepsake-note { justify-content: flex-start; padding: 14px 18px 24px; line-height: 1.55; }
  .face.has-popup .paper.keepsake-note .title { font-size: 1.2em; margin-bottom: .6em; }
  .face.has-popup .paper.keepsake-note .body p { margin-bottom: .6em; }
}