:root{
  --maroon:#7a2a22;
  --rose:#b0544a;
  --gold:#b48a3c;
  --gold-soft:#d9b46a;
  --ink:#4a2a22;
  --muted:#7d5f52;
  --ivory:#fff7ea;
  --paper:#f6e6da;
  --col:min(100vw,480px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-snap-type:y mandatory}
body{
  background:#efe0d2 url('assets/photos/samadhi-pravar.jpg') center/cover fixed;
  color:var(--ink);
  font-family:"Cormorant Garamond",Georgia,serif;
  overflow-x:hidden;
}
body.locked{overflow:hidden;height:100dvh}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}

/* ---------- Phone-width column, every page is a 9:16 illustrated frame ---------- */
.invite{width:var(--col);margin:0 auto;box-shadow:0 0 60px rgba(90,40,20,.25);background:var(--paper)}
.frame{
  position:relative;width:var(--col);
  background-size:cover;background-position:center bottom;background-repeat:no-repeat;
  container-type:inline-size;overflow:hidden;
}
.page-std{aspect-ratio:2700/4800;min-height:100dvh}
/* one section per swipe */
.invite .frame{scroll-snap-align:start;scroll-snap-stop:always}
.page-tall{min-height:100dvh}
.content{position:relative;z-index:2;text-align:center;padding:0 9cqw}
.content-center{min-height:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:16cqw;padding-bottom:18cqw}
/* one screen tall so the content is centred in what the guest actually sees (RSVP still grows with its text) */
.page-tall .content-center{min-height:100dvh}
.content-top{padding-top:8cqw}

/* ---------- Type ---------- */
.eyebrow{font-family:Cinzel,serif;font-size:3cqw;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:2.5cqw}
/* Great Vibes has a single weight; stop headings from faking a bold version */
.script-title{font-weight:400;font-synthesis:none;font-family:"Great Vibes",cursive;font-size:9.5cqw;line-height:1.15;color:var(--maroon);margin:1cqw 0 3cqw}
.script-title.big{font-size:9cqw}
.amp{color:var(--gold);font-size:.8em}
.body-text{font-size:4.6cqw;line-height:1.5;color:var(--ink);margin-bottom:4cqw}
.body-text.small{font-size:3.8cqw;font-style:italic;color:var(--muted)}
.body-text strong,.family strong{color:var(--maroon);font-weight:700}
.hindi{font-family:"Tiro Devanagari Hindi",serif;font-size:5.2cqw;color:var(--maroon);margin-bottom:1.5cqw}
.hindi.small{font-size:4cqw;color:var(--gold)}
.flourish{display:flex;align-items:center;justify-content:center;gap:3cqw;color:var(--gold);font-size:4.5cqw;margin:4cqw auto}
.flourish span{display:block;width:16cqw;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.flourish span:last-child{transform:scaleX(-1)}
.monogram{width:42cqw;margin:4cqw auto 0}

/* ---------- Families ---------- */
.person{margin:2cqw 0}
.person-name{font-family:"Great Vibes",cursive;font-weight:400;font-size:15cqw;line-height:1.1;color:var(--maroon)}
.relation{font-family:Cinzel,serif;font-size:2.6cqw;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:3cqw}
.family{font-size:4.5cqw;line-height:1.4;font-weight:600;color:var(--ink);margin-top:1cqw}
.amp-big{font-family:"Great Vibes",cursive;font-size:14cqw;color:var(--gold);line-height:1;margin:3cqw 0}

/* ---------- Envelope cover ---------- */
.cover{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;
  background:#f5e4d7;cursor:pointer;outline:none;
  transition:opacity 1s ease .6s, transform 1.4s cubic-bezier(.7,0,.3,1) .6s;
}
.cover-frame{aspect-ratio:2700/4801;width:min(100vw,56.25dvh)}
/* show only the heart symbol of the png (its lower part repeats the names) */
.cover-monogram{width:30cqw;aspect-ratio:990/545;margin:0 auto;overflow:hidden}
.cover-monogram img{width:100%;height:auto}
.cover-text{position:absolute;left:0;right:0;top:9%;text-align:center;padding:0 10cqw;animation:fadeUp 1.4s ease both}
.cover-eyebrow{font-family:Cinzel,serif;font-size:2.6cqw;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.cover-names{font-family:"Great Vibes",cursive;font-weight:400;font-size:15cqw;line-height:1.15;color:var(--maroon);margin:4cqw 0 2cqw}
.cover-names span{color:var(--gold);font-size:.75em}
.cover-sub{font-size:4.2cqw;font-style:italic;color:var(--muted)}
.seal-glow{
  position:absolute;left:50.2%;top:52.3%;width:17cqw;height:17cqw;border-radius:50%;
  transform:translate(-50%,-50%);box-shadow:0 0 0 0 rgba(217,180,106,.7);
  animation:sealPulse 2s ease-out infinite;
}
.tap-hint{position:absolute;left:0;right:0;top:63%;text-align:center}
.tap-hint span{
  display:inline-block;font-family:Cinzel,serif;font-size:3.4cqw;letter-spacing:.35em;color:var(--maroon);
  padding:2.4cqw 5cqw;border:1px solid var(--gold-soft);border-radius:99px;background:rgba(255,247,234,.65);
  animation:breathe 2.2s ease-in-out infinite;
}
.cover.opening{pointer-events:none}
.cover.opening .seal-glow{animation:sealBurst .7s ease-out forwards}
.cover.opening .tap-hint,.cover.opening .cover-text{opacity:0;transition:opacity .4s}
.cover.opening{opacity:0;transform:translateY(-8%) scale(1.06)}

/* ---------- Scratch card ---------- */
.scratch{position:relative;width:44cqw;height:44cqw;margin:4cqw auto 2cqw;border-radius:50%;
  box-shadow:0 0 0 1.2cqw rgba(255,247,234,.8),0 0 0 1.6cqw var(--gold-soft),0 2cqw 6cqw rgba(122,42,34,.25);
  overflow:hidden;touch-action:none}
.scratch-under{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle,#fffaf1 0%,#f7e7d4 100%);color:var(--maroon)}
.sd-day{font-family:Cinzel,serif;font-size:8.5cqw;line-height:1;font-weight:600}
.sd-month{font-family:"Great Vibes",cursive;font-size:8cqw;line-height:1.2;color:var(--rose)}
.sd-year{font-family:Cinzel,serif;font-size:4cqw;letter-spacing:.3em}
#scratchCanvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;transition:opacity .8s}
.scratch.done #scratchCanvas{opacity:0;pointer-events:none}
.link-btn{background:none;border:0;color:var(--muted);font-size:3.4cqw;font-style:italic;text-decoration:underline;text-underline-offset:3px}
.scratch.done + .link-btn{visibility:hidden}

.countdown{display:flex;justify-content:center;gap:2.5cqw;margin:4cqw 0}
.countdown div{width:15cqw;padding:2.4cqw 0;border:1px solid var(--gold-soft);border-radius:2cqw;background:rgba(255,247,234,.7)}
.countdown b{display:block;font-family:Cinzel,serif;font-size:5.6cqw;color:var(--maroon)}
.countdown small{font-family:Cinzel,serif;font-size:2.2cqw;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
.countdown[hidden]{display:none}
.venue-line{font-size:4.4cqw;font-weight:600;color:var(--maroon);margin:3cqw 0 2cqw;line-height:1.4}

.pill-btn{display:inline-block;font-family:Cinzel,serif;font-size:3cqw;letter-spacing:.2em;text-transform:uppercase;
  padding:2.6cqw 5.5cqw;border:1px solid var(--gold);border-radius:99px;color:var(--maroon);background:rgba(255,247,234,.7);
  transition:background .25s,color .25s}
.pill-btn:hover,.pill-btn.solid{background:var(--maroon);color:var(--ivory);border-color:var(--maroon)}
.pill-btn.solid{margin:5cqw 0 4cqw}
.pill-btn.solid:hover{background:var(--gold)}

/* ---------- Background videos (painting shows until the video is playing) ---------- */
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity .8s}
.bg-video.playing{opacity:1}

/* ---------- Mantra, hashtag, RSVP, closing ---------- */
.ganesh-img{width:15cqw;margin:0 auto 2.5cqw}
.mantra{font-family:Cinzel,serif;font-size:4.4cqw;letter-spacing:.12em;color:var(--maroon);font-weight:600}
.hashtag{font-family:Cinzel,serif;font-size:3.6cqw;letter-spacing:.15em;color:var(--gold);font-weight:600}
.rsvp-block{margin:3.5cqw 0}
.rsvp-block .relation{margin-top:0;margin-bottom:1.2cqw;font-weight:600}
.family.light{font-weight:500;font-size:4.2cqw}
.place{font-size:3.8cqw;font-style:italic;color:var(--muted);margin-top:.6cqw}
.quote{font-family:"Great Vibes",cursive;font-size:7cqw;line-height:1.2;color:var(--maroon)}
/* closing painting: empty sky in the top ~65%, resort below — centre the text in the sky */
.closing-content{position:absolute;inset:0 0 auto;height:66%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.closing .monogram.small{width:34cqw;margin-bottom:2cqw}
.closing .script-title.big{margin:1cqw 0 3cqw;letter-spacing:.01em}
.closing .map-btn{margin:5cqw 0 0;letter-spacing:.12em;font-size:2.8cqw}
.closing .tagline{font-size:5.6cqw}
.venue-card{display:inline-block;margin-top:3cqw;padding:3cqw 6cqw 4cqw;border-radius:4cqw;background:rgba(255,247,234,.88);
  border:1px solid var(--gold-soft);box-shadow:0 2cqw 6cqw rgba(90,40,20,.18)}
.venue-card .venue-line{margin:1cqw 0 2.5cqw}
.monogram.small{width:30cqw;margin:0 auto 1cqw}
.tagline{font-size:5cqw;font-style:italic;line-height:1.45;color:var(--ink)}
/* designer credit on a maroon ribbon strip */
.credit{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:2.6cqw 4cqw;text-align:center;
  font-family:Cinzel,serif;font-size:2.8cqw;font-weight:600;letter-spacing:.08em;color:#fff3df;
  background:linear-gradient(90deg,rgba(110,42,34,.88),rgba(122,42,34,.96) 20%,rgba(122,42,34,.96) 80%,rgba(110,42,34,.88));
  border-top:1px solid var(--gold-soft);box-shadow:0 -1px 0 rgba(255,241,201,.35),0 -6px 18px rgba(60,20,10,.25)}
.credit::before{content:"";position:absolute;left:0;right:0;top:3px;height:1px;background:rgba(217,180,106,.55)}
.credit a{color:#f3d68f;white-space:nowrap}

/* ---------- Event pages ---------- */
.event .content{padding-top:var(--top,7cqw)}
.event-no{font-family:Cinzel,serif;font-size:2.7cqw;letter-spacing:.4em;text-transform:uppercase;color:var(--gold)}
.event-title{font-family:"Great Vibes",cursive;font-weight:400;font-size:12cqw;line-height:1.1;color:var(--maroon);margin:1cqw 0 1.2cqw}
.event-desc{font-size:4cqw;font-style:italic;line-height:1.35;color:var(--muted);max-width:74cqw;margin:0 auto 2.4cqw}
.event{--scrim:54%}
/* Day / Mon. | DD | YYYY block */
.ev-day{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:6cqw;color:#9a5a3c;line-height:1.1}
.ev-date{display:flex;align-items:center;justify-content:center;gap:3.5cqw;margin:1cqw 0 0}
.ev-side{width:19cqw;padding:1.6cqw 0;border-top:1px solid #d2b48a;border-bottom:1px solid #d2b48a;
  font-family:"El Messiri",sans-serif;font-weight:500;font-size:6.5cqw;line-height:1.2;color:#9a5a3c}
.ev-dd{font-family:"El Messiri",sans-serif;font-weight:700;font-size:16cqw;line-height:1;color:#5a2522}
.event-meta{font-family:Philosopher,sans-serif;font-weight:700;font-size:5.4cqw;color:#6e3524;margin-top:1cqw}
.ev-orn{display:flex;align-items:center;justify-content:center;gap:1.5cqw;margin:2.4cqw 0 1.6cqw;color:#b48a5a}
.ev-orn i{width:7cqw;height:1px;background:currentColor}
.ev-orn svg{width:10cqw;height:3cqw;fill:none;stroke:currentColor;stroke-width:1}
.event-venue{font-family:Philosopher,sans-serif;font-weight:700;font-size:5cqw;color:#6e3524}
.event .event-title{color:#6e3524;margin:3.5cqw 0 1.5cqw}
.event.dark .ev-day,.event.dark .ev-side{color:#f1d9b0}
.event.dark .ev-side{border-color:rgba(241,217,176,.55)}
.event.dark .ev-dd{color:#fff3df}
.event.dark .event-meta{color:#fff3df}
.event.dark .ev-orn{color:var(--gold-soft)}
.event-title.long{font-size:9.5cqw}
/* soft wash at the top so text stays readable over the moving videos */
.scrim::before{content:"";position:absolute;inset:0 0 auto;height:var(--scrim,44%);z-index:1;pointer-events:none;
  background:linear-gradient(rgba(255,247,234,.9) 55%,rgba(255,247,234,0))}
.scrim.dark::before{background:linear-gradient(rgba(8,18,58,.8) 55%,rgba(8,18,58,0))}
.event.dark .event-title{color:#fbe9cf!important}
.event.dark .event-no{color:var(--gold-soft)}
.event.dark .event-desc{color:#e9d8c4}
.event.dark .event-meta{color:#fff3df}
.event.dark .event-venue{color:#f3e2c8}

/* ---------- Floating extras ---------- */
#petals{position:fixed;inset:0;width:100vw;height:100dvh;pointer-events:none;z-index:40}
.music-btn{position:fixed;z-index:45;bottom:18px;right:max(16px,calc(50vw - 240px + 16px));width:46px;height:46px;border-radius:50%;
  border:1px solid var(--gold-soft);background:rgba(255,247,234,.9);box-shadow:0 4px 14px rgba(90,40,20,.2);display:grid;place-items:center}
.music-btn[hidden]{display:none}
.bars{display:flex;align-items:flex-end;gap:2px;height:16px}
.bars i{width:3px;height:30%;background:var(--maroon);border-radius:2px}
.music-btn.playing .bars i{animation:eq 1s ease-in-out infinite}
.music-btn.playing .bars i:nth-child(2){animation-delay:.2s}
.music-btn.playing .bars i:nth-child(3){animation-delay:.4s}
.music-btn.playing .bars i:nth-child(4){animation-delay:.1s}
.scroll-cue{position:absolute;bottom:6cqw;left:0;right:0;text-align:center;font-family:Cinzel,serif;font-size:2.6cqw;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.scroll-cue span{display:block;font-size:6cqw;line-height:.6;animation:bob 1.8s ease-in-out infinite}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes breathe{50%{transform:scale(1.06);box-shadow:0 0 18px rgba(217,180,106,.6)}}
@keyframes sealPulse{0%{box-shadow:0 0 0 0 rgba(217,180,106,.75)}100%{box-shadow:0 0 0 6cqw rgba(217,180,106,0)}}
@keyframes sealBurst{to{box-shadow:0 0 0 70cqw rgba(255,240,210,.95)}}
@keyframes eq{0%,100%{height:30%}50%{height:100%}}
@keyframes bob{50%{transform:translateY(5px)}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}