*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow-x:hidden;background:linear-gradient(165deg,#4a3428 0%,#352518 45%,#241a12 100%);color:#542e08;font-family:Lora,'Times New Roman',serif}.envelope{position:relative;width:310px;margin:20px 0;isolation:isolate;box-shadow:0 25px 60px -12px #0007,0 8px 24px #0003,0 0 40px #c32a2926;border-radius:8px}.paper{position:absolute;inset:0;background:linear-gradient(to bottom right,#f8f3e0,#efe6d0,#f8f3e0);border:1px solid #c32a2926;border-radius:8px;overflow:hidden;z-index:-1}.paper img{position:absolute;pointer-events:none;opacity:.42;height:auto}.flower{left:10px;top:136px;width:124px;max-height:min(150px,32vh);object-fit:contain;transform-origin:top left;transform:scaleY(-1) rotate(20deg)}.lantern{right:0;top:0;width:52px;transform:translate(-10px,-15px)}.fan{bottom:12px;left:4px;width:223px;max-height:min(276px,50vh);object-fit:contain;transform:translate(-100px,30px) rotate(45deg)}.cloud{bottom:12px;right:4px;width:242px;max-height:min(264px,48vh);transform:translate(150px,40px) scaleX(-1)}.seal{position:absolute;left:50%;top:50px;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,#c32a29,#a50c0b);box-shadow:0 4px 20px #c32a2980,inset 0 2px 4px #ffffff4d;animation:pulse 2s ease-in-out infinite}.seal span{width:32px;height:32px;background:#f8f3e0;opacity:.9;mask:url('assets/seal.webp') center/contain no-repeat}.content{padding:112px 24px 56px;text-align:center}.content h1{margin:0 0 8px;font:400 30px/1.25 Bungee,sans-serif;color:#c32a29;-webkit-text-stroke:3px #f8c88b;paint-order:stroke fill}.content h1 span{display:block;font:18px/1 Baskerville,'Times New Roman',serif;-webkit-text-stroke:0;color:#542e08}.divider{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:8px;color:#542e0870;font-size:14px}.divider i{width:40px;height:1px;background:linear-gradient(90deg,transparent,#542e0870)}.divider i:last-child{transform:scaleX(-1)}.date{font-size:18px;color:#542e08e0;margin:0 0 20px}.invites{margin-bottom:24px}.invites p{margin:0 0 8px;font-size:18px;font-weight:400;color:#542e08e0}.invites h2{display:inline-block;max-width:100%;overflow-wrap:anywhere;background:#542e080f;padding:10px 20px;border-radius:12px;margin:0 0 8px;font-size:18px;font-weight:600;line-height:28px}.invites .message{font-size:16px;margin:0;line-height:24px}.open{position:relative;display:flex;width:fit-content;align-items:center;justify-content:center;overflow:hidden;margin:auto;padding:10px 32px;border-radius:999px;color:#f8f3e0;background:#c32a29;box-shadow:0 4px 14px #c32a2959;text-decoration:none;font-size:18px;font-weight:600;line-height:28px}.open span{position:absolute;inset:0 auto 0 -32px;width:32px;background:linear-gradient(90deg,transparent,#fff6,transparent);animation:shine 3s infinite}.open:focus-visible{outline:3px solid #f8c88b;outline-offset:4px}.brand{position:fixed;bottom:8px;color:#e8d4a899;font:11px Roboto,sans-serif;text-decoration:none}.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1}.ambient i{position:absolute;bottom:-35px;color:#e8d4a8;font-style:normal;opacity:0;animation:rise 22s infinite}.ambient i:nth-child(3n){color:#c32a29}.ambient i:nth-child(1){left:7%;animation-delay:-12s}.ambient i:nth-child(2){left:45%;animation-delay:-8s}.ambient i:nth-child(3){left:51%;animation-delay:-14s}.ambient i:nth-child(4){left:70%;animation-delay:-11s}.ambient i:nth-child(5){left:10%;animation-delay:-20s}.ambient i:nth-child(6){left:90%;animation-delay:-7s}.ambient i:nth-child(7){left:78%;animation-delay:-9s}.ambient i:nth-child(8){left:81%;animation-delay:-2s}.ambient i:nth-child(9){left:72%;animation-delay:-4s}.ambient i:nth-child(10){left:32%;animation-delay:-19s}.ambient i:nth-child(11){left:41%;animation-delay:-15s}.ambient i:nth-child(12){left:54%;animation-delay:-3s}@keyframes rise{0%{opacity:0;transform:translate(0,0)}15%,80%{opacity:.2}100%{opacity:0;transform:translate(20px,-110vh)}}@keyframes pulse{50%{box-shadow:0 4px 26px #c32a2999,inset 0 2px 4px #ffffff4d}}@keyframes shine{60%,100%{left:110%}}@media(min-width:640px){.envelope{width:340px}.content h1{font-size:36px}.content h1 span{font-size:20px}.invites h2{font-size:20px;font-weight:500}.open{font-weight:500}.flower{left:18px;top:144px;width:129px}.lantern{right:4px;top:4px;width:56px}.fan{left:8px;bottom:16px;width:231px}.cloud{right:8px;bottom:16px;width:251px}}@media(min-width:768px){.envelope{width:520px}.content{padding-top:96px;padding-bottom:32px}.flower{left:26px;top:156px;width:175px;max-height:170px}.lantern{right:8px;top:-2px;width:64px}.fan{left:12px;bottom:20px;width:252px;max-height:300px}.cloud{right:12px;bottom:20px;width:330px;max-height:288px}}@media(min-width:1024px){.envelope{width:600px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}
@keyframes openCard{0%{transform:scale(1);filter:none}45%{transform:scale(1.025) translateY(-6px);filter:brightness(1.04)}100%{transform:scale(.94) translateY(24px);filter:brightness(1.12);opacity:0}}@keyframes openPaper{0%{transform:scaleY(1);transform-origin:bottom}48%{transform:scaleY(.98);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom;opacity:.2}}@keyframes openSeal{0%{transform:translate(-50%,-50%) scale(1);opacity:1}45%{transform:translate(-50%,-50%) scale(1.12)}100%{transform:translate(-50%,-115%) scale(.35);opacity:0}}@keyframes openContent{0%{transform:translateY(0);opacity:1}45%{transform:translateY(-10px);opacity:1}100%{transform:translateY(-55px);opacity:0}}body.opening .envelope{animation:openCard 1.1s cubic-bezier(.22,.8,.25,1) forwards}.opening .paper{animation:openPaper .95s cubic-bezier(.22,.8,.25,1) forwards}.opening .seal{animation:openSeal .8s ease-in forwards}.opening .content{animation:openContent 1s ease-in forwards}.opening .brand{opacity:0;transition:opacity .3s}
/* envelope flap and a staged transition, so the next page never appears before its artwork is ready */
.paper:before{content:"";position:absolute;z-index:3;inset:0 0 auto;height:45%;background:linear-gradient(145deg,#fffaf0,#eee2c6);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;box-shadow:0 8px 16px #542e081c;transition:transform .85s cubic-bezier(.22,.8,.25,1)}.seal{z-index:5}.opening .paper:before{animation:openFlap .9s cubic-bezier(.22,.8,.25,1) forwards}.open.loading{pointer-events:none}.open.loading span{display:none}@keyframes openFlap{0%{transform:rotateX(0);opacity:1}100%{transform:rotateX(-165deg);opacity:.08}}