/* ============================================================
   FOR MY BHAI — DESIGN TOKENS
   ============================================================ */
:root{
  --wine-deep:   #3A0F1F;
  --wine:        #6B1730;
  --wine-mid:    #8C2440;
  --wine-soft:   #A8395A;
  --gold:        #C79A3F;
  --gold-light:  #E3C374;
  --gold-dim:    #9C7A34;
  --cream:       #FBF2E4;
  --ivory:       #FFFAF2;
  --peach:       #F2D6C4;
  --peach-soft:  #F7E3D6;
  --ink:         #2B1410;
  --ink-soft:    #5A3E38;
  --on-dark:     #F5E7D6;
  --on-dark-dim: #D8B9A8;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Cormorant Garamond', Georgia, serif;
  --font-script:  'Dancing Script', cursive;

  --container: 1080px;
  --container-narrow: 760px;
  --radius: 6px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.6;
  overflow-x:hidden;
  width:100%;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3{ font-family:var(--font-display); margin:0; font-weight:600; }
p{ margin:0; }
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(20px, 6vw, 48px);
}
.container-narrow{ max-width:var(--container-narrow); }

.script{
  font-family:var(--font-script);
  font-weight:600;
  color:var(--gold);
  font-size:1.18em;
  line-height:1;
}
.script-lg{ font-size:1.25em; }
.heart{ color:var(--gold); font-size:0.85em; }
.heart-beat{ display:inline-block; color:var(--wine-soft); animation:heartbeat 1.8s ease-in-out infinite; }
@keyframes heartbeat{
  0%,100%{ transform:scale(1); }
  15%{ transform:scale(1.18); }
  30%{ transform:scale(1); }
  45%{ transform:scale(1.12); }
}

.eyebrow{
  font-family:var(--font-body);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.8rem;
  font-weight:600;
  color:var(--gold-dim);
  margin-bottom:.8rem;
  text-align:center;
}
.eyebrow-light{ color:var(--gold-light); }

.section-title{
  text-align:center;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.25;
  color:var(--wine-deep);
  margin-bottom:clamp(2rem, 5vw, 3.4rem);
  font-weight:600;
}
.section-title.light{ color:var(--cream); }

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  border-radius:999px;
  padding:.9em 2em;
  font-family:var(--font-body);
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:.02em;
  border:1.5px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  cursor:pointer;
}
.btn:active{ transform:scale(.97); }
.btn-primary{
  background:linear-gradient(155deg, var(--gold-light), var(--gold) 70%);
  color:var(--wine-deep);
  box-shadow:0 8px 24px -8px rgba(199,154,63,.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(199,154,63,.7); }
.btn-outline{
  background:transparent;
  border-color:var(--gold);
  color:var(--gold-light);
}
.btn-outline:hover{ background:rgba(227,195,116,.12); transform:translateY(-2px); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal-up{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal-up.is-visible{ opacity:1; transform:translateY(0); }

/* ============================================================
   SIGNATURE ELEMENT — THE RAKHI THREAD (scroll progress)
   ============================================================ */
.thread-rail{
  position:fixed;
  top:0; right:14px;
  width:40px; height:100vh;
  z-index:60;
  pointer-events:none;
  display:none;
}
@media (min-width:900px){ .thread-rail{ display:block; } }
.thread-svg{ width:100%; height:100%; }
.thread-path-bg{
  fill:none; stroke:rgba(199,154,63,.22); stroke-width:2.5; stroke-linecap:round;
}
.thread-path-fg{
  fill:none; stroke:var(--gold); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  transition:stroke-dashoffset .1s linear;
  filter:drop-shadow(0 0 4px rgba(199,154,63,.5));
}
.thread-charm{
  position:absolute; left:50%; top:0;
  transform:translate(-50%,-50%);
  transition:top .12s linear;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

.thread-rail-mobile{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:70;
  background:rgba(199,154,63,.15);
}
@media (min-width:900px){ .thread-rail-mobile{ display:none; } }
.thread-rail-mobile-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--gold-dim), var(--gold-light));
  transition:width .1s linear;
}

/* ============================================================
   PETALS
   ============================================================ */
.petal-field{
  position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden;
}
.petal{
  position:absolute;
  top:-5%;
  width:10px; height:10px;
  border-radius:0 60% 0 60%;
  background:var(--gold-light);
  opacity:.55;
  animation-name:petal-fall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

@keyframes petal-fall{
  0%{ transform:translateY(-10vh) translateX(0) rotate(0deg); }
  100%{ transform:translateY(110vh) translateX(var(--drift,40px)) rotate(340deg); }
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:14px clamp(16px,4vw,32px);
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.scrolled{
  background:rgba(58,15,31,.92);
  backdrop-filter:blur(10px);
  padding:8px clamp(16px,4vw,32px);
  box-shadow:0 6px 24px -12px rgba(0,0,0,.5);
}
.nav-inner{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.nav-brand{
  font-family:var(--font-display);
  color:var(--on-dark);
  font-size:1.15rem;
  font-weight:600;
  white-space:nowrap;
}
.nav-menu{
  list-style:none; display:flex; gap:clamp(14px,2vw,30px);
  margin:0; padding:0;
}
.nav-link{
  color:var(--on-dark-dim);
  font-size:.98rem;
  letter-spacing:.02em;
  position:relative;
  padding:4px 0;
  transition:color .3s;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold-light); transition:width .3s var(--ease);
}
.nav-link:hover{ color:var(--on-dark); }
.nav-link:hover::after{ width:100%; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:8px;
}
.nav-toggle span{ width:22px; height:2px; background:var(--on-dark); border-radius:2px; transition:transform .3s, opacity .3s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.music-btn{
  position:relative;
  width:44px; height:44px;
  border-radius:50%;
  border:1.5px solid var(--gold);
  background:rgba(199,154,63,.1);
  color:var(--gold-light);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:background .3s, transform .3s;
}
.music-btn:hover{ transform:scale(1.06); background:rgba(199,154,63,.22); }
.music-disc{ display:flex; align-items:center; justify-content:center; animation:spin 6s linear infinite; animation-play-state:paused; }
.music-btn.playing .music-disc{ animation-play-state:running; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.icon-pause{ display:none; }
.music-btn.playing .icon-play{ display:none; }
.music-btn.playing .icon-pause{ display:block; }

.music-waves{
  position:absolute; bottom:-3px; left:50%; transform:translateX(-50%);
  display:flex; gap:2px; height:8px;
}
.music-waves i{
  width:2px; background:var(--gold-light); border-radius:2px; height:3px;
  animation:wave 1s ease-in-out infinite;
  opacity:0;
}
.music-btn.playing .music-waves i{ opacity:1; }
.music-waves i:nth-child(1){ animation-delay:0s; }
.music-waves i:nth-child(2){ animation-delay:.15s; }
.music-waves i:nth-child(3){ animation-delay:.3s; }
.music-waves i:nth-child(4){ animation-delay:.45s; }
@keyframes wave{ 0%,100%{ height:3px; } 50%{ height:9px; } }

.now-playing{
  max-width:1240px; margin:6px auto 0;
  text-align:right;
  font-size:.78rem;
  color:var(--on-dark-dim);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .4s, transform .4s;
  pointer-events:none;
  padding-right:2px;
}
.now-playing.show{ opacity:1; transform:translateY(0); }
.np-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--gold-light); margin-right:6px;
  animation:pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

@media (max-width:860px){
  .nav-menu{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--wine-deep);
    flex-direction:column; justify-content:center; align-items:flex-start;
    padding:80px 32px;
    gap:28px;
    transform:translateX(100%);
    transition:transform .45s var(--ease);
    box-shadow:-10px 0 40px rgba(0,0,0,.4);
  }
  .nav-menu.open{ transform:translateX(0); }
  .nav-link{ font-size:1.2rem; }
  .nav-toggle{ display:flex; }
  .now-playing{ text-align:left; padding-left:2px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  padding-bottom:clamp(50px,8vh,90px);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-fallback{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(227,195,116,.22), transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(168,57,90,.35), transparent 55%),
    linear-gradient(155deg, #1a0610 0%, #3A0F1F 40%, #6B1730 100%);
}
.hero-img[data-broken="true"]{ display:none; }
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(30,8,18,.72) 0%, rgba(30,8,18,.45) 45%, rgba(30,8,18,.25) 100%),
    linear-gradient(180deg, rgba(20,6,12,.25) 0%, rgba(20,6,12,.15) 40%, rgba(20,6,12,.78) 100%);
}
.hero-img{
  width:100%; height:100%; object-fit:cover;
  object-position:center 30%;
  filter:saturate(1.15) contrast(1.05) brightness(0.92);
}
.hero-content{
  position:relative; z-index:2;
  max-width:820px;
  margin:0 auto;
  padding:0 clamp(20px,6vw,48px);
  text-align:center;
  width:100%;
}
.hero .eyebrow{ text-align:center; color:var(--gold-light); letter-spacing:.28em; }
.hero-title{
  font-size:clamp(2.3rem, 6.4vw, 4.3rem);
  color:var(--on-dark);
  line-height:1.08;
  margin-bottom:.6em;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.hero-sub{
  color:var(--on-dark-dim);
  font-size:clamp(1.05rem,2vw,1.35rem);
  line-height:1.65;
  max-width:34ch;
  margin:0 auto 2rem;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:2; background:none; border:none; padding:8px;
}
.scroll-line{
  display:block; width:1px; height:34px;
  background:linear-gradient(var(--gold-light), transparent);
  animation:scroll-cue-move 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-move{ 0%{ opacity:0; transform:translateY(-6px);} 40%{opacity:1;} 100%{ opacity:0; transform:translateY(14px);} }

/* ============================================================
   INTRO CARDS
   ============================================================ */
.intro{ padding:clamp(70px,12vw,120px) 0; background:var(--cream); }
.card-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
@media (max-width:860px){ .card-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
.mini-card{
  background:var(--ivory);
  border:1px solid rgba(199,154,63,.25);
  border-radius:var(--radius);
  padding:clamp(22px,3vw,32px) clamp(16px,2.4vw,24px);
  text-align:center;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.mini-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px -20px rgba(107,23,48,.35);
  border-color:var(--gold);
}
.mini-icon{
  width:52px; height:52px; margin:0 auto 14px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, var(--peach-soft), var(--peach));
  color:var(--wine);
  font-size:1.3rem;
}
.mini-card h3{ font-size:1.15rem; color:var(--wine-deep); margin-bottom:6px; }
.mini-card p{ color:var(--ink-soft); font-size:1rem; }

/* ============================================================
   MEMORIES / POLAROID GALLERY
   ============================================================ */
.memories{
  padding:clamp(70px,12vw,120px) 0;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(199,154,63,.14), transparent 45%),
    radial-gradient(ellipse at 85% 90%, rgba(199,154,63,.1), transparent 45%),
    var(--wine-deep);
}
.polaroid-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px 20px;
  max-width:980px; margin:0 auto;
}
@media (max-width:900px){ .polaroid-grid{ grid-template-columns:repeat(3,1fr); gap:20px 14px; } }
@media (max-width:600px){ .polaroid-grid{ grid-template-columns:repeat(2,1fr); gap:18px 12px; } }

.polaroid{
  background:#fff;
  padding:10px 10px 14px;
  border-radius:2px;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5);
  cursor:pointer;
  transform:rotate(var(--rot,0deg));
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  position:relative;
  border:none;
  text-align:left;
  opacity:0;
  display:flex;
  flex-direction:column;
  animation:polaroid-in .7s var(--ease) forwards;
  animation-delay:var(--delay,0s);
}
@keyframes polaroid-in{
  from{ opacity:0; transform:rotate(var(--rot,0deg)) translateY(18px) scale(.92); }
  to{ opacity:1; transform:rotate(var(--rot,0deg)) translateY(0) scale(1); }
}
.polaroid:hover, .polaroid:focus-visible{
  transform:rotate(0deg) translateY(-8px) scale(1.04);
  box-shadow:0 26px 50px -14px rgba(0,0,0,.6);
  z-index:2;
}
.polaroid-photo{
  aspect-ratio:1/1;
  width:100%;
  overflow:hidden;
  background:linear-gradient(135deg, var(--peach-soft), var(--peach) 60%, var(--gold-light));
  display:flex; align-items:center; justify-content:center;
  position:relative;
  flex:none;
}
.polaroid-photo img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.08) sepia(.08) contrast(1.02);
  transition:transform .6s var(--ease), filter .4s var(--ease);
}
.polaroid:hover .polaroid-photo img{ transform:scale(1.09); filter:saturate(1.15) sepia(.03); }
.polaroid-photo img[data-broken="true"]{ display:none; }
.polaroid-fallback-icon{
  color:rgba(107,23,48,.45); font-size:1.8rem;
}
.polaroid-caption{
  position:static;
  text-align:center;
  font-family:var(--font-script);
  color:var(--wine);
  font-size:.95rem;
  line-height:1.3;
  padding:10px 4px 0;
  min-height:2.6em;
  display:flex;
  align-items:center;
  justify-content:center;
}
.polaroid-charm{
  position:absolute; top:-8px; right:10px;
  font-size:1rem; color:var(--wine-soft);
  transform:rotate(12deg);
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(15,4,8,.92);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.lightbox[hidden]{ display:none; }
.lightbox-frame{ max-width:min(80vw,620px); text-align:center; }
.lightbox-frame img{ width:100%; border-radius:4px; box-shadow:0 30px 70px rgba(0,0,0,.6); }
.lightbox-caption{ color:var(--on-dark); font-family:var(--font-script); font-size:1.3rem; margin-top:14px; }
.lightbox-close{
  position:absolute; top:18px; right:22px;
  background:none; border:none; color:var(--on-dark); font-size:2rem; line-height:1;
}
.lightbox-nav{
  background:none; border:none; color:var(--on-dark-dim); font-size:1.4rem;
  padding:14px; position:absolute; top:50%; transform:translateY(-50%);
}
.lightbox-nav:hover{ color:var(--gold-light); }
.lightbox-prev{ left:8px; }
.lightbox-next{ right:8px; }
@media (max-width:600px){ .lightbox-frame{ max-width:90vw; } }

/* ============================================================
   REASONS
   ============================================================ */
.reasons{ padding:clamp(70px,12vw,120px) 0; background:var(--cream); }
.reasons-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}
.reason-card{
  background:var(--ivory);
  border-left:3px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:24px 22px;
  box-shadow:0 10px 26px -18px rgba(107,23,48,.3);
}
.reason-card p{ color:var(--ink-soft); font-size:1.08rem; line-height:1.5; }
.reason-mark{ color:var(--gold); font-family:var(--font-script); font-size:1.4rem; display:block; margin-bottom:6px; }

/* ============================================================
   STORY / TIMELINE
   ============================================================ */
.story{
  padding:clamp(70px,12vw,120px) 0;
  background:var(--wine-deep);
  position:relative;
}
.timeline{ position:relative; padding-left:34px; }
.timeline::before{
  content:''; position:absolute; left:6px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(var(--gold), rgba(199,154,63,.15));
}
.timeline-item{
  position:relative; padding-bottom:44px;
}
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:''; position:absolute; left:-34px; top:4px;
  width:14px; height:14px; border-radius:50%;
  background:var(--gold-light); border:3px solid var(--wine-deep);
  box-shadow:0 0 0 2px var(--gold);
}
.timeline-era{
  font-family:var(--font-script);
  color:var(--gold-light);
  font-size:1.5rem;
  display:block; margin-bottom:4px;
}
.timeline-item p{ color:var(--on-dark-dim); font-size:1.1rem; max-width:52ch; }

/* ============================================================
   LETTER
   ============================================================ */
.letter-section{ padding:clamp(70px,12vw,120px) 0; background:var(--cream); }
.letter-paper{
  background:var(--ivory);
  border:1px solid rgba(199,154,63,.3);
  border-radius:4px;
  padding:clamp(30px,6vw,60px);
  box-shadow:0 30px 60px -30px rgba(107,23,48,.4);
  position:relative;
}
.letter-paper::before{
  content:'';
  position:absolute; inset:14px;
  border:1px solid rgba(199,154,63,.25);
  pointer-events:none;
}
.letter-paper p{
  font-size:1.25rem;
  line-height:1.85;
  color:var(--ink-soft);
  margin-bottom:1.1em;
}
.letter-greeting{ font-size:1.5rem !important; color:var(--wine-deep) !important; }
.letter-sign{ margin-top:1.6em !important; color:var(--wine) !important; }
.letter-from{ font-family:var(--font-script); font-size:1.3rem; color:var(--gold-dim); }

/* ============================================================
   PROMISE
   ============================================================ */
.promise{ position:relative; padding:clamp(90px,16vw,160px) 0; overflow:hidden; }
.promise-bg{ position:absolute; inset:0; }
.promise-img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05) sepia(.12) contrast(1.02);
}
.promise-img[data-broken="true"]{ display:none; }
.promise-fallback{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(227,195,116,.22), transparent 55%),
    linear-gradient(200deg, #26060F, #5A1729 55%, #7B1E3A);
}
.promise-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,6,12,.55) 0%, rgba(20,6,12,.62) 45%, rgba(15,4,8,.88) 100%); }
.promise-content{ position:relative; z-index:1; text-align:center; }
.promise-text{ color:var(--on-dark-dim); font-size:clamp(1.1rem,2.2vw,1.4rem); line-height:1.7; margin:1.4rem 0 2.2rem; }

.heart-burst{
  position:fixed; pointer-events:none; z-index:200;
  color:var(--gold-light); font-size:1.4rem;
  animation:heart-burst-anim 1.4s ease-out forwards;
}
@keyframes heart-burst-anim{
  0%{ transform:translate(-50%,-50%) scale(.4); opacity:1; }
  100%{ transform:translate(calc(-50% + var(--bx,0px)), calc(-50% - 120px)) scale(1.1); opacity:0; }
}

/* ============================================================
   FINAL SURPRISE
   ============================================================ */
.surprise{ padding:clamp(70px,12vw,120px) 0; background:var(--cream); text-align:center; }
.surprise-box{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.surprise-reveal{
  margin-top:1.6rem;
  background:var(--ivory);
  border:1px solid rgba(199,154,63,.3);
  border-radius:var(--radius);
  padding:clamp(26px,5vw,44px);
  max-width:560px;
  box-shadow:0 24px 50px -26px rgba(107,23,48,.4);
  animation:surprise-in .8s var(--ease) forwards;
}
@keyframes surprise-in{
  from{ opacity:0; transform:translateY(16px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.surprise-title{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3.4vw,2.1rem);
  color:var(--wine-deep);
  margin-bottom:.7em !important;
}
.surprise-reveal p{ font-size:1.15rem; color:var(--ink-soft); line-height:1.7; margin-bottom:.8em; }
.surprise-thanks{ font-family:var(--font-script); color:var(--gold-dim); font-size:1.4rem !important; margin-top:.6em !important; }

/* ============================================================
   FINAL WISH / FOOTER
   ============================================================ */
.final-wish{
  padding:clamp(80px,14vw,140px) 0 clamp(50px,8vw,70px);
  text-align:center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(227,195,116,.18), transparent 55%),
    var(--wine-deep);
}
.final-title{
  color:var(--on-dark);
  font-size:clamp(2rem,5vw,3.2rem);
  margin-bottom:1rem;
}
.final-sub{ color:var(--on-dark-dim); font-size:clamp(1.05rem,2vw,1.3rem); line-height:1.7; margin-bottom:2.2rem; }
.final-rule{
  width:70px; height:1px; margin:0 auto 1.6rem;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.made-with-love{ color:var(--gold-light); font-family:var(--font-script); font-size:1.3rem; }

/* ============================================================
   FOCUS STATES / A11Y
   ============================================================ */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold-light);
  outline-offset:3px;
}

/* prevent any accidental horizontal overflow */
html, body{ max-width:100%; }
section{ max-width:100%; overflow:hidden; }

/* ============================================================
   UPGRADES — matching UI reference + premium interactions
   ============================================================ */

.nav-brand{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.15;
}
.brand-main{ font-size:1.15rem; }
.brand-sub{
  font-family:var(--font-script);
  font-size:.78rem;
  color:var(--gold-light);
  letter-spacing:.02em;
  opacity:.9;
}
@media (max-width:860px){
  .brand-sub{ display:none; }
  .nav-brand .brand-main{ font-size:1.05rem; }
}

.hero-title{
  font-size:clamp(2.4rem, 7vw, 4.6rem);
}
.hero-bhai{
  display:inline-block;
  margin-top:.15em;
  color:var(--gold-light);
}
.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 50% 40% at 70% 35%, rgba(227,195,116,.22), transparent 70%),
    radial-gradient(ellipse 30% 25% at 20% 70%, rgba(168,57,90,.18), transparent 60%);
  animation:glow-pulse 8s ease-in-out infinite alternate;
}
@keyframes glow-pulse{
  0%{ opacity:.7; }
  100%{ opacity:1; }
}

/* Stars */
.star-field{
  position:fixed; inset:0; pointer-events:none; z-index:4; overflow:hidden;
}
.star{
  position:absolute;
  width:2px; height:2px;
  background:var(--gold-light);
  border-radius:50%;
  opacity:0;
  animation:twinkle var(--dur,3s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
  box-shadow:0 0 6px 1px rgba(227,195,116,.6);
}
@keyframes twinkle{
  0%,100%{ opacity:0; transform:scale(.6); }
  50%{ opacity:.9; transform:scale(1.2); }
}

/* Envelope letter */
.envelope-wrap{
  position:relative;
  max-width:520px;
  margin:0 auto;
  min-height:220px;
}
.envelope{
  width:100%;
  max-width:420px;
  margin:0 auto;
  display:block;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  position:relative;
  perspective:800px;
}
.envelope-body{
  background:linear-gradient(160deg, #8C2440, #6B1730 60%, #4A1226);
  border-radius:6px;
  padding:48px 28px 36px;
  box-shadow:0 20px 50px -18px rgba(58,15,31,.55);
  position:relative;
  border:1px solid rgba(199,154,63,.35);
  transition:transform .4s var(--ease);
}
.envelope:hover .envelope-body{ transform:translateY(-4px); }
.envelope-flap{
  position:absolute;
  top:0; left:0; right:0;
  height:70px;
  background:linear-gradient(180deg, #A8395A, #7B1E3A);
  clip-path:polygon(0 0, 50% 55%, 100% 0);
  z-index:2;
  transform-origin:top center;
  transition:transform .7s var(--ease);
  border-radius:4px 4px 0 0;
}
.envelope.open .envelope-flap{
  transform:rotateX(180deg);
}
.envelope-heart{
  display:block;
  font-size:2.2rem;
  color:var(--gold-light);
  margin-bottom:8px;
  animation:heartbeat 1.8s ease-in-out infinite;
}
.envelope-text{
  font-family:var(--font-script);
  font-size:1.35rem;
  color:var(--cream);
}
.letter-paper{
  margin-top:28px;
  background:var(--ivory);
  border:1px solid rgba(199,154,63,.3);
  border-radius:4px;
  padding:clamp(28px,5vw,52px);
  box-shadow:0 30px 60px -30px rgba(107,23,48,.4);
  position:relative;
  animation:letter-slide .8s var(--ease) forwards;
}
@keyframes letter-slide{
  from{ opacity:0; transform:translateY(24px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.letter-tape{
  position:absolute;
  top:-10px; left:50%;
  transform:translateX(-50%) rotate(-2deg);
  width:70px; height:22px;
  background:rgba(227,195,116,.55);
  border-radius:2px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.letter-paper p{
  font-size:1.22rem;
  line-height:1.85;
  color:var(--ink-soft);
  margin-bottom:1.05em;
}
.letter-greeting{ font-size:1.45rem !important; color:var(--wine-deep) !important; }
.letter-sign{ margin-top:1.5em !important; color:var(--wine) !important; }
.letter-from{ font-family:var(--font-script); font-size:1.25rem; color:var(--gold-dim); }

/* Gift box */
.gift-section{
  padding:clamp(60px,10vw,100px) 0;
  background:var(--cream);
  text-align:center;
}
.gift-box-wrap{ display:flex; flex-direction:column; align-items:center; gap:28px; }
.gift-box{
  position:relative;
  width:160px; height:150px;
  border:none; background:transparent;
  cursor:pointer;
  perspective:600px;
}
.gift-body{
  position:absolute; bottom:0; left:0; right:0;
  height:100px;
  background:linear-gradient(160deg, #A8395A, #6B1730);
  border-radius:8px;
  box-shadow:0 16px 36px -12px rgba(107,23,48,.5);
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(199,154,63,.4);
}
.gift-prompt{
  font-family:var(--font-script);
  color:var(--cream);
  font-size:1.1rem;
}
.gift-lid{
  position:absolute; top:20px; left:-6px; right:-6px;
  height:46px;
  background:linear-gradient(160deg, #C79A3F, #9C7A34);
  border-radius:6px 6px 2px 2px;
  transform-origin:bottom center;
  transition:transform .65s var(--ease);
  z-index:2;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.35);
}
.gift-box.open .gift-lid{
  transform:rotateX(-125deg) translateY(-8px);
}
.gift-bow{
  position:absolute; top:50%; left:50%;
  width:28px; height:28px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 30% 30%, #F5E7D6, #E3C374);
  border-radius:50%;
  box-shadow:0 0 0 4px #8C2440, 0 0 12px rgba(227,195,116,.5);
}
.gift-message{
  max-width:420px;
  background:var(--ivory);
  border:1px solid rgba(199,154,63,.3);
  border-radius:var(--radius);
  padding:28px 32px;
  box-shadow:0 20px 40px -20px rgba(107,23,48,.35);
  animation:surprise-in .7s var(--ease) forwards;
}
.gift-title{
  font-family:var(--font-display);
  font-size:1.35rem;
  color:var(--wine-deep);
  margin-bottom:.5em;
}
.gift-message p{ color:var(--ink-soft); font-size:1.1rem; line-height:1.6; }

/* Polaroid tape effect */
.polaroid::before{
  content:'';
  position:absolute;
  top:-8px; left:50%;
  transform:translateX(-50%) rotate(var(--tape-rot, -3deg));
  width:48px; height:16px;
  background:rgba(227,195,116,.45);
  border-radius:1px;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  z-index:3;
}

/* Reasons — varied cards */
.reason-card:nth-child(odd){ border-left-color:var(--wine-soft); }
.reason-card:nth-child(3n){ background:linear-gradient(145deg, var(--ivory), var(--peach-soft)); }
.reason-card:nth-child(4n){ border-left-width:4px; }

/* Memories CTA */
.memories-cta{ text-align:center; margin-top:36px; }
.btn-outline.light{
  border-color:var(--gold-light);
  color:var(--gold-light);
}
.btn-outline.light:hover{ background:rgba(227,195,116,.15); }

/* Mobile polish */
@media (max-width:600px){
  .hero-content{ text-align:center; }
  .hero .eyebrow{ text-align:center; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .card-grid{ gap:12px; }
  .mini-card{ padding:18px 12px; }
  .polaroid{ padding:8px 8px 12px; }
  .envelope-body{ padding:40px 20px 28px; }
  .gift-box{ width:140px; height:130px; }
  .gift-body{ height:88px; }
}

/* Reduced motion already handled in base */



/* ============================================================
   REFERENCE UI MATCH — Hero two-column + polish
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding: clamp(90px, 12vh, 120px) 0 clamp(50px, 8vh, 80px);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-fallback{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 55% 50% at 75% 45%, rgba(180,90,50,.25), transparent 55%),
    radial-gradient(ellipse 40% 40% at 15% 70%, rgba(107,23,48,.4), transparent 50%),
    linear-gradient(145deg, #1a0a12 0%, #2A0F1A 35%, #3D1525 70%, #1f0c14 100%);
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(18,6,12,.55) 0%, rgba(18,6,12,.25) 50%, rgba(18,6,12,.35) 100%),
    linear-gradient(180deg, rgba(15,5,10,.2) 0%, transparent 30%, rgba(15,5,10,.65) 100%);
}
.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 45% 40% at 72% 48%, rgba(227,195,116,.18), transparent 65%),
    radial-gradient(ellipse 30% 25% at 25% 60%, rgba(199,154,63,.08), transparent 60%);
}

.hero-inner{
  position:relative; z-index:2;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(20px,5vw,48px);
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(24px, 4vw, 56px);
  align-items:center;
}
@media (max-width:900px){
  .hero-inner{
    grid-template-columns:1fr;
    text-align:center;
    gap:32px;
  }
  .hero-visual{ order:-1; max-width:340px; margin:0 auto; }
}

.hero-content{ text-align:left; max-width:520px; }
@media (max-width:900px){
  .hero-content{ text-align:center; margin:0 auto; max-width:100%; }
  .hero .eyebrow{ text-align:center; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
}

.hero .eyebrow{
  text-align:left;
  color:var(--gold-light);
  letter-spacing:.28em;
  font-size:.75rem;
  margin-bottom:1rem;
}
.hero-title{
  font-size:clamp(2.6rem, 6.5vw, 4.4rem);
  color:var(--on-dark);
  line-height:1.05;
  margin-bottom:.55em;
  text-shadow:0 2px 24px rgba(0,0,0,.4);
}
.hero-title .script-lg{
  font-size:1.15em;
  color:var(--gold-light);
  display:inline-block;
}
.hero-bhai{
  display:inline-block;
  margin-top:.08em;
  color:var(--gold);
  font-size:.95em;
}
.hero-sub{
  color:var(--on-dark-dim);
  font-size:clamp(1.05rem,1.9vw,1.28rem);
  line-height:1.65;
  max-width:32ch;
  margin-bottom:1.8rem;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}

/* Large rakhi visual — product-shot style like reference */
.hero-visual{
  display:flex;
  justify-content:center;
  align-items:center;
}
.hero-rakhi-frame{
  position:relative;
  width:min(100%, 480px);
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(199,154,63,.25),
    0 30px 80px -20px rgba(0,0,0,.7),
    0 0 60px -10px rgba(199,154,63,.25);
  background:radial-gradient(circle at 40% 35%, #4a1a28, #1a0a12);
}
.hero-rakhi-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(1.2) contrast(1.08) brightness(1.02);
  transition:transform 1.2s var(--ease);
}
.hero-rakhi-frame:hover .hero-rakhi-img{
  transform:scale(1.06);
}
.hero-rakhi-shine{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 50% 40% at 35% 30%, rgba(255,240,200,.18), transparent 55%),
    linear-gradient(160deg, transparent 40%, rgba(0,0,0,.25) 100%);
  border-radius:50%;
}

/* Scroll cue stays at bottom center */
.scroll-cue{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  z-index:3;
}

/* Intro cards — closer to reference circular soft icons */
.mini-icon{
  width:56px; height:56px;
  background:radial-gradient(circle at 35% 30%, #FBF2E4, #F2D6C4);
  box-shadow:0 6px 18px -8px rgba(107,23,48,.3);
}

/* Memories section title spacing like reference */
.memories .section-title{ margin-bottom:clamp(1.6rem, 4vw, 2.6rem); }

/* Reasons cards softer like reference */
.reason-card{
  text-align:center;
  border-left:none;
  border-radius:12px;
  padding:28px 20px;
  background:var(--ivory);
  border:1px solid rgba(199,154,63,.18);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.reason-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px -18px rgba(107,23,48,.3);
}
.reason-mark{ font-size:1.6rem; margin-bottom:10px; }

/* Promise section more like reference cinematic band */
.promise{ min-height:min(70vh, 560px); display:flex; align-items:center; }

/* Nav brand heart */
.nav-brand .heart{ font-size:.85em; margin-left:2px; }


/* Enter overlay — unlocks audio on first visit */
.enter-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 40%, rgba(58,15,31,.92), rgba(15,4,8,.96));
  backdrop-filter:blur(8px);
  transition:opacity .55s var(--ease), visibility .55s;
}
.enter-overlay.is-hiding{
  opacity:0; visibility:hidden; pointer-events:none;
}
.enter-card{
  text-align:center;
  padding:40px 32px;
  max-width:360px;
  animation:enter-in .7s var(--ease) both;
}
@keyframes enter-in{
  from{ opacity:0; transform:translateY(16px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.enter-eyebrow{
  font-family:var(--font-script);
  color:var(--gold-light);
  font-size:1.2rem;
  margin-bottom:.6rem;
}
.enter-title{
  font-family:var(--font-display);
  color:var(--cream);
  font-size:clamp(1.6rem, 4vw, 2.1rem);
  line-height:1.25;
  margin-bottom:1.6rem;
}
.enter-btn{ margin-bottom:.9rem; }
.enter-hint{
  color:var(--on-dark-dim);
  font-size:.9rem;
  opacity:.85;
}


/* ============================================================
   VIDEO MOMENT SECTION
   ============================================================ */
.video-moment{
  padding:clamp(70px,12vw,120px) 0;
  background:var(--cream);
  text-align:center;
}
.video-frame{
  max-width:520px;
  margin:0 auto;
}
.video-wrap{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#1a0a12;
  box-shadow:
    0 0 0 1px rgba(199,154,63,.28),
    0 28px 60px -24px rgba(58,15,31,.45);
  aspect-ratio:9/16;
  max-height:min(72vh, 640px);
  margin:0 auto;
}
.video-wrap video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#1a0a12;
}
.video-play-btn{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:rgba(20,6,12,.42);
  border:none;
  cursor:pointer;
  transition:opacity .4s var(--ease), background .4s var(--ease);
  z-index:2;
}
.video-play-btn.is-hidden{
  opacity:0;
  pointer-events:none;
}
.video-play-icon{
  width:68px;
  height:68px;
  border-radius:50%;
  background:linear-gradient(155deg, var(--gold-light), var(--gold));
  color:var(--wine-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.35rem;
  box-shadow:0 12px 30px -8px rgba(199,154,63,.55);
  transition:transform .35s var(--ease);
  padding-left:3px;
}
.video-play-btn:hover .video-play-icon{
  transform:scale(1.08);
}
.video-play-label{
  font-family:var(--font-script);
  color:var(--cream);
  font-size:1.25rem;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.video-caption{
  margin-top:1.2rem;
  font-family:var(--font-script);
  color:var(--gold-dim);
  font-size:1.15rem;
}
@media (max-width:600px){
  .video-wrap{
    max-height:min(68vh, 560px);
    border-radius:14px;
  }
}


.video-wrap{
  position:relative;
  border-radius:5px;
  overflow:hidden;
  background:#1a0a12;
  box-shadow:
    0 0 0 1px rgba(199,154,63,.28),
    0 28px 60px -24px rgba(58,15,31,.45);
  aspect-ratio:10/6;          /* was 9/16 */
  max-height:min(42vh, 1080px);
  margin:0 auto;
}