#trip.delivery-scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: #15182b;
  --journey-time: 3.6s;
}
#trip.delivery-scene[hidden] { display: none; }
.delivery-route, .delivery-letter {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.delivery-courier {
  position: absolute;
  left: 17%;
  top: 73%;
  width: 25%;
  transform: translate(-50%, -50%);
  animation: courier-path var(--journey-time) linear both;
}
.delivery-letter {
  filter: drop-shadow(0 2px 3px #120e20aa);
}
.delivery-courier::after {
  content: "";
  position: absolute;
  left: 47.5%;
  top: 56%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe9 2%, #ffe49acc 16%, #fbb94c55 46%, transparent 72%);
  animation: courier-seal .68s ease-out both;
}
#trip.delivery-scene::after {
  content: "";
  position: absolute;
  left: 65.8%;
  top: 61%;
  width: 5%;
  aspect-ratio: 1;
  border: 1px solid #ffdfaa;
  border-radius: 50%;
  box-shadow: 0 0 9px #ffc772, inset 0 0 9px #ffc772;
  background: radial-gradient(circle, #fff3d5 0%, #ffcc7355 25%, transparent 65%);
  opacity: 0;
  animation: courier-reception .66s 2.94s ease-out both;
}
@keyframes courier-seal {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
  44% { opacity: .95; transform: translate(-50%, -50%) scale(.85); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.14); }
}
@keyframes courier-path {
  0%, 19% { left: 17%; top: 73%; transform: translate(-50%, -50%) rotate(4deg) scale(1); }
  8% { transform: translate(-50%, -50%) rotate(4deg) scale(.92, .88); }
  27% { left: 18%; top: 67%; transform: translate(-50%, -50%) rotate(-12deg) scale(.85); }
  37% { left: 25%; top: 65%; transform: translate(-50%, -50%) rotate(-17deg) scale(.66); }
  49% { left: 35%; top: 58%; transform: translate(-50%, -50%) rotate(-22deg) scale(.48); }
  58% { left: 43%; top: 49%; transform: translate(-50%, -50%) rotate(-10deg) scale(.35); }
  64% { left: 49%; top: 46.5%; transform: translate(-50%, -50%) rotate(2deg) scale(.28); }
  70% { left: 54%; top: 48.5%; transform: translate(-50%, -50%) rotate(13deg) scale(.23); }
  77% { left: 60%; top: 55.5%; transform: translate(-50%, -50%) rotate(20deg) scale(.17); opacity: 1; }
  84%, 100% { left: 65.8%; top: 61%; transform: translate(-50%, -50%) rotate(17deg) scale(.05); opacity: 0; }
}
@keyframes courier-reception {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.16); }
  22% { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
}
@media (prefers-reduced-motion: reduce) {
  .delivery-courier, .delivery-courier::after, #trip.delivery-scene::after { animation: none; }
}


/* A hinged paper book. All raised pieces share its tabletop perspective. */
#receipt {
  width:min(568px,calc(100% - 20px));max-height:94vh;max-height:94dvh;
  margin:auto;padding:0;overflow:auto;overscroll-behavior:contain;color-scheme:light;color:#372d37;
  background:radial-gradient(ellipse at 50% 31%,#fffaf0,#f7eedf 75%);
  border:1px solid #c9a877;border-radius:13px;box-shadow:0 26px 100px #0a0916a0,inset 0 0 0 5px #fff9ea;
}
#receipt[open]{animation:keepsake-arrival .5s cubic-bezier(.2,.75,.25,1) both}
#receipt.standalone-card{position:fixed;inset:0;z-index:1000;box-shadow:0 0 0 100vmax #101323ce}
#receipt::backdrop{background:#101323ce;backdrop-filter:blur(6px)}
@keyframes keepsake-arrival{from{opacity:0;transform:translateY(19px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#receipt[open]{animation:none}}
.keepsake-head,.keepsake-footer{display:block;width:auto;height:auto;max-width:none;margin:0;border:0}
.keepsake-head{text-align:center;padding:17px 16px 2px}
.keepsake-head small{font:600 10px/1.4 Georgia,serif;letter-spacing:.20em;color:#836447}
.keepsake-head h2{margin:4px 0 0;font:600 clamp(20px,4vw,27px)/1.35 Georgia,"Songti SC","SimSun",serif;letter-spacing:.07em;color:#332e3e}
.keepsake-head h2:focus{outline:none}
.paper-theater{
  --opening:0;--yaw:-6deg;--pitch:0deg;
  position:relative;isolation:isolate;width:100%;aspect-ratio:1.35;container-type:inline-size;
  overflow:hidden;perspective:1050px;perspective-origin:50% 41%;
  background:radial-gradient(ellipse at 50% 74%,#e1d1b552,transparent 61%);
  cursor:grab;touch-action:pan-y;user-select:none;
}
.paper-theater:active{cursor:grabbing}
.paper-theater:focus-visible{outline:2px dashed #977348;outline-offset:-5px}
.paper-book{
  position:absolute;left:16%;width:68%;aspect-ratio:1.70;top:calc(20% + var(--opening) * 38%);
  transform-origin:50% 0;transform-style:preserve-3d;
  transform:rotateY(var(--yaw)) rotateX(calc(27deg + var(--opening) * 33deg + var(--pitch)));
}
.book-base,.book-lid,.cover-face,.cover-inside{position:absolute;inset:0}
.book-base{
  border:2px solid #bc985d;background:repeating-linear-gradient(9deg,#cdbb9410 0 1px,transparent 1px 4px),linear-gradient(#ccb990,#fff4d9 15%,#f3e4c1 91%,#e5cda3);
  box-shadow:0 2px 0 #ead9b8,0 4px 0 #8f714d,4px 9px 10px #705b383a;
}
.book-base::before{content:"";position:absolute;inset:4%;border:1px solid #baa06b;outline:1px dotted #cfb786;outline-offset:2px}
.book-base>span{position:absolute;bottom:4.6%;width:100%;text-align:center;color:#756149;font:600 1.38cqw/1.2 Georgia,serif;letter-spacing:.12em}
.book-lid{transform-origin:center top;transform-style:preserve-3d;transform:translateZ(4px) rotateX(calc(var(--opening) * 128deg))}
.cover-face,.cover-inside{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cover-face{
  display:grid;place-items:center;overflow:hidden;border:1px solid #856a45;border-radius:3px;
  background: #293d51 url('/art/delivery/keepsake-cover.webp') center/100% 100% no-repeat;
  box-shadow:inset 0 0 16px #12162980,0 2px 0 #dbc594,0 4px 0 #79694c;
}

.cover-seal{position:relative;width:58%;height:64%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#ffebc0}
.cover-seal small{font:600 1.12cqw/1.3 Georgia,serif;letter-spacing:.18em;color:#ead39e}
.cover-seal b{font:600 5.5cqw/1.5 "Songti SC","SimSun",Georgia,serif;letter-spacing:.13em;text-indent:.13em;color:#ffe5a6;text-shadow:0 1px 1px #151a24}
.cover-seal em{font:italic 2.25cqw/1.12 Georgia,serif;color:#edce90}
.cover-seal span{display:block;max-width:90%;margin-top:1.6cqw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#eee2c9;font:500 1.8cqw/1.2 system-ui}
.cover-inside{padding:3px;border:2px solid #bd9d60;background:#47576b url('/art/delivery/keepsake-lake.webp') center / cover no-repeat;transform:rotateX(180deg) translateZ(.5px)}

.paper-platform{
  position:absolute;left:17%;top:28%;width:66%;height:49%;border-radius:50%;border:1px solid #b49861;
  background:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 8px,#dfd4b84d 9px 10px),linear-gradient(135deg,#93aaa4,#c2c6aa);
  transform:translateZ(1px);
}
.pop-photo,.paper-balloons,.paper-banner{position:absolute;transform-origin:center bottom;transform:translateZ(2px) rotateX(calc(var(--opening) * -60deg))}
.pop-photo{left:29%;bottom:39%;width:42%;height:57%;padding:4px;background:#fcf4e3;border:1px solid #b4996a;box-shadow:inset 0 0 0 2px #f9edcd,0 1px 2px #76664680}
.photo-mount{position:absolute;inset:6%;background:#f7f0e3 url("/art/delivery/birthday-cake-21.jpg") center 50% / 156% auto no-repeat;box-shadow:inset 0 0 0 1px #d9c9ad}
.photo-mount i{position:absolute;width:13%;height:20%;background:linear-gradient(135deg,#816546,#ecd397 48%,#b49964 51%,transparent 53%)}
.photo-mount i:nth-child(1){left:-1px;top:-1px}.photo-mount i:nth-child(2){right:-1px;top:-1px;transform:scaleX(-1)}.photo-mount i:nth-child(3){bottom:-1px;left:-1px;transform:scaleY(-1)}.photo-mount i:nth-child(4){bottom:-1px;right:-1px;transform:scale(-1)}
.paper-balloons{bottom:40%;width:17%;height:53%}.balloons-left{left:7%}.balloons-right{right:7%}
.paper-balloons i{position:absolute;left:8%;top:8%;width:48%;height:42%;border-radius:49% 49% 46% 45%;border:1px solid #a17169;background:radial-gradient(ellipse at 34% 26%,#f4d6bd,#d89786 57%,#ae7769);transform:rotate(-9deg)}
.paper-balloons i::after{content:"";position:absolute;top:100%;left:50%;height:130%;width:6px;border-left:1px solid #947b5a;border-radius:50%}
.paper-balloons i+i{left:49%;top:31%;background:radial-gradient(ellipse at 34% 26%,#fff0c7,#d4b36d 67%,#b19357);transform:rotate(8deg)}
.balloons-right i{background:radial-gradient(ellipse at 34% 26%,#c8dcd0,#77a39e 67%,#638289)}.balloons-right i+i{background:radial-gradient(ellipse at 34% 26%,#e6dae2,#ab97ac 67%,#907d94)}
.paper-banner{
  left:12%;bottom:16%;width:76%;padding:.5% 5%;text-align:center;color:#5a412e;
  background:linear-gradient(95deg,#b89559,#f1d69c 15%,#fff0c4 52%,#ddbf84 88%,#b9985b);
  clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%);font:600 2.4cqw/1.6 Georgia,"SimSun",serif;letter-spacing:.08em;
}
.paper-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.paper-confetti i{position:absolute;top:3%;width:4px;height:7px;animation:paper-shower 1.65s ease-out both}
@keyframes paper-shower{0%{opacity:0;transform:translateY(-8px) rotate(0)}12%{opacity:.88}85%{opacity:.65}100%{opacity:0;transform:translate(var(--drift),40cqw) rotate(240deg)}}
.fold-controls{display:grid;justify-items:center;gap:3px;margin:0 12px 10px}
#fold-toggle{min-height:42px;min-width:138px;padding:7px 22px;border-radius:7px;border:1px solid #786747;background:#34495a;color:#ffebbc;font-weight:700;box-shadow:0 2px 0 #1d3041}
.fold-hint,.fold-range{font:11px/1.5 system-ui;color:#77656b}
.fold-range{display:flex;align-items:center;gap:7px;margin:0;font-weight:400}
.fold-range input{width:94px;height:22px;margin:0;padding:0;accent-color:#657d82;cursor:pointer}
.reply-copy{margin:10px clamp(16px,5%,27px);padding:12px 15px;background:#fff9ef;border-left:3px solid #d1a1a9;border-radius:3px}
.reply-copy p{margin:0;font-size:14px;line-height:1.7;overflow-wrap:anywhere}
#thanks-to{font-weight:700}.reply-copy .reply-sign{text-align:right;font:600 13px/1.6 Georgia,"SimSun",serif;color:#765668}
.keepsake-footer{border-top:1px dashed #c8b5a0;padding:10px 16px 14px;text-align:center}
#receipt-status{margin:0 0 5px;font:12px/1.5 system-ui;color:#76646b;letter-spacing:normal}
.postcard-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
.postcard-actions a,.postcard-actions button{padding:7px 14px;min-height:42px;font:600 13px/1.4 system-ui;border-radius:8px;letter-spacing:normal}
.postcard-actions a{background:#514259;border-color:#514259;color:#fff1df}.postcard-actions a:hover{background:#68536e}
.postcard-actions button{border-color:#bcaa98;background:transparent;color:#654e5b}
#receipt :is(a,button,input):focus-visible{outline:3px solid #815872;outline-offset:2px}
#arrival-summary{text-align:center}#arrival-summary h2{margin:6px 0 14px}
@media(max-width:600px){.paper-book{left:14%;width:72%}.paper-theater{aspect-ratio:1.21}.cover-seal b{font-size:7cqw}.paper-banner{font-size:2.9cqw}}
@media(prefers-reduced-motion:reduce){.paper-confetti{display:none}}