/* ==========================================================
   Samithri & Kaveen - Gold & White Wedding Invitation
   ========================================================== */

:root{
    --gold:#c7a45b;
    --gold-dark:#9b7935;
    --gold-light:#ead9a8;
    --white:#fff;
    --cream:#fbf9f3;
    --ivory:#f5f1e7;
    --ink:#29251f;
    --muted:#776f63;
    --line:rgba(157,122,54,.28);
    --serif:"Cormorant Garamond", Georgia, serif;
    --sans:"Montserrat", Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:var(--sans);
    font-weight:400;
}
body.no-scroll{overflow:hidden}
a{text-decoration:none;color:inherit}
button{font:inherit}
.site{overflow:hidden;position:relative}
#particles{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:.6}

.loader{
    position:fixed;inset:0;background:#fff;z-index:9999;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    transition:opacity .6s, visibility .6s;
}
.loader.hidden{opacity:0;visibility:hidden}
.loader-ring{
    width:42px;height:42px;border:1px solid #d7c48f;
    border-top-color:#8e6c2f;border-radius:50%;animation:spin 1s linear infinite;
}
.loader-text{
    margin-top:16px;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:#8c784f;
}
@keyframes spin{to{transform:rotate(360deg)}}

.opening-screen{
    position:fixed;inset:0;z-index:9000;
    display:flex;align-items:center;justify-content:center;
    background:
      radial-gradient(circle at 50% 40%,rgba(231,213,166,.2),transparent 35%),
      linear-gradient(135deg,#fff,#f8f3e8);
    transition:transform 1s cubic-bezier(.7,0,.2,1),opacity 1s;
}
.opening-screen.hide{transform:translateY(-100%);opacity:0;pointer-events:none}
.opening-card{
    width:min(90%,680px);text-align:center;padding:70px 30px;
    border:1px solid var(--line);position:relative;background:rgba(255,255,255,.65);
    box-shadow:0 25px 70px rgba(86,67,30,.08);
}
.opening-card:before,.opening-card:after{
    content:"";position:absolute;width:90px;height:90px;border:1px solid var(--line);
}
.opening-card:before{left:-7px;top:-7px;border-right:0;border-bottom:0}
.opening-card:after{right:-7px;bottom:-7px;border-left:0;border-top:0}
.mini-line,.gold-rule{
    width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);
    margin:18px auto;
}
.eyebrow{
    text-transform:uppercase;letter-spacing:4px;font-size:9px;color:var(--gold-dark);font-weight:600;
}
.eyebrow.light{color:#f5e7bd}
.opening-card h1{
    font:500 clamp(58px,10vw,105px)/.75 var(--serif);
    margin:32px 0 30px;color:#8f6e32;
}
.opening-card h1 span{display:block;font-size:.35em;line-height:1.8;font-style:italic;color:#b59554}
.opening-date{letter-spacing:4px;text-transform:uppercase;font-size:11px;color:#665c4c}
.gold-button,.outline-button{
    display:inline-flex;align-items:center;justify-content:center;gap:14px;
    padding:15px 26px;border:1px solid var(--gold);cursor:pointer;
    text-transform:uppercase;letter-spacing:2px;font-size:9px;transition:.3s;
}
.gold-button{background:linear-gradient(135deg,#b28a3f,#d9bd78);color:#fff;box-shadow:0 10px 25px rgba(156,119,47,.18)}
.gold-button:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(156,119,47,.25)}
.gold-button i{font-style:normal;font-size:15px}
.gold-button.large{padding:18px 34px}
.outline-button{background:transparent;color:var(--gold-dark);margin-top:30px}
.outline-button:hover{background:#fff}

.opening-flower{
    position:absolute;color:#d8c18a;font-size:130px;opacity:.15;
}
.opening-flower-left{left:5%;top:10%}
.opening-flower-right{right:5%;bottom:10%;transform:rotate(180deg)}

.hero{
    min-height:100svh;position:relative;background-image:var(--hero-image);
    background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;
}
.hero-overlay,.closing-overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(26,22,16,.48),rgba(40,31,18,.28) 45%,rgba(24,20,15,.62));
}
.nav{
    position:absolute;top:0;left:0;right:0;z-index:3;
    display:flex;align-items:center;justify-content:center;gap:42px;padding:25px;
    color:#fff;font-size:9px;letter-spacing:2px;text-transform:uppercase;
}
.nav a{opacity:.9}.nav a:hover{color:#f0d58f}
.nav-monogram{
    position:absolute;left:28px;top:20px;width:40px;height:40px;border:1px solid rgba(255,255,255,.65);
    display:flex;align-items:center;justify-content:center;font:600 13px var(--serif);letter-spacing:1px;
}
.hero-content{position:relative;z-index:2;text-align:center;color:#fff;padding:80px 20px}
.ornament{font:34px var(--serif);color:#f0dda9;margin-bottom:15px}
.ornament.gold{color:var(--gold)}
.hero h1{
    font:400 clamp(70px,13vw,150px)/.68 var(--serif);
    margin:28px 0;color:#fff;
    text-shadow:0 4px 25px rgba(0,0,0,.2);
}
.hero h1 span{display:block}
.hero h1 small{font-size:.24em;font-style:italic;display:block;line-height:1.7;color:#e8cf92}
.hero-date{font-size:10px;letter-spacing:4px;text-transform:uppercase}
.scroll-down{
    display:flex;width:36px;height:52px;border:1px solid rgba(255,255,255,.65);
    align-items:center;justify-content:center;color:#fff;margin:55px auto 0;
    animation:bounce 2s infinite;
}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

.section{padding:110px 20px;position:relative}
.section-inner{width:min(1080px,100%);margin:auto;text-align:center}
.section-inner.narrow{max-width:720px}
.welcome{background:#fff}
.welcome h2,.details h2,.countdown-section h2,.rsvp h2{
    font:500 clamp(48px,7vw,78px)/.9 var(--serif);margin:15px 0 30px;
}
h2 em{font-weight:400;color:var(--gold-dark)}
.body-copy{max-width:620px;margin:0 auto;color:var(--muted);font:400 18px/1.8 var(--serif)}
.signature{font:italic 30px var(--serif);color:var(--gold-dark);margin-top:28px}
.floral-corner{position:absolute;color:var(--gold);font-size:100px;opacity:.14}
.top-left{top:10px;left:20px;transform:rotate(-35deg)}
.bottom-right{right:20px;bottom:10px;transform:rotate(145deg)}

.details{background:var(--ivory)}
.details-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px;
}
.detail-card{
    background:#fff;border:1px solid var(--line);padding:42px 20px;min-height:210px;
    transition:.35s;box-shadow:0 10px 30px rgba(76,60,28,.04);
}
.detail-card:hover{transform:translateY(-6px);box-shadow:0 18px 35px rgba(76,60,28,.1)}
.detail-icon{font:32px var(--serif);color:var(--gold-dark);margin-bottom:20px}
.detail-card h3{font:600 10px var(--sans);letter-spacing:3px;text-transform:uppercase}
.detail-card p{color:var(--muted);font:18px/1.6 var(--serif)}

.image-section{
    display:grid;grid-template-columns:1fr 1fr;min-height:620px;background:#fff;
}
.image-panel{background-size:cover;background-position:center;min-height:500px}
.image-copy{
    display:flex;flex-direction:column;justify-content:center;padding:70px clamp(30px,7vw,100px);
}
.image-copy h2{font:500 clamp(50px,5vw,75px)/.9 var(--serif);margin:15px 0}
.image-copy p{font:17px/1.8 var(--serif);color:var(--muted);max-width:480px}
.image-copy .gold-rule{margin:22px 0}
.small-date{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-dark);margin-top:20px}

.countdown-section{background:#fff}
.countdown{
    display:flex;justify-content:center;gap:clamp(10px,5vw,70px);margin-top:55px;
}
.countdown div{min-width:90px}
.countdown strong{display:block;font:500 clamp(48px,7vw,80px)/1 var(--serif);color:var(--gold-dark)}
.countdown span{font-size:8px;letter-spacing:3px;text-transform:uppercase;color:var(--muted)}

.gallery-section{display:grid;grid-template-columns:2fr 1fr;min-height:500px}
.gallery-main{min-height:500px;background-size:cover;background-position:center;position:relative}
.gallery-overlay{position:absolute;inset:0;background:rgba(43,34,20,.24);display:flex;align-items:flex-end;padding:50px}
.gallery-overlay span{color:#fff;font:italic 42px var(--serif);max-width:500px}
.gallery-side{background:#f2ebdb;display:flex;align-items:center;justify-content:center;padding:30px}
.gold-box{text-align:center;border:1px solid var(--line);padding:70px 35px;width:100%;max-width:360px}
.gold-box h3{font:500 45px var(--serif);color:var(--gold-dark);margin:5px}
.gold-box p{font:15px/1.8 var(--serif);color:var(--muted)}

.rsvp{background:var(--ivory)}
.closing{
    min-height:650px;position:relative;background-image:url("https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=2200&q=85");
    background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;
}
.closing-content{position:relative;z-index:2;padding:30px}
.closing-content p{font:italic 22px var(--serif)}
.closing-content h2{font:500 clamp(60px,9vw,120px)/.8 var(--serif);margin:25px 0}
.closing-content h2 span{font-size:.35em;color:#ecd49a}
.closing-date{font:9px var(--sans)!important;letter-spacing:4px;text-transform:uppercase}
.footer{padding:18px;text-align:center;background:#17140f;color:#bcae8d;font-size:8px;letter-spacing:2px;text-transform:uppercase}

.music-button{
    position:fixed;right:20px;bottom:20px;z-index:20;width:44px;height:44px;border-radius:50%;
    border:1px solid var(--gold);background:rgba(255,255,255,.9);color:var(--gold-dark);cursor:pointer;
    box-shadow:0 5px 20px rgba(0,0,0,.12);
}
.music-button.playing{animation:musicPulse 1.4s infinite}
@keyframes musicPulse{50%{box-shadow:0 0 0 9px rgba(199,164,91,.08)}}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}
.reveal.visible{opacity:1;transform:none}

@media(max-width:760px){
    .nav{gap:16px;justify-content:flex-end;padding:18px;font-size:7px}
    .nav-monogram{left:15px;top:15px;width:34px;height:34px;font-size:11px}
    .hero{min-height:92svh}
    .hero h1{font-size:clamp(66px,22vw,110px)}
    .hero-content{padding-top:100px}
    .section{padding:80px 18px}
    .welcome h2,.details h2,.countdown-section h2,.rsvp h2{font-size:50px}
    .details-grid{grid-template-columns:1fr;gap:14px}
    .detail-card{min-height:160px;padding:28px 18px}
    .image-section,.gallery-section{grid-template-columns:1fr}
    .image-panel{min-height:430px}
    .image-copy{padding:65px 28px}
    .gallery-main{min-height:430px}
    .gallery-overlay{padding:30px}
    .gallery-overlay span{font-size:34px}
    .gallery-side{min-height:350px}
    .countdown{gap:8px}
    .countdown div{min-width:65px}
    .countdown strong{font-size:43px}
    .countdown span{font-size:6px;letter-spacing:1.5px}
    .opening-card{padding:55px 18px}
    .opening-card h1{font-size:68px}
    .closing{min-height:560px}
}

/* RSVP form */
.rsvp-form{margin:42px auto 0;text-align:left;max-width:520px;background:rgba(255,255,255,.78);padding:35px;border:1px solid var(--line);box-shadow:0 15px 40px rgba(76,60,28,.06)}
.form-group{margin-bottom:24px}.form-group label{display:block;margin-bottom:9px;text-transform:uppercase;letter-spacing:2px;font-size:9px;color:var(--gold-dark);font-weight:600}
.form-group input,.form-group select{width:100%;height:52px;border:1px solid rgba(125,100,54,.3);background:#fff;padding:0 15px;outline:none;color:var(--ink);font-size:13px}
.form-group input:focus,.form-group select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(199,164,91,.08)}
.attendance-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.attendance-option{border:1px solid rgba(125,100,54,.25);background:#fff;padding:16px 12px;text-align:center;font-size:9px;letter-spacing:1px;color:var(--muted);cursor:pointer;transition:.25s}
.attendance-option input{display:none}.attendance-option span{color:var(--gold-dark);font-size:15px;margin-right:5px}.attendance-option:has(input:checked){border-color:var(--gold);background:#fbf7ed;color:var(--gold-dark);box-shadow:inset 0 0 0 1px var(--gold)}
.rsvp-submit{width:100%;margin-top:5px}.form-note{text-align:center!important;font:12px/1.5 var(--serif)!important;color:#8a806f!important;margin-top:15px!important}
@media(max-width:760px){.rsvp-form{padding:25px 18px}.attendance-options{grid-template-columns:1fr}}