.envelope-scene{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 25%,#284561 0,#112941 48%,#071725 100%);color:#f4e7c9;isolation:isolate;padding:clamp(20px,5vw,70px)}.envelope-scene[hidden]{display:none}.envelope-scene:before{content:'';position:absolute;inset:0;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.35' d='M0 0h180v180H0z'/%3E%3C/svg%3E");pointer-events:none}.envelope-composition{width:min(940px,88vw);position:relative;text-align:center;animation:envelope-arrive 1.3s cubic-bezier(.2,.8,.2,1) both}.envelope-kicker{font:11px/1.5 Arial,sans-serif;letter-spacing:.35em;text-transform:uppercase;margin:0 0 50px;color:#cfbf96}.envelope-object{position:relative;width:100%;aspect-ratio:1.75;perspective:1600px;filter:drop-shadow(0 35px 35px #0006);margin:0 auto}.envelope-back{position:absolute;inset:0;border-radius:6px;background:linear-gradient(150deg,#2e4860,#142d44 65%);box-shadow:inset 0 0 0 1px #8597a538}.envelope-letter{position:absolute;z-index:2;inset:5% 7% 8%;background:repeating-linear-gradient(45deg,#fffdf7,#fffdf7 3px,#fcf9f0 3px,#fcf9f0 4px);border:1px solid #cab889;box-shadow:0 0 0 8px #f5efe1,0 3px 15px #0003;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#1c3044;transform:translateY(2%);transition:transform 1.2s cubic-bezier(.22,.7,.17,1),opacity .6s;gap:12px}.envelope-letter:before{content:'';position:absolute;inset:14px;border:1px solid #bdab7866;pointer-events:none}.envelope-letter small{font:10px/1.5 Arial,sans-serif;letter-spacing:.25em;text-transform:uppercase}.envelope-letter strong{font:italic clamp(26px,5vw,64px)/1.1 Georgia,serif;font-weight:400;max-width:90%;overflow-wrap:anywhere}.envelope-letter em{font:13px Georgia,serif;font-style:normal;letter-spacing:.12em}.envelope-letter .letter-plane{font-size:25px;color:#a28b50}.envelope-front{position:absolute;inset:0;z-index:4;border-radius:5px;background:linear-gradient(32deg,#23415c 0%,#18334c 48%,#29465f 100%);clip-path:polygon(0 0,50% 53%,100% 0,100% 100%,0 100%);box-shadow:inset 0 -2px 1px #fff1}.envelope-fold{position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(147deg,transparent 49.8%,#92a0aa22 50%,transparent 50.3%),linear-gradient(213deg,transparent 49.8%,#92a0aa22 50%,transparent 50.3%);clip-path:polygon(0 0,50% 53%,100% 0,100% 100%,0 100%)}.envelope-flap{position:absolute;inset:0;z-index:6;transform-origin:center top;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.3,.1,.2,1);background:linear-gradient(170deg,#36516b,#1b354f 60%);clip-path:polygon(0 0,100% 0,50% 58%);filter:drop-shadow(0 4px 2px #0008);backface-visibility:visible}.envelope-seal{position:absolute;top:49%;left:50%;width:clamp(76px,10vw,112px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:8;background:none;border:0;padding:0;cursor:pointer;color:#72551c;filter:drop-shadow(1px 6px 5px #0007);border-radius:50%}.envelope-seal:focus-visible{outline:2px solid #fff5cb;outline-offset:12px}.seal-half{position:absolute;inset:0;display:block;border-radius:47% 52% 46% 51% / 49% 45% 53% 47%;background:radial-gradient(circle at 37% 28%,#f0dc9b,#c6a653 45%,#a47a31 75%,#d2b363 95%);box-shadow:inset 1px 2px 2px #fff7c6,inset -2px -3px 4px #684714;transition:transform .65s,opacity .55s}.seal-half:before{content:'';position:absolute;inset:12%;border-radius:50%;border:2px solid #9e7a38;box-shadow:1px 1px 1px #f3dc9b,inset 1px 1px 2px #75551f}.seal-left{clip-path:polygon(0 0,52% 0,45% 22%,54% 39%,44% 56%,53% 73%,46% 100%,0 100%)}.seal-right{clip-path:polygon(52% 0,100% 0,100% 100%,46% 100%,53% 73%,44% 56%,54% 39%,45% 22%)}.seal-monogram{position:relative;display:grid;place-items:center;inset:0;font:italic clamp(19px,2.5vw,29px) Georgia,serif;text-shadow:0 1px 1px #ffe9a9;transition:opacity .3s}.envelope-caption{margin:38px 0 0;font:11px/1.7 Arial,sans-serif;letter-spacing:.23em;text-transform:uppercase;color:#d5c59f}.envelope-close{position:absolute;right:25px;top:22px;z-index:10;border:1px solid #b6ab903f;background:transparent;color:#eadfc9;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:22px}.envelope-opening .seal-left{transform:translate(-40%,-6%) rotate(-24deg);opacity:0}.envelope-opening .seal-right{transform:translate(40%,8%) rotate(25deg);opacity:0}.envelope-opening .seal-monogram{opacity:0}.envelope-opening .envelope-flap{transform:rotateX(180deg);transition-delay:.35s;z-index:1}.envelope-opening .envelope-letter{transform:translateY(-55%);transition-delay:1s;z-index:3}.envelope-opening .envelope-caption{opacity:0;transition:opacity .3s}.envelope-departing{opacity:0;transform:scale(1.06);transition:opacity .7s,transform .9s;pointer-events:none}@keyframes envelope-arrive{from{opacity:0;transform:translateY(35px) scale(.96)}to{opacity:1;transform:none}}@media(max-width:600px){.envelope-composition{width:94vw}.envelope-object{aspect-ratio:1.4}.envelope-kicker{margin-bottom:42px;font-size:9px;letter-spacing:.25em}.envelope-caption{font-size:10px;letter-spacing:.16em;margin-top:35px}.envelope-letter{gap:10px}.envelope-letter strong{font-size:clamp(25px,7vw,40px)}.envelope-letter small{font-size:8px}.envelope-letter em{font-size:11px}}@media(prefers-reduced-motion:reduce){.envelope-composition{animation:none}.envelope-scene *{transition:none!important}.envelope-departing{transition:none}.envelope-opening .envelope-letter{transform:none}}
.envelope-composition{width:min(940px,88vw,calc((100svh - 210px)*1.75))}.envelope-kicker{margin-bottom:36px}.envelope-caption{margin-top:28px}@media(max-width:600px){.envelope-composition{width:min(94vw,calc((100svh - 190px)*1.4))}}@media(max-height:480px){.envelope-kicker{margin-bottom:18px}.envelope-caption{margin-top:18px}.envelope-composition{width:min(75vw,calc((100svh - 130px)*1.75))}}

/* Customer-supplied wax seal; transparent padding cropped by CSS. */
.envelope-seal{width:clamp(88px,11vw,124px)}
.envelope-seal .seal-half{border-radius:0;background: url("gold-wax-seal.png") center center/136% 136% no-repeat;box-shadow:none}
.envelope-seal .seal-half:before{display:none}
.envelope-seal .seal-monogram{color:#76501c;font-weight:600;font-size:clamp(17px,2.2vw,25px);text-shadow:0 1px 1px #fff3c9;letter-spacing:-.03em}

/* Lift the intact seal from its lower edge, then peel it away. */
.envelope-seal{transform-origin:50% 12%;transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.3,.1,.3,1),opacity .35s .75s,filter 1s;}
.envelope-seal .seal-left{clip-path:none}
.envelope-seal .seal-right{display:none}
.envelope-opening .envelope-seal{transform:translate(-50%,-95%) perspective(450px) rotateX(65deg) rotateZ(-16deg) scale(.92);opacity:0;filter:drop-shadow(4px 20px 12px #0007)}
.envelope-opening .seal-left{transform:none;opacity:1}
.envelope-opening .seal-monogram{opacity:1}
.envelope-opening .envelope-flap{transition-delay:.8s}
.envelope-opening .envelope-letter{transition-delay:1.35s}
@media(prefers-reduced-motion:reduce){.envelope-seal{transition:none!important}}

/* Flexible sticker: peel from the bottom, reveal the paper back, then lift away. */
.envelope-seal{perspective:500px;overflow:visible}
.envelope-seal .seal-left{clip-path:inset(0 0 0 0);transform-origin:50% 0;backface-visibility:hidden}
.envelope-seal .seal-right{display:block;inset:auto 6% 0;height:18%;background:linear-gradient(180deg,#b69a5b 0%,#fff9e7 17%,#f2e4c1 58%,#c5ad73 94%);border-radius:50% 50% 45% 45%;box-shadow:0 -3px 6px #34220766,inset 0 2px 2px #fffef6;opacity:0;clip-path:none;transform-origin:50% 0;pointer-events:none}
.envelope-opening .envelope-seal{animation:sticker-away 1.6s ease-in-out both;transition:none;opacity:1;transform:translate(-50%,-50%);filter:drop-shadow(0 8px 8px #0005)}
.envelope-opening .seal-left{animation:sticker-face-peel 1.25s cubic-bezier(.35,.05,.3,1) both;transform:none;opacity:1}
.envelope-opening .seal-monogram{animation:sticker-face-peel 1.25s cubic-bezier(.35,.05,.3,1) both;opacity:1}
.envelope-opening .seal-right{animation:sticker-paper-curl 1.4s cubic-bezier(.35,.05,.3,1) both;transform:none}
.envelope-opening .envelope-flap{transition-delay:1.25s}
.envelope-opening .envelope-letter{transition-delay:1.8s}
@keyframes sticker-face-peel{0%,8%{clip-path:inset(0 0 0 0);transform:rotateX(0)}40%{clip-path:inset(0 0 28% 0);transform:rotateX(-4deg)}75%{clip-path:inset(0 0 75% 0);transform:rotateX(-9deg)}100%{clip-path:inset(0 0 100% 0);transform:rotateX(-12deg)}}
@keyframes sticker-paper-curl{0%{opacity:0;bottom:0%;height:8%;transform:rotateX(75deg) scaleX(.4)}12%{opacity:1;bottom:0%;height:18%;transform:rotateX(20deg) scaleX(.75)}42%{opacity:1;bottom:27%;height:28%;transform:rotateX(38deg) scaleX(.98)}75%{opacity:1;bottom:72%;height:23%;transform:rotateX(25deg) scaleX(.78)}92%{opacity:1;bottom:93%;height:15%;transform:rotateX(40deg) scaleX(.5)}100%{opacity:0;bottom:110%;height:10%;transform:rotateX(70deg) scaleX(.25)}}
@keyframes sticker-away{0%,60%{transform:translate(-50%,-50%) rotate(0deg);opacity:1}85%{transform:translate(-46%,-65%) rotate(-8deg);opacity:1}100%{transform:translate(-35%,-100%) rotate(-14deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.envelope-opening .envelope-seal,.envelope-opening .seal-half,.envelope-opening .seal-monogram{animation:none!important}}

.envelope-opening .envelope-flap{transition:none;animation:sticker-flap-open 1.1s 1.4s cubic-bezier(.3,.1,.2,1) both}
@keyframes sticker-flap-open{0%{transform:rotateX(0deg);z-index:6}49%{z-index:6}50%{z-index:1}100%{transform:rotateX(180deg);z-index:1}}
@media(prefers-reduced-motion:reduce){.envelope-opening .envelope-flap{animation:none!important}}

/* Simple seal fade, followed by the envelope flap. */
.envelope-seal .seal-right{display:none!important}
.envelope-opening .envelope-seal{animation:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .65s ease;filter:drop-shadow(1px 6px 5px #0007)}
.envelope-opening .seal-left,.envelope-opening .seal-monogram{animation:none;clip-path:none;transform:none;opacity:1}
.envelope-opening .envelope-flap{animation:sticker-flap-open 1.1s .7s cubic-bezier(.3,.1,.2,1) both}
.envelope-opening .envelope-letter{transition-delay:1.35s}

.invitation-home{position:fixed;z-index:1100;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #a9986c66;border-radius:50%;background:#fffdf1ed;color:#203348;box-shadow:0 2px 10px #10233815;cursor:pointer}
.envelope-scene .envelope-close{display:none}
.envelope-ready .envelope-caption{opacity:1;transition:opacity .5s;animation:swipe-prompt 2.5s ease-in-out infinite}
.envelope-ready .envelope-object{cursor:grab;user-select:none;touch-action:pan-y}
.envelope-ready .envelope-kicker{opacity:0;transition:opacity .4s}
.envelope-ready .envelope-seal{pointer-events:none}
@keyframes swipe-prompt{0%,100%{transform:translateX(0);opacity:1}50%{transform:translateX(-6px);opacity:.65}}
@media(min-width:820px){.invitation-home{left:auto;right:77px;top:12px}.reader-top #music-toggle{margin-right:95px}}
@media(prefers-reduced-motion:reduce){.envelope-ready .envelope-caption{animation:none}.envelope-ready .envelope-letter{transform:translateY(-45%)}}

@media(min-width:820px){.envelope-opening .envelope-letter{transform:translateY(-32%)}}