/* ===== Temple Emerald & Antique Gold ===== */
:root{
  --ivory:#FBF4EC; --ivory2:#F6E7E0; --paper:#FFFCF7;
  --gold:#C2A15C; --gold-d:#9C7A34; --gold-l:#EBD9A8;
  --emerald:#8C4B5B; --emerald-d:#5E2F3A; --emerald-2:#C08A88;   /* deep rose / rose */
  --leaf:#B08D6A; --ink:#4F3A3C; --ink-2:#7A6064;
  --serif:"Cormorant Garamond", Georgia, serif;
  --script:"Great Vibes", cursive;
  --title:"Cinzel", var(--serif);
  --hand:"Caveat", cursive;
  --sans:"Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
html, body{ overflow-x:clip }
body{
  margin:0; color:var(--ink); font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; background-color:var(--ivory);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .30  0 0 0 0 .32  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body.locked{ overflow:hidden }
img{ max-width:100%; display:block }
button{ font:inherit; color:inherit }
.ml{ font-family:"Noto Serif Malayalam", var(--serif) }
.gu{ font-family:"Noto Serif Gujarati", var(--serif) }

.foil{ background:linear-gradient(100deg,#9C7A34 0%,#C2A15C 20%,#F6E7C0 36%,#A98246 50%,#EBD9A8 66%,#9C7A34 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:foil 8s ease-in-out infinite }
@keyframes foil{ 50%{ background-position:100% 0 } }

h2{ font-family:var(--serif); font-weight:500; font-size:clamp(38px,4.6vw,60px); line-height:1.05; margin:.1em 0 .3em; color:var(--emerald) }
.eyebrow{ margin:0; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-d); font-weight:500 }
.sec-head{ max-width:760px; margin:0 auto clamp(34px,5vw,56px); padding:0 22px; text-align:center }
.sec-sub{ margin:0; font-family:var(--serif); font-style:italic; font-size:20px; color:var(--ink-2) }
section{ padding:clamp(70px,9vw,110px) 0 }

.btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 30px; border-radius:999px; cursor:pointer; text-decoration:none;
  background:var(--emerald); color:#F5EFDC; font-size:13px; letter-spacing:.18em; text-transform:uppercase; border:1px solid var(--gold);
  box-shadow:0 0 0 4px rgba(194,161,92,.16), 0 12px 26px rgba(140,75,91,.22); transition:transform .25s, box-shadow .25s }
.btn:hover{ transform:translateY(-2px) }
.btn.ghost{ background:transparent; color:var(--emerald); box-shadow:none }
.cta-row{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:34px }
.bob{ display:inline-block; animation:bob 1.8s ease-in-out infinite }
@keyframes bob{ 50%{ transform:translateY(4px) } }
.dir{ display:inline-block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--emerald); text-decoration:none; border-bottom:1px solid var(--gold) }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1) }
.reveal.in, .still .reveal{ opacity:1; transform:none }

/* photos, tinted to the theme */
.ph{ position:relative; overflow:hidden; background:#F3E4DC }
.ph img{ width:100%; height:100%; object-fit:cover; filter:sepia(.18) saturate(.96) contrast(1.02) brightness(1.02) }
.ph img.bg{ position:absolute; inset:0; transform:scale(1.25); filter:blur(26px) saturate(.75) brightness(1.06); opacity:.55 }
.ph img.fg{ position:relative; object-fit:contain; border-radius:10px; box-shadow:0 10px 30px rgba(94,47,58,.22) }
.page .ph{ padding:20px }
.page .ph img.fg{ width:calc(100% - 0px); height:calc(100% - 0px) }
.ph::after{ content:""; position:absolute; inset:0; background:#E2A9A6; mix-blend-mode:soft-light; opacity:.8; pointer-events:none }
.ph::before{ content:""; position:absolute; inset:0; z-index:2; box-shadow:inset 0 0 0 1px rgba(194,161,92,.55); pointer-events:none }

/* crest + filigree */
.crest{ position:relative; display:block; width:92px; height:92px; margin:0 auto }
.crest svg{ position:absolute; inset:0; width:100%; height:100% }
.crest span{ position:absolute; top:50%; transform:translateY(-52%); font-family:var(--title); font-size:28px; font-weight:500; line-height:1 }
.crest .c-l{ right:calc(50% + 7px) } .crest .c-r{ left:calc(50% + 7px) }
.corner{ position:absolute; width:clamp(54px,8vw,88px); height:clamp(54px,8vw,88px); color:var(--gold); pointer-events:none; opacity:.85 }
.corner.tl{ top:16px; left:16px } .corner.tr{ top:16px; right:16px; transform:scaleX(-1) }
.corner.bl{ bottom:16px; left:16px; transform:scaleY(-1) } .corner.br{ bottom:16px; right:16px; transform:scale(-1,-1) }

/* ---------- envelope ---------- */
#gate{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; perspective:1200px;
  background:radial-gradient(120% 90% at 50% 30%, #C08A88 0%, #8C4B5B 55%, #4A2430 100%); transition:opacity 1.1s ease, visibility 1.1s }
#gate.open{ opacity:0; visibility:hidden }
.gate-dots{ position:absolute; inset:0; opacity:.13;
  background:radial-gradient(circle,#EBD9A8 1.3px,transparent 2px) 0 0/22px 22px, radial-gradient(circle,#EBD9A8 1.3px,transparent 2px) 11px 11px/22px 22px }
.envelope{ position:relative; width:min(380px,86vw); aspect-ratio:3/4; border-radius:12px; background:#FBF4EC;
  box-shadow:0 40px 100px rgba(0,0,0,.45), inset 0 0 0 1.5px var(--gold), inset 0 0 0 9px #FBF4EC, inset 0 0 0 10px rgba(194,161,92,.5);
  transition:transform 1s cubic-bezier(.5,0,.3,1) }
.env-flap, .env-flap-edge{ position:absolute; left:0; right:0; top:0; clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:50% 0;
  transition:transform .9s cubic-bezier(.5,0,.3,1); border-radius:12px 12px 0 0 }
.env-flap-edge{ height:47%; background:var(--gold); z-index:2 }
.env-flap{ height:46%; background:linear-gradient(180deg,#A25C6C,#73394A); z-index:3 }
.env-flap-names{ position:absolute; left:0; right:0; top:20%; text-align:center; font-family:var(--title); font-size:14px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-l) }
.env-flap-names small{ display:block; margin-top:8px; font-size:10.5px; letter-spacing:.36em; opacity:.8 }
.seal{ position:absolute; left:50%; top:46%; z-index:4; width:86px; height:86px; margin:-43px 0 0 -43px; border-radius:50%; border:0; cursor:pointer;
  background:radial-gradient(circle at 35% 30%, #CE8A97, #8C4B5B 60%, #5E2F3A); color:var(--gold-l); font-family:var(--title); font-size:24px; line-height:1;
  box-shadow:0 8px 18px rgba(0,0,0,.35), inset 0 0 0 5px rgba(0,0,0,.14), inset 0 0 0 7px rgba(235,217,168,.35); animation:seal 2.4s ease-in-out infinite; transition:transform .5s, opacity .5s }
@keyframes seal{ 50%{ transform:scale(1.07) } }
.env-card{ position:absolute; left:26px; right:26px; bottom:26px; text-align:center }
.env-cult{ margin:0; color:var(--gold-d); font-size:14px } .env-cult i{ font-style:normal; margin:0 6px }
.env-dear{ font-family:var(--script); font-size:34px; line-height:1.2; color:var(--emerald); margin:8px 0 6px }
.env-line{ font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.4; margin:0 0 14px; color:var(--ink-2) }
.env-hint{ margin:0; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-d) }
.env-quiet{ margin-top:6px; background:none; border:0; font-size:12px; color:var(--ink-2); text-decoration:underline; cursor:pointer; opacity:.75 }
#gate.opening .env-flap, #gate.opening .env-flap-edge{ transform:rotateX(180deg) }
#gate.opening .seal{ transform:scale(0); opacity:0; animation:none }
#gate.opening .envelope{ transform:translateY(40px) scale(.94) }

/* ---------- music + petals ---------- */
#music{ position:fixed; left:16px; bottom:16px; z-index:60; display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:6px 16px 6px 6px; border-radius:999px; border:1px solid rgba(194,161,92,.7); background:rgba(255,254,248,.94);
  box-shadow:0 10px 30px rgba(140,75,91,.18); font-family:var(--hand); font-size:19px; line-height:1; color:var(--ink) }
.m-disc{ width:34px; height:34px; border-radius:50%; background:radial-gradient(circle,#FFF 0 3px,#8C4B5B 3.5px 6px,#C2A15C 6.5px 11px,#8C4B5B 11.5px) }
.m-bars{ display:flex; gap:2px; align-items:flex-end; height:14px }
.m-bars i{ width:3px; height:4px; background:var(--gold-d); border-radius:2px }
body.playing .m-disc{ animation:spin 4s linear infinite }
body.playing .m-bars i{ animation:eq .9s ease-in-out infinite }
body.playing .m-bars i:nth-child(2){ animation-delay:.2s } body.playing .m-bars i:nth-child(3){ animation-delay:.45s }
@keyframes spin{ to{ transform:rotate(360deg) } } @keyframes eq{ 50%{ height:14px } }
@media (max-width:520px){ #music .m-text{ display:none } #music{ padding:6px } }
#petals{ position:fixed; inset:0; width:100%; height:100%; z-index:90; pointer-events:none }

/* ---------- hero ---------- */
#hero{ position:relative; min-height:100vh; min-height:100svh; display:grid; place-items:center; overflow:hidden; padding:9vh 0 12vh }
.land{ position:absolute; top:0; bottom:0; width:50%; z-index:0; overflow:hidden }
.land-k{ left:0 } .land-g{ right:0 }
.land svg{ width:100%; height:112%; display:block }
.land-label{ position:absolute; bottom:60px; z-index:2; margin:0; font-family:var(--title); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:#FFFBEF; text-shadow:0 2px 12px rgba(74,36,48,.7) }
.land-label span{ display:block; font-size:20px; letter-spacing:0; text-transform:none }
.land-label.k{ left:3.5vw; color:#7A4B4E; text-shadow:0 2px 12px rgba(255,255,255,.6) } .land-label.g{ right:3.5vw; text-align:right }
.arch{ position:relative; z-index:2; width:min(560px,88vw); padding:70px clamp(24px,4vw,46px) 54px; text-align:center;
  background:rgba(247,243,232,.95); border-radius:280px 280px 22px 22px;
  box-shadow:0 0 0 1.5px var(--gold), 0 0 0 9px rgba(247,243,232,.92), 0 0 0 10.5px rgba(194,161,92,.7), 0 30px 80px rgba(74,36,48,.35) }
.arch::after{ content:""; position:absolute; left:34px; right:34px; bottom:18px; height:8px;
  background:linear-gradient(var(--gold) 0 2px, transparent 2px 4px, var(--gold) 4px 8px) }
.arch .crest{ width:84px; height:84px; margin-top:-6px } .arch .crest span{ font-size:26px }
.cult{ display:flex; gap:12px; justify-content:center; align-items:center; margin:10px 0 0; color:var(--gold-d); font-size:15px }
.cult i{ font-style:normal; font-family:var(--serif) }
.hero-eyebrow{ margin:12px 0 0; font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-d); font-weight:500 }
.hero-couple{ margin:2px 0 0; font-family:var(--script); font-weight:400; font-size:clamp(46px,5.3vw,70px); line-height:1.15; white-space:nowrap }
.hero-couple i{ font-style:normal; font-size:.72em; margin:0 .06em }
.hero-weds{ margin:6px 0 0; font-family:var(--serif); font-style:italic; font-size:20px; color:var(--ink) }
.hero-when{ margin:8px 0 0; font-family:var(--title); font-size:12.5px; letter-spacing:.26em; color:var(--emerald) }
.orn-rule{ display:block; width:190px; height:16px; margin:18px auto 14px }
.hero-story{ margin:0; font-family:var(--script); font-size:clamp(34px,3.8vw,46px); line-height:1.1; color:var(--gold-d) }
.hero-sub{ margin:6px 0 24px; font-family:var(--serif); font-style:italic; font-size:19px; color:var(--ink-2) }
@media (max-width:820px){
  #hero{ padding:24vh 0 12vh }
  .arch{ border-radius:200px 200px 20px 20px }
  .land-label{ top:13vh; bottom:auto } .land-label span{ font-size:17px }
}
@media (max-width:560px){
  .hero-couple{ white-space:normal; font-size:60px; line-height:1 }
  .hero-couple i{ display:block; font-size:.6em; line-height:.9 }
}

/* ---------- invitation ---------- */
#invite-sec{ background:linear-gradient(180deg, rgba(247,243,232,0), #EFEADC) }
.invite{ position:relative; max-width:900px; margin:0 auto; padding:74px clamp(20px,6vw,72px) 56px; text-align:center; border-radius:26px;
  background:radial-gradient(120% 70% at 50% 0%, #FFFCF7 0%, #FBF4EC 60%, #F3EFE0 100%);
  box-shadow:0 0 0 1.5px var(--gold), 0 0 0 10px #FBF4EC, 0 0 0 11.5px rgba(194,161,92,.55), 0 40px 90px rgba(140,75,91,.18) }
.couple{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(12px,3vw,28px); margin:24px 0 8px }
.p-name{ margin:0; font-family:var(--title); font-weight:500; font-size:clamp(21px,2.5vw,29px); letter-spacing:.07em; line-height:1.2; color:var(--emerald) }
.p-parents{ margin:8px 0 0; font-family:var(--serif); font-style:italic; font-size:17px; line-height:1.35; color:var(--ink-2) }
.weds-mark{ margin:0; font-family:var(--script); font-size:44px; line-height:1 }
.inv-req{ margin:14px 0 0; font-family:var(--serif); font-style:italic; font-size:20px; color:var(--ink-2) }
.muhurtham{ max-width:520px; margin:28px auto 0; padding:22px 20px 20px; border-top:1px solid rgba(194,161,92,.55); border-bottom:1px solid rgba(194,161,92,.55) }
.inv-date{ margin:6px 0 0; font-family:var(--serif); font-size:clamp(22px,2.6vw,30px); font-weight:600; letter-spacing:.03em; color:var(--ink) }
.inv-time{ margin:4px 0 0; font-family:var(--title); font-size:17px; letter-spacing:.14em; color:var(--emerald) }
.inv-venue{ margin:6px 0 10px; font-family:var(--serif); font-size:20px; font-style:italic; color:var(--ink) }
.lamps{ display:flex; justify-content:center; gap:60px; margin:24px 0 0 } .lamps svg{ width:38px; height:88px }
.signoff{ margin:20px 0 0; font-family:var(--script); font-size:clamp(30px,4vw,42px); line-height:1.2 }
.flame{ transform-box:fill-box; transform-origin:50% 100%; animation:flicker 1.3s ease-in-out infinite alternate }
@keyframes flicker{ 50%{ transform:scaleY(1.12) scaleX(.92) } 100%{ transform:scaleY(.94) skewX(3deg) } }
@media (max-width:700px){ .couple{ grid-template-columns:1fr; gap:4px } .weds-mark{ font-size:38px } }

/* ---------- footer + lightbox ---------- */
.foot{ position:relative; padding:64px 24px 80px; text-align:center; color:#EFE7D2;
  background:radial-gradient(circle,rgba(235,217,168,.18) 1.3px,transparent 2px) 0 0/18px 18px, linear-gradient(160deg,#8C4B5B,#4A2430) }
.foot p{ margin:6px 0 } .foot .crest{ margin-bottom:8px }
.foot-script{ font-family:var(--script); font-size:clamp(28px,4vw,40px) }
.foot-small{ font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.7 }
#lightbox{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:24px; background:rgba(74,36,48,.92) }
#lightbox figure{ position:relative; margin:0; padding:14px 14px 54px; background:#FFFCF7; max-width:min(92vw,720px) }
#lightbox img{ max-height:76vh; width:auto; margin:0 auto }
#lightbox figcaption{ position:absolute; left:0; right:0; bottom:12px; text-align:center; font-family:var(--hand); font-size:26px; color:var(--ink) }
#lightbox button{ position:absolute; top:16px; right:20px; border:0; background:none; color:#FFF; font-size:40px; cursor:pointer }

html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none; transition:none }
  *, *::before, *::after{ animation-duration:.01s !important; animation-iteration-count:1 !important }
}

/* ===================== neon gold glow layer ===================== */
:root{
  --neon-soft: 0 0 10px rgba(235,217,168,.45), 0 0 26px rgba(194,161,92,.28);
  --neon-strong: 0 0 8px rgba(251,239,214,.85), 0 0 22px rgba(235,217,168,.6), 0 0 44px rgba(194,161,92,.4);
}
section{ position:relative }
.glow-frame{ position:absolute; inset:16px; z-index:0; border:1px solid rgba(194,161,92,.55); border-radius:30px; pointer-events:none;
  box-shadow:inset 0 0 26px rgba(194,161,92,.14), var(--neon-soft); animation:frameGlow 5.5s ease-in-out infinite }
.glow-frame::after{ content:""; position:absolute; inset:7px; border:1px solid rgba(194,161,92,.3); border-radius:24px }
@keyframes frameGlow{ 50%{ box-shadow:inset 0 0 30px rgba(194,161,92,.2), 0 0 16px rgba(235,217,168,.6), 0 0 38px rgba(194,161,92,.4) } }
.gf-corner{ position:absolute; width:58px; height:58px; color:var(--gold); filter:drop-shadow(0 0 6px rgba(235,217,168,.55)) }
.gf-corner.tl{ top:-1px; left:-1px } .gf-corner.tr{ top:-1px; right:-1px; transform:scaleX(-1) }
.gf-corner.bl{ bottom:-1px; left:-1px; transform:scaleY(-1) } .gf-corner.br{ bottom:-1px; right:-1px; transform:scale(-1,-1) }
.sec-head h2{ text-shadow:0 0 20px rgba(194,161,92,.3) }
.sec-head .eyebrow{ text-shadow:0 0 12px rgba(194,161,92,.35) }
.invite{ box-shadow:0 0 0 1.5px var(--gold), 0 0 0 10px #FBF8EE, 0 0 0 11.5px rgba(194,161,92,.55),
  0 0 26px rgba(194,161,92,.3), 0 40px 90px rgba(140,75,91,.18) }
.scratch{ box-shadow:0 0 18px rgba(194,161,92,.25), 0 22px 48px rgba(140,75,91,.14) }
.btn{ box-shadow:0 0 0 4px rgba(194,161,92,.16), 0 0 18px rgba(194,161,92,.35), 0 12px 26px rgba(140,75,91,.22) }
.seal{ box-shadow:0 8px 18px rgba(0,0,0,.35), inset 0 0 0 5px rgba(0,0,0,.14), inset 0 0 0 7px rgba(235,217,168,.35), 0 0 26px rgba(235,217,168,.45) }
@media (max-width:820px){ .glow-frame{ inset:9px; border-radius:22px } .gf-corner{ width:40px; height:40px } }