/* ══════════════════════════════════════════════════════════════
   Mohit & Rupanjana — Wedding Invitation
   Stylesheet
   ══════════════════════════════════════════════════════════════ */

/* ── Reset & Base ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --maroon:#6B0F1A;--maroon2:#8B1A2E;--gold:#B8860B;--gold2:#D4A843;
  --gold3:#F0C040;--ivory:#3A1402;--ivory2:#F5EDD8;--blush:#F0C4B0;
  --cream:#FFFBF2;--dark:#1A0A05;--mid:#5A3020;--sage:#7A6348;
  --saffron:#E8851A;--turmeric:#D4A017;--haldi:#F5C842;
  --deep:#F5C842;--charcoal:#eecc68;
}


html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;background:var(--deep);color:var(--ivory);overflow-x:hidden}

/* ── Navigation ───────────────────────────────────────────────── */
nav{position:sticky;top:0;z-index:100;background-color:#eecc68;backdrop-filter:blur(16px);border-bottom:1px solid rgba(58,20,2,.2);padding:14px 32px;display:flex;justify-content:center;gap:36px;flex-wrap:wrap}
nav a{text-decoration:none;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:rgba(58,20,2,.75);font-family:'Jost',sans-serif;font-weight:500;transition:color .2s}
nav a:hover{color:#2A0E02}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero{min-height:100vh;background:linear-gradient(160deg,#eecc68 30%,#E8B84B 61%,#D4A017 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 24px 60px;position:relative;overflow:hidden}
.hero-bg-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-content{position:relative;z-index:2}
.hero-badge{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:5px;text-transform:uppercase;color:maroon;margin-bottom:20px;animation:fadeUp .8s ease both}
.hero-shlok{font-family:'Cormorant Garamond',serif;font-size:clamp(14px,2vw,17px);color:rgba(58,20,2,0.8);max-width:560px;margin:0 auto 8px;line-height:1.9;animation:fadeUp .8s .1s ease both;font-style:italic}
.hero-shlok-meaning{font-size:11px;letter-spacing:1px;color:rgba(58,20,2,0.5);margin:0 auto 28px;font-style:italic;animation:fadeUp .8s .2s ease both}
.hero-tagline{font-family:'Cormorant Garamond',serif;font-size:clamp(14px,2.2vw,17px);color:rgba(90,30,10,0.75);max-width:520px;margin:0 auto 28px;font-style:italic;line-height:1.9;animation:fadeUp .8s .25s ease both}
.hero-names{font-family:'Great Vibes',cursive;font-size:clamp(58px,12vw,110px);color:#4A1A05;line-height:1;letter-spacing:2px;animation:fadeUp .8s .35s ease both;margin-bottom:6px}
.hero-names .amp{color:#7B2D0A;font-family:'Cormorant Garamond',serif;font-size:clamp(28px,5vw,48px);display:block;line-height:1;font-style:italic;font-weight:300}
.hero-sub{font-family:'Jost',sans-serif;font-size:clamp(12px,2vw,14px);color:rgba(90,30,10,0.7);margin-top:20px;line-height:1.9;animation:fadeUp .8s .5s ease both;max-width:440px;letter-spacing:.5px}
.hero-divider{width:120px;height:1px;background:linear-gradient(90deg,transparent,rgba(58,20,2,.4),transparent);margin:24px auto;animation:fadeUp .8s .45s ease both}
.scroll-hint{margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:6px;animation:fadeUp .8s .9s ease both}
.scroll-hint span{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(58,20,2,.5)}
.scroll-arrow{width:16px;height:16px;border-right:1px solid rgba(58,20,2,.4);border-bottom:1px solid rgba(58,20,2,.4);transform:rotate(45deg);animation:bounce 1.5s infinite}

/* ── Marigold Strip ───────────────────────────────────────────── */
.marigold-strip{background:linear-gradient(90deg,var(--deep),#D4960A,var(--deep));padding:18px 0;text-align:center;font-size:16px;letter-spacing:12px;overflow:hidden;white-space:nowrap;border-top:1px solid rgba(58,20,2,.2);border-bottom:1px solid rgba(58,20,2,.2)}

/* ── Countdown ────────────────────────────────────────────────── */
.countdown{background:var(--charcoal);padding:52px 24px;text-align:center;border-bottom:1px solid rgba(58,20,2,.15)}
.cd-label{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:5px;text-transform:uppercase;color:rgba(58,20,2,.65);margin-bottom:28px}
.cd-boxes{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cd-box{background:rgba(58,20,2,.07);border:1px solid rgba(58,20,2,.2);border-radius:4px;padding:20px 24px;min-width:84px;backdrop-filter:blur(8px)}
.cd-num{font-family:'Cormorant Garamond',serif;font-size:42px;font-weight:600;color:#3A1402;display:block;line-height:1}
.cd-unit{font-family:'Jost',sans-serif;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(58,20,2,.55);margin-top:6px;display:block}

/* ── Section Commons ──────────────────────────────────────────── */
.section-header{text-align:center;margin-bottom:52px}
.section-label{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--cream);margin-bottom:10px}
.section-label-light{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--dark);margin-bottom:10px}
.section-title{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,5vw,46px);color:var(--cream);font-style:italic;font-weight:300}
.section-title-light{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,5vw,46px);color:var(--dark);font-style:italic;font-weight:300}

/* ── Illustration Bands ───────────────────────────────────────── */
.illus-band{background:var(--maroon);padding:0;overflow:hidden;line-height:0}
.illus-band svg{display:block;width:100%}
.haldi-band{background:#F5C842;padding:0;overflow:hidden;line-height:0}
.barat-band{background:var(--ivory2);padding:0;overflow:hidden;line-height:0}

/* ── Events ───────────────────────────────────────────────────── */
.events{background:#FDF6E9;padding:80px 24px;position:relative;overflow:hidden}
.events-paisley{position:absolute;top:0;right:0;opacity:.04;pointer-events:none}
.events-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;max-width:1080px;margin:0 auto}
.event-card{background:#fff;border:2px solid rgba(200,148,42,.2);border-radius:16px;padding:32px 28px;position:relative;overflow:hidden;transition:background .3s}
.event-card:hover{background:rgba(200,148,42,.04)}
.event-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6B0F1A,#D4A843)}
.event-emoji{font-size:28px;margin-bottom:12px;display:block}
.event-name{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:#6B0F1A;margin-bottom:4px;font-style:italic}
.event-date{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;color:#D4A843;font-weight:700;text-transform:uppercase;margin-bottom:16px}
.event-note{font-family:'Jost',sans-serif;font-size:11px;font-style:italic;color:rgba(107,15,26,.7);background:rgba(107,15,26,.06);padding:4px 12px;border:1px solid rgba(107,15,26,.2);display:inline-block;margin-bottom:14px;border-radius:4px}
.event-expects{list-style:none;margin-top:10px}
.event-expects li{font-family:'Jost',sans-serif;font-size:13px;color:#5A3020;padding:6px 0;border-bottom:1px solid rgba(200,148,42,.15);display:flex;align-items:flex-start;gap:8px;line-height:1.5;font-weight:300}
.event-expects li:last-child{border-bottom:none}
.event-expects li::before{content:'—';color:rgba(107,15,26,.4);font-size:10px;margin-top:4px;flex-shrink:0}

/* ── Venue ────────────────────────────────────────────────────── */
.venue{background:var(--charcoal);padding:80px 24px;text-align:center;color:var(--ivory);position:relative;overflow:hidden;border-top:1px solid rgba(58,20,2,.2);border-bottom:1px solid rgba(58,20,2,.2)}
.venue-pattern{position:absolute;inset:0;pointer-events:none;opacity:.08}
.venue-label{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:5px;text-transform:uppercase;color:rgba(58,20,2,.55);margin-bottom:12px}
.venue-title{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,6vw,52px);font-style:italic;font-weight:300;color:var(--ivory);margin-bottom:10px}
.venue-city{font-family:'Great Vibes',cursive;font-size:clamp(32px,6vw,54px);color:#4A1A05;margin-bottom:20px}
.venue-desc{max-width:460px;margin:0 auto;font-family:'Jost',sans-serif;font-size:13px;line-height:2;color:rgba(58,20,2,.65);font-style:italic}

/* ── Expect Section ───────────────────────────────────────────── */
.expect-section{background:#1C1008;padding:80px 24px;position:relative;overflow:hidden}
.expect-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1px;max-width:780px;margin:0 auto;background:rgba(184,134,11,.12)}
.expect-card{padding:36px 30px}
.expect-card.yes{background:#1C1008}
.expect-card.no{background:rgba(107,15,26,.15)}
.expect-card-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-style:italic;font-weight:400;color:#FDFAF4;margin-bottom:20px}
.expect-list{list-style:none}
.expect-list li{font-family:'Jost',sans-serif;font-size:13px;font-weight:300;color:rgba(255,255,255,.55);padding:8px 0;border-bottom:1px solid rgba(184,134,11,.1);display:flex;align-items:center;gap:10px}
.expect-list li:last-child{border-bottom:none}

/* ── RSVP ─────────────────────────────────────────────────────── */
.rsvp{background:#FDF6E9;padding:88px 24px;text-align:center;position:relative;overflow:hidden;border-top:1px solid rgba(200,148,42,.2)}
.rsvp-eyebrow{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:5px;text-transform:uppercase;color:rgba(107,15,26,.6);margin-bottom:12px}
.rsvp-title{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,5vw,44px);color:#6B0F1A;font-style:italic;font-weight:300;margin-bottom:14px}
.rsvp-note{font-family:'Jost',sans-serif;font-size:13px;color:#5A3020;font-style:italic;max-width:440px;margin:0 auto 36px;line-height:2}
.rsvp-form{max-width:420px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.rsvp-input{width:100%;padding:14px 20px;border:1px solid rgba(200,148,42,.35);border-radius:0;background:#fff;font-family:'Jost',sans-serif;font-size:13px;color:#3A1A05;outline:none;transition:border-color .2s;letter-spacing:.5px}
.rsvp-input:focus{border-color:rgba(107,15,26,.5);background:#fff}
.rsvp-input::placeholder{color:rgba(90,48,32,.4)}
.rsvp-radio-group{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.rsvp-rl{cursor:pointer;padding:9px 18px;border-radius:0;background:transparent;border:1px solid rgba(200,148,42,.3);font-family:'Jost',sans-serif;font-size:12px;color:#5A3020;transition:all .2s;letter-spacing:.5px}
.rsvp-rl input{display:none}
.rsvp-rl.sel{background:rgba(107,15,26,.08);border-color:#6B0F1A;color:#6B0F1A}
.rsvp-btn{padding:15px 40px;border-radius:0;background:transparent;color:#6B0F1A;font-family:'Jost',sans-serif;font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;border:1px solid rgba(107,15,26,.4);cursor:pointer;transition:all .25s;margin-top:8px}
.rsvp-btn:hover{background:rgba(107,15,26,.08);border-color:#6B0F1A}
.rsvp-success{display:none;padding:24px;background:rgba(107,15,26,.06);border:1px solid rgba(200,148,42,.25);font-size:16px;color:#6B0F1A;font-family:'Cormorant Garamond',serif;font-style:italic;margin-top:14px}

/* ── Footer ───────────────────────────────────────────────────── */
footer{background:rgb(74, 26, 5);padding:60px 24px 40px;text-align:center;color:rgba(255,255,255,.5);border-top:1px solid rgba(184,134,11,.15)}
.footer-names{font-family:'Great Vibes',cursive;font-size:42px;color:#D4A843;margin-bottom:6px;letter-spacing:2px}
.footer-dates{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:4px;text-transform:uppercase;color:rgba(184,134,11,.45);margin-bottom:28px}
.footer-note{font-family:'Cormorant Garamond',serif;font-size:14px;font-style:italic;color:rgba(255,255,255,.35);max-width:380px;margin:0 auto 10px;line-height:1.9}
.footer-heart{font-size:16px;color:rgba(184,134,11,.6);display:block;margin-top:18px;animation:heartbeat 2s infinite}

/* ── Scroll Reveal ────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── Language Switcher ────────────────────────────────────────── */
.lang-fab{position:fixed;bottom:28px;right:28px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.lang-btn{background:var(--maroon);color:#fff;border:none;border-radius:40px;padding:10px 18px;font-family:'Lato',sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.25);transition:all .2s;display:flex;align-items:center;gap:8px;white-space:nowrap}
.lang-btn:hover{background:var(--maroon2);transform:translateY(-2px)}
.lang-btn .globe{font-size:16px}
.lang-dropdown{display:none;flex-direction:column;gap:6px;align-items:flex-end}
.lang-dropdown.open{display:flex}
.lang-opt{background:#fff;color:var(--maroon);border:2px solid var(--gold);border-radius:30px;padding:8px 16px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.5px}
.lang-opt:hover,.lang-opt.active{background:var(--gold);color:#fff;border-color:var(--gold)}

/* ── Per-Language Font Families ───────────────────────────────── */
body.lang-hi{font-family:'Hind','Jost',sans-serif}
body.lang-bn{font-family:'Noto Sans Bengali',sans-serif}
body.lang-en{font-family:'Lato',sans-serif}

/* ── i18n Transition ──────────────────────────────────────────── */
[data-i18n]{transition:opacity .25s}
[data-i18n].fading{opacity:0}

/* ── Keyframe Animations ──────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(5px)}}
@keyframes heartbeat{0%,100%{transform:scale(1)}25%{transform:scale(1.15)}75%{transform:scale(1.08)}}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ganeshFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:.8}}

/* ── Decoration Images ────────────────────────────────────────── */
.deco-garland {
  position:absolute;top:0;left:0;
  width:100%;height:90px;
  object-fit:cover;object-position:bottom center;
  pointer-events:none;z-index:1;display:block;
}
.deco-garland--hero    { opacity:0.68; }
.deco-garland--section { opacity:0.55; }

.deco-hanging {
  position:absolute;top:0;
  height:220px;width:auto;
  pointer-events:none;opacity:0.52;z-index:1;
  object-fit:cover;
}
.deco-hanging--left  { left:0;  object-position:left top; }
.deco-hanging--right { right:0; object-position:right top; transform:scaleX(-1); }

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:600px){
  nav{gap:16px;padding:10px 14px}
  nav a{font-size:10px}
  .events-grid,.expect-grid{grid-template-columns:1fr}
  .cd-boxes{gap:8px}
  .cd-box{min-width:60px;padding:12px 14px}
  .cd-num{font-size:26px}

  /* On mobile: hide section garlands and hanging side decorations;
     keep only the hero garland for a clean, focused look */
  .deco-garland--section { display:none; }
  .deco-hanging          { display:none; }
}