:root{--cream:#f5e7dd;--rose:#ba6689;--ink:#512639;--ease:cubic-bezier(.23,1,.32,1)}*{box-sizing:border-box}body{margin:0;color:var(--cream);background:#71334e;background-image:radial-gradient(ellipse at 50% 25%,#c47b8e44,transparent 65%),repeating-linear-gradient(90deg,#6c3049 0,#844259 22px,#88465e 39px,#6e314b 48px,#59263e 53px,#783a52 65px);font-family:Georgia,'Times New Roman',serif;min-height:100svh}body:before{content:'';position:fixed;inset:0;pointer-events:none;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}main{min-height:100svh;overflow:hidden;text-align:center;padding:48px 20px 24px}header{position:relative;z-index:6}h1{font-size:clamp(30px,5vw,47px);font-weight:400;letter-spacing:-1.4px;margin:15px 0 13px}header p{font-family:Arial,sans-serif;font-size:13px;letter-spacing:.35px;color:#f0d4dc}.eyebrow{font:10px Arial,sans-serif;letter-spacing:3.5px}.scene{position:relative;width:min(86vw,540px);height:405px;margin:70px auto 0;perspective:1300px}.envelope{position:absolute;width:100%;height:300px;top:35px;border-radius:5px;background:#c8819c;box-shadow:0 22px 50px #2f0c3270;transition:transform 1s var(--ease)}.lining{position:absolute;inset:0;border:10px solid #d69bb1;background:repeating-linear-gradient(90deg,#eed5d6 0 19px,#b9708b 19px 35px);border-radius:5px}.fold{position:absolute;inset:0}.left{background:linear-gradient(120deg,#e3afbf,#c2829d);clip-path:polygon(0 0,58% 58%,0 100%)}.right{background:linear-gradient(240deg,#dca1b8,#b87391);clip-path:polygon(100% 0,42% 58%,100% 100%)}.bottom{background:linear-gradient(0deg,#d69ab1,#e2acbf);clip-path:polygon(0 100%,0 98%,50% 42%,100% 98%,100% 100%)}.flap{position:absolute;inset:0;background:linear-gradient(165deg,#e5b4c4,#ce8ca8);clip-path:polygon(0 0,100% 0,50% 61%);transform-origin:top center;transition:transform .8s var(--ease);filter:drop-shadow(0 3px 2px #622b4844)}.seal{position:absolute;z-index:4;top:176px;left:calc(50% - 34px);width:68px;height:68px;cursor:pointer;border:4px double #d8a3b4;border-radius:48% 52% 46% 54%;color:#f1d4dc;background:radial-gradient(circle at 35% 25%,#ac5d7b,#672b49);box-shadow:0 5px 9px #5d23484d,inset 0 0 0 3px #79314f;transition:opacity .25s,transform .25s var(--ease)}.seal svg{width:40px;fill:none;stroke:currentColor;stroke-width:2}.invitation{position:absolute;z-index:5;top:0;left:50%;width:min(74vw,420px);margin:0;opacity:0;visibility:hidden;transform:translate(-50%,100px) scale(.94);transition:transform 1s var(--ease),opacity .5s,visibility .5s}.card{padding:0;display:block;background:var(--cream);border:0;cursor:zoom-in;box-shadow:0 20px 50px #36132970;transform:rotate(-2deg)}.card img{display:block;width:100%;height:auto}.opened .flap{transform:rotateX(180deg)}.opened .envelope{transform:translate(32px,240px) rotate(7deg)}.opened .seal{opacity:0;pointer-events:none;transform:scale(.9)}.revealed .invitation{visibility:visible;opacity:1;transform:translate(-50%,0) scale(1)}.revealed .scene{height: min(103vw,580px)}footer{position:relative;z-index:6;opacity:0;visibility:hidden;transition:opacity .4s; margin:24px auto 0}footer p{font-style:italic;font-size:23px;margin:0 0 24px}.revealed footer{opacity:1;visibility:visible}.buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.buttons button,.buttons a{font:12px Arial,sans-serif;text-decoration:none;color:var(--cream);background:#51263966;border:1px solid #e4bac85c;border-radius:30px;padding:15px 20px;min-height:44px;cursor:pointer}.buttons span{margin-left:10px}.bottom-star{display:block;margin-top:30px;font-size:25px;color:#dfb5c5}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:5px}dialog{padding:0;background:transparent;border:0;max-width:94vw;max-height:95svh;overflow:auto}dialog::backdrop{background:#29101be8}dialog img{display:block;width:auto;max-width:92vw;max-height:85svh;height:auto}dialog button{display:block;margin:0 0 10px auto;background:var(--cream);color:var(--ink);border:0;border-radius:30px;padding:12px 20px;min-height:44px;cursor:pointer}@media(max-width:600px){main{padding-top:38px}.scene{margin-top:65px;height:340px}.envelope{height:220px}.seal{top:132px}.opened .envelope{transform:translate(15px,180px) rotate(7deg)}.revealed .scene{height:104vw;max-height:580px}.revealed header{margin-bottom:0}footer{margin-top:20px}}@media(hover:hover) and (pointer:fine){.seal:hover{transform:scale(1.06)}.buttons a:hover,.buttons button:hover{background:#512639}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.15s!important}.invitation{transform:translateX(-50%)}.revealed .invitation{transform:translateX(-50%)}.opened .envelope{transform:translateY(200px)}}
/* Stationery collage */
.second-envelope,.sticker{position:absolute;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s var(--ease),transform .8s var(--ease)}.second-envelope{z-index:2;left:0;bottom:4%;width:65%;height:28%;background:linear-gradient(145deg,#e2a8bf,#c582a0);box-shadow:0 12px 22px #36132950;border:1px solid #e0aac0;transform:translateY(20px)}.second-envelope:before,.second-envelope:after{content:'';position:absolute;inset:0;background:linear-gradient(35deg,transparent 49.7%,#ba7a9633 50%,transparent 50.3%)}.second-envelope:after{transform:scaleX(-1)}.second-flap{position:absolute;inset:0;background:linear-gradient(155deg,#e7b1c6,#cd8da9);clip-path:polygon(0 0,100% 0,50% 85%)}.sticker{z-index:7;filter:drop-shadow(2px 6px 4px #35152755);transform:translateY(18px)}.glass{width:32%;top:8%;left:-2%}.cake{width:35%;bottom:0;right:-3%}.revealed .second-envelope,.revealed .sticker{opacity:1;visibility:visible;transform:translateY(0)}.revealed .glass{transform:rotate(-8deg)}.revealed .cake{transform:rotate(7deg)}.revealed .scene{width:min(88vw,700px);height:auto;max-height:none;aspect-ratio:.76;margin-top:35px}.revealed .envelope{left:31%;top:23%;width:65%;height:31%;transform:rotate(1deg)}.revealed .invitation{width:60%;top:30%;left:50%}.revealed .card{transform:none;box-shadow:0 10px 22px #36132977}.revealed footer{margin-top:32px}.revealed .bottom-star{margin-top:22px}@media(max-width:600px){.revealed .scene{width:90vw;margin-top:25px;aspect-ratio:.68}.revealed .envelope{top:23%;height:29%}.revealed .invitation{top:32%;width:62%}.revealed footer{margin-top:28px}.glass{width:34%;top:10%}.cake{width:37%;bottom:1%}footer p{font-size:22px}}@media(prefers-reduced-motion:reduce){.second-envelope,.sticker{transition:opacity .15s}.revealed .envelope{transform:none}}