/* A Paper Note folded in three (#1151, paper-unfold.js): the sheet's middle third, its upper and lower thirds on
   flaps hinged to it, each showing its own third of the sheet, and a wax seal where the outer flap's edge lands.
   Open, the three thirds make the whole sheet; `.is-folded` closes both flaps over the middle and shows the seal.
   On the reveal table it takes the room a card does; in the inspector (`.is-over-sheet`) it lies over the sheet. */
.paper-unfold { position: relative; width: 100%; aspect-ratio: 688 / 960; margin: 0 auto; perspective: 1400px; }
.paper-unfold.is-over-sheet { position: absolute; inset: 0; width: auto; aspect-ratio: auto; margin: 0; z-index: 4; }
.paper-unfold-sheet { position: absolute; inset: 0; transform-style: preserve-3d; }
.paper-unfold-middle, .paper-unfold-flap-face { overflow: hidden; background: linear-gradient(135deg, #f6efdd, #ebe1c7 55%, #f3ecd8); }
.paper-unfold-middle { position: absolute; inset: 33.333% 0; }
.paper-unfold-flap { position: absolute; left: 0; right: 0; height: 33.333%; transform-style: preserve-3d; }
.paper-unfold-flap.is-bottom { bottom: 0; transform-origin: top center; transform: translateZ(1px) rotateX(0deg); }
.paper-unfold-flap.is-top { top: 0; transform-origin: bottom center; transform: translateZ(2px) rotateX(0deg); }
.paper-unfold.is-folded .paper-unfold-flap.is-bottom { transform: translateZ(1px) rotateX(180deg); }
.paper-unfold.is-folded .paper-unfold-flap.is-top { transform: translateZ(2px) rotateX(-180deg); }
.paper-unfold-flap-face { position: absolute; inset: 0; backface-visibility: hidden; }
/* Each third shows its slice of the whole sheet, three thirds tall, slid up to it (paper-unfold.js). */
.paper-unfold-clip { position: absolute; left: 0; right: 0; height: 300%; pointer-events: none; }
.paper-unfold-clip > .paper-note { width: 100%; height: 100%; aspect-ratio: auto; box-shadow: inset 0 0 28px rgba(120, 95, 40, .12); }
/* The outer side of each flap, seen while it is folded, is the sheet's back: plainer, darker at the hinge. */
.paper-unfold-flap::after { content: ''; position: absolute; inset: 0; border-radius: 3px; border: 2px solid #b9a67a; box-sizing: border-box; background: linear-gradient(180deg, #ebe3cc, #ddd2b3); transform: rotateX(180deg); backface-visibility: hidden; }
.paper-unfold-flap.is-top::after { background: linear-gradient(0deg, #ebe3cc, #ddd2b3); }
.paper-unfold-seal { position: absolute; top: 66.666%; left: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%) translateZ(3px); border-radius: 50%; background: center / 125% no-repeat; mix-blend-mode: multiply; filter: drop-shadow(2px 3px 2px rgba(60, 20, 20, .35)); opacity: 0; z-index: 2; pointer-events: none; }
.paper-unfold.is-folded .paper-unfold-seal { opacity: 1; }
.paper-unfold-face { position: absolute; inset: 0; opacity: 0; }