
.title {
  font-family: 'Cormorant';
  font-weight: 700;
  font-size: clamp(54px, 12vw, 150px);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .04em;
  color: #e3b34c;
  -webkit-text-fill-color: #e3b34c;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.6));
}

.title span {
  display: inline-block;
  opacity: 1;
  transform: none;
  animation: letter .9s cubic-bezier(.2,.9,.3,1.3) forwards;
}
:root{--bur:#4a0b17;--bur2:#6e1428;--bur3:#2a0610;--gold:#e3b34c;--gold2:#f3ecba;--gold3:#a8741a;}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bur3);color:var(--gold2);font-family:'Cormorant Upright',serif;overflow-x:hidden;
  background-image:radial-gradient(circle at 50% 0,var(--bur2),var(--bur3) 70%)}
.gold-text,.title,.big,.h2{background:linear-gradient(120deg,#fff1a8,#e3b34c 40%,#a8741a 60%,#f3ecba);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% center}}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold3),var(--gold2));z-index:100}
#dust{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

/* Ornaments */
.chandelier{position:fixed;top:-6px;left:50%;width:min(260px,34vw);transform:translateX(-50%);z-index:60;pointer-events:none;
  filter:drop-shadow(0 10px 25px rgba(243,200,90,.55));transform-origin:top center;transition:width .4s}
.chandelier svg,.lantern svg{width:100%;display:block}
.chandelier img,.lantern img,.gramo-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.chandelier.small{width:min(150px,22vw)}
.chandelier::after{content:"";position:absolute;left:50%;top:60%;width:60%;height:60%;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,220,120,.5),transparent 70%);animation:flicker 3s infinite}
.lantern{position:fixed;top:0;width:min(130px,20vw);z-index:60;pointer-events:none;transform-origin:top center;animation:sway 5s ease-in-out infinite;filter:drop-shadow(0 0 22px rgba(255,190,60,.75))}
.lantern.left{left:12px}.lantern.right{right:12px;animation-delay:-2.5s}
.lantern.long{}
@keyframes sway{0%,100%{rotate:-5deg}50%{rotate:5deg}}
@keyframes flicker{0%,100%{opacity:.7}50%{opacity:1}}

/* Petal frame */
.frame{position:fixed;inset:10px;z-index:50;pointer-events:none;border:1px solid rgba(227,179,76,.5);border-radius:6px}
.frame i{position:absolute;background-repeat:repeat;opacity:.95}
.frame .t,.frame .b{left:0;right:0;height:22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='22' viewBox='0 0 34 22'%3E%3Cpath d='M17 22C4 16 3 6 17 0c14 6 13 16 0 22z' fill='%23e3b34c'/%3E%3Cpath d='M17 18V5' stroke='%234a0b17' stroke-width='1' opacity='.5'/%3E%3C/svg%3E");background-size:34px 22px;background-repeat:repeat-x}
.frame .t{top:-1px;transform:scaleY(-1)}.frame .b{bottom:-1px}
.frame .l,.frame .r{top:22px;bottom:22px;width:22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='34' viewBox='0 0 22 34'%3E%3Cpath d='M0 17C6 4 16 3 22 17c-6 14-16 13-22 0z' fill='%23e3b34c'/%3E%3Cpath d='M4 17h13' stroke='%234a0b17' stroke-width='1' opacity='.5'/%3E%3C/svg%3E");background-size:22px 34px;background-repeat:repeat-y}
.frame .l{left:-1px;transform:scaleX(-1)}.frame .r{right:-1px}

.music{position:fixed;right:22px;bottom:22px;z-index:90;width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);background:var(--bur);color:var(--gold);font-size:20px;cursor:pointer;box-shadow:0 0 14px rgba(227,179,76,.5)}
.music.on{animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(227,179,76,.7)}100%{box-shadow:0 0 0 18px rgba(227,179,76,0)}}

section{position:relative;padding:120px 24px;z-index:10}
.wrap{max-width:900px;margin:auto;text-align:center}

/* Hero */
.hero{min-height:100vh;padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;inset:-5% 0;will-change:transform}
.swirl{position:absolute;inset:0;background:
  radial-gradient(circle at 50% 38%,rgba(255,215,110,.9) 0,rgba(255,200,90,.25) 12%,transparent 30%),
  repeating-conic-gradient(from 0deg at 50% 55%,var(--bur) 0 8deg,var(--bur2) 8deg 16deg);animation:rot 80s linear infinite;filter:saturate(1.1)}
@keyframes rot{to{transform:rotate(360deg) scale(1.4)}}
.sufi-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;animation:slowzoom 30s ease-in-out infinite alternate}
@keyframes slowzoom{to{transform:scale(1.12)}}
.hero-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(74,11,23,.65),rgba(110,20,40,.5) 45%,var(--bur3) 100%);mix-blend-mode:multiply}
.hero-tint::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,transparent 25%,rgba(30,4,10,.7))}
.hero-content{position:relative;z-index:5;text-align:center;padding:0 20px;margin-top:20vh}
.om{font-family:'Gotu';font-size:18px;letter-spacing:.1em}
.eyebrow{font-size:clamp(18px,3vw,28px);margin:10px 0;letter-spacing:.08em}
.title{font-family:'Cormorant';font-weight:700;font-size:clamp(54px,12vw,150px);text-transform:uppercase;line-height:1;letter-spacing:.04em;filter:drop-shadow(0 4px 18px rgba(0,0,0,.6))}
.title span{display:inline-block;opacity:0;transform:translateY(60px) rotate(12deg);animation:letter .9s cubic-bezier(.2,.9,.3,1.3) forwards}
.title .sp{width:.35em}
@keyframes letter{to{opacity:1;transform:none}}
.sub{font-family:'Yaldevi';font-size:clamp(15px,2.2vw,22px);margin-top:14px}
.scroll-hint{display:inline-flex;flex-direction:column;align-items:center;gap:8px;margin-top:40px;color:var(--gold);text-decoration:none;font-size:13px;letter-spacing:.3em;text-transform:uppercase}
.scroll-hint i{width:1px;height:50px;background:linear-gradient(var(--gold),transparent);animation:drip 1.8s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Typography */
.blessing{font-size:clamp(20px,3vw,30px);margin:18px 0}
.names{font-size:clamp(22px,3.4vw,34px);color:var(--gold);margin:8px 0;letter-spacing:-.01em}
.big{font-family:'Cormorant Infant';font-size:clamp(56px,11vw,130px);text-transform:uppercase;margin:24px 0;line-height:1}
.h2{font-family:'Aboreto';font-size:clamp(34px,6vw,64px);margin-bottom:34px}
.verse{font-style:italic;font-family:'Cormorant';font-size:clamp(20px,2.6vw,28px);margin-top:24px;line-height:1.5}
.divider{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:50px}
.divider span{width:min(180px,25vw);height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.divider span:last-child{transform:scaleX(-1)}
.divider svg{width:26px;animation:spinY 4s linear infinite}
@keyframes spinY{to{transform:rotateY(360deg)}}

/* About */
.about{background:linear-gradient(180deg,transparent,rgba(0,0,0,.25),transparent)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;text-align:left}
.about-text p{font-size:clamp(18px,2.2vw,24px);line-height:1.6;margin-bottom:18px}
.gramo{position:relative;width:min(380px,80vw);margin:auto}
.gramo-art{position:relative;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.gramo-art svg{width:100%;display:block}
.vinyl{position:absolute;left:12%;top:60%;width:65%;height:14%;border-radius:50%;background:repeating-radial-gradient(#111 0 3px,#222 3px 4px);border:2px solid #000;opacity:0;transition:opacity .6s}
.vinyl.on{opacity:.0}
.gramo.playing .gramo-art{animation:bob .8s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-6px) rotate(-1deg)}}
.btn{background:transparent;border:1px solid var(--gold);color:var(--gold);padding:12px 26px;font:inherit;font-size:18px;letter-spacing:.15em;cursor:pointer;border-radius:40px;transition:.3s}
.btn:hover{background:var(--gold);color:var(--bur)}

/* Event */
.card{position:relative;max-width:420px;margin:0 auto 60px;padding:14px;border-radius:200px 200px 24px 24px;background:linear-gradient(160deg,var(--gold2),var(--gold3));box-shadow:0 0 40px rgba(227,179,76,.35)}
.card-inner{background:var(--bur);border-radius:190px 190px 14px 14px;padding:80px 28px 40px;color:var(--gold)}
.card h3{font-family:'Cormorant';font-weight:700;font-size:44px;margin-bottom:12px}
.card p{font-size:22px;margin:6px 0}.card .time{font-family:'Copse'}
.link{display:inline-block;margin-top:14px;color:#e6d3ff;font-weight:700;text-decoration:underline}
.timeline{list-style:none;max-width:560px;margin:0 auto 70px;border-left:1px solid var(--gold);padding-left:0}
.timeline li{display:flex;gap:20px;padding:18px 24px;text-align:left;position:relative;font-size:22px}
.timeline li::before{content:"";position:absolute;left:-6px;top:28px;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.timeline b{color:var(--gold);min-width:90px;font-family:'Cormorant'}
.count p{font-size:34px;color:#e79300;margin-bottom:14px}
.cd{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.cd div{width:90px;padding:14px 0;border:1px solid rgba(227,179,76,.6);border-radius:12px;background:rgba(0,0,0,.25)}
.cd b{display:block;font-size:38px;color:#e79300;font-variant-numeric:tabular-nums}.cd small{letter-spacing:.2em;text-transform:uppercase;font-size:11px}

/* RSVP */
.rsvp p{font-family:'Yaldevi';font-size:20px;margin-bottom:26px}
.rsvp .small{margin-top:14px;font-size:15px}
.ring{position:relative;display:inline-block;width:99px;height:99px;margin:6px 14px}
.ring i{position:absolute;border-radius:50%;border:2px solid var(--gold2)}
.ring i:first-child{inset:0;animation:ringspin 8s linear infinite;border-style:dashed}
.ring i:last-child{inset:17px;border-width:9px;transition:.4s}
.ring:hover i:last-child{inset:10px;border-color:var(--gold)}
.ring.map i:last-child{border-radius:50% 50% 50% 0;rotate:-45deg}
@keyframes ringspin{to{transform:rotate(360deg)}}
footer{position:relative;z-index:10;text-align:center;padding:80px 30px 120px;color:#e79300}
footer p{font-size:20px;max-width:420px;margin:12px auto}footer .small{font-size:16px}
.foot-p{width:30px;animation:spinY 5s linear infinite}

/* Reveal */
.reveal{opacity:0;transform:translateY(50px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.reveal.from-left{transform:translateX(-80px)}.reveal.from-right{transform:translateX(80px)}
.reveal.zoom{transform:scale(.7)}
.reveal.in{opacity:1;transform:none}

@media(max-width:760px){
 .two{grid-template-columns:1fr;text-align:center}
 section{padding:100px 22px}
 .lantern{width:56px}.chandelier{width:44vw}
 .hero-content{margin-top:30vh}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.title span{opacity:1;transform:none}}

/* Gallery carousel */
.carousel{position:relative;width:min(440px,86vw);aspect-ratio:630/889;margin:0 auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.65)) drop-shadow(0 0 30px rgba(227,179,76,.25))}
.slides{position:absolute;left:19%;right:19.2%;top:15.4%;bottom:16.2%;overflow:hidden;background:#000}
.slide{position:absolute;inset:0;opacity:0;transform:scale(1.15);transition:opacity 1.2s ease,transform 6s ease}
.slide.on{opacity:1;transform:scale(1)}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.frame-img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.nav{position:absolute;top:50%;z-index:4;width:40px;height:40px;margin-top:-20px;border-radius:50%;border:1px solid var(--gold);background:rgba(74,11,23,.85);color:var(--gold);font-size:26px;line-height:1;cursor:pointer}
.nav.prev{left:-8px}.nav.next{right:-8px}.nav:hover{background:var(--gold);color:var(--bur)}
.dots{position:absolute;bottom:5%;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:4}
.dots i{width:8px;height:8px;border-radius:50%;background:rgba(243,236,186,.4);cursor:pointer;transition:.3s}
.dots i.on{background:var(--gold);transform:scale(1.4)}
.small-note{margin-top:26px;font-size:15px;opacity:.7}

/* RSVP form */
.kicker{font-size:13px;letter-spacing:.35em;color:var(--gold);margin-bottom:18px}
.rsvp-title{font-family:'Cormorant';font-weight:400;font-size:clamp(46px,9vw,86px);line-height:1.02;color:var(--gold2)}
.rsvp-title em{font-style:normal;color:var(--gold)}
.rsvp .rsvp-sub{font-family:'Cormorant Upright';font-size:19px;max-width:500px;margin:22px auto 40px;line-height:1.5;opacity:.9}
.rsvp-form{max-width:490px;margin:0 auto;padding:46px 48px 34px;text-align:left;border:1px solid rgba(227,179,76,.55);
  background:linear-gradient(145deg,rgba(110,20,40,.75),rgba(42,6,16,.9));box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 0 40px rgba(227,179,76,.06)}
.lbl{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 10px;font-family:'Yaldevi',sans-serif}
.rsvp-form input[type=text],.rsvp-form select{width:100%;padding:17px 16px;margin-bottom:26px;background:rgba(30,4,10,.8);border:1px solid rgba(227,179,76,.4);color:var(--gold2);font:inherit;font-size:19px;outline:none;border-radius:0;transition:.3s}
.rsvp-form input[type=text]:focus,.rsvp-form select:focus{border-color:var(--gold);box-shadow:0 0 14px rgba(227,179,76,.3)}
.rsvp-form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e3b34c' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.rsvp-form fieldset{border:0;margin-bottom:26px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{display:flex;align-items:center;gap:10px;padding:16px 14px;border:1px solid rgba(227,179,76,.35);color:var(--gold2);font-size:15px;cursor:pointer;transition:.3s;font-family:'Yaldevi',sans-serif}
.choice input{position:absolute;opacity:0}
.choice .dot{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--gold2);background:transparent;transition:.3s}
.choice:has(input:checked){border-color:var(--gold);background:linear-gradient(135deg,rgba(227,179,76,.22),rgba(110,20,40,.4))}
.choice input:checked+.dot{background:var(--gold);box-shadow:0 0 0 3px var(--bur),0 0 0 4px var(--gold)}
.send{width:100%;display:flex;justify-content:space-between;padding:19px 20px;border:0;background:var(--gold);color:var(--bur3);font:700 13px 'Yaldevi',sans-serif;letter-spacing:.2em;cursor:pointer;transition:.3s}
.send:hover{background:var(--gold2);letter-spacing:.26em}
.rsvp .fine{font-size:12px;opacity:.65;text-align:center;margin:18px 0 0;font-family:'Yaldevi',sans-serif}
@media(max-width:520px){.rsvp-form{padding:34px 22px 26px}.choices{grid-template-columns:1fr}}
