@font-face{font-family:GreatVibes;src:url('great-vibes.ttf') format('truetype');font-display:swap}
:root{color-scheme:light;--ivory:#faf8f3;--ink:#36382f;--emerald:#254c3e;--gold:#a78449}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;font-family:Georgia,serif;color:var(--ink);background:#eee8de}
main{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 36%,#faf6ef 0%,#eee7db 95%)}
.stage{position:relative;width:100%;max-width:min(540px,60dvh);height:100%;isolation:isolate;overflow:hidden;container-type:inline-size}

/* The restrained, unframed card follows the supplied reference. */
.invitation{position:absolute;z-index:3;left:50%;top:50%;width:91%;max-width:480px;height:88%;max-height:780px;overflow:hidden;background:linear-gradient(#f6edddbf,#f6edddbf),url('ivory-paper.webp') center/cover;box-shadow:0 15px 42px #55452e29,0 2px 7px #55452e1c;outline:none;container-type:inline-size;opacity:0;transform:translate(-50%,-50%) scale(.68,.22);transform-origin:center;transition:transform 1.65s cubic-bezier(.22,.7,.22,1),opacity .5s ease,box-shadow 1.5s ease;will-change:transform}
.rising .invitation{opacity:1;transform:translate(-50%,-50%) translateY(-15vh) scale(.74,.52)}
.unfolding .invitation{transform:translate(-50%,-50%) scale(1);box-shadow:0 16px 48px #51473527,0 2px 7px #51473517}
.card-art{position:absolute;top:4%;left:8%;width:84%;height:30%;display:grid;place-items:center}
.card-art img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 69% 62% at 50% 51%,#000 69%,transparent 100%);mask-image:radial-gradient(ellipse 69% 62% at 50% 51%,#000 69%,transparent 100%);filter:saturate(.74) contrast(.96)}
.card-copy{position:absolute;top:35%;bottom:5%;left:7%;right:7%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center}
.card-copy p{margin:0}
.save{font-family:GreatVibes,cursive;font-size:clamp(32px,10cqw,55px);line-height:1.15;color:var(--emerald)}
.ceremony{font-size:clamp(12px,2.7cqw,14px);line-height:1.4;text-transform:uppercase;letter-spacing:.08em;color:#7f6943}
h1{display:flex;flex-direction:column;align-items:center;font-family:GreatVibes,cursive;font-size:clamp(36px,11cqw,56px);font-weight:400;line-height:1.05;color:var(--emerald);margin:0;white-space:nowrap}
h1 .person{display:block}
h1 .amp{display:block;margin:7px 0 12px;font:italic .46em/1 Georgia,serif;color:var(--gold)}
.date{display:flex;flex-direction:column;gap:4px;font-size:clamp(19px,5.7cqw,29px);line-height:1.15}
.date>span{font-size:clamp(11px,2.7cqw,14px);text-transform:uppercase;letter-spacing:.17em;color:#826b45}
.venue{font-size:clamp(17px,4.7cqw,24px);line-height:1.2}
.venue small{display:block;margin-top:4px;font-size:clamp(12px,2.9cqw,15px);color:#6b665d}
.formal{font-size:clamp(13px,3.1cqw,16px);font-style:italic;color:#786a55}
.save,.ceremony,h1,.date,.venue,.formal,.card-art{opacity:0;transform:translateY(9px);transition:opacity .75s ease,transform .75s ease}
.show-title .save,.show-ceremony .ceremony,.show-names h1,.show-date .date,.show-venue .venue,.show-formal .formal,.show-art .card-art{opacity:1;transform:translateY(0)}

/* The paper flap and its seal rotate as one piece. */
.envelope{position:absolute;z-index:2;top:53%;left:50%;width:96%;max-width:520px;aspect-ratio:1586/992;transform:translate(-50%,-50%);perspective:1000px;transform-style:preserve-3d;filter:drop-shadow(0 20px 18px #4a3a2540);transition:transform 1.65s cubic-bezier(.25,.65,.25,1),opacity 1.25s ease;will-change:transform,opacity}
.envelope-interior,.envelope-flap{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat}
.envelope-interior{background:linear-gradient(#e5d7be,#f3ebdd 32%,#faf6ee);border:2px solid #b99a64}
.envelope-front{position:absolute;z-index:4;top:53%;left:50%;width:96%;max-width:520px;aspect-ratio:1586/992;background:url('ivory-envelope.webp') center/100% 100% no-repeat;clip-path:polygon(0 0,50% 64%,100% 0,100% 100%,0 100%);transform:translate(-50%,-50%);transition:transform 1.65s cubic-bezier(.25,.65,.25,1),opacity 1.25s ease}
.envelope-flap{z-index:3;background-image:url('ivory-envelope.webp');clip-path:polygon(0 0,100% 0,50% 64%);transform-origin:50% 0;backface-visibility:visible;transition:transform 1.55s cubic-bezier(.35,0,.2,1);will-change:transform}
.seal-shell{position:absolute;z-index:5;top:53%;left:50%;width:96%;max-width:520px;aspect-ratio:1586/992;transform:translate(-50%,-50%);perspective:1000px;pointer-events:none;transition:transform 1.65s cubic-bezier(.25,.65,.25,1),opacity 1.25s ease}
.seal-pivot{position:absolute;inset:0;transform-origin:50% 0;transition:transform 1.55s cubic-bezier(.35,0,.2,1)}
.seal{position:absolute;top:54.4%;left:50%;width:12%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;gap:1px;transform:translateX(-50%) rotate(-7deg);backface-visibility:hidden;border:2px solid #e8cd95;border-radius:50%;background:radial-gradient(circle at 34% 26%,#dfc288 2%,#bd9656 57%,#806439 100%);box-shadow:0 2px 5px #51412a5c,inset 0 0 0 2px #9b7841,inset 0 0 0 4px #e5c481;color:#fff9e8;font:italic clamp(16px,4cqw,22px)/1 Georgia,serif;letter-spacing:-.08em;text-shadow:0 1px 1px #69502f8c}
.seal-amp{font-size:.68em;margin:2px 1px 0}
.flap-open .envelope-flap,.flap-open .seal-pivot{transform:rotateX(-176deg)}
.unfolding .envelope,.unfolding .envelope-front,.unfolding .seal-shell{transform:translate(-50%,-50%) translateY(28vh) scale(.9);opacity:0;pointer-events:none}

.open{position:absolute;inset:0;z-index:8;width:100%;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.open:focus-visible{outline:2px solid var(--gold);outline-offset:-6px}
.opening .open{pointer-events:none}
.footer{position:fixed;z-index:9;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));display:flex;justify-content:center;pointer-events:none}
.prompt{margin:0;padding:10px 18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#66543c;background:#faf6ecdf;border-radius:3px;transition:opacity .5s ease}
.opening~.footer .prompt{opacity:0}
.actions{display:flex;gap:30px;pointer-events:auto}
.actions a,.actions button{border:0;border-bottom:1px solid #aa9166;background:#faf8f3b0;padding:8px 2px;font:14px Georgia,serif;color:#66563e;text-decoration:none;cursor:pointer}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.complete .envelope,.complete .envelope-front,.complete .seal-shell,.complete .open{visibility:hidden}
.resetting *{transition:none!important;animation:none!important}
@media(max-height:650px){.invitation{height:92%}.card-art{top:3%;height:27%}.card-copy{top:32%;bottom:4%}.date{gap:2px}.venue small{margin-top:1px}}
@media(max-width:699px){.stage{max-width:none}}
@media(max-width:350px){.ceremony{font-size:11px;letter-spacing:.04em}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}.opening .envelope,.opening .envelope-front,.opening .seal-shell{display:none}}