:root{
  --cream:#f8f4ea;
  --cream-2:#f2ecdd;
  --card:#fffdf8;
  --gold:#b3934f;
  --gold-soft:#cfb476;
  --sage:#7d8a74;
  --ink:#3d3628;
  --muted:#8b7f66;
  --maroon:#6b2c2c;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',sans-serif;
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
}
body.locked{overflow:hidden;height:100dvh}
.arabic{font-family:'Amiri',serif;direction:rtl}

/* ---- backdrop ---- */
.floral{
  position:fixed;inset:-10% 0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23b3934f' stroke-width='0.5' opacity='0.10'%3E%3Cpath d='M70 8 Q98 36 70 64 Q42 36 70 8 Z'/%3E%3Cpath d='M70 76 Q98 104 70 132 Q42 104 70 76 Z'/%3E%3Cpath d='M8 70 Q36 42 64 70 Q36 98 8 70 Z'/%3E%3Cpath d='M76 70 Q104 42 132 70 Q104 98 76 70 Z'/%3E%3Ccircle cx='70' cy='70' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size:140px 140px;will-change:transform;
}
.wash{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgba(179,147,79,.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 108%, rgba(125,138,116,.10), transparent 60%);
}
.frame{position:fixed;inset:10px;z-index:70;pointer-events:none;border:1px solid rgba(179,147,79,.5)}
.frame::before{content:'';position:absolute;inset:4px;border:1px solid rgba(179,147,79,.2)}
#dust{position:fixed;inset:0;z-index:2;pointer-events:none}

/* ---- petals ---- */
.petal{
  position:fixed;top:-4vh;z-index:3;pointer-events:none;
  width:12px;height:12px;
  background:linear-gradient(135deg,#e9d9b4,var(--gold-soft) 75%);
  border-radius:80% 0 80% 0;opacity:.7;
  animation:fall linear forwards, sway ease-in-out infinite alternate;
}
@keyframes fall{to{transform:translateY(112vh) rotate(560deg);opacity:.2}}
@keyframes sway{from{margin-left:-2.5vw}to{margin-left:2.5vw}}

/* ---- envelope ---- */
#envelopeStage{
  position:fixed;inset:0;z-index:50;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#faf6ec,#f2ecdd);
  transition:opacity 1.3s ease, visibility 1.3s, transform 1.3s cubic-bezier(.6,0,.3,1);
  padding:24px;
}
#envelopeStage.gone{opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.12)}
.stage-bismillah{
  font-family:'Amiri',serif;font-size:clamp(20px,5.5vw,28px);color:var(--gold);
  margin-bottom:12px;text-align:center;animation:fadeDown 1.5s ease both .1s;
}
.stage-eyebrow{
  letter-spacing:.55em;text-transform:uppercase;font-size:10px;color:var(--muted);
  margin-bottom:36px;text-align:center;animation:fadeDown 1.4s ease both .4s;
}
@keyframes fadeDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

.envelope{
  position:relative;width:min(86vw,410px);aspect-ratio:10/7;
  perspective:1200px;cursor:pointer;
  animation:envFloat 5.5s ease-in-out infinite, envIn 1.2s cubic-bezier(.2,.9,.3,1.2) both .3s;
  filter:drop-shadow(0 26px 34px rgba(107,88,50,.28));
}
@keyframes envIn{from{opacity:0;transform:translateY(60px) scale(.9)}to{opacity:1;transform:none}}
@keyframes envFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
.envelope.opening{animation:none}
.env-body{
  position:absolute;inset:0;border-radius:5px;overflow:hidden;
  background:linear-gradient(160deg,#f3ecdc,#eae1cc 60%,#e4dac2);
  border:1px solid rgba(179,147,79,.55);
}
.env-body::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(115deg, transparent 49.6%, rgba(179,147,79,.3) 50%, transparent 50.4%),
    linear-gradient(-115deg, transparent 49.6%, rgba(179,147,79,.3) 50%, transparent 50.4%);
}
.env-card{
  position:absolute;left:6%;right:6%;top:8%;bottom:8%;
  background:var(--card);border-radius:3px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  transform:translateY(12%);
  transition:transform 1.1s cubic-bezier(.3,.8,.3,1) .55s;
  box-shadow:0 4px 16px rgba(107,88,50,.25), inset 0 0 0 1px rgba(179,147,79,.35), inset 0 0 0 4px var(--card), inset 0 0 0 5px rgba(179,147,79,.18);
  z-index:1;
}
.envelope.opening .env-card{transform:translateY(-58%)}
.env-card .mini-mono{
  font-family:'Cormorant Garamond',serif;font-size:24px;letter-spacing:.18em;
  border:1px solid var(--gold);border-radius:50%;
  width:54px;height:54px;display:grid;place-items:center;color:#420303;
}
.env-card .mini-names{font-family:'Great Vibes',cursive;font-size:clamp(24px,6vw,32px);color:var(--ink)}
.env-card .mini-date{font-size:10px;letter-spacing:.45em;text-transform:uppercase;color:var(--muted)}
.env-flap{
  position:absolute;left:0;right:0;top:0;height:56%;
  transform-origin:top center;transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.5,0,.3,1);z-index:2;
}
.envelope.opening .env-flap{transform:rotateX(178deg);z-index:0}
.env-flap .face{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:hidden}
.env-flap .front{background:linear-gradient(180deg,#f6f0e1,#ece3ce 70%);border-top:1px solid rgba(179,147,79,.55)}
.env-flap .back{background:linear-gradient(180deg,#e6dcc5,#e0d5bb);transform:rotateX(180deg)}
.env-pocket{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  clip-path:polygon(0 0, 50% 62%, 100% 0, 100% 100%, 0 100%);
  background:linear-gradient(200deg,#f0e8d6,#e8dfc9 60%,#e2d7bf);
  border-radius:0 0 5px 5px;border-bottom:1px solid rgba(179,147,79,.5);
}
.env-pocket::before{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(115deg, transparent 49.5%, rgba(179,147,79,.35) 50%, transparent 50.5%),
    linear-gradient(-115deg, transparent 49.5%, rgba(179,147,79,.35) 50%, transparent 50.5%);
}
.seal{
  position:absolute;left:50%;top:56%;translate:-50% -50%;
  width:82px;height:82px;z-index:4;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#e5cf9a,#c3a259 50%,#94743a 88%);
  box-shadow:inset 0 3px 6px rgba(255,248,225,.6), inset 0 -4px 8px rgba(90,66,26,.4), 0 6px 14px rgba(107,88,50,.35);
  display:grid;place-items:center;
  transition:transform .5s ease,opacity .5s ease;
  animation:sealPulse 2.4s ease-in-out infinite;
}
.seal::before{content:'';position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(90,66,26,.35)}
.seal span{
  font-family:'Cormorant Garamond',serif;font-weight:600;font-size:25px;
  letter-spacing:.12em;color:#420303;text-shadow:0 1px 1px rgba(255,248,225,.6);
}
@keyframes sealPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.envelope.opening .seal{transform:scale(1.6) rotate(20deg);opacity:0;animation:none}
.tap-hint{
  margin-top:38px;font-size:11px;letter-spacing:.45em;text-transform:uppercase;
  color:var(--muted);text-align:center;
  animation:hintBlink 2.2s ease-in-out infinite, fadeDown 1.4s ease both .9s;
}
@keyframes hintBlink{0%,100%{opacity:.4}50%{opacity:1}}

/* ---- main ---- */
main{position:relative;z-index:4;opacity:0;transition:opacity 1.3s ease .3s}
main.revealed{opacity:1}
section{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:52px 24px;position:relative;text-align:center;
}
#hero{min-height:100svh;padding-top:56px;padding-bottom:48px}
.eyebrow{font-size:10px;letter-spacing:.6em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--gold)}
.divider::before,.divider::after{
  content:'';height:1px;width:66px;transform:scaleX(0);
  transition:transform 1.2s cubic-bezier(.2,.8,.3,1) .3s;
  background:linear-gradient(90deg,transparent,var(--gold));transform-origin:right;
}
.divider::after{background:linear-gradient(90deg,var(--gold),transparent);transform-origin:left}
.divider.in::before,.divider.in::after{transform:scaleX(1)}
.divider svg{width:11px;height:11px;fill:var(--gold);transition:transform 1s ease .4s;transform:rotate(-135deg) scale(0)}
.divider.in svg{transform:rotate(45deg)}

.rv{opacity:0;transform:translateY(40px);filter:blur(8px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.3,1),filter 1s ease}
.rv.in{opacity:1;transform:none;filter:blur(0)}
.rv.d1{transition-delay:.14s}.rv.d2{transition-delay:.28s}.rv.d3{transition-delay:.42s}

.hero-bismillah{
  font-family:'Amiri',serif;font-size:clamp(22px,6vw,32px);color:var(--gold);
  margin-bottom:16px;
  animation:breathGlow 4s ease-in-out infinite;
}
@keyframes breathGlow{
  0%,100%{text-shadow:0 0 0 transparent}
  50%{text-shadow:0 0 22px rgba(179,147,79,.45)}
}
.couple{
  display:flex;align-items:center;justify-content:center;
  margin:4px 0 12px;position:relative;
}
.couple-art{
  width:min(78vw,300px);
  background:transparent;
}
.couple-art img{
  width:100%;height:auto;display:block;
}
.invite-line{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(15px,3.8vw,18px);color:#5d543f;line-height:1.55;margin-bottom:6px;
}
.invite-line b{font-style:normal;font-weight:700;color:var(--ink)}
.names{
  font-family:'Great Vibes',cursive;
  font-size:clamp(28px,7vw,44px);line-height:1.55;
  margin:6px 0;padding:8px 12px 11px;
  display:block;overflow:visible;
  color:#420303;
}
.names .letter{display:inline-block;opacity:1;transform:none}
.names .letter.on{animation:letterIn .8s cubic-bezier(.2,.9,.3,1.35) both}
@keyframes letterIn{to{opacity:1;transform:none}}
.amp{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(15px,3.8vw,20px);color:var(--sage);display:block;
  margin:5px 0;padding:2px 0;line-height:1.4;
}
.hero-date{
  font-size:clamp(12px,3.2vw,15px);letter-spacing:.35em;text-transform:uppercase;
  color:var(--ink);margin-top:14px;
}
.hero-date b{font-weight:700}
.hero-venue{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(15px,4vw,18px);color:var(--muted);margin-top:6px;
}
.hero-venue b{font-style:normal;font-weight:700;color:var(--ink)}

/* ---- ayah + countdown ---- */
.ayah-arabic{
  font-family:'Amiri',serif;direction:rtl;
  font-size:clamp(21px,5.6vw,30px);line-height:2;color:var(--ink);
  max-width:640px;
}
.ayah-arabic .word{
  display:inline-block;opacity:0;transform:translateY(12px);filter:blur(5px);
  transition:opacity .9s ease,transform .9s ease,filter .9s ease;
}
.ayah-arabic.in .word{opacity:1;transform:none;filter:blur(0)}
.ayah-trans{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(14px,3.8vw,17px);line-height:1.65;color:#5d543f;
  margin-top:12px;max-width:520px;
}
.ayah-ref{margin-top:10px;font-size:9px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);text-indent:.5em;font-weight:700}

.count-wrap{display:flex;gap:clamp(8px,3vw,18px);margin-top:28px}
.count-cell{
  min-width:clamp(58px,16vw,84px);padding:14px 6px 10px;position:relative;
  border:1px solid rgba(179,147,79,.4);background:var(--card);
  box-shadow:0 8px 22px rgba(107,88,50,.12);
  transition:transform .4s ease;
}
.count-cell:hover{transform:translateY(-4px)}
.count-cell::before{content:'';position:absolute;inset:4px;border:1px solid rgba(179,147,79,.15)}
.count-cell b{
  font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:clamp(28px,8vw,44px);color:var(--ink);
  display:block;line-height:1;font-variant-numeric:tabular-nums;
}
.count-cell b.flip{animation:digitFlip .5s ease}
@keyframes digitFlip{
  0%{transform:rotateX(0)}45%{transform:rotateX(90deg);opacity:.2}
  55%{transform:rotateX(-90deg);opacity:.2}100%{transform:rotateX(0);opacity:1}
}
.count-cell span{
  font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);
  display:block;margin-top:6px;text-indent:.4em;
}

/* ---- events ---- */
#details{
  gap:18px;padding-top:40px;padding-bottom:48px;
}
.events-title{
  font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:clamp(12px,3.2vw,14px);letter-spacing:.45em;text-transform:uppercase;
  color:var(--gold);margin-bottom:4px;text-indent:.45em;
}
.lux-card{
  width:100%;max-width:460px;padding:34px 28px 30px;position:relative;overflow:hidden;
  background:
    linear-gradient(165deg, rgba(255,253,248,.92), rgba(248,244,234,.88)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23b3934f' stroke-width='0.6' opacity='0.18'%3E%3Cpath d='M40 6 Q54 22 40 38 Q26 22 40 6 Z'/%3E%3Cpath d='M40 42 Q54 58 40 74 Q26 58 40 42 Z'/%3E%3Cpath d='M6 40 Q22 26 38 40 Q22 54 6 40 Z'/%3E%3Cpath d='M42 40 Q58 26 74 40 Q58 54 42 40 Z'/%3E%3Ccircle cx='40' cy='40' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-color:#fbf7ee;
  box-shadow:0 22px 48px rgba(107,88,50,.18), inset 0 0 0 1px rgba(179,147,79,.4), inset 0 0 0 5px rgba(255,253,248,.75), inset 0 0 0 6px rgba(179,147,79,.22);
  transition:transform .5s cubic-bezier(.2,.8,.3,1), box-shadow .5s;
}
.lux-card::before,.lux-card::after{
  content:'';position:absolute;width:42px;height:42px;pointer-events:none;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='none' stroke='%23b3934f' stroke-width='1' d='M4 20 Q12 4 20 4 Q28 4 36 20 Q28 36 20 36 Q12 36 4 20 Z'/%3E%3Ccircle cx='20' cy='20' r='2.5' fill='%23b3934f'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lux-card::before{top:10px;left:10px}
.lux-card::after{bottom:10px;right:10px;transform:rotate(180deg)}
.lux-card:hover{transform:translateY(-6px);box-shadow:0 30px 58px rgba(107,88,50,.24), inset 0 0 0 1px rgba(179,147,79,.55), inset 0 0 0 5px rgba(255,253,248,.8), inset 0 0 0 6px rgba(179,147,79,.28)}
.lux-card h3{font-family:'Great Vibes',cursive;font-weight:400;font-size:34px;color:var(--maroon);margin-bottom:4px;position:relative;z-index:1}
.lux-card .ev-date,.lux-card .ev-rule,.lux-card .ev-host,.lux-card .ev-detail,.lux-card .dir-link,.lux-card .rsvp-contacts,.lux-card .rsvp-block,.lux-card .rsvp-done{position:relative;z-index:1}
.lux-card .ev-date{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.lux-card .ev-date b{font-weight:700;color:var(--ink);letter-spacing:.28em}
.lux-card .ev-rule{width:48px;height:1px;background:var(--gold);margin:12px auto;position:relative}
.lux-card .ev-rule::after{
  content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:5px;height:5px;rotate:45deg;background:var(--gold);
}
.lux-card .ev-detail{font-size:14px;font-weight:300;line-height:1.65;color:#5d543f}
.lux-card .ev-detail b{font-weight:700;color:var(--ink)}
.lux-card .ev-host{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:15px;line-height:1.55;color:#5d543f;margin-bottom:8px;
}
.lux-card .ev-host b{font-style:normal;font-weight:700;color:var(--ink)}
.dir-link{
  display:inline-block;margin-top:10px;
  color:var(--ink);font-weight:700;letter-spacing:.25em;text-transform:uppercase;
  font-size:10px;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:3px;
}
.rsvp-contacts{
  margin-top:4px;font-size:13px;line-height:1.7;color:#5d543f;
}
.rsvp-contacts b{font-weight:700;color:var(--ink)}
.rsvp-block{margin-top:16px}
.rsvp-block label{
  display:block;text-align:left;font-size:9px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--muted);margin:12px 0 5px;font-weight:700;
}
.rsvp-block input,.rsvp-block select{
  width:100%;padding:12px 14px;font-family:'Jost',sans-serif;font-size:15px;
  border:1px solid rgba(61,54,40,.2);background:#fff;color:var(--ink);
  outline:none;transition:border-color .3s, box-shadow .3s;
}
.rsvp-block input:focus,.rsvp-block select:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(179,147,79,.18);
}
.btn{
  margin-top:16px;width:100%;padding:13px;cursor:pointer;
  font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.5em;text-transform:uppercase;text-indent:.5em;
  color:#fff;background:linear-gradient(120deg,var(--gold),#a0813f);
  border:none;position:relative;overflow:hidden;transition:transform .3s, box-shadow .3s;
}
.btn:hover{box-shadow:0 10px 22px rgba(160,129,63,.4)}
.btn::after{
  content:'';position:absolute;top:0;left:-80%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transition:left .6s ease;
}
.btn:hover::after{left:120%}
.btn:active{transform:scale(.97)}
.rsvp-done{display:none;padding:22px 6px 4px}
.rsvp-done .tick{
  width:58px;height:58px;margin:0 auto 16px;border-radius:50%;
  border:1px solid var(--gold);display:grid;place-items:center;
}
.rsvp-done .tick svg{width:28px;height:28px;stroke:var(--gold);stroke-width:2.2;fill:none;
  stroke-dasharray:40;stroke-dashoffset:40;animation:tickDraw .8s ease forwards .2s}
@keyframes tickDraw{to{stroke-dashoffset:0}}
.rsvp-done p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;color:var(--ink)}

/* ---- footer ---- */
footer{position:relative;z-index:4;text-align:center;padding:20px 24px 56px}
.foot-dua{
  font-family:'Amiri',serif;direction:rtl;
  font-size:clamp(18px,5vw,25px);line-height:1.8;color:var(--gold);
}
.foot-dua-trans{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(13px,3.6vw,16px);color:var(--muted);
  max-width:480px;margin:10px auto 0;line-height:1.6;
}
.top-dua-wrap{
  width:100%;max-width:640px;margin:0 auto 20px;padding:6px 10px 12px;
}
.top-dua-bismillah{
  font-family:'Amiri',serif;direction:rtl;
  font-size:clamp(18px,4.8vw,26px);line-height:1.6;color:var(--gold);
  margin-bottom:14px;text-align:center;
}
.top-dua-urdu{
  font-family:'Noto Nastaliq Urdu','Amiri',serif;
  font-size:clamp(13px,3.4vw,17px);color:var(--ink);
  width:100%;
}
.dua-couplet{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:clamp(16px,5vw,36px);
  align-items:center;
  margin:10px 0;
  direction:rtl;
}
.dua-couplet .misra{
  display:block;
  text-align:center;
  line-height:2.4;
  white-space:nowrap;
}
@media (max-width:520px){
  .dua-couplet{
    grid-template-columns:1fr;
    row-gap:2px;
  }
  .dua-couplet .misra{
    white-space:normal;
    line-height:2.2;
  }
}

footer .foot-names{font-family:'Great Vibes',cursive;font-size:38px;color:#420303;margin-top:24px}
footer .hash{margin-top:10px;font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);text-indent:.5em;font-weight:700}

/* ---- music toggle ---- */
#musicBtn{
  position:fixed;right:22px;bottom:22px;z-index:80;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(179,147,79,.55);
  background:rgba(255,253,248,.92);
  box-shadow:0 8px 22px rgba(107,88,50,.18), inset 0 0 0 3px rgba(255,253,248,.9), inset 0 0 0 4px rgba(179,147,79,.2);
  display:grid;place-items:center;opacity:0;pointer-events:none;
  transition:opacity .6s ease, transform .3s ease, box-shadow .3s;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
#musicBtn.show{opacity:1;pointer-events:auto}
#musicBtn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(107,88,50,.24)}
#musicBtn svg{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#musicBtn.muted svg{opacity:.45}
#musicBtn .slash{display:none}
#musicBtn.muted .slash{display:block}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.2s !important}
  .petal,#dust{display:none}
  .rv{filter:none}
}