/* Mist-backed greeting card with a hinged, double-sided cover. */
#finale{background:#cbd4e9;justify-content:flex-start;overflow:auto;padding:128px 20px 70px;perspective:1800px}
#finale:before,#finale:after{display:none}
#finale .earth-background{position:fixed;opacity:.76;filter:blur(1px);pointer-events:none}
#finale .earth-wash{position:fixed;background:linear-gradient(180deg,#dce5f2b0,#e3e9f359 40%,#dce3f3eb 85%),radial-gradient(ellipse,#f8f4ff30,transparent 70%);pointer-events:none}
.wish-heading{position:absolute;top:26px;left:65px;right:65px;text-align:center}
.wish-heading p{font-size:10px;letter-spacing:3px;color:#9b8655;margin:0 0 10px}
#finale .wish-heading h1{font-size:clamp(24px,3.4vw,38px);margin:0;letter-spacing:3px;color:#4c4b6b}
.wish-book{position:relative;width:min(430px,82vw);margin:auto;perspective:1600px;isolation:isolate;transform:rotate(-3deg) scale(.82);transition:transform 1.5s cubic-bezier(.22,.7,.2,1)}
#finale #final-card{width:100%;min-height:0;margin:0;padding:12px;animation:none;border-radius:9px;box-shadow:0 22px 65px #55587938,3px 3px 0 #e4dac8,6px 6px 0 #fff8e7}
#finale .card-inner{min-height:400px;padding:25px 20px}
#finale #reopen-card{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);margin:0;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .4s}
#wish-cover{position:absolute;z-index:3;inset:0;width:100%;height:100%;padding:0;border:0;background:none;transform-style:preserve-3d;transform-origin:left center;transition:transform 1.65s cubic-bezier(.3,.05,.18,1),opacity .35s 1.35s;box-shadow:3px 4px 9px #70657b29;border-radius:8px;text-align:center;color:#77708a}
.cover-front,.cover-back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #fff;border-radius:8px;background:linear-gradient(125deg,#fffef3,#f9f0df 68%,#e7e4f1);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cover-front:before,.cover-back:before{content:'';position:absolute;inset:18px;border:1px solid #d9bd7b;border-radius:4px;pointer-events:none}
.cover-front:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#7b698429,transparent 5%,#fff7 9%,transparent 15%);pointer-events:none}
.cover-front small{font-size:9px;letter-spacing:3px;color:#ad9159}
.cover-heart{font-size:76px;color:#d99db4;margin:34px 0 20px;font-weight:normal}
.cover-front strong{font-size:24px;letter-spacing:3px;font-weight:500;color:#625c7c}
.cover-rule{height:1px;width:58px;background:#c8ab69;margin:24px 0}
.cover-front>span:not([class]){font-size:12px;letter-spacing:2px;color:#9b8b9d}
.cover-front em{font-size:11px;font-style:normal;letter-spacing:3px;color:#b19860;margin-top:44px}
.cover-back{transform:rotateY(180deg);background:linear-gradient(90deg,#e8dcc7,#fffbed 80%,#d2c3ae);font-size:54px;color:#d5bb80}
#finale.wish-open .wish-book{transform:rotate(0) scale(1)}
#finale.wish-open #wish-cover{transform:rotateY(-165deg);opacity:0;pointer-events:none}
#finale.wish-open #reopen-card{opacity:1;visibility:visible;transition-delay:1.65s}
@media(max-width:600px){#finale{padding-top:112px;padding-bottom:80px}.wish-heading{top:25px;left:50px;right:50px}#finale .wish-heading h1{font-size:23px;letter-spacing:1px}#finale .wish-heading p{font-size:9px;letter-spacing:2px}#finale .card-inner{min-height:365px;padding:24px 16px}.cover-front strong{font-size:19px;letter-spacing:1px}.cover-front small{font-size:8px;letter-spacing:2px}.cover-heart{margin:25px 0 15px}.cover-front em{margin-top:30px}}
@media(prefers-reduced-motion:reduce){.wish-book,#wish-cover,#finale #reopen-card{transition:none!important}}

#finale-music-toggle{position:absolute;right:18px;top:24px;z-index:5;border:1px solid #fff9;border-radius:24px;padding:10px 13px;background:#fff8e8c9;color:#776980;font-size:11px;cursor:pointer}
@media(max-width:600px){#finale-music-toggle{top:auto;bottom:14px;right:14px;position:fixed;font-size:10px;padding:8px 11px}}
/* Two physical gates open away from the centre seam. */
.wish-book{width:min(430px,56vw);transform:rotate(-2deg) scale(.92)}
#finale.wish-open .wish-book{transform:rotate(0) scale(1)}
#wish-cover{transform:none!important;opacity:1!important;box-shadow:none;transition:none;pointer-events:auto}
#wish-cover .cover-back{display:none}
#wish-cover .cover-front{z-index:5;background:transparent;border:0;pointer-events:none;transition:opacity .28s;backface-visibility:visible}
#wish-cover .cover-front:before,#wish-cover .cover-front:after{display:none}
.fold-wing{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;transition:transform 1.55s cubic-bezier(.32,.05,.2,1);z-index:2}
.fold-left{left:0;transform-origin:left center}
.fold-right{right:0;transform-origin:right center;transition-delay:.12s}
.wing-outside,.wing-inside{position:absolute;inset:0;backface-visibility:hidden;border:1px solid #dfcba0;background:linear-gradient(110deg,#fffdf2,#f4ead9);box-shadow:inset 0 0 0 9px #fff8ed;display:grid;place-items:center;color:#d2b775;font-size:34px}
.fold-left .wing-outside{border-radius:8px 0 0 8px;background:linear-gradient(90deg,#fffcf0 80%,#e6d8c3)}
.fold-right .wing-outside{border-radius:0 8px 8px 0;background:linear-gradient(90deg,#d6c4aa,#fff8e9 9%,#fcf5e7)}
.wing-inside{transform:rotateY(180deg);background:linear-gradient(90deg,#f7efdf,#fffcf0);box-shadow:inset 0 0 20px #c3ad8622}
#finale.wish-open .fold-left{transform:rotateY(-170deg)}
#finale.wish-open .fold-right{transform:rotateY(170deg)}
#finale.wish-open #wish-cover .cover-front{opacity:0}
#finale.wish-open #wish-cover{pointer-events:none}
@media(max-width:600px){.wish-book{width:58vw}#finale .card-inner{padding:25px 8px}#finale .card-inner h2{font-size:19px;letter-spacing:1px}#finale .card-message{font-size:11px;letter-spacing:0}#finale .card-signature{font-size:8px}.cover-front strong{font-size:16px}.cover-front small{font-size:7px;letter-spacing:1px}.cover-front>span:not([class]){font-size:10px;letter-spacing:0}}
@media(prefers-reduced-motion:reduce){.fold-wing{transition:none}}
@media(max-width:600px){.wish-book{width:46vw}#finale .card-inner h2{font-size:16px}#finale .card-message{font-size:10px}#finale .card-ribbon{font-size:7px;letter-spacing:1px}#finale .card-greeting{font-size:11px;letter-spacing:1px}.cover-front strong{font-size:14px}.cover-front small{font-size:6px}.cover-front>span:not([class]){font-size:9px}}

/* Message fills the complete unfolded sheet. */
#finale #final-card{position:relative;left:0;width:100%;transition:width .65s .95s ease,left .65s .95s ease}
#finale.wish-open #final-card{left:-50%;width:200%}
#finale .fold-wing{transition:transform 1.55s cubic-bezier(.32,.05,.2,1),opacity .45s 1.15s}
#finale.wish-open .fold-wing{opacity:0}
#finale.wish-open .card-inner h2{font-size:clamp(26px,3vw,38px);letter-spacing:3px}
#finale.wish-open .card-message{font-size:15px;line-height:2;letter-spacing:1px}
#finale.wish-open .card-inner{padding:24px 28px;min-height:400px}
#finale.wish-open .card-greeting{font-size:14px;letter-spacing:2px}
#finale.wish-open .card-signature{font-size:12px}
#finale.wish-open .card-ribbon{font-size:10px;letter-spacing:3px}
@media(max-width:600px){#finale.wish-open .card-inner{padding:24px 16px;min-height:365px}#finale.wish-open .card-inner h2{font-size:25px;letter-spacing:1px}#finale.wish-open .card-message{font-size:12px}#finale.wish-open .card-signature{font-size:10px}}
@media(prefers-reduced-motion:reduce){#finale #final-card{transition:none}}

.wish-book{width:min(430px,46vw)}


/* Original customer artwork, fully visible without cropping. */
#finale #final-card{padding:0;min-height:400px;display:flex;align-items:center;background:#fff9ec}
#finale .customer-wish-image{display:block;width:100%;height:auto;object-fit:contain;opacity:0;border-radius:8px;transition:opacity .45s 1s}
#finale.wish-open .customer-wish-image{opacity:1}
#finale.wish-open #final-card{min-height:0}
@media(max-width:600px){#finale #final-card{min-height:340px}#finale.wish-open #final-card{min-height:0}}
@media(prefers-reduced-motion:reduce){#finale .customer-wish-image{transition:none}}