:root{--ivory:#f7f0e4;--paper:#f9f3e9;--green:#102f2b;--green2:#1c4a3d;--gold:#c89b50;--gold-light:#f0d89a;--ink:#183a31}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--green);color:var(--ink);font-family:Georgia,'Times New Roman',serif}.vm-page{min-height:100svh;background:radial-gradient(circle at 50% 0,#356051 0,#102f2b 55%,#081b19 100%)}.deluxe-stage{position:relative;display:grid;place-items:center;min-height:100svh;padding:4rem 1rem 5rem;overflow:hidden;isolation:isolate}.deluxe-stage:before{content:"";position:absolute;inset:0;opacity:.13;background:radial-gradient(circle at 20% 25%,var(--gold-light) 0 1px,transparent 2px),radial-gradient(circle at 80% 72%,var(--gold-light) 0 1px,transparent 2px);background-size:90px 90px,130px 130px}.open-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.envelope-scene{position:relative;width:min(100%,680px);perspective:1600px;z-index:1}.envelope{position:relative;width:min(92vw,590px);margin:auto;aspect-ratio:1.45;transform-style:preserve-3d;filter:drop-shadow(0 28px 32px #020f0d99)}.envelope-back{position:absolute;inset:0;border:1px solid #e1c58c;border-radius:10px;background:linear-gradient(135deg,#f8f0df,#ded0b4 45%,#c7b28f);z-index:1;box-shadow:inset 0 0 0 5px #fff8e922,inset 0 -18px 30px #614d2b22}.envelope-back:after{content:"";position:absolute;inset:12px;border:1px solid #98774455;border-radius:6px}.inner-lining{position:absolute;left:2%;right:2%;top:3%;height:70%;clip-path:polygon(0 0,100% 0,50% 93%);background:repeating-linear-gradient(35deg,#d8bd8c 0 2px,#eee0bd 2px 5px);z-index:2;opacity:.9}.pocket{position:absolute;inset:0;clip-path:polygon(0 36%,50% 73%,100% 36%,100% 100%,0 100%);border:1px solid #a48048;background:linear-gradient(150deg,#e9dcc2,#cbb58e);border-radius:10px;z-index:6;box-shadow:inset 0 14px 18px #84663122}.flap{position:absolute;inset:0 0 auto;height:72%;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0%;background:linear-gradient(160deg,#fff7e9,#d8c39e 72%,#b79864);border-top:1px solid #f5dfad;z-index:8;backface-visibility:visible;box-shadow:0 12px 15px #4a351c44;transform:rotateX(0deg);transition:transform 1.35s cubic-bezier(.2,.8,.2,1) .75s}.flap:after{content:"";position:absolute;inset:8px;border-top:1px solid #bd984f55}.invitation-card{position:absolute;left:9%;bottom:7%;width:82%;aspect-ratio:2/3;overflow:hidden;border:1px solid #d6b878;border-radius:4px;background:var(--paper);z-index:4;transform:translateY(58%) scale(.97);transform-origin:50% 100%;box-shadow:0 14px 28px #071a1688;transition:transform 1.9s cubic-bezier(.16,.84,.24,1) 1.55s;will-change:transform}.card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.card-wash{position:absolute;inset:0;background:linear-gradient(#f7f1e4c7,#fffaf0e8 56%,#f7f1e4e8)}.card-content{position:absolute;inset:0;padding:16% 9% 7%;text-align:center}.eyebrow{margin:0 0 1rem;color:#806334;font:700 clamp(.44rem,1.35vw,.7rem)/1.2 Arial,sans-serif;letter-spacing:.21em}.card-content h1{margin:0 auto .8rem;color:var(--green);font-size:clamp(1.65rem,5.4vw,3.25rem);font-weight:400;line-height:.95;max-width:100%;overflow-wrap:anywhere}.amp{font-style:italic;color:var(--gold)}.message{max-width:28rem;margin:.4rem auto 1.1rem;font-size:clamp(.7rem,1.7vw,.92rem);line-height:1.45}.date,.venue{margin:.5rem 0;font:700 clamp(.53rem,1.45vw,.75rem)/1.4 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}.dot{color:var(--gold);padding:0 .55rem}.dress{margin:1rem 0 .75rem;color:#806334;font:italic clamp(.62rem,1.55vw,.8rem)/1.3 Georgia,serif}.card-rule{width:34%;height:1px;margin:.7rem auto;background:var(--gold)}.schedule{margin:.8rem auto;font-size:clamp(.63rem,1.55vw,.82rem);line-height:1.35}.schedule strong{font-weight:400;color:var(--green)}.schedule p{margin:.25rem 0}.event-action{display:inline-block;margin-top:.7rem;padding:.72rem 1.05rem;border:1px solid var(--green);color:var(--green);text-decoration:none;font:700 clamp(.49rem,1.3vw,.68rem)/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}.wax-seal{position:absolute;left:50%;top:46%;z-index:10;display:flex;align-items:center;justify-content:center;width:76px;height:76px;transform:translate(-50%,-50%);border:4px solid #e8c878;border-radius:50%;background:radial-gradient(circle at 35% 28%,#e8bf67,#a86b22 72%,#724313);box-shadow:0 5px 9px #3a241266,inset 3px 3px 5px #fff4b944,inset -4px -5px 6px #5b2d1177;cursor:pointer;color:#fff1c4;font:700 1.15rem Georgia,serif;letter-spacing:-.2em;transition:opacity .35s ease,transform .7s cubic-bezier(.2,.8,.2,1) .15s}.seal-left{transform:translateX(-2px) rotate(-7deg);text-shadow:1px 1px #704719}.seal-right{transform:translateX(2px) rotate(7deg);text-shadow:1px 1px #704719}.seal-crack{position:absolute;top:42%;left:50%;z-index:11;width:1px;height:38px;background:#5c3515;opacity:0;transform-origin:50% 50%;transition:opacity .2s ease}.seal-crack-left{transform:translateX(-2px) rotate(25deg)}.seal-crack-right{transform:translateX(2px) rotate(-25deg)}.open-control,.show-control,.replay-control{position:relative;z-index:2;color:#e9d59d;font:700 .68rem/1.3 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}.open-control{margin-top:1.7rem}.show-control,.replay-control{position:absolute;bottom:1.4rem;opacity:0;pointer-events:none;transition:opacity .5s ease}.show-control{right:1.4rem}.replay-control{left:1.4rem}.event-details{max-width:680px;margin:0 auto;padding:5rem 1.5rem 7rem;color:#f8f0e4;text-align:center}.event-details h2{font-size:2rem;font-weight:400}.event-details p{line-height:1.6}.rsvp-component{display:inline-block;margin-top:1.5rem;padding:1rem 2rem;border:1px solid var(--gold);color:var(--gold-light);font:700 .72rem Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}
/* Automatic one-time opening when visible; the tap state remains available for replay/skip. */
@keyframes auto-card-fixed{0%,30%{transform:translateY(58%) scale(.97);z-index:4}70%,100%{transform:translateY(48%) scale(1);z-index:12}}
.invitation-card{animation:auto-card-fixed 6.4s cubic-bezier(.16,.84,.24,1) 1.1s 1 forwards}
.open-toggle:checked~.envelope-scene .invitation-card{animation:none;transform:translateY(48%) scale(1);z-index:12}
@keyframes auto-flap{0%,12%{transform:rotateX(0)}30%,100%{transform:rotateX(-178deg)}}@keyframes auto-card{0%,30%{transform:translateY(58%) scale(.97)}70%,100%{transform:translateY(-48%) scale(1)}}@keyframes auto-seal{0%,20%{opacity:1;transform:translate(-50%,-50%)}24%{opacity:1}28%{opacity:0;transform:translate(-50%,-50%) scale(.6)}}.flap{animation:auto-flap 6.4s cubic-bezier(.2,.8,.2,1) 1.1s 1 forwards}.invitation-card{animation:auto-card 6.4s cubic-bezier(.16,.84,.24,1) 1.1s 1 forwards}.wax-seal{animation:auto-seal 6.4s ease 1.1s 1 forwards}.open-toggle:checked~.envelope-scene .flap{animation:none;transform:rotateX(-178deg)}.open-toggle:checked~.envelope-scene .invitation-card{animation:none;transform:translateY(-48%) scale(1)}.open-toggle:checked~.envelope-scene .wax-seal{animation:none;opacity:0;transform:translate(-50%,-50%) scale(.58);pointer-events:none}.open-toggle:checked~.envelope-scene .seal-crack-left{opacity:1;animation:crack-left .8s ease .15s forwards}.open-toggle:checked~.envelope-scene .seal-crack-right{opacity:1;animation:crack-right .8s ease .15s forwards}.open-toggle:checked~.show-control,.open-toggle:checked~.replay-control{opacity:1;pointer-events:auto}@keyframes crack-left{to{opacity:0;transform:translate(-28px,-16px) rotate(-42deg)}}@keyframes crack-right{to{opacity:0;transform:translate(28px,-16px) rotate(42deg)}}@media(max-width:560px){.deluxe-stage{padding-top:3rem}.envelope{width:96vw}.wax-seal{width:64px;height:64px}.event-details{padding-top:3rem}.show-control,.replay-control{font-size:.58rem}}@media(prefers-reduced-motion:reduce){.flap,.invitation-card,.wax-seal{animation:none!important;transition:none!important}.flap{transform:rotateX(-178deg)}.invitation-card{transform:translateY(-48%) scale(1)}.wax-seal{opacity:0}.open-control{display:none}.show-control{opacity:1;pointer-events:auto}}
/* Mobile-safe wedding card sizing and final front-layer positioning. */
.invitation-card{left:17%;width:66%;aspect-ratio:3/4}
.card-content{padding-top:11%}
.card-content h1{font-size:clamp(1.45rem,5vw,3rem);margin-bottom:.35rem}
.eyebrow{margin-bottom:.7rem}
.wedding-mark{margin:.15rem 0;color:var(--gold);font:1.5rem Georgia,serif;letter-spacing:-.28em}
.wedding-label{margin:.25rem 0 .7rem;color:#806334;font:700 clamp(.46rem,1.25vw,.67rem)/1.2 Arial,sans-serif;letter-spacing:.17em}
.envelope-back{background:linear-gradient(135deg,#fbf3e1e8,#d6c096e8),url("/templates/luminous-deluxe-wedding-envelope/creator-asset?path=assets%2Fbackground.webp&v=2") center/cover;background-blend-mode:soft-light}
.pocket{background:linear-gradient(145deg,#efe2c8e8,#c8af82e8),url("/templates/luminous-deluxe-wedding-envelope/creator-asset?path=assets%2Fbackground.webp&v=2") center/cover;background-blend-mode:soft-light}
.wax-seal{border:0;background:transparent;box-shadow:none;filter:drop-shadow(0 3px 3px #4c2b1455)}
.seal-art{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);object-fit:contain;pointer-events:none}
.wax-seal:before{content:"";position:absolute;inset:8px;border:1px solid #f6dda066;border-radius:50%;box-shadow:inset 0 0 0 2px #74360f55}
.schedule{margin:1rem auto 0;padding:.55rem 0;border-top:1px solid #c89b5088;line-height:1.35}
.schedule strong{display:block;margin-bottom:.35rem;line-height:1.25}
.schedule p{display:block;margin:0;line-height:1.35}
@keyframes auto-card-wedding{0%,30%{transform:translateY(58%) scale(.97);z-index:4}70%,100%{transform:translateY(42%) scale(.9);z-index:12}}
.invitation-card{animation:auto-card-wedding 6.4s cubic-bezier(.16,.84,.24,1) 1.1s 1 forwards}
.open-toggle:checked~.envelope-scene .invitation-card{animation:none;transform:translateY(42%) scale(.9);z-index:12}
@keyframes hide-opening-prompt{to{opacity:0;pointer-events:none}}
.open-control{animation:hide-opening-prompt .5s ease 5.7s forwards}
@media(prefers-reduced-motion:reduce){.invitation-card{animation:none!important;transform:translateY(42%) scale(1)!important;z-index:12}}

/* Centered open state: the card clears the pocket and settles in front. */
.envelope-scene{position:relative;min-height:clamp(560px,78vh,760px);overflow:visible}
.invitation-card{left:50%;top:92%;bottom:auto;width:min(72%,420px);aspect-ratio:3/4;transform-origin:50% 50%;transform:translate(-50%,-18%) scale(.78)}
@keyframes card-centered-wedding{0%,30%{top:92%;transform:translate(-50%,-18%) scale(.78);z-index:4}70%,100%{top:50%;transform:translate(-50%,-50%) scale(.78);z-index:12}}
.invitation-card{animation:card-centered-wedding 6.4s cubic-bezier(.16,.84,.24,1) 1.1s 1 forwards}
.open-toggle:checked~.envelope-scene .invitation-card{animation:none;top:50%;transform:translate(-50%,-50%) scale(.78);z-index:12}
.stage-controls{position:relative;z-index:20;display:flex;justify-content:center;gap:1rem;margin:1.2rem auto 0}
.stage-controls label{display:inline-flex;align-items:center;justify-content:center;min-height:2.4rem;padding:.55rem 1rem;border:1px solid #c9a661;border-radius:999px;color:#f8e9bb;background:#162b22cc;font:600 .78rem/1 Arial,sans-serif;letter-spacing:.04em;cursor:pointer}
@media(max-width:560px){.envelope-scene{min-height:clamp(500px,76vh,680px)}.invitation-card{width:min(78%,330px);transform:translate(-50%,-18%) scale(.78)}@keyframes card-centered-wedding{0%,30%{top:92%;transform:translate(-50%,-18%) scale(.78)}70%,100%{top:50%;transform:translate(-50%,-50%) scale(.78)}}.open-toggle:checked~.envelope-scene .invitation-card{top:50%;transform:translate(-50%,-50%) scale(.78)}.stage-controls{gap:.5rem}.stage-controls label{font-size:.7rem;padding:.5rem .7rem}}
@media(prefers-reduced-motion:reduce){.invitation-card{animation:none!important;top:50%!important;transform:translate(-50%,-50%) scale(.78)!important;z-index:12}}
.seal-initials{position:relative;z-index:2;display:inline-block;color:#f9dfb2;font:700 clamp(1rem,2.8vw,1.35rem)/1 Georgia,serif;letter-spacing:.08em;text-shadow:1px 1px 0 #3b1212,-1px -1px 0 #d9967e;transform:rotate(-7deg)}
.wax-seal:before{inset:10px;border:1px solid #5c121477;box-shadow:inset 0 0 0 2px #f3947a33}
.wax-seal{animation:seal-break-fixed 6.4s ease 1.1s 1 forwards!important;transform:translate(-50%,-50%)!important}
@keyframes seal-break-fixed{0%,22%{opacity:1;transform:translate(-50%,-50%)!important}25%{opacity:1;transform:translate(-50%,-50%)!important}31%,100%{opacity:0;transform:translate(-50%,-50%)!important}}
.seal-fragment{position:absolute;left:50%;top:46%;z-index:11;width:18px;height:26px;opacity:0;background:linear-gradient(135deg,#ef8067,#a92c27 65%,#681518);filter:drop-shadow(0 2px 2px #3a0d0d88);pointer-events:none}
.seal-fragment-left{clip-path:polygon(100% 0,100% 100%,0 78%,16% 24%);transform:translate(-23px,-11px) rotate(-10deg)}
.seal-fragment-right{clip-path:polygon(0 0,100% 24%,84% 78%,0 100%);transform:translate(5px,-11px) rotate(10deg)}
@keyframes fragment-left-break{0%,25%{opacity:0;transform:translate(-23px,-11px) rotate(-10deg)}31%{opacity:1;transform:translate(-23px,-11px) rotate(-10deg)}45%,100%{opacity:0;transform:translate(-40px,2px) rotate(-46deg)}}
@keyframes fragment-right-break{0%,25%{opacity:0;transform:translate(5px,-11px) rotate(10deg)}31%{opacity:1;transform:translate(5px,-11px) rotate(10deg)}45%,100%{opacity:0;transform:translate(39px,3px) rotate(45deg)}}
.seal-fragment-left{animation:fragment-left-break 6.4s ease 1.1s 1 forwards}
.seal-fragment-right{animation:fragment-right-break 6.4s ease 1.1s 1 forwards}
.open-toggle:checked~.envelope-scene .wax-seal{animation:none!important;opacity:0;transform:translate(-50%,-50%)!important}
.open-toggle:checked~.envelope-scene .seal-fragment-left{animation:fragment-left-break .9s ease .1s 1 forwards}
.open-toggle:checked~.envelope-scene .seal-fragment-right{animation:fragment-right-break .9s ease .1s 1 forwards}
@media(prefers-reduced-motion:reduce){.wax-seal{opacity:0!important;transform:translate(-50%,-50%)!important}.seal-fragment{display:none}}
.field-label{display:inline-block;color:#806334;font:700 .58rem/1 Arial,sans-serif;letter-spacing:.16em}.stage-controls{margin-top:3.25rem}.envelope-scene{padding-bottom:2rem}@media(max-width:560px){.stage-controls{margin-top:2.5rem}.envelope-scene{padding-bottom:1rem}}
.invitation-card{clip-path:inset(0 0 100% 0)}@keyframes card-centered-wedding{0%,25%{top:92%;clip-path:inset(0 0 100% 0);transform:translate(-50%,-18%) scale(.78);z-index:4}35%{top:86%;clip-path:inset(0);transform:translate(-50%,-12%) scale(.78);z-index:4}70%,100%{top:50%;clip-path:inset(0);transform:translate(-50%,-50%) scale(.78);z-index:12}}.open-toggle:checked~.envelope-scene .invitation-card{clip-path:inset(0);top:50%;transform:translate(-50%,-50%) scale(.78);z-index:12}
.invitation-card{clip-path:none!important;left:50%;top:45%;bottom:auto;transform:translate(-50%,-50%) scale(.55);z-index:4}@keyframes card-opening-correct{0%,18%{top:45%;transform:translate(-50%,-50%) scale(.55);z-index:4}45%{top:28%;transform:translate(-50%,-50%) scale(.61);z-index:4}62%{top:12%;transform:translate(-50%,-50%) scale(.68);z-index:4}70%,100%{top:45%;transform:translate(-50%,-50%) scale(.78);z-index:12}}.invitation-card{animation:card-opening-correct 6.4s cubic-bezier(.16,.84,.24,1) 1.1s 1 forwards!important}.open-toggle:checked~.envelope-scene .invitation-card{animation:none!important;top:45%;transform:translate(-50%,-50%) scale(.78);z-index:12;clip-path:none!important}.seal-initials{color:#f7e7c5;font-size:clamp(1.05rem,2.9vw,1.4rem);text-shadow:1px 1px 0 #641719,-1px -1px 0 #f3a084}.wax-seal:before{display:none}