/* The hero's pop-up book (js/hero-book.js). It stands in front of the postcard scene, inside the card's front face, so it
   lands with the card on scroll. The stage is larger than the card: a book needs room to open. */
.pb-stage { position: absolute; inset: -35% max(-34%, (100cqw - 100vw) / 2) -23%; z-index: 2; -webkit-tap-highlight-color: transparent;   /* never wider than the screen */
  /* a long evening shadow may reach the edge of the stage: let it fade out there instead of stopping dead */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 96%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 96%, transparent); mask-composite: intersect; }
.pb-stage[hidden] { display: none; }
body.pc { overflow-x: clip; }   /* the tucked card may lean past the edge of a narrow screen: it must never make the page scroll sideways */
/* the closed cover as a flat picture, there from the first paint; the real book fades in over it, then it goes */
.pb-poster { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; border-radius: 3px;
  filter: drop-shadow(0 10px 14px rgba(40, 30, 20, .22)); transition: opacity 160ms linear 180ms, visibility 0s linear 340ms; }
.ls.pb-ready .pb-poster { opacity: 0; visibility: hidden; }
.pb-stage canvas:not(.pb-poster) { opacity: 0; transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1); }
.ls.pb-ready .pb-stage canvas:not(.pb-poster) { opacity: 1; }
.pb-stage canvas:focus-visible { outline: 1.5px solid var(--ink, #111); outline-offset: -6px; border-radius: 12px; }
/* the postcard scene keeps running underneath, unseen */
.ls.pb .pc-front .ls-scene { opacity: 0; pointer-events: none; }
.ls.pb .pc-card.is-photo .pb-stage, .ls.pb .pc-card.is-photo .pb-tuck { opacity: 0; pointer-events: none; }

/* ---------- the stamps are the book's page tabs: a row just under its front edge, and the caption goes under them ---------- */
.ls.pb { display: flex; flex-direction: column; }
.ls.pb .ls-caption, .ls.pb .pc-stamps { position: relative; z-index: 3; }
.ls.pb:not(:has(.ls-caption.is-photo)) .pc-stamps { order: 1; margin-top: calc(var(--pb-foot, 24px) + 22px); height: 42px; align-items: center; gap: 8px; }
.ls.pb:not(:has(.ls-caption.is-photo)) .ls-caption { order: 2; margin-top: 12px; }
.ls.pb .pc-st { rotate: 0deg; width: 46px; height: 38px; aspect-ratio: auto; box-sizing: border-box; padding: 3px; background: #fbf8f1; border-radius: 6px; filter: none; opacity: .8;
  box-shadow: 0 0 0 1px rgba(42, 36, 24, .05), 0 1px 1px rgba(42, 36, 24, .10), 0 3px 6px rgba(42, 36, 24, .08);
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1), opacity 200ms ease-out, box-shadow 200ms ease-out; }
.ls.pb .pc-st img { padding: 0; background: none; -webkit-mask: none; mask: none; border-radius: 3px; }
.ls.pb .pc-st:is(:hover, :focus-visible) { transform: translateY(-2px); opacity: 1; filter: none; }
.ls.pb .pc-st.is-on { transform: translateY(-4px); opacity: 1; box-shadow: 0 0 0 1px rgba(42, 36, 24, .08), 0 2px 3px rgba(42, 36, 24, .12), 0 8px 14px rgba(42, 36, 24, .14); }   /* the place the book is open at */
.ls.pb .pc-st.is-on img { filter: none; }
.ls.pb .pc-st:active { transform: scale(.96); transition-duration: 90ms; }
[data-theme="dark"] .ls.pb .pc-st { background: #ebe2d1; box-shadow: 0 1px 1px rgba(0, 0, 0, .5), 0 3px 8px rgba(0, 0, 0, .45); }

/* ---------- the guest card is a small loose card, half under the book's right edge ----------
   Tucked, it is just a card with a stamp on it: no form to read at that size. All of it is one button. It slides out
   sideways clear of the book, comes up on top, and settles in front at full size. js/postcard.js still drives it with
   the same classes it used to turn the card over. */
.ls.pb .pc-card:not(.is-photo) {
  --pb-tuck: translate(var(--pb-tx, 30%), var(--pb-ty, 10%)) rotate(11deg) scale(.34);
  --pb-clear: translate(calc(var(--pb-tx, 30%) + 24cqw), var(--pb-ty, 10%)) rotate(5deg) scale(.4);
  --pb-out: translate(0, 7%) scale(1);
  --pb-under: translate(calc(var(--pb-tx, 30%) - 30cqw), calc(var(--pb-ty, 10%) + 6cqw)) rotate(3deg) scale(.34); }   /* right under the book: where a fresh card waits after one is posted */
.ls.pb .pc-card:not(.is-photo) .pc-inner { transform: none; transform-style: flat; transition: none; }
.ls.pb .pc-card:not(.is-photo) .pc-face { backface-visibility: visible; -webkit-backface-visibility: visible; }
.ls.pb .pc-card:not(.is-photo) .pc-front { transform: none; z-index: 1; }
.ls.pb .pc-card:not(.is-photo) .pc-back { z-index: 0; transform: var(--pb-tuck); visibility: visible; opacity: 0; transition: opacity 240ms ease-out, translate 260ms cubic-bezier(0.2, 0, 0, 1); }
.ls.pb.pb-open .pc-card:not(.is-photo) .pc-back { opacity: 1; }           /* only once the book is open: shut, it would lie there uncovered */
.ls.pb .pc-card:not(.is-photo) .pc-back > :not(.pc-paper):not(.pc-right), .ls.pb .pc-card:not(.is-photo) .pc-back .pc-right > :not(.pc-stamp) { transition: opacity 200ms ease-out; }
.ls.pb .pc-card:not(.is-photo):not(.is-flipped) .pc-back.is-away > :not(.pc-paper):not(.pc-right),
.ls.pb .pc-card:not(.is-photo):not(.is-flipped) .pc-back.is-away .pc-right > :not(.pc-stamp) { opacity: 0; }
.ls.pb .pc-card:not(.is-photo).is-flipped .pc-back { z-index: 3; opacity: 1; transform: var(--pb-out); }   /* the slide between the two is one reversible animation (hero-book.js) */
.ls.pb .pc-card:not(.is-photo):not(.is-flipped) .pc-back:not(.is-away) { opacity: 1; }
.ls.pb .pc-card:not(.is-photo):has(.pc-back:not(.is-away)) { z-index: 4; }  /* out: above the tabs and the caption */
/* the whole tucked card is the button: the same as "Leave a note" */
.pb-tuck { position: absolute; inset: 0; transform: var(--pb-tuck); z-index: 3; padding: 0; border: 0; background: none; cursor: pointer; display: none; border-radius: 24px; -webkit-tap-highlight-color: transparent; }
.ls.pb.pb-open .pc-card:not(.is-flipped) .pb-tuck { display: block; }
.pb-tuck:focus-visible { outline: 4px dashed var(--ink, #111); outline-offset: 6px; }
.ls.pb .pc-inner:has(.pb-tuck:is(:hover, :focus-visible)) .pc-back { translate: 10px -2px; }   /* it eases out a little, to say it can be taken */

/* "Send me a postcard", in the card's own handwriting, with an arrow drawn down to it */
.pb-hint { position: absolute; left: calc(var(--pb-cx, 100%) + 14px); top: calc(var(--pb-cy, 100%) - 31cqw * .75 - 96px); z-index: 3; pointer-events: none; white-space: nowrap; rotate: -5deg;
  font-family: 'Bradley Hand', 'Segoe Print', 'Apple Chancery', 'Noto Sans JP', cursive; font-size: 17px; line-height: 1.2; letter-spacing: 0; color: var(--ink, #111);
  opacity: 0; translate: 0 4px; transition: opacity 320ms ease-out, translate 420ms cubic-bezier(0.2, 0, 0, 1); }
.pb-hint svg { display: block; margin: 2px 0 0 -34px; opacity: .8; }
.ls.pb.pb-open .pc-card:not(.is-flipped):not(.is-photo) .pb-hint { opacity: .72; translate: 0 0; transition-delay: 500ms; }
/* a card is on its way to the post box: the corner is empty until the next one slides out, so nothing points at it or takes a click */
.ls.pb.pb-open.pb-sent .pc-card:not(.is-flipped):not(.is-photo) .pb-hint { opacity: 0; translate: 0 4px; transition-delay: 0ms; }
.ls.pb.pb-open.pb-sent .pc-card:not(.is-flipped) .pb-tuck { display: none; }
@media (max-width: 860px) { .pb-hint { display: none; } }   /* no room beside the book on a narrow screen: the caption's own "Leave a note" does the asking */

@media (prefers-reduced-motion: reduce) {
  .pb-poster, .pb-stage canvas:not(.pb-poster), .ls.pb .pc-st, .pb-hint { transition: none; }
  .ls.pb .pc-card:not(.is-photo) .pc-back { transition: opacity 200ms ease-out; }
  .ls.pb .pc-card:not(.is-photo).is-flipped .pc-back { visibility: visible; }
}