/* ============================================================
   Wedding Walima — Noman Faisal | 14 November 2026
   Palette: midnight emerald, champagne gold, ivory
   ============================================================ */
:root{
  --emerald-950:#061f17;
  --emerald-900:#0a2e22;
  --emerald-800:#0e3d2d;
  --emerald-700:#14523c;
  --gold:#d4af5f;
  --gold-light:#eed9a3;
  --gold-deep:#a5813a;
  --ivory:#faf5e8;
  --ivory-dim:#e9dfc6;
  --ink:#0c1f18;
  --serif:'Cormorant Garamond',Georgia,serif;
  --script:'Great Vibes',cursive;
  --sans:'Jost',system-ui,-apple-system,sans-serif;
  --arabic:'Amiri',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.locked{overflow:hidden;height:100%}
body{
  font-family:var(--sans);
  background:var(--emerald-950);
  color:var(--ivory);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
img{max-width:100%;display:block}
a{color:inherit}
.container{width:min(92vw,600px);margin:0 auto;position:relative;z-index:2}

/* Fireworks canvas */
#fireworks{position:fixed;inset:0;width:100%;height:100%;z-index:90;pointer-events:none}

/* ============================================================
   SEALED CARD STAGE
   ============================================================ */
#seal-stage{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 0%, #123f2f 0%, var(--emerald-900) 45%, #04160f 100%);
  cursor:pointer;
  transition:opacity 1.1s ease, visibility 1.1s;
  overflow:hidden;
}
#seal-stage.dismissed{opacity:0;visibility:hidden;pointer-events:none}
#seal-stage::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(212,175,95,.10) 1px, transparent 1.6px);
  background-size:34px 34px;
  mask-image:radial-gradient(75% 65% at 50% 45%, #000 30%, transparent 100%);
}
.stage-inner{
  position:relative;z-index:2;text-align:center;
  padding:24px 20px;max-width:430px;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.stage-eyebrow{
  font-family:var(--sans);font-weight:400;letter-spacing:.42em;text-transform:uppercase;
  font-size:.68rem;color:var(--gold-light);text-indent:.42em;
}
.stage-title{
  font-family:var(--script);font-weight:400;
  font-size:clamp(2.6rem,11vw,3.6rem);line-height:1.1;color:var(--ivory);
  text-shadow:0 2px 24px rgba(212,175,95,.35);
}
.card-scene{perspective:1200px;margin:6px 0 2px;width:min(72vw,300px)}
.card-tilt{position:relative;transform-style:preserve-3d;animation:cardFloat 5s ease-in-out infinite}
@keyframes cardFloat{
  0%,100%{transform:rotateY(-7deg) rotateX(3deg) translateY(0)}
  50%{transform:rotateY(7deg) rotateX(-3deg) translateY(-10px)}
}
.sealed-card{
  width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(212,175,95,.45), 0 0 44px rgba(212,175,95,.22);
}
.card-shine{
  position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,244,214,.28) 46%,transparent 62%);
  background-size:280% 280%;background-position:120% 0;
  animation:shineSweep 4.2s ease-in-out infinite;
}
@keyframes shineSweep{0%{background-position:120% 0}55%,100%{background-position:-40% 0}}
.seal-ring{
  position:absolute;left:50%;bottom:16%;width:92px;height:92px;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;
  border:2px solid rgba(238,217,163,.9);
  animation:sealPulse 2.1s ease-out infinite;
}
@keyframes sealPulse{
  0%{transform:translateX(-50%) scale(.72);opacity:1}
  100%{transform:translateX(-50%) scale(1.5);opacity:0}
}
.open-btn{
  margin-top:10px;border:1px solid rgba(212,175,95,.65);background:rgba(212,175,95,.08);
  border-radius:999px;padding:2px;cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}
.open-btn:hover{transform:scale(1.05);box-shadow:0 0 30px rgba(212,175,95,.35)}
.open-btn-core{
  display:block;padding:.85rem 2.6rem;border-radius:999px;
  font-family:var(--sans);font-weight:500;font-size:.95rem;letter-spacing:.28em;text-transform:uppercase;text-indent:.28em;
  color:#0a231a;background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.stage-hint{font-size:.82rem;letter-spacing:.14em;color:var(--ivory-dim);opacity:.75;font-weight:300}
.stage-flash{
  position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 46%, #fff8e3 0%, rgba(238,217,163,.85) 28%, transparent 70%);
}
#seal-stage.opening .stage-flash{animation:flashBurst 1.15s ease-out forwards}
@keyframes flashBurst{0%{opacity:0;transform:scale(.6)}25%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
#seal-stage.opening .card-tilt{animation:cardOpen 1.05s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes cardOpen{
  0%{transform:rotateY(0) scale(1)}
  45%{transform:rotateY(24deg) scale(1.12)}
  100%{transform:rotateY(-8deg) scale(1.9);opacity:0}
}
#seal-stage.opening .stage-inner{animation:stageOut .9s ease-in .15s forwards}
@keyframes stageOut{to{transform:scale(1.25);opacity:0;filter:blur(6px)}}

/* floating gold dust on the stage */
.stage-dust span{
  position:absolute;bottom:-4vh;border-radius:50%;
  background:radial-gradient(circle,#ffe9b0 0%,rgba(212,175,95,.15) 70%,transparent 100%);
  animation:rise linear infinite;opacity:0;
}
.stage-dust span:nth-child(1){left:8%;width:9px;height:9px;animation-duration:11s;animation-delay:0s}
.stage-dust span:nth-child(2){left:22%;width:6px;height:6px;animation-duration:14s;animation-delay:2.5s}
.stage-dust span:nth-child(3){left:37%;width:11px;height:11px;animation-duration:10s;animation-delay:5s}
.stage-dust span:nth-child(4){left:54%;width:7px;height:7px;animation-duration:13s;animation-delay:1.2s}
.stage-dust span:nth-child(5){left:68%;width:10px;height:10px;animation-duration:12s;animation-delay:7s}
.stage-dust span:nth-child(6){left:80%;width:6px;height:6px;animation-duration:15s;animation-delay:3.4s}
.stage-dust span:nth-child(7){left:90%;width:9px;height:9px;animation-duration:11s;animation-delay:8.6s}
.stage-dust span:nth-child(8){left:15%;width:5px;height:5px;animation-duration:16s;animation-delay:6.2s}
.stage-dust span:nth-child(9){left:46%;width:8px;height:8px;animation-duration:12.5s;animation-delay:4.1s}
.stage-dust span:nth-child(10){left:60%;width:5px;height:5px;animation-duration:14.5s;animation-delay:9.3s}
.stage-dust span:nth-child(11){left:30%;width:7px;height:7px;animation-duration:13.5s;animation-delay:10.5s}
.stage-dust span:nth-child(12){left:74%;width:8px;height:8px;animation-duration:11.5s;animation-delay:11.8s}
@keyframes rise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.9}
  100%{transform:translateY(-108vh) translateX(4vw);opacity:0}
}

/* ============================================================
   INVITATION BODY
   ============================================================ */
#invitation{
  position:relative;
  background:
    radial-gradient(110% 60% at 50% 0%, #11402f 0%, var(--emerald-900) 42%, var(--emerald-950) 100%);
  opacity:0;visibility:hidden;
  transition:opacity 1.2s ease .15s, visibility 1.2s .15s;
}
#invitation.unsealed{opacity:1;visibility:visible}
#invitation::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(212,175,95,.07) 1px, transparent 1.6px);
  background-size:38px 38px;
  mask-image:linear-gradient(#000, transparent 30%, transparent 70%, #000);
}

.hero{position:relative;padding:calc(28px + env(safe-area-inset-top)) 0 34px;text-align:center;overflow:hidden}
.hero-glow{
  position:absolute;top:-12%;left:50%;transform:translateX(-50%);
  width:120vw;max-width:760px;aspect-ratio:1.4;pointer-events:none;
  background:radial-gradient(closest-side, rgba(212,175,95,.16), transparent 70%);
}
.bismillah{
  font-family:var(--arabic);font-size:clamp(1.9rem,8.4vw,2.7rem);line-height:1.9;
  color:var(--gold-light);text-shadow:0 0 26px rgba(212,175,95,.35);
}
.bismillah-en{font-size:.8rem;letter-spacing:.12em;color:var(--ivory-dim);font-weight:300;margin-top:2px}
.divider{width:min(74vw,340px);margin:20px auto;opacity:.95}
.eyebrow{
  font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;text-indent:.4em;
  color:var(--gold);font-weight:500;margin-bottom:10px;
}
.invite-line{font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--ivory-dim)}
.walima-title{
  font-family:var(--script);font-size:clamp(3rem,14vw,4.4rem);line-height:1.15;color:var(--ivory);
  margin:6px 0 2px;
  background:linear-gradient(100deg,#f7e9c4 20%,var(--gold) 40%,#fff6dd 55%,var(--gold) 70%,#f7e9c4 90%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 7s linear infinite;
  filter:drop-shadow(0 2px 14px rgba(212,175,95,.28));
}
@keyframes shimmer{to{background-position:220% center}}
.of-line{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--gold-light);margin:2px 0}
.groom,.bride{
  font-family:var(--serif);font-weight:600;letter-spacing:.04em;
  font-size:clamp(2rem,9.4vw,2.9rem);color:var(--ivory);line-height:1.2;
}
.groom{margin-top:6px}
.parent-line{font-size:1.02rem;color:var(--ivory-dim);font-weight:300;margin-top:6px}
.parent-line strong{color:var(--gold-light);font-weight:500}
.amp{margin:14px 0 10px}
.amp span{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(212,175,95,.7);color:var(--gold);
  font-family:var(--serif);font-style:italic;font-size:1.7rem;
  background:rgba(212,175,95,.07);box-shadow:0 0 22px rgba(212,175,95,.18);
}
.bride-label{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ivory-dim)}
.bride{margin-top:4px}

.event-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px 0 6px}
.meta-chip{
  border:1px solid rgba(212,175,95,.35);border-radius:14px;
  background:linear-gradient(160deg, rgba(212,175,95,.10), rgba(212,175,95,.03));
  padding:14px 10px;backdrop-filter:blur(2px);
}
.meta-chip-wide{grid-column:1/-1}
.meta-k{display:block;font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;text-indent:.34em}
.meta-v{font-family:var(--serif);font-size:1.12rem;line-height:1.5;color:var(--ivory)}
.meta-v em{font-size:.85rem;color:var(--ivory-dim)}

/* Countdown */
.countdown-wrap{margin:30px 0 8px}
.countdown-title{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--gold-light);margin-bottom:14px}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cd-cell{
  border:1px solid rgba(212,175,95,.4);border-radius:12px;padding:12px 4px;
  background:rgba(6,31,23,.55);
  box-shadow:inset 0 1px 0 rgba(238,217,163,.12), 0 8px 22px rgba(0,0,0,.35);
}
.cd-num{
  display:block;font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,7.4vw,2.1rem);
  color:var(--gold-light);font-variant-numeric:tabular-nums;line-height:1.1;
}
.cd-lab{display:block;margin-top:6px;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ivory-dim);text-indent:.26em}
.countdown-done{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--gold-light);padding:18px 0}

.celebrate-btn{
  margin-top:22px;border:1px solid rgba(212,175,95,.7);cursor:pointer;
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  color:#0a231a;font-family:var(--sans);font-weight:600;font-size:.85rem;
  letter-spacing:.3em;text-transform:uppercase;text-indent:.3em;
  padding:1rem 2.4rem;border-radius:999px;
  box-shadow:0 10px 30px rgba(212,175,95,.28), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .25s ease, box-shadow .25s ease;
}
.celebrate-btn:active{transform:scale(.96)}
.scroll-cue{margin-top:26px;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ivory-dim);opacity:.7}
.scroll-cue span{
  display:block;width:22px;height:36px;margin:0 auto 10px;border:1.5px solid rgba(212,175,95,.6);
  border-radius:12px;position:relative;
}
.scroll-cue span::after{
  content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:4px;
  background:var(--gold);animation:cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* Sections */
.section{padding:56px 0;position:relative}
.section-alt{background:linear-gradient(180deg, rgba(6,31,23,.0), rgba(6,31,23,.55) 18%, rgba(6,31,23,.55) 82%, rgba(6,31,23,0))}
.section-title{
  font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,8.6vw,2.6rem);
  color:var(--ivory);text-align:center;letter-spacing:.03em;
}
.section-sub{font-family:var(--serif);font-style:italic;text-align:center;color:var(--gold-light);margin-top:6px;font-size:1.05rem}

/* Timeline */
.timeline{list-style:none;margin-top:34px;position:relative}
.timeline::before{
  content:"";position:absolute;left:9px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(var(--gold), rgba(212,175,95,.08));
}
.t-item{position:relative;padding-left:40px;margin-bottom:16px}
.t-dot{
  position:absolute;left:9px;top:26px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;
  background:var(--emerald-900);border:2px solid var(--gold);
  box-shadow:0 0 12px rgba(212,175,95,.7);
}
.t-card{
  border:1px solid rgba(212,175,95,.32);border-radius:14px;padding:16px 16px 15px;
  background:linear-gradient(160deg, rgba(212,175,95,.10), rgba(212,175,95,.02));
  box-shadow:0 10px 26px rgba(0,0,0,.3);
}
.t-when{
  display:inline-block;margin-bottom:10px;padding:.32rem .95rem;border-radius:999px;
  font-family:var(--serif);font-weight:700;font-size:.92rem;letter-spacing:.12em;
  color:#0a231a;background:linear-gradient(135deg,var(--gold-light),var(--gold) 60%,var(--gold-deep));
  font-variant-numeric:tabular-nums;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.t-card h3{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--ivory);margin-bottom:4px}
.t-card p{font-size:.92rem;font-weight:300;color:var(--ivory-dim);line-height:1.55}

/* Venue */
.venue-card{
  margin-top:30px;border:1px solid rgba(212,175,95,.4);border-radius:20px;
  background:linear-gradient(165deg, rgba(20,82,60,.5), rgba(6,31,23,.7));
  padding:28px 22px;text-align:center;
  box-shadow:0 18px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(238,217,163,.14);
}
.venue-card h3{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--gold-light)}
.venue-addr{color:var(--ivory-dim);font-weight:300;margin:8px 0 18px;line-height:1.6;font-size:.95rem}
.venue-rows{border-top:1px solid rgba(212,175,95,.25);border-bottom:1px solid rgba(212,175,95,.25);margin-bottom:22px}
.venue-row{display:flex;justify-content:space-between;gap:12px;padding:12px 2px;font-size:.95rem}
.venue-row + .venue-row{border-top:1px dashed rgba(212,175,95,.2)}
.venue-row span{color:var(--gold);letter-spacing:.18em;text-transform:uppercase;font-size:.7rem;align-self:center}
.venue-row strong{font-weight:500;color:var(--ivory);text-align:right}
.btn-gold,.btn-ghost{
  display:inline-block;text-decoration:none;border-radius:999px;
  font-weight:500;letter-spacing:.22em;text-transform:uppercase;font-size:.8rem;text-indent:.22em;
  padding:.95rem 2rem;transition:transform .2s ease, box-shadow .2s ease;
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));color:#0a231a;
  box-shadow:0 10px 26px rgba(212,175,95,.3), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-gold:active{transform:scale(.97)}
.btn-ghost{border:1px solid rgba(212,175,95,.6);color:var(--gold-light);background:rgba(212,175,95,.06)}
.btn-ghost:active{transform:scale(.97)}
.venue-note{margin:20px 0 10px;font-family:var(--serif);font-style:italic;color:var(--ivory-dim)}
.venue-calls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.venue-calls .btn-ghost{padding:.8rem 1.4rem;letter-spacing:.08em;text-indent:0}

/* Contacts */
.contacts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
.contact-card{
  border:1px solid rgba(212,175,95,.32);border-radius:16px;padding:20px 12px;text-align:center;
  background:linear-gradient(165deg, rgba(212,175,95,.10), rgba(212,175,95,.02));
  box-shadow:0 12px 28px rgba(0,0,0,.32);
  display:flex;flex-direction:column;gap:6px;align-items:center;
}
.contact-card h3{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--ivory)}
.urdu{font-family:var(--arabic);font-size:1.25rem;color:var(--gold-light);line-height:1.8}
.role{font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);text-indent:.32em}
.phone{font-family:var(--serif);font-size:1.12rem;color:var(--ivory);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.contact-btns{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;justify-content:center}
.btn-sm{padding:.62rem 1.05rem;font-size:.68rem;letter-spacing:.14em;text-indent:.14em}

/* Footer */
.footer{padding:34px 0 calc(44px + env(safe-area-inset-bottom));text-align:center;position:relative}
.footer-thanks{font-family:var(--script);font-size:1.9rem;color:var(--gold-light);margin:6px 0 18px}
.footer-credit{font-size:.9rem;color:var(--ivory-dim);font-weight:300;letter-spacing:.06em}
.footer-credit a,.footer-agency a{color:var(--gold-light);font-weight:500;text-decoration:none;border-bottom:1px solid rgba(212,175,95,.4)}
.footer-agency{margin-top:8px;font-size:.85rem;color:var(--ivory-dim);font-weight:300}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
#invitation:not(.unsealed) .reveal{transition:none}

/* Larger screens */
@media (min-width:560px){
  .card-scene{width:320px}
  .contacts{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .container{width:min(92vw,720px)}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  .reveal{opacity:1;transform:none}
}