:root{--wine:#62130c;--wine2:#7a1a12;--ink:#5a1410;--cream:#e4dbcc;--lace:#fffbf7;--gold:#c9a46a}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:radial-gradient(120% 80% at 50% 0%,#7d1b12 0%,var(--wine) 55%,#4a0e08 100%) fixed;color:var(--ink);font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100vh}
body.locked{overflow:hidden}
#petals{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

/* ---------- gate ---------- */
#gate{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(90% 70% at 50% 40%,#7d1b12,#4f0f09 70%,#3b0a06);color:var(--cream);transition:opacity 1s ease .55s,visibility 0s linear 1.6s}
#gate.open{opacity:0;visibility:hidden;pointer-events:none}
.gate-glow{position:absolute;width:520px;height:520px;max-width:120vw;border-radius:50%;background:radial-gradient(circle,rgba(255,220,170,.22),transparent 65%);animation:breathe 4s ease-in-out infinite}
.seal-btn{position:relative;width:min(58vw,230px);aspect-ratio:1;border:0;background:none;cursor:pointer;padding:0;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55));animation:float 4s ease-in-out infinite;-webkit-tap-highlight-color:transparent}
.seal-btn:focus-visible{outline:2px solid var(--gold);outline-offset:8px;border-radius:50%}
.seal-img{width:100%;height:100%;display:block;transition:transform .3s}
.seal-btn:hover .seal-img{transform:scale(1.05) rotate(-3deg)}
.seal-half{position:absolute;inset:0;background:url(seal.png) center/contain no-repeat;opacity:0}
.seal-half.l{clip-path:polygon(0 0,53% 0,45% 28%,55% 54%,46% 100%,0 100%)}
.seal-half.r{clip-path:polygon(53% 0,100% 0,100% 100%,46% 100%,55% 54%,45% 28%)}
#gate.open .seal-img{opacity:0}
#gate.open .seal-half{opacity:1}
#gate.open .seal-half.l{animation:crackL 1s cubic-bezier(.5,0,.9,.6) forwards}
#gate.open .seal-half.r{animation:crackR 1s cubic-bezier(.5,0,.9,.6) forwards}
#gate.open .seal-btn{animation:none}
.gate-hint{font-style:italic;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;opacity:.85;animation:breathe 2.4s ease-in-out infinite}
.gate-names{font-family:"Great Vibes",cursive;font-size:2.4rem;color:var(--lace);margin-top:6px}
.gate-names span{font-size:1.6rem;opacity:.8;margin:0 .1em}
#gate.open .gate-hint,#gate.open .gate-names{opacity:0;transition:opacity .4s}
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes breathe{50%{opacity:.45}}
@keyframes crackL{to{transform:translate(-90px,230px) rotate(-38deg);opacity:0}}
@keyframes crackR{to{transform:translate(90px,260px) rotate(42deg);opacity:0}}

/* ---------- paper ---------- */
#invite{max-width:760px;margin:0 auto;padding:clamp(76px,12vw,96px) clamp(12px,3vw,22px) 40px;opacity:0;transform:translateY(24px);transition:opacity 1.1s ease .4s,transform 1.1s ease .4s}
body.opened #invite{opacity:1;transform:none}
.paper{--b:clamp(36px,9.5vw,60px);position:relative;background:var(--cream);border:var(--b) solid transparent;border-image:url(frame.jpg) 180 fill/var(--b)/0 round;padding:clamp(18px,4vw,34px) clamp(8px,3vw,24px) clamp(24px,5vw,44px);text-align:center;margin-bottom:34px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.paper.small{padding-bottom:clamp(18px,4vw,30px)}
.paper-seal{position:absolute;top:calc(var(--b) * -1 - 46px);left:50%;width:clamp(96px,22vw,140px);height:auto;transform:translateX(-50%) rotate(-6deg);filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}
#top{padding-top:clamp(44px,9vw,70px)}
.bismillah{font-family:"Aref Ruqaa","Amiri",serif;font-size:clamp(1.9rem,6.4vw,2.9rem);line-height:1.6;color:var(--wine2);margin-bottom:6px}
.together{font-weight:600;font-size:clamp(1rem,3.4vw,1.25rem);letter-spacing:.02em}
.names{font-family:"Great Vibes",cursive;font-weight:400;color:var(--ink);line-height:.95;margin:clamp(10px,3vw,22px) 0 clamp(8px,2vw,16px);display:flex;flex-direction:column;align-items:center}
.names .n1,.names .n2{font-size:clamp(3.4rem,15vw,6rem)}
.names .n1{transform:translateX(-.35em)}.names .n2{transform:translateX(.3em)}
.names .amp{font-size:clamp(1.6rem,6vw,2.4rem);opacity:.85;margin:.1em 0}
.invite-line{font-style:italic;font-weight:700;font-size:clamp(1.05rem,3.8vw,1.4rem);margin-top:6px}
.date{font-weight:600;font-size:clamp(2.1rem,8vw,3.3rem);letter-spacing:.08em;margin-top:clamp(14px,3vw,22px);line-height:1.1}
.weekday{font-style:italic;font-size:clamp(1rem,3.4vw,1.2rem);opacity:.85}
.venue{margin-top:clamp(14px,3vw,24px)}
.venue-name{font-style:italic;font-weight:700;font-size:clamp(1.15rem,4.2vw,1.55rem);color:var(--wine2)}
.venue-addr{font-size:clamp(1rem,3.6vw,1.3rem)}
.venue-time{font-size:clamp(1rem,3.6vw,1.3rem);font-weight:600;letter-spacing:.04em}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:clamp(18px,4vw,28px)}

.btn{font:600 .95rem/1 "Cormorant Garamond",serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-radius:999px;padding:14px 22px;cursor:pointer;border:1.5px solid var(--wine2);transition:transform .2s,background .25s,color .25s,box-shadow .25s;display:inline-block}
.btn.ghost{background:transparent;color:var(--wine2)}
.btn.ghost:hover{background:var(--wine2);color:var(--cream)}
.btn.solid{background:var(--wine2);color:var(--cream);box-shadow:0 8px 18px -8px rgba(98,19,12,.8)}
.btn.solid:hover{transform:translateY(-2px);background:#8b2016}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn.big{width:100%;padding:17px;font-size:1.05rem;margin-top:10px}

.kicker{font-style:italic;letter-spacing:.06em;font-size:clamp(1rem,3.4vw,1.2rem);opacity:.9}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,2vw,14px);margin-top:12px}
.count div{background:rgba(98,19,12,.07);border:1px solid rgba(98,19,12,.18);border-radius:14px;padding:clamp(10px,2.5vw,16px) 4px}
.count b{display:block;font-size:clamp(1.8rem,8vw,3rem);font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:var(--wine2)}
.count span{font-style:italic;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75}

h2{font-family:"Great Vibes",cursive;font-weight:400;font-size:clamp(2.4rem,9vw,3.6rem);color:var(--ink);margin:4px 0 14px;line-height:1.05}
form{text-align:left;max-width:520px;margin:0 auto}
.field{margin-bottom:18px;border:0;padding:0}
label,legend{display:block;font-weight:700;letter-spacing:.04em;font-size:1.05rem;margin-bottom:6px;padding:0}
input[type=text],input:not([type]),input[type=email]{width:100%;font:inherit;font-size:1.15rem;color:var(--ink);background:rgba(255,251,247,.75);border:1.5px solid rgba(98,19,12,.35);border-radius:12px;padding:13px 14px;transition:border .2s,box-shadow .2s,background .2s}
input:focus{outline:none;border-color:var(--wine2);box-shadow:0 0 0 4px rgba(122,26,18,.15);background:#fff}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choices input{position:absolute;opacity:0;pointer-events:none}
.choices label{margin:0;white-space:nowrap;font-size:1rem;text-align:center;border:1.5px solid rgba(98,19,12,.4);border-radius:14px;padding:15px 8px;cursor:pointer;font-weight:600;transition:all .25s;background:rgba(255,251,247,.6)}
.choices label i{font-style:normal;margin-right:6px;color:var(--gold)}
.choices label:hover{border-color:var(--wine2);transform:translateY(-1px)}
.choices input:checked+label{background:var(--wine2);color:var(--cream);border-color:var(--wine2);box-shadow:0 10px 20px -10px rgba(98,19,12,.9);transform:translateY(-2px)}
.choices input:focus-visible+label{outline:2px solid var(--gold);outline-offset:3px}
.err{display:none;color:#a3140a;font-style:italic;font-size:.95rem;margin-top:6px}
.field.invalid .err{display:block}
.field.invalid input[type=text],.field.invalid input:not([type]){border-color:#a3140a}
.field.invalid .choices label{border-color:#a3140a}
.field.shake{animation:shake .4s}
#guestField{transition:opacity .35s,max-height .45s,margin .45s;max-height:140px;overflow:hidden}
#guestField.off{opacity:0;max-height:0;margin:0;pointer-events:none}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

#thanks{padding:6px 0 4px;animation:pop .7s cubic-bezier(.2,1.2,.3,1)}
#thanks p{font-size:1.25rem;max-width:420px;margin:0 auto}
.check{width:72px;margin:0 auto 6px}
.check circle{fill:none;stroke:var(--wine2);stroke-width:2;stroke-dasharray:151;stroke-dashoffset:151;animation:draw .8s ease forwards}
.check path{fill:none;stroke:var(--wine2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s ease .6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.92)}}
.foot{text-align:center;color:var(--cream);padding:6px 0 30px;opacity:.9;letter-spacing:.08em}
.foot-names{font-family:"Great Vibes",cursive;font-size:2.4rem;letter-spacing:0;color:var(--lace)}
.foot-names span{font-size:1.6rem;opacity:.8}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
body.opened #top.reveal{transition-delay:.2s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}.reveal{opacity:1;transform:none}}
@media (max-width:420px){.btn{padding:13px 16px;font-size:.85rem}.names .n1{transform:translateX(-.2em)}.names .n2{transform:translateX(.2em)}}