:root{
  --maroon:#7a2a22;
  --rose:#b0544a;
  --gold:#b48a3c;
  --gold-soft:#d9b46a;
  --ink:#4a2a22;
  --muted:#7d5f52;
  --ivory:#fff7ea;
  --paper:#f6e6da;
  /* 56.25dvh = 9:16 of the screen, so on laptops one page also fits one screen */
  --col:min(100vw,56.25dvh,480px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* the page itself never scrolls, only .invite does: the mobile address bar stays put, so sections don't jump mid-swipe */
html,body{height:100%;overflow:hidden}
body{
  background:#efe0d2 url('assets/photos/page-11.jpg') center/cover;
  color:var(--ink);
  font-family:Philosopher,Georgia,serif;
}
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 an illustrated frame ---------- */
.invite{width:var(--col);height:100dvh;margin:0 auto;box-shadow:0 0 60px rgba(90,40,20,.25);background:var(--paper);
  overflow:hidden auto;scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior:none;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.invite::-webkit-scrollbar{display:none}
.locked .invite{overflow:hidden}
.frame{
  position:relative;width:var(--col);
  background-size:cover;background-position:center bottom;background-repeat:no-repeat;
  container-type:inline-size;overflow:hidden;
}
/* plain watercolour paper: stretch instead of crop so all four floral corners stay visible */
.frame.paper{background-size:100% 100%}
.page-std{aspect-ratio:9/16;min-height:100dvh}
/* page 10's artwork is taller than a screen, so the page keeps its shape and scrolls */
.page-long{aspect-ratio:1080/2328;min-height:100dvh}
.page-long,.page-last,.scratch-page{display:flex;align-items:center}
/* one section per swipe */
.invite .frame{scroll-snap-align:start;scroll-snap-stop:always}
.content{position:relative;z-index:2;width:100%;text-align:center;padding:0 8cqw}

/* ---------- Type ---------- */
.amp{color:var(--gold);font-size:.8em}
.body-text{font-size:4cqw;line-height:1.32;color:var(--maroon);margin-bottom:1.4cqw}
.body-text strong{font-weight:700}
.flourish{display:flex;align-items:center;justify-content:center;gap:2.5cqw;color:var(--gold);font-size:3.6cqw;margin:2.4cqw auto}
.flourish span{display:block;width:14cqw;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.flourish span:last-child{transform:scaleX(-1)}

/* ---------- Page 2: couple. Text stays in the sky above the resort (top ~72% of the painting) ---------- */
.couple{position:absolute;inset:0 0 auto;height:72%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 7cqw}
.ganesh-img{width:9cqw;margin:0 auto .6cqw}
.mantra{font-family:"Tiro Devanagari Hindi",serif;font-size:4.2cqw;color:var(--maroon);margin-bottom:1cqw}
.person{margin:.2cqw 0}
.person-name{font-family:"Great Vibes",cursive;font-weight:400;font-synthesis:none;font-size:11.5cqw;line-height:1.08;color:#6e1a18}
.person-name small{font-family:Philosopher,serif;font-size:4cqw;color:var(--muted)}
.couple .family{font-size:3.5cqw;line-height:1.28;margin-top:.2cqw}
.relation{font-family:Cinzel,serif;font-size:2.6cqw;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600}
.family{font-size:4.1cqw;line-height:1.42;color:var(--ink);margin-top:.5cqw;text-wrap:balance}
.weds{font-family:"Great Vibes",cursive;font-size:6.5cqw;line-height:1;color:var(--rose);margin:.4cqw 0}
.venue{margin-top:1.4cqw}
.venue-name{font-family:"El Messiri",sans-serif;font-weight:700;font-size:5.4cqw;line-height:1.2;color:var(--maroon)}
.venue-line{font-size:3.7cqw;line-height:1.2;color:var(--ink)}

/* ---------- Page 1: envelope. The painting is cut along its own V, so the flap lifts and the pocket drops away ---------- */
.cover{position:fixed;inset:0;z-index:50;display:grid;place-items:center;cursor:pointer;outline:none}
.cover-frame{width:var(--col);height:100dvh;perspective:1400px}
/* always the full 9:16 painting, cropped at the sides on tall phones, so the V and seal keep their place */
.env-art{position:absolute;top:0;left:50%;height:100%;aspect-ratio:9/16;transform:translateX(-50%);background:url('assets/photos/page-1.jpg') center/100% 100%}
.env-flap,.env-pocket{position:absolute;inset:0}
.env-flap{z-index:2;transform-origin:top center;transition:transform 1.1s cubic-bezier(.6,0,.3,1) .3s}
.env-flap .env-art{clip-path:polygon(0 0,100% 0,100% 35.7%,97% 38.3%,50% 54%,3% 38.3%,0 35.7%)}
.env-pocket{z-index:1;transition:transform 1s cubic-bezier(.6,0,.3,1) .9s}
.env-pocket .env-art{clip-path:polygon(0 35.7%,3% 38.3%,50% 54%,97% 38.3%,100% 35.7%,100% 100%,0 100%)}
.cover-text{position:absolute;left:0;right:0;top:10%;text-align:center;animation:fadeUp 1.4s ease both}
.cover-logo{width:34cqw;margin:0 auto 1cqw}
.cover-names{font-family:"Great Vibes",cursive;font-weight:400;font-synthesis:none;font-size:16cqw;line-height:1.2;color:#6e1a18}
.cover-names span{color:var(--gold);font-size:.75em}
.hashtag{font-family:Philosopher,serif;font-weight:700;font-size:4.6cqw;letter-spacing:.03em;color:var(--maroon)}
/* pulse + flash sit exactly on the seal painted at 53.9% of the height; 6.75dvh = its size in the 9:16 painting */
.seal{position:absolute;z-index:3;left:50%;top:53.9%;width:6.75dvh;height:6.75dvh;border-radius:50%;transform:translate(-50%,-50%);transition:opacity .5s ease}
.seal::before{content:"";position:absolute;inset:0;border-radius:50%;animation:sealPulse 2s ease-out infinite}
.tap-hint{position:absolute;z-index:3;left:0;right:0;top:66%;display:flex;align-items:center;justify-content:center;gap:3cqw;color:var(--maroon);transition:opacity .4s}
.tap-hint span{font-family:"El Messiri",sans-serif;font-weight:700;font-size:5.4cqw;letter-spacing:.06em;animation:breathe 2.2s ease-in-out infinite}
.tap-hint i{display:block;width:9cqw;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.tap-hint i:last-child{transform:scaleX(-1)}
.cover.opening{pointer-events:none}
.cover.opening .env-flap{transform:rotateX(180deg)}
.cover.opening .env-pocket{transform:translateY(100%)}
.cover.opening .tap-hint{opacity:0}
.cover.opening .seal{opacity:0}
.cover.opening .seal::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,210,.95),rgba(255,226,160,0) 70%);animation:sealFlash .5s ease-out forwards}

/* ---------- Scratch card ---------- */
.script-title{font-weight:400;font-synthesis:none;font-family:"Great Vibes",cursive;font-size:11cqw;line-height:1.15;color:var(--maroon);margin:1cqw 0 2cqw}
.body-text.small{font-size:3.7cqw;font-style:italic;color:var(--muted)}
.scratch{position:relative;width:62cqw;height:62cqw;margin:4cqw auto 3cqw;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:10.5cqw;line-height:1;font-weight:600}
.sd-month{font-family:"Great Vibes",cursive;font-size:11cqw;line-height:1.25;color:var(--rose)}
.sd-year{font-family:Cinzel,serif;font-size:5cqw;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}
.scratch.done{animation:cardGlow 1.4s ease-out}
.scratch.done .scratch-under span{animation:datePop .6s cubic-bezier(.2,1.5,.4,1) backwards}
.scratch.done .sd-month{animation-delay:.12s!important}
.scratch.done .sd-year{animation-delay:.24s!important}
.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:2cqw 0 0}
.countdown div{width:15cqw;padding:2cqw 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.4cqw;color:var(--maroon)}
.countdown small{font-family:Cinzel,serif;font-size:2.2cqw;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}

.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:hover{background:var(--gold)}
/* over the driveway at the bottom of the resort painting */
.map-btn{position:absolute;z-index:2;left:50%;bottom:9cqw;transform:translateX(-50%);white-space:nowrap;letter-spacing:.08em;font-size:2.5cqw;padding:1.7cqw 3.8cqw;box-shadow:0 1cqw 3cqw rgba(60,20,10,.35)}
/* looks small, but keeps a finger-sized tap area */
.map-btn::after{content:"";position:absolute;inset:-2.5cqw}

/* ---------- Background videos (poster 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}

/* ---------- Family, firms, contacts ---------- */
.block{margin:2.8cqw 0;width:100%}
.block-title{display:flex;align-items:center;justify-content:center;gap:2.4cqw;
  font-family:"Great Vibes",cursive;font-weight:400;font-synthesis:none;font-size:7.6cqw;line-height:1.2;color:#6e1a18}
.block-title::before,.block-title::after{content:"";display:block;width:6cqw;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.block-title::after{transform:scaleX(-1)}
.contacts{list-style:none;max-width:74cqw;margin:1.5cqw auto 0}
.contacts li{display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding:1.9cqw 0;font-size:4.1cqw;border-bottom:1px solid rgba(180,138,60,.35)}
.contacts li:last-child{border-bottom:0}
.contacts a{font-family:"El Messiri",sans-serif;font-weight:600;font-size:4.2cqw;white-space:nowrap;color:var(--maroon);
  padding:.8cqw 3cqw;border:1px solid var(--gold-soft);border-radius:99px;background:rgba(255,247,234,.75)}

/* 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 (each page sets its own --accent and --top in script.js) ---------- */
.event{background-position:center}
.event .content{position:absolute;left:0;right:0;top:var(--top,10%);color:var(--accent);padding:0 12cqw}
.event.dark .content{text-shadow:0 1px 6px rgba(0,0,0,.55)}
/* Weekday, then the full date: stays narrow so it clears the curtains and lanterns */
.ev-date{display:block}
.ev-day{display:block;font-family:"El Messiri",sans-serif;font-weight:600;font-size:4.2cqw;line-height:1.2}
.ev-dd{display:block;font-family:"El Messiri",sans-serif;font-weight:700;font-size:5.4cqw;line-height:1.25;white-space:nowrap}
.ev-dd sup{font-size:.6em;font-weight:600;line-height:0;vertical-align:super}
.event .flourish{margin:1.2cqw auto}
.event-title{font-family:"Great Vibes",cursive;font-weight:400;font-synthesis:none;font-size:12.5cqw;line-height:1.1;margin-top:.6cqw}
.event-title.long{font-size:10.5cqw}
/* two functions on one page: smaller titles pay for a clear gap between them, so the text still clears the artwork */
.event.two .event-title{font-size:11cqw}
.event.two .event-title.long{font-size:9.5cqw}
.event.two .event-time{margin-top:1.4cqw}
.event.two .event-time + .event-title{margin-top:5.5cqw}
.event-note{font-size:4.4cqw;font-style:italic;margin-top:.4cqw}
.event-time{display:table;margin:.8cqw auto .4cqw;font-family:"El Messiri",sans-serif;font-weight:600;font-size:4.4cqw;line-height:1.2;
  padding:.8cqw 4.5cqw;border:1px solid currentColor;border-radius:99px}
.event-venue{font-size:4.4cqw}
.event-venue b{font-weight:700}

/* ---------- Floating extras ---------- */
/* above the cover (z-index 50) so the sparkles show from the moment the seal is tapped */
#petals{position:fixed;inset:0;width:100vw;height:100dvh;pointer-events:none;z-index:60}
.music-btn{position:fixed;z-index:45;bottom:18px;right:max(16px,calc(50vw - var(--col) / 2 + 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;z-index:2;bottom:1.6cqw;left:0;right:0;text-align:center;font-family:Cinzel,serif;font-size:2.6cqw;letter-spacing:.3em;text-transform:uppercase;color:var(--ivory);text-shadow:0 1px 4px rgba(60,20,10,.8)}
.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}
/* page 2: each line comes into focus as it rises, one after another once the envelope opens */
.couple .reveal{filter:blur(6px);transform:translateY(24px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.3,1),filter 1s ease}
.couple .reveal.in{filter:none;transform:none}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes breathe{50%{transform:scale(1.06)}}
@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 sealFlash{from{transform:scale(1)}to{transform:scale(4)}}
@keyframes cardGlow{0%,100%{filter:none}30%{filter:brightness(1.12) drop-shadow(0 0 5cqw rgba(243,214,143,.95))}}
@keyframes datePop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@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,.couple .reveal{opacity:1;transform:none;filter:none}
}