:root{
  --night: #140F1F;
  --night-2: #1F1733;
  --night-3: #291F42;
  --gold: #E8A33D;
  --gold-light: #FFD98E;
  --rose: #C24A5B;
  --teal: #3E9188;
  --cream: #F7EEDD;
  --cream-dim: #CBBBA0;
  --line: rgba(232,163,61,0.28);
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background: var(--night);
  color: var(--cream);
  font-family:'Manrope', sans-serif;
  overflow-x:hidden;
  min-height:100vh;
}

h1,h2,.display{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  letter-spacing:0.01em;
}

.urdu{
  font-family:'Noto Nastaliq Urdu', serif;
  direction:rtl;
  line-height:2.1;
}

/* ---------- Ambient sky ---------- */
.sky{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse at 15% 8%, rgba(232,163,61,0.12), transparent 45%),
    radial-gradient(ellipse at 88% 20%, rgba(194,74,91,0.16), transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(62,145,136,0.10), transparent 55%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 55%, var(--night-3) 100%);
  pointer-events:none;
}
.lantern-glow{
  position:fixed;
  top:-120px; left:50%;
  transform:translateX(-50%);
  width:600px; height:600px;
  background: radial-gradient(circle, rgba(255,217,142,0.10), transparent 65%);
  z-index:0;
  pointer-events:none;
  filter: blur(10px);
}
.star{
  position:fixed;
  border-radius:50%;
  background:var(--gold-light);
  opacity:0.55;
  z-index:1;
  pointer-events:none;
  animation: twinkle 3.4s ease-in-out infinite;
}
.star.teal{ background: var(--teal); }
@keyframes twinkle{
  0%,100%{opacity:0.15; transform:scale(0.85);}
  50%{opacity:0.85; transform:scale(1.15);}
}

/* ---------- Cover screen ---------- */
#cover{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:32px;
  background: var(--night);
  transition: opacity 1s ease, visibility 1s ease;
}
#cover.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.envelope{
  width:150px;
  height:104px;
  position:relative;
  margin-bottom:38px;
  cursor:pointer;
}
.envelope-body{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, #2a2245, #201936);
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.envelope-flap{
  position:absolute;
  top:-1px; left:-1px; right:-1px;
  height:56px;
  background: linear-gradient(160deg, #3a2f5c, #2a2245);
  clip-path: polygon(0 0, 100% 0, 50% 78%);
  border-radius:6px 6px 0 0;
  transform-origin: top;
  transition: transform 0.6s cubic-bezier(.6,-0.2,.4,1.4);
}
.envelope-seal{
  position:absolute;
  top:38px; left:50%;
  transform:translate(-50%,0);
  width:34px; height:34px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 60%, #9c6c1e);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  z-index:2;
  transition: transform 0.4s ease;
}
.envelope:hover .envelope-seal{ transform:translate(-50%,0) scale(1.08); }
.envelope.open .envelope-flap{ transform: rotateX(180deg); }
.envelope.open .envelope-seal{ opacity:0; transform:translate(-50%,-10px) scale(0.6); }

#cover .eyebrow{
  color: var(--gold);
  font-size:0.82rem;
  letter-spacing:0.16em;
  margin-bottom:14px;
  font-weight:600;
}
#cover h1{
  font-size:clamp(2rem, 6vw, 3.2rem);
  color: var(--cream);
  margin-bottom:10px;
}
#cover p.sub{
  color: var(--cream-dim);
  font-size:1.05rem;
  max-width:420px;
  margin: 0 auto 6px;
}
#cover .tap{
  margin-top:26px;
  font-size:0.95rem;
  color: var(--teal);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:0.55;}
  50%{opacity:1;}
}

/* ---------- Confetti ---------- */
.confetti-piece{
  position:fixed;
  top:-10px;
  z-index:60;
  pointer-events:none;
  border-radius:2px;
  animation: fall linear forwards;
}
@keyframes fall{
  to{ transform: translateY(110vh) rotate(540deg); opacity:0.9; }
}

/* ---------- Main content ---------- */
main{
  position:relative;
  z-index:2;
  opacity:0;
  transition: opacity 1.2s ease 0.2s;
}
main.show{ opacity:1; }

section{
  position:relative;
  padding: 110px 24px;
  max-width:920px;
  margin:0 auto;
}

/* Hero */
#hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:70px;
  padding-bottom:70px;
}
.portrait-frame{
  width:220px;
  height:220px;
  border-radius:50%;
  padding:6px;
  background: conic-gradient(from 180deg, var(--gold), var(--rose), var(--teal), var(--gold-light), var(--gold));
  margin-bottom:34px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.5);
  animation: spinFrame 8s linear infinite;
}
.portrait-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  border: 4px solid var(--night);
  display:block;
}
@keyframes spinFrame{
  0%{ filter: hue-rotate(0deg); }
  100%{ filter: hue-rotate(360deg); }
}
#hero .eyebrow{
  color:var(--gold);
  letter-spacing:0.18em;
  font-size:0.8rem;
  font-weight:700;
  margin-bottom:18px;
}
#hero h1{
  font-size:clamp(2.4rem, 7vw, 4.4rem);
  line-height:1.08;
  color:var(--cream);
}
#hero h1 .accent{ color: var(--gold); font-style:italic; }
#hero .urdu-line{
  font-size:clamp(1.5rem, 4vw, 2rem);
  color: var(--gold-light);
  margin-top:18px;
}
#hero .date-chip{
  margin-top:34px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 22px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--cream-dim);
  font-size:0.9rem;
  letter-spacing:0.04em;
}
#hero .date-chip .dot{
  width:6px; height:6px; border-radius:50%; background:var(--teal);
}
.scroll-cue{
  margin-top:60px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color: var(--cream-dim);
  font-size:0.75rem;
  letter-spacing:0.1em;
}
.scroll-line{
  width:1px; height:34px;
  background: linear-gradient(var(--gold), transparent);
  animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%,100%{ opacity:0.3; }
  50%{ opacity:1; }
}

/* Divider */
.divider{
  width:1px;
  height:70px;
  margin:0 auto;
  background: linear-gradient(var(--gold), transparent);
  opacity:0.6;
}

/* Then & Now compare slider */
#thennow{
  text-align:center;
}
#thennow .kicker{
  color:var(--teal);
  font-size:0.8rem;
  letter-spacing:0.16em;
  font-weight:700;
  margin-bottom:14px;
  display:block;
}
#thennow h2{
  font-size:clamp(1.8rem,4vw,2.6rem);
  margin-bottom:10px;
}
#thennow .hint{
  color:var(--cream-dim);
  font-size:0.9rem;
  margin-bottom:36px;
}
.compare{
  position:relative;
  width:100%;
  max-width:420px;
  aspect-ratio: 3 / 4;
  margin:0 auto;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  border:1px solid var(--line);
  cursor:ew-resize;
  user-select:none;
  touch-action:none;
}
.compare-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}
.compare-clip{
  position:absolute;
  inset:0;
  width:55%;
  overflow:hidden;
}
.compare-clip img{
  width: var(--compare-img-w, 420px);
  max-width:none;
  height:100%;
  object-fit:cover;
}
.compare-handle{
  position:absolute;
  top:0; bottom:0;
  left:55%;
  width:2px;
  background: var(--gold-light);
  transform:translateX(-1px);
  box-shadow: 0 0 12px rgba(255,217,142,0.7);
}
.handle-grip{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:42px; height:42px;
  border-radius:50%;
  background: var(--gold);
  color: var(--night);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.tag{
  position:absolute;
  top:16px;
  font-size:0.72rem;
  letter-spacing:0.14em;
  font-weight:700;
  padding:5px 12px;
  border-radius:999px;
  background: rgba(20,15,31,0.55);
  color: var(--cream);
  border:1px solid var(--line);
  pointer-events:none;
}
.tag-left{ left:14px; }
.tag-right{ right:14px; }
#thennow .caption{
  margin-top:26px;
  color: var(--cream-dim);
  font-size:0.92rem;
  font-style:italic;
}

/* Message section */
#message .kicker{
  color:var(--rose);
  font-size:0.8rem;
  letter-spacing:0.16em;
  font-weight:700;
  text-align:center;
  display:block;
  margin-bottom:22px;
}
#message .letter{
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border:1px solid var(--line);
  border-radius:18px;
  padding: 44px 38px;
  position:relative;
}
#message .letter::before{
  content:'';
  position:absolute;
  inset:8px;
  border:1px solid rgba(232,163,61,0.15);
  border-radius:12px;
  pointer-events:none;
}
#message .urdu{
  font-size:clamp(1.3rem, 3vw, 1.65rem);
  color:var(--cream);
  text-align:center;
  margin-bottom:26px;
}
#message .signoff{
  text-align:center;
  color:var(--cream-dim);
  font-size:0.95rem;
  margin-top:8px;
}
#message .signoff strong{ color:var(--gold-light); font-weight:700; }

/* Cake / candle interactive */
#cake{
  text-align:center;
}
#cake .kicker{
  color:var(--gold);
  font-size:0.8rem;
  letter-spacing:0.16em;
  font-weight:700;
  margin-bottom:8px;
  display:block;
}
#cake h2{
  font-size:clamp(1.7rem,4vw,2.3rem);
  margin-bottom:6px;
}
#cake p.hint{
  color:var(--cream-dim);
  font-size:0.95rem;
  margin-bottom:38px;
}
.cake-wrap{
  display:flex;
  justify-content:center;
}
.candle-btn{
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.flame{
  width:14px; height:22px;
  margin:0 auto;
  background: radial-gradient(circle at 50% 70%, var(--gold-light), var(--gold) 55%, var(--rose) 100%);
  border-radius:50% 50% 50% 50% / 65% 65% 35% 35%;
  transform-origin:bottom center;
  animation: flicker 0.9s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 10px rgba(232,163,61,0.7));
}
@keyframes flicker{
  0%{ transform: scaleY(1) rotate(-2deg);}
  100%{ transform: scaleY(1.12) rotate(2deg);}
}
.flame.out{
  animation:none;
  opacity:0;
  transform: scaleY(0.2);
}
.smoke{
  width:3px; height:0;
  background: linear-gradient(var(--cream-dim), transparent);
  margin:0 auto;
  opacity:0;
  border-radius:3px;
}
.smoke.rise{
  animation: smokeUp 1.6s ease-out forwards;
}
@keyframes smokeUp{
  0%{ height:0; opacity:0.6; transform:translateY(0) translateX(0);}
  100%{ height:60px; opacity:0; transform:translateY(-40px) translateX(10px);}
}
.wick{ width:3px; height:16px; background:#7a5c2e; margin:0 auto; }
.cake-body{
  width:220px;
  margin: 4px auto 0;
}
.tier{
  border-radius:10px;
  background: linear-gradient(180deg, #3a2245, #2a1834);
  border: 1px solid var(--line);
  position:relative;
}
.tier::before{
  content:'';
  position:absolute;
  top:-8px; left:0; right:0;
  height:16px;
  background: repeating-linear-gradient(90deg, var(--gold-light) 0 10px, var(--rose) 10px 20px, var(--teal) 20px 30px);
  border-radius:10px;
  opacity:0.9;
}
.tier.top{ height:60px; width:150px; margin:0 auto; }
.tier.bottom{ height:70px; width:220px; margin-top:4px; }
.plate{
  width:250px; height:10px;
  margin:0 auto;
  background: var(--gold);
  border-radius:50%;
  opacity:0.5;
  filter: blur(1px);
}
#cake .status{
  margin-top:26px;
  color:var(--gold-light);
  font-size:1rem;
  min-height:1.4em;
}

/* Footer */
footer{
  text-align:center;
  padding: 70px 24px 60px;
  color: var(--cream-dim);
  font-size:0.85rem;
}
footer .hearts{
  color:var(--rose);
  margin-bottom:10px;
  letter-spacing:6px;
}

/* Balloons */
.balloon{
  position:fixed;
  bottom:-140px;
  z-index:3;
  pointer-events:none;
  opacity:0.85;
  animation: floatUp linear infinite;
}
.balloon .body{
  width:38px; height:48px;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
}
.balloon .string{
  width:1px; height:46px;
  background: rgba(246,236,218,0.35);
  margin: 0 auto;
}
@keyframes floatUp{
  0%{ transform: translateY(0) translateX(0); }
  50%{ transform: translateY(-60vh) translateX(20px); }
  100%{ transform: translateY(-115vh) translateX(-10px); }
}

@media (max-width:640px){
  section{ padding:80px 20px; }
  #message .letter{ padding:30px 22px; }
  .compare{ max-width:320px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count:1 !important; transition-duration: 0.01ms !important; }
}