*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:#080608;color:#f5eee5;font-family:"DM Sans",sans-serif}
:root{--serif:"Cormorant Garamond",Georgia,serif;--script:"Italianno",cursive}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.055;z-index:50;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
@media(max-width:760px){.grain{display:none}}
.sound{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));top:calc(20px + env(safe-area-inset-top,0px));z-index:60;width:42px;height:42px;border:1px solid #b99563;background:#120c0e;color:#e9d5b2;border-radius:50%;font-size:18px;font-family:inherit;cursor:pointer}
.section{min-height:100vh;min-height:100svh;padding:86px 22px;position:relative;overflow:hidden}

/* hero */
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:120px;background:radial-gradient(circle at 50% 35%,#382326 0,#140d10 40%,#080608 72%)}
.hero-glow{position:absolute;width:280px;height:280px;border-radius:50%;background:#9e6941;filter:blur(100px);opacity:.18}
.ornament{position:absolute;top:40px;color:#c8a36e;font-size:24px}
.eyebrow,.chapter,.tag,.closing-date{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:#b9a28c}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(54px,15vw,100px);line-height:.8;margin:26px 0 12px;letter-spacing:-.04em}
.hero h1 span{font-family:var(--script);font-size:.7em;color:#c69b64}
.script{font-family:var(--script);font-size:38px;color:#d2ad78;margin:8px 0}
.seal{margin-top:42px;width:92px;height:92px;border:1px solid #9d784c;border-radius:50%;display:grid;place-content:center;font-size:10px;line-height:1.35;letter-spacing:.2em;color:#c8a36e;transform:rotate(-7deg)}
.seal b{font-weight:500}
.scroll-hint{position:absolute;bottom:26px;font-size:11px;letter-spacing:.2em;color:#a8968a}
.scroll-hint span{display:block;margin-top:8px;font-size:17px}
.chapter{margin-bottom:34px;text-align:center}

/* story */
.story{background:#f0e7da;color:#2d2020}
.story .chapter,.details .chapter,.actions .chapter,.illustration .chapter{color:#8a6651}
.rsvp .chapter{color:#b9a28c}
.story .script,.details .script,.illustration .script{color:#9b6248}
.story-card{max-width:600px;margin:auto}
.story-image{border:8px solid #f8f1e7;box-shadow:0 20px 55px #271a1a22;transform:rotate(-1deg)}
.story-image img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.story-copy{padding:40px 10px}
.story-copy h2,.details-card h2,.rsvp-card h2{font-family:var(--serif);font-size:clamp(48px,13vw,78px);line-height:.9;font-weight:500;margin:10px 0 25px}
.story-copy h2 em,.details-card h2 span,.rsvp-card h2 em,.closing em{color:#9b6248;font-style:italic}
.story-copy p:not(.script){font-size:15px;line-height:1.8;max-width:440px}

/* timeline */
.dark-scene{background:#120b0d}
.center{text-align:center}
.huge{font-family:var(--serif);font-size:clamp(62px,17vw,110px);font-weight:400;line-height:.85;margin:15px 0 60px}
.huge em{color:#b98961;font-style:italic}
.timeline{max-width:650px;margin:auto}
.event{display:grid;grid-template-columns:72px 1fr;gap:22px;padding:26px 0;border-top:1px solid #ffffff18}
.event:last-child{border-bottom:1px solid #ffffff18}
.date{font-family:var(--serif);font-size:31px;line-height:.9;color:#d5b07d}
.date b{font-weight:500}
.date span{font-size:13px;letter-spacing:.18em}
.event h3{font-family:var(--serif);font-size:42px;font-weight:500;margin:6px 0}
.event p{color:#a89b91;font-size:14px;line-height:1.6;margin:0}
.secret{font-weight:500;transition:color .6s}

/* 03 preview: swipe carousel */
.illustration{background:#efe4d6;color:#2d2020}
.swipe-wrap{max-width:560px;margin:auto}
.swipe{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 0 14px;outline:none}
.swipe::-webkit-scrollbar{display:none}
.swipe:focus-visible{outline:2px solid #9b6248;outline-offset:4px}
.slide{flex:0 0 84%;margin:0;scroll-snap-align:center;background:#fff;padding:9px;box-shadow:0 20px 50px #3a261f20}
.slide img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain;background:#fff}
.slide img.cover{object-fit:cover}
.swipe-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px}
.dots{display:flex;gap:9px}
.dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:#c8ad8e;cursor:pointer;transition:transform .3s,background .3s}
.dot.on{background:#9b6248;transform:scale(1.35)}
.arrow{width:38px;height:38px;border-radius:50%;border:1px solid #c8ad8e;background:#f8f0e6;color:#4b352c;font-size:22px;line-height:1;cursor:pointer;font-family:inherit}
.swipe-hint{text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8a6651;margin:14px 0 0}
.caption{text-align:center;font-family:var(--serif);font-size:19px;max-width:520px;margin:25px auto}

/* 04 main day + scratch */
.details{background:#efe4d6;color:#2d2020;display:grid;place-items:center;align-content:center}
.details-card{text-align:center;max-width:600px;width:100%;padding:55px 25px;border:1px solid #c8ad8e;background:linear-gradient(#f8f1e8,#eee1d1)}
.scratch{position:relative;display:inline-block;padding:10px 26px;margin:12px 0 6px;max-width:100%}
.scratch h2{margin:0;font-size:clamp(44px,12vw,70px)}
.scratch h2 span{font-size:.75em}
.scratch canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;border-radius:4px;transition:opacity .9s ease}
.scratch canvas.done{opacity:0;pointer-events:none}
.reveal-btn{display:block;margin:10px auto 0;background:none;border:0;color:#8a6651;font-family:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1.7;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.reveal-btn small{font-size:11px;letter-spacing:.1em;text-transform:none;opacity:.8}
.reveal-btn[hidden]{display:none}
.details-card.revealed .scratch{animation:glow 1.6s ease}
@keyframes glow{0%{filter:drop-shadow(0 0 0 #d2ad7800)}40%{filter:drop-shadow(0 0 22px #d2ad78aa)}100%{filter:drop-shadow(0 0 0 #d2ad7800)}}
.rule{width:70px;height:1px;background:#b99870;margin:24px auto}
.muhurtham{font-size:11px;letter-spacing:.3em;text-transform:uppercase}
.details-card strong{font-family:var(--serif);font-size:45px;font-weight:500}
.venue{font-size:13px;letter-spacing:.18em;text-transform:uppercase}

/* reception */
.reception{background:#0d090a;display:grid;align-items:center;gap:40px}
.reception-image{order:2}
.reception-image img{width:100%;max-height:70vh;object-fit:cover;object-position:center;border:1px solid #4c3a32}
.reception-copy{order:1}
.reception-copy h2{font-family:var(--serif);font-size:clamp(52px,14vw,90px);line-height:.88;font-weight:400;margin:15px 0 30px}
.reception-copy p:not(.script){line-height:1.8;color:#b5a79b}

/* actions */
.actions{background:#efe4d6;color:#2d2020}
.actions h2{font-family:var(--serif);font-size:clamp(48px,13vw,80px);font-weight:500;line-height:.95;margin:0 auto 45px}
.actions h2 em{color:#9b6248}
.action-grid{max-width:620px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.action{min-height:145px;border:1px solid #d1bda4;color:#4b352c;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#f8f0e6;padding:20px}
.action i{font-style:normal;font-size:20px}
.action>span{font-family:var(--serif);font-size:22px;margin-top:10px}
.action small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7d634f;margin-top:5px}
.action:hover{background:#fff}

/* rsvp */
.rsvp{background:#160e10}
.rsvp-card{max-width:600px;margin:auto;text-align:center}
.rsvp-card h2{font-size:clamp(52px,14vw,82px)}
form{margin-top:35px;display:grid;gap:12px}
input,textarea{font:inherit;width:100%;padding:15px;background:#24171a;border:1px solid #4b3836;color:#f7eee5;outline:none;border-radius:0;-webkit-appearance:none;appearance:none}
input:focus,textarea:focus{border-color:#b98961}
textarea{resize:vertical}
button{font-family:inherit;cursor:pointer}
form button{padding:16px;border:0;background:#b98961;color:#180f10;letter-spacing:.18em;font-size:12px;font-weight:600}
.form-note{font-size:13px;color:#bcaea4}
input:focus-visible,textarea:focus-visible,button:focus-visible,.action:focus-visible{outline:2px solid #d2ad78;outline-offset:2px}

/* closing */
.closing{background:radial-gradient(circle at 50% 30%,#4a2925,#150c0e 55%,#080608);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.closing h2{font-family:var(--serif);font-size:clamp(58px,16vw,105px);font-weight:400;line-height:.88;margin:12px 0 30px}
.names{font-family:var(--serif);font-size:20px}
.closing-date{margin-top:25px}
.closing-date b{font-weight:400}

/* reveal on scroll (only hidden when JS is running) */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.js .reveal.visible{opacity:1;transform:none}
.delay-1{transition-delay:.15s}.delay-2{transition-delay:.3s}.delay-3{transition-delay:.45s}.delay-4{transition-delay:.6s}

@media(min-width:760px){
  .section{padding:110px 7vw}
  .story-card,.timeline,.action-grid,.rsvp-card{max-width:760px}
  .reception{grid-template-columns:1fr 1fr}
  .hero h1{font-size:100px}
  .story-card{display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .story-copy{padding:50px}
  .story-image{transform:rotate(-2deg)}
  .slide{flex-basis:70%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .details-card.revealed .scratch{animation:none}
}

.party-poppers{position:fixed;inset:0;pointer-events:none;z-index:99999;overflow:hidden}

/* dark backdrop so the blessing glows */
.party-poppers::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,#1a0d10f2 0,#0a0507f5 55%,#050304fa 100%);opacity:0;animation:dimShow 5.2s ease forwards}
@keyframes dimShow{0%{opacity:0}12%{opacity:1}78%{opacity:1}100%{opacity:0}}

/* flower & petal shower (drifts and sways down) */
.confetti-piece{position:absolute;top:-60px;display:block;opacity:0;animation:petalFall linear forwards;will-change:transform,opacity}
@keyframes petalFall{
  0%{transform:translate(0,-60px) rotate(0) scale(.8);opacity:0}
  10%{opacity:1}
  35%{transform:translate(var(--sway),35vh) rotate(calc(var(--spin)*.3)) scale(1)}
  65%{transform:translate(calc(var(--sway)*-1),70vh) rotate(calc(var(--spin)*.65)) scale(1)}
  100%{transform:translate(var(--sway),112vh) rotate(var(--spin)) scale(.85);opacity:0}
}

/* hearts rising */
.heart-piece{position:absolute;bottom:-50px;opacity:0;animation:heartRise ease-out forwards}
@keyframes heartRise{
  0%{transform:translate(0,0) scale(.5);opacity:0}
  15%{opacity:1}
  100%{transform:translate(var(--sway),-85vh) scale(1.15);opacity:0}
}

/* centre ring + blessing */
.wed-center{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);text-align:center;width:90vw;max-width:520px;animation:centerShow 5s ease forwards}
.wed-ring{font-size:84px;line-height:1;filter:drop-shadow(0 0 22px #d2ad78aa);animation:ringPulse 1.4s ease-in-out 3}
.wed-text{font-family:var(--script);font-size:clamp(54px,14vw,84px);color:#f7dfae;line-height:1.05;text-shadow:0 2px 24px #000,0 0 40px #d2ad78aa}
.wed-sub{font-family:var(--serif);font-size:20px;letter-spacing:.12em;color:#fff2dc;text-shadow:0 2px 14px #000b;margin-top:4px}
@keyframes centerShow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
  22%{transform:translate(-50%,-50%) scale(1)}
  80%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-58%) scale(1)}
}
@keyframes ringPulse{0%,100%{transform:scale(1) rotate(-6deg)}50%{transform:scale(1.18) rotate(6deg)}}

/* bouquets from the sides */
.popper{position:fixed;z-index:100000;top:50%;font-size:80px;pointer-events:none;animation:popperBlast 1.4s cubic-bezier(.17,.67,.35,1.3) forwards}
.popper-left{left:5%}
.popper-right{right:5%;transform:scaleX(-1)}
@keyframes popperBlast{
  0%{opacity:0;transform:scale(.2) rotate(-30deg)}
  25%{opacity:1;transform:scale(1.25) rotate(10deg)}
  60%{transform:scale(1) rotate(-5deg)}
  100%{opacity:0;transform:scale(1.15) translateY(-80px) rotate(10deg)}
}
@media(prefers-reduced-motion:reduce){.confetti-piece,.heart-piece{display:none}}
.details-card.revealed{animation:weddingReveal .8s ease-out}
@keyframes weddingReveal{0%{transform:scale(.97)}50%{transform:scale(1.025)}100%{transform:scale(1)}}

/* =========================================================
   STORYBOARD — append to the end of styles.css
   ========================================================= */
.storyboard{
  background:radial-gradient(circle at 50% 0,#2a181b 0,#140d10 45%,#0d090a 80%);
  padding-left:0;padding-right:0;
  display:flex;flex-direction:column;justify-content:center;
}
.storyboard .chapter,.storyboard .script,.storyboard .sb-title,.storyboard .sb-hint{padding-left:22px;padding-right:22px}
.sb-title{font-family:var(--serif);font-size:clamp(52px,14vw,96px);font-weight:400;line-height:.88;margin:12px 0 50px}
.sb-title em{color:#b98961;font-style:italic}

.sb-viewport{
  position:relative;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.sb-track{
  position:relative;display:flex;gap:18px;align-items:stretch;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:46px 7vw 18px;outline:none;
}
.sb-track::-webkit-scrollbar{display:none}

/* the horizontal line + dots */
.sb-line{position:absolute;left:0;right:0;top:20px;height:1px;background:linear-gradient(90deg,transparent,#b9895a88 8%,#b9895a88 92%,transparent);pointer-events:none}
.sb-card{
  position:relative;flex:0 0 min(74vw,290px);
  padding:26px 24px 28px;
  border:1px solid #ffffff1c;border-top-color:#b9895a66;
  background:linear-gradient(#1b1215,#140d10);
}
.sb-dot{position:absolute;top:-33px;left:24px;width:11px;height:11px;border-radius:50%;background:#d2ad78;box-shadow:0 0 0 5px #d2ad7822,0 0 18px #d2ad7866}
.sb-date{font-family:var(--serif);font-size:62px;line-height:.9;color:#d5b07d;font-weight:500;margin-bottom:12px}
.sb-date span{display:block;font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:.22em;color:#b9a28c;margin-top:8px;font-weight:400}
.sb-card .tag{display:block;margin-bottom:6px}
.sb-card h3{font-family:var(--serif);font-size:30px;line-height:1.05;font-weight:500;margin:6px 0 10px}
.sb-card p{color:#a89b91;font-size:14px;line-height:1.65;margin:0}
.sb-heart{color:#b98961}
.sb-last{background:linear-gradient(#2a181b,#160e10);border-color:#b9895a88}
.sb-hint{text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8d7d72;margin:22px 0 0}

@media(min-width:760px){
  .sb-card{flex-basis:300px}
  .sb-track{padding-left:12vw;padding-right:12vw;gap:22px}
}
@media(prefers-reduced-motion:reduce){
  .sb-track{scroll-behavior:auto}
}

/* scratch area now covers date + muhurtham time */
.scratch{padding:18px 30px;margin:12px 0 10px}
.scratch .rule{margin:16px auto}
.scratch .muhurtham{margin:0 0 4px}
.scratch strong{display:block;line-height:1}
.details-card .venue{margin-top:18px}