@font-face{font-family:Marck;src:url(fonts/MarckScript-Regular.ttf)}
@font-face{font-family:GV;src:url(fonts/GreatVibes-Regular.ttf)}
@font-face{font-family:OS;src:url(fonts/OpenSans.ttf);font-weight:300 800}
@font-face{font-family:Corm;src:url(fonts/CormorantItalic.ttf);font-style:italic;font-weight:300 700}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;background:#efe6f2;font-family:OS,sans-serif;color:#2f2630}
body.locked{overflow:hidden;height:100vh}
.script{font-family:Marck,cursive;font-weight:400;color:#2d2230}
/* intro */
#intro{position:fixed;inset:0;z-index:20;overflow:hidden;background:#eadff0;transition:opacity 1s .2s}
#intro.gone{opacity:0;pointer-events:none}
.stage{position:absolute;left:50%;top:50%;width:max(100vw,calc(100vh*0.5578));height:max(100vh,calc(100vw/0.5578));transform:translate(-50%,-50%)}
.stage .bg{position:absolute;inset:0;width:100%;height:100%;animation:breathe 14s ease-in-out infinite alternate}
@keyframes breathe{to{transform:scale(1.03)}}
.envelope{position:absolute;left:10.5%;top:29.77%;width:78.85%;height:45.94%;perspective:900px}
.env-img{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.flap{position:absolute;left:1.5%;right:1.5%;top:1%;height:46%;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(#e7c9dd,#d7b7d6);transform-origin:top;opacity:0;z-index:3;transition:transform .9s ease,opacity .2s}
.letter{position:absolute;left:10%;right:10%;top:8%;height:80%;background:#fffaf6;border-radius:6px;box-shadow:0 4px 20px #0002;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 1.1s cubic-bezier(.3,1.3,.5,1) .7s}
.letter span{font-family:Marck;font-size:2.4rem;color:#a2477c}.letter small{color:#8a6a80}
.envelope.open .env-img{clip-path:inset(46% 0 0 0);transition:clip-path .01s .05s}
.envelope.open .flap{opacity:1;transform:rotateX(180deg)}
.envelope.open .letter{transform:translateY(-45%)}
.envelope.open .env-img{filter:drop-shadow(0 -6px 10px #0002)}
.intro-ui{position:absolute;left:0;right:0;top:80.4%;display:flex;flex-direction:column;align-items:center}
.pill{background:rgba(255,255,255,.88);border-radius:30px;padding:.42em 1.3em;font-size:clamp(11px,3.1vw,15px);letter-spacing:.06em;color:#4b3c4d;box-shadow:0 2px 10px #0001}
.open-btn{margin-top:2.6%;width:60%;height:calc(var(--h,1)*58px);border:2px solid #f7d58f;border-radius:40px;color:#fff;font:400 clamp(14px,4.2vw,19px) Corm,serif;font-style:normal;letter-spacing:.04em;background:linear-gradient(90deg,#d640a5,#a8329b 60%,#7d2a8d);box-shadow:0 0 24px #e45fbf99,inset 0 2px 6px #fff5;cursor:pointer;animation:pulse 2.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 36px #ff8ad6cc,inset 0 2px 6px #fff5}}
.caption{margin-top:2.4%;background:rgba(255,255,255,.82);border-radius:30px;padding:.3em 1.1em;font:italic 600 clamp(14px,3.9vw,19px) Corm,serif;color:#3d2d3e}
/* content */
#content{max-width:440px;margin:0 auto;display:none}
#content.show{display:block}
.card{position:relative;overflow:hidden;text-align:center;padding:38px 22px 34px;min-height:100vh;background:
 radial-gradient(ellipse at 0 10%,#e7d3ef 0,transparent 45%),radial-gradient(ellipse at 100% 30%,#f6d6dc 0,transparent 40%),
 radial-gradient(ellipse at 0 75%,#f1dbe8 0,transparent 40%),#fbf3f1}
.card img{mix-blend-mode:multiply}
h1.script{font-size:44px;line-height:1.08}
h2.script{font-size:36px;margin:8px 0 18px}
.photo img{width:84%;max-width:330px;margin:6px auto 0;display:block;
 mask:radial-gradient(ellipse 50% 50%,#000 82%,transparent 100%)}
.name{font-size:58px;color:#6e3a5c;margin-top:2px}
.sub{font-size:15px;letter-spacing:.02em;margin-top:-2px}
.text{font-size:15px;line-height:1.4;margin:14px 6px}
.cal-title{font-size:20px;margin:16px 0 10px}
.grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:12px;font-size:16px;padding:0 6px}
.grid .h{font-size:14px}
.grid .d9{position:relative}
.grid .d9 svg{position:absolute;left:50%;top:50%;width:36px;height:34px;transform:translate(-50%,-52%)}
.countdown{margin-top:24px;display:flex;justify-content:center;gap:10px}
.countdown div{background:#fff9;border:1px solid #e3c79a;border-radius:12px;padding:6px 8px;min-width:62px}
.countdown b{display:block;font-size:22px;color:#8d4a74}.countdown small{font-size:11px;color:#806a78}
.timeline{list-style:none;position:relative;width:290px;margin:10px auto 26px}
.timeline:before{content:"";position:absolute;left:142px;top:16px;bottom:16px;width:2px;background:linear-gradient(#d7b06c,#e9cf9f)}
.timeline li{display:flex;align-items:center;min-height:72px}
.timeline b{font:400 30px OS;width:126px;text-align:right;color:#2f2630}
.timeline i{width:10px;height:10px;border-radius:50%;background:#d4a85e;margin:0 14px 0 12px;z-index:1;box-shadow:0 0 0 3px #fbf3f1}
.timeline span{white-space:nowrap;text-align:left;font-size:16px;line-height:1.25}
.colors{display:flex;justify-content:center;gap:16px}
.colors i{width:56px;height:56px;border-radius:50%;box-shadow:inset 0 -4px 8px #0001,0 2px 6px #0001;animation:bob 4s ease-in-out infinite}
.colors i:nth-child(2){animation-delay:.5s}.colors i:nth-child(3){animation-delay:1s}.colors i:nth-child(4){animation-delay:1.5s}
@keyframes bob{50%{transform:translateY(-4px)}}
.s2 .text{width:240px;margin:16px auto 0}
.tassel{position:absolute;left:4px;top:56%;width:52px;-webkit-mask:linear-gradient(to right,#000 70%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 85%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect;transform-origin:top center;animation:sway 5s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(4deg)}}
.bags{width:80%;-webkit-mask:linear-gradient(to bottom,transparent,#000 18%);mask:linear-gradient(to bottom,transparent,#000 18%);margin:10px 0 -34px auto;display:block;margin-right:-22px}
.s2{padding-bottom:34px}
.fl-tr{position:absolute;right:0;top:0;width:66%;-webkit-mask:linear-gradient(to bottom,#000 60%,transparent);mask:linear-gradient(to bottom,#000 60%,transparent)}
.fl-r{position:absolute;right:0;top:15%;width:15%;-webkit-mask:linear-gradient(to left,#000 50%,transparent);mask:linear-gradient(to left,#000 50%,transparent)}
.s3 h2:first-of-type{margin-top:60px;position:relative}
.place{font-size:16px;line-height:1.35;margin-bottom:16px}
.btn-outline{display:inline-block;padding:9px 22px;border:1.5px solid #6f6070;border-radius:30px;color:#2f2630;text-decoration:none;font-size:15px;background:#fff8}
.s3 h2:nth-of-type(2){margin-top:44px}
form{text-align:left;padding:0 6px}
form input[name=name]{width:100%;padding:12px 12px;border:1px solid #cbbcc6;border-radius:6px;font:15px OS;background:#fff}
.q{font-size:16px;margin:22px 0 10px}
label{display:flex;align-items:center;gap:8px;font-size:15px;margin:8px 0;cursor:pointer}
label input{position:absolute;opacity:0}
label span{width:18px;height:18px;border-radius:50%;border:1.5px solid #8d7f88;display:inline-block;background:#fff}
label input:checked+span{border-color:#c49656;background:radial-gradient(#d5a964 45%,#fff 50%)}
.row{display:flex;gap:40px}
.gold{width:100%;margin-top:26px;padding:13px;border:0;border-radius:30px;font:16px OS;color:#3a2a2a;background:linear-gradient(90deg,#d9a887,#e9c7a2 45%,#c78c8f);box-shadow:0 3px 10px #b07a6a55;cursor:pointer}
#thanks{margin:24px 0;font-family:Marck;font-size:28px;color:#8d4a74}
.footer{font-size:18px;line-height:1.4;margin-top:44px;position:relative;z-index:1}
.fl-bottom{width:calc(100% + 44px);margin:6px -22px -34px;display:block;
 -webkit-mask:linear-gradient(to top,#000 60%,transparent);mask:linear-gradient(to top,#000 60%,transparent)}
.fade{opacity:0;transform:translateY(24px);transition:opacity .9s,transform .9s}
.fade.in{opacity:1;transform:none}
.music{position:fixed;right:16px;bottom:16px;z-index:30;width:46px;height:46px;border-radius:50%;border:1.5px solid #f2d18e;background:linear-gradient(135deg,#d640a5,#7d2a8d);color:#fff;font-size:20px;box-shadow:0 4px 14px #7d2a8d66;cursor:pointer}
.music.on{animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#petals{position:fixed;inset:0;pointer-events:none;z-index:25;overflow:hidden}
.petal{position:absolute;top:-30px;width:14px;height:10px;border-radius:70% 0 70% 0;background:#f4b9cf;opacity:.8;animation:fall linear forwards}
.petal.bf{width:auto;height:auto;background:none;border-radius:0;font-size:18px}
@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(540deg)}}
.music{display:flex;align-items:center;justify-content:center}.music[hidden]{display:none}

/* v2 envelope */
.flap{background:none;clip-path:none;left:0;right:0;top:0;height:47%;filter:drop-shadow(0 3px 4px #7a4a8a33)}
.flap svg{width:100%;height:100%;display:block}
.letter{left:9%;right:9%;top:6%;height:78%;z-index:1;border:1px solid #ecd7b0;background:linear-gradient(#fffdf9,#fbf1ec);
 box-shadow:0 6px 24px #6a3a7033,inset 0 0 0 6px #fffdf9,inset 0 0 0 7px #e6c995}
.l-in{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;gap:.15em}
.letter .l1{font:2.1rem Marck;color:#a2477c}
.letter .l2{font:3.6rem GV,cursive;color:#7a3f6e;line-height:1}
.letter .l3{font:italic 600 1.45rem Corm,serif;color:#9a6b4a;letter-spacing:.06em}
.letter .l3 em{font-style:normal;color:#c9a062;font-size:.9em}
.envelope.open .flap{transform:rotateX(180deg);z-index:1;opacity:1}
.envelope.open .letter{transform:translateY(-58%);z-index:2}
.envelope.open .env-img{z-index:3;clip-path:inset(44% 0 0 0)}
/* countdown */
.cd-wrap{margin-top:30px;padding:22px 10px 24px;border-radius:26px;background:linear-gradient(180deg,#fff9,#fbe9f3cc);border:1px solid #f0d3e4;box-shadow:0 10px 30px #c2338f1a}
.cd-title{font-size:32px;color:#8d4a74;margin-bottom:14px}
.countdown{display:flex;gap:8px;justify-content:center;margin:0}
.countdown div{flex:1;max-width:78px;min-width:0;padding:12px 0 10px;border-radius:20px;border:1px solid #f3cfe3;background:linear-gradient(180deg,#fff,#fdeef8);box-shadow:0 6px 16px #c2338f1f;position:relative}
.countdown div:after{content:"✿";position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:12px;color:#d6a85e}
.countdown b{display:block;font:600 34px/1.1 Corm,serif;font-style:italic;color:#b2387f;font-variant-numeric:tabular-nums}
.countdown small{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8a7383}
.countdown b.tick{animation:tick .5s ease}
@keyframes tick{0%{transform:translateY(-6px) scale(1.15);opacity:.4}100%{transform:none;opacity:1}}
.cd-done{font-size:30px;color:#b2387f}
/* feathered decor */
.bags{-webkit-mask:radial-gradient(ellipse 52% 60% at 55% 62%,#000 55%,transparent 100%);mask:radial-gradient(ellipse 52% 60% at 55% 62%,#000 55%,transparent 100%)}
.tassel{-webkit-mask:radial-gradient(ellipse 50% 52% at 45% 50%,#000 60%,transparent 100%);mask:radial-gradient(ellipse 50% 52% at 45% 50%,#000 60%,transparent 100%)}
.fl-tr{-webkit-mask:radial-gradient(ellipse 80% 110% at 100% 0,#000 45%,transparent 100%);mask:radial-gradient(ellipse 80% 110% at 100% 0,#000 45%,transparent 100%)}
.fl-r{-webkit-mask:radial-gradient(ellipse 100% 50% at 100% 50%,#000 40%,transparent 100%);mask:radial-gradient(ellipse 100% 50% at 100% 50%,#000 40%,transparent 100%)}
.fl-bottom{-webkit-mask:radial-gradient(ellipse 75% 100% at 50% 100%,#000 50%,transparent 100%);mask:radial-gradient(ellipse 75% 100% at 50% 100%,#000 50%,transparent 100%)}
.photo img{-webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%);mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%)}
.kids-n input{width:110px;padding:10px 12px;border:1px solid #cbbcc6;border-radius:6px;font:15px OS;background:#fff}
#err{color:#b0304a;margin-top:12px;font-size:14px}
.gold:disabled{opacity:.6}