@font-face{font-family:GreatVibes;src:url('./assets/GreatVibes.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Cormorant;src:url('./assets/Cormorant.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:light;--ink:#5f5144}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{min-height:100svh;overflow:hidden;background:#f3eae7;color:var(--ink);font-family:Cormorant,Georgia,serif}
button{font:inherit}
.stage{height:100svh;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 25%,#fcf8f2 0%,#f1e4e2 70%,#e6d5d2 100%)}
.invitation-frame{position:relative;isolation:isolate;container-type:inline-size;width:min(100vw,47.33svh,475px);height:min(100svh,211.27vw,1003px);overflow:hidden;background:#e0b8b9;box-shadow:0 16px 55px #7d53503b;perspective:5000px;perspective-origin:50% 22%}
.invitation,.envelope{position:absolute;inset:0;width:100%;height:100%}
.invitation{z-index:1;background:#f5eee0;transform-style:preserve-3d}
.invitation-frame.opened .invitation{cursor:pointer;-webkit-tap-highlight-color:transparent}
.card-art{position:absolute;inset:0;background:#f5eee0;overflow:hidden}
.card-art::before{content:"";position:absolute;inset:0 0 auto;height:17%;background:linear-gradient(180deg,#dfe9e8 0%,#f5eee2 100%)}
.garden{position:absolute;inset:7% 0 -7%;background:url('./assets/garden-depth-v2.webp') center/100% 100% no-repeat;-webkit-mask-image:linear-gradient(to bottom,transparent,black 6%);mask-image:linear-gradient(to bottom,transparent,black 6%)}
.blank-paper{position:absolute;left:0;right:0;top:0;height:68%;background:linear-gradient(#f6f1e6 82%,#e9ddce 96%,#f8f1e6);z-index:1}
.upper-leaf{position:absolute;top:0;left:0;width:100%;height:68%;z-index:2;transform-origin:50% 0%;transform-style:preserve-3d;transform:rotateX(-90deg);backface-visibility:hidden;will-change:transform}
.leaf-window{position:absolute;inset:0;overflow:hidden;background:#f5eee0;box-shadow:0 3px 4px #73574532,0 11px 19px #73574552;transform:translateZ(0)}
.leaf-window .card-art{inset:auto;top:0;left:0;width:100%;height:147.058824%}
.save-date{position:absolute;left:15%;top:14%;width:70%;height:auto;margin:0;line-height:0;transform:translateZ(4px);backface-visibility:hidden}
.save-date img{display:block;width:100%;height:auto}
.tea-group,.flower-strip{position:absolute;display:block;object-fit:contain;pointer-events:none;backface-visibility:hidden;transform-origin:50% 90%;will-change:transform}
.tea-shadow{position:absolute;left:11%;top:79%;width:78%;height:7%;pointer-events:none;transform:translateZ(5px);opacity:0;background:radial-gradient(ellipse at center,#5b3c2e75 0%,#6e4c3845 38%,transparent 73%);filter:blur(6px)}
.tea-group{left:3%;top:47%;width:94%;height:39%;transform:translateZ(24px);filter:drop-shadow(0 2px 1px #51392cad) drop-shadow(2px 8px 6px #5a3c2f69) drop-shadow(0 13px 10px #61463238)}
.flower-strip{left:0;top:81.5%;width:100%;height:18%;object-fit:fill;transform:translateZ(30px);filter:drop-shadow(0 3px 2px #5d4737a6) drop-shadow(1px 9px 7px #63483375)}
.plaque{position:absolute;z-index:3;left:11%;bottom:1%;width:78%;height:26.5%;filter:drop-shadow(0 2px 2px #6b4e3999) drop-shadow(1px 8px 7px #674b396b);pointer-events:none}
.details{position:absolute;z-index:4;left:17%;right:17%;top:82.7%;text-align:center;color:#5a493e;text-shadow:0 1px 0 #fff9}
.details p{margin:0;white-space:nowrap}
.person{font-size:clamp(16px,4.8cqw,24px);line-height:1.1;font-weight:600;letter-spacing:-.04em}
.person em{font-weight:500}
.full-date{margin-top:.46em!important;font-size:clamp(16px,5cqw,24px);letter-spacing:.16em;font-weight:600}
.place{margin-top:.25em!important;font-size:clamp(9px,2.35cqw,11px);letter-spacing:.26em;font-weight:700}
.replay{position:absolute;z-index:5;right:3%;bottom:2.2%;width:31px;height:31px;border:1px solid #9a815e77;border-radius:50%;background:#fbf6e7b5;color:#866d50;font:20px/1 Georgia,serif;cursor:pointer;opacity:.75;transition:opacity .2s,background .2s}
.replay:hover,.replay:focus-visible{opacity:1;background:#fffaf0}
.envelope{z-index:3;border:0;padding:0;margin:0;cursor:pointer;text-align:center;overflow:hidden;background:#d8aeb3;transform-origin:50% 0%;perspective:1800px;perspective-origin:50% 0%;backface-visibility:hidden;-webkit-tap-highlight-color:transparent;will-change:transform}
.envelope-assembly{position:absolute;inset:0;display:block;transform-style:preserve-3d}
.envelope-interior{position:absolute;inset:0;z-index:0;background:linear-gradient(#d5a7ae55,#c38f9955),url('./assets/envelope.webp') center top/100% 245% no-repeat}
.envelope-inside-card{position:absolute;z-index:3;left:8%;top:36%;width:84%;height:48%;background:linear-gradient(#fffaf01c,#fffaf038),url('./assets/garden-depth-v2.webp') center top/100% auto no-repeat #f7f0e4;border:1px solid #e7daca;box-shadow:0 3px 7px #70495380,0 11px 20px #70495355;opacity:0;transform:translateY(22%)}
.envelope-inside-card::after{content:"";position:absolute;left:14%;top:8%;width:72%;height:22%;background:url('./assets/save-the-date-v2.webp') center/contain no-repeat}
.envelope-body{position:absolute;inset:0;z-index:4;background:url('./assets/envelope.webp') center/100% 100% no-repeat;clip-path:polygon(0 40.6%,46% 61.4%,48% 62.1%,50% 62.5%,52% 62.1%,54% 61.4%,100% 40.6%,100% 100%,0 100%)}
.envelope-pocket{position:absolute;inset:0;z-index:4;display:block;filter:drop-shadow(0 -2px 5px #6d49545e) drop-shadow(0 -6px 9px #754d5a36)}
.envelope-body-open{position:absolute;inset:0;display:block;opacity:0;clip-path:polygon(0 40.6%,46% 61.4%,48% 62.1%,50% 62.5%,52% 62.1%,54% 61.4%,100% 40.6%,100% 100%,0 100%);background:linear-gradient(120deg,#b77d8833,transparent 48%,#fff4ef22 70%,#9d697522),url('./assets/envelope.webp') center top/100% 245% no-repeat}
.envelope-flap{position:absolute;left:0;right:0;top:0;height:62.5%;z-index:5;display:block;transform-origin:50% 0%;transform-style:preserve-3d;will-change:transform}
.envelope-flap-front,.envelope-flap-back{position:absolute;inset:0;display:block;clip-path:polygon(0 0,100% 0,100% 64.96%,54% 98.24%,52% 99.36%,50% 100%,48% 99.36%,46% 98.24%,0 64.96%);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.envelope-flap-front{background:url('./assets/envelope.webp') center top/100% 160% no-repeat}
.envelope-flap-back{transform:rotateY(180deg);background:linear-gradient(150deg,#f2d9d9aa,#d5aab0aa),url('./assets/envelope.webp') center top/100% 245% no-repeat;box-shadow:inset 0 2px 6px #9c6c7655}
.envelope-title{position:absolute;display:block;left:4%;width:92%;top:56%;height:auto;filter:drop-shadow(0 1px 1px #6e4c333d)}
.envelope-still{position:absolute;inset:0;z-index:7;display:block;background:url('./assets/envelope.webp') center/100% 100% no-repeat}
.envelope-still-title{position:absolute;display:block;left:4%;width:92%;top:35%;height:auto;filter:drop-shadow(0 1px 1px #6e4c333d)}
.gold{color:#795529;background:linear-gradient(100deg,#704b1e 0%,#a77d3b 28%,#6a451c 50%,#b58a46 73%,#70491d 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.2px #70491d88;text-shadow:0 1px 0 #f9e8cb99,0 1px 1px #53331566}
.short-date{position:absolute;z-index:8;bottom:7.4%;left:0;right:0;font-size:clamp(22px,7.2cqw,36px);font-style:italic;font-weight:700;letter-spacing:.02em}
.tap-hint{position:absolute;z-index:8;bottom:2.7%;left:0;right:0;color:#fff8f0b5;font-family:GreatVibes,cursive;font-size:clamp(17px,5.5cqw,27px);text-shadow:0 1px 2px #8c6472aa}
.envelope:focus-visible{outline:3px solid #fff;outline-offset:-7px}
.invitation-frame.opened .envelope{animation:fade-envelope .6s ease 2.08s both;pointer-events:none}
.invitation-frame.opened .envelope-still,.invitation-frame.closing .envelope-still{display:none}
.invitation-frame.opened .envelope-flap{animation:open-flap 1.1s cubic-bezier(.42,0,.28,1) both}
.invitation-frame.opened .envelope-body{animation:fade-pocket .12s ease both}
.invitation-frame.opened .envelope-body-open{animation:show-pocket .12s ease both}
.invitation-frame.opened .envelope-inside-card{animation:extract-card 1.25s cubic-bezier(.22,.68,.25,1) .75s both}
.invitation-frame.opened .tap-hint{opacity:0;transition:opacity .2s}
.invitation-frame.opened .upper-leaf{animation:unfold-card .95s cubic-bezier(.2,.7,.18,1) 2.2s both}
.invitation-frame.opened .tea-group{animation:lift-tea .82s cubic-bezier(.2,.7,.25,1) 2.3s both}
.invitation-frame.opened .tea-shadow{animation:show-tea-shadow .75s ease 2.3s both}
.invitation-frame.opened .flower-strip{animation:lift-strip .8s cubic-bezier(.2,.7,.25,1) 2.35s both}
.invitation-frame.closing .invitation{pointer-events:none}
.invitation-frame.closing .upper-leaf{animation:fold-card .55s cubic-bezier(.4,0,.7,1) both}
.invitation-frame.closing .tea-group{animation:fold-tea .5s ease-in both}
.invitation-frame.closing .tea-shadow{animation:hide-tea-shadow .45s ease-in both}
.invitation-frame.closing .flower-strip{animation:fold-strip .5s ease-in both}
.invitation-frame.closing .envelope{animation:reveal-envelope .5s ease .05s both;pointer-events:none}
.invitation-frame.closing .envelope-flap{animation:close-flap .8s cubic-bezier(.45,0,.25,1) 1.2s both}
.invitation-frame.closing .envelope-body{animation:show-pocket .12s ease 1.88s both}
.invitation-frame.closing .envelope-body-open{animation:fade-pocket .12s ease 1.88s both}
.invitation-frame.closing .envelope-inside-card{animation:insert-card 1s cubic-bezier(.4,0,.7,1) .25s both}
.invitation-frame.closing .tap-hint{opacity:0}
@keyframes open-flap{from{transform:rotateX(0)}to{transform:rotateX(180deg)}}
@keyframes close-flap{from{transform:rotateX(180deg)}to{transform:rotateX(0)}}
@keyframes show-tea-shadow{from{opacity:0}to{opacity:1}}
@keyframes hide-tea-shadow{from{opacity:1}to{opacity:0}}
@keyframes fade-pocket{from{opacity:1}to{opacity:0}}
@keyframes show-pocket{from{opacity:0}to{opacity:1}}
@keyframes extract-card{0%{opacity:0;transform:translateY(22%)}12%{opacity:1}100%{opacity:1;transform:translateY(-75%)}}
@keyframes insert-card{0%{opacity:1;transform:translateY(-75%)}75%{opacity:1}100%{opacity:0;transform:translateY(22%)}}
@keyframes fade-envelope{from{opacity:1}to{opacity:0}}
@keyframes reveal-envelope{from{opacity:0}to{opacity:1}}
@keyframes unfold-card{0%{transform:rotateX(-89deg)}65%{transform:rotateX(5deg)}100%{transform:rotateX(0)}}
@keyframes lift-tea{0%{transform:translateZ(3px) rotateX(-83deg)}100%{transform:translateZ(24px) rotateX(0)}}
@keyframes lift-strip{0%{transform:translateZ(3px) rotateX(-70deg)}100%{transform:translateZ(30px) rotateX(0)}}
@keyframes fold-card{from{transform:rotateX(0)}to{transform:rotateX(-89deg)}}
@keyframes fold-tea{from{transform:translateZ(24px) rotateX(0)}to{transform:translateZ(3px) rotateX(-83deg)}}
@keyframes fold-strip{from{transform:translateZ(30px) rotateX(0)}to{transform:translateZ(3px) rotateX(-70deg)}}
@media(min-width:600px){.invitation-frame{border-radius:24px;outline:1px solid #b78b8355}}
@media(max-width:599px){.stage{background:#eadcda}.invitation-frame{box-shadow:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}}