/* ═══════════════════════════════════════════════════════════
   TEMPLATE 02 — ROYAL MIDNIGHT MEWAR
   ShaadiPath Wedding Website Builder
   ═══════════════════════════════════════════════════════════
   PALETTE LEGEND vs Template 01:
   --rose   #C4748C → #A01830  (blush rose → Maharani ruby)
   --blush  #F2D4C8 → #E8C8A0  (warm blush → aged parchment)
   --gold   #C4985A → #C8860A  (antique gold → burnished gold)
   --ivory  #FAF3E8 → #F0E0B0  (warm ivory → aged ivory)
   --cream  #FDF5EE → #FAF4E4  (warm cream → parchment cream)
   --sage   #8BAE9B → #6B8E7A  (sage green → deep jade)
   --deep   #3D1E2E → #0D1B3E  (plum → midnight navy)
   --peach  #F0C4A0 → #C8A070  (soft peach → warm parchment)
═══════════════════════════════════════════════════════════ */

/* ═══ TOKENS ═══ */
:root{
  --rose:#A01830;--blush:#E8C8A0;--gold:#C8860A;--ivory:#F0E0B0;
  --cream:#FAF4E4;--sage:#6B8E7A;--deep:#0D1B3E;--peach:#C8A070;
  /* Font stacks */
  --ff-d:'Cinzel',Georgia,serif;
  --ff-s:'EB Garamond',Georgia,serif;
  --ff-b:'Raleway',sans-serif;
  --royal:cubic-bezier(0.16,1,0.3,1);
  --spring:cubic-bezier(0.34,1.56,0.64,1);
  --silk:cubic-bezier(0.25,0.46,0.45,0.94);
  --jelly:cubic-bezier(0.34,1.56,0.64,1);
  /* Dark glass — lower opacity on dark bg so content reads */
  --glass-bg:rgba(13,27,62,0.72);
  --glass-blur:blur(16px) saturate(160%);
  --glass-border:1px solid rgba(200,134,10,0.35);
  /* Emboss — subtle on dark surface */
  --emboss:inset 0 1px 0 rgba(240,224,176,0.18),inset 0 -1px 0 rgba(0,0,0,0.25);
  /* Depth shadows */
  --shadow-sm:0 2px 8px rgba(0,0,0,.25);
  --shadow-md:0 8px 32px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.20);
  --shadow-lg:0 24px 64px rgba(0,0,0,.45),0 6px 20px rgba(0,0,0,.28);
  --shadow-gold:0 12px 40px rgba(200,134,10,.28),0 4px 12px rgba(200,134,10,.16);
}

/* ═══ PERFORMANCE — content-visibility for off-screen sections ═══ */
.s-story,
.s-gallery,
.s-things,
.s-rsvp,
.footer {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* ═══ RESET ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff-b);background:var(--cream);color:var(--deep);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

/* ═══ CURSOR — ruby ring instead of rose ═══ */
@media(pointer:fine){
  body.cursor-active{cursor:none}
  .c-ring{position:fixed;inset:0;width:34px;height:34px;border:1.5px solid var(--rose);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .22s,height .22s,background .22s,box-shadow .45s cubic-bezier(0.23,1,0.32,1);top:-100px;left:-100px}
  .c-dot{position:fixed;width:5px;height:5px;background:var(--gold);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);top:-100px;left:-100px}
  body.ch .c-ring{width:52px;height:52px;background:rgba(160,24,48,.12)}
}

/* ═══ PRELOADER — gold mandala trace on midnight navy ═══ */
.preloader{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(170deg,#0D1B3E 0%,#1A2C5B 55%,#0E1830 100%);
  transition:opacity .5s ease,visibility .5s ease;
}
.preloader.away{opacity:0;visibility:hidden;pointer-events:none}
.pl-content{display:flex;flex-direction:column;align-items:center;gap:18px}
.pl-mandala-wrap{display:flex;align-items:center;justify-content:center}
.pl-mandala{overflow:visible}

/* Rings draw in via stroke-dashoffset */
.pl-m-ring{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 0s}
.preloader.li .pl-m-r1{stroke-dashoffset:0;transition-duration:.55s;transition-delay:0s}
.preloader.li .pl-m-r2{stroke-dashoffset:0;transition-duration:.48s;transition-delay:.08s}
.preloader.li .pl-m-r3{stroke-dashoffset:0;transition-duration:.40s;transition-delay:.14s}

/* Petals + dot fade when names appear */
.pl-m-petals{opacity:0;transition:opacity .4s ease}
.preloader.ni .pl-m-petals{opacity:1}
.pl-m-dot{opacity:0;transform-origin:60px 60px;transform:scale(0);transition:opacity .3s ease .1s,transform .5s var(--spring) .1s}
.preloader.ni .pl-m-dot{opacity:.80;transform:scale(1)}

/* Slow spin while names show */
.preloader.ni .pl-mandala{animation:mandalaSpin 8s linear infinite}
@keyframes mandalaSpin{to{transform:rotate(360deg)}}

/* Names — ivory on dark */
.pl-names{
  font-family:var(--ff-s);font-style:italic;font-weight:300;
  font-size:clamp(1.2rem,5vw,1.8rem);
  color:var(--ivory);
  display:flex;align-items:baseline;gap:10px;
  opacity:0;transform:translateY(10px);
  transition:opacity .6s ease,transform .6s ease;
}
.preloader.ni .pl-names{opacity:1;transform:translateY(0)}
.pl-weds{font-size:.62em;color:var(--gold);font-weight:400;letter-spacing:.05em}

/* ═══ NAV — hidden ═══ */
#nav,#nav.sc,.mobile-menu{display:none!important}

/* ═══ HERO SCROLL SCENE ═══ */
.hero-wrap{position:relative;height:220vh}
@media(max-width:767px){.hero-wrap{height:200vh}}
@media(min-width:1400px){.hero-wrap{height:250vh}}
@media(prefers-reduced-motion:reduce){.hero-wrap{height:100svh}}

.hero-pin{
  position:sticky;top:0;
  height:100svh;min-height:600px;
  overflow:hidden;
}
@media(prefers-reduced-motion:reduce){.hero-pin{position:relative}}

/* ── HERO SKY — midnight navy to royal blue, warm gold horizon glow ── */
.hero-sky{position:absolute;inset:0;
  background:linear-gradient(170deg,#0D1B3E 0%,#1A2C5B 40%,#141E40 68%,#0A1228 100%)}

/* ── HERO MOON — removed (replaced by crescent asset Element 3.png)
   We keep the div in HTML but make it invisible — the crescent floats
   separately as Element 3.png in the invitation section.           ── */
.hero-moon{
  position:absolute;width:90px;height:90px;border-radius:50%;
  /* Gold-tinted moon glow for dark sky */
  background:radial-gradient(circle at 40% 40%,#F8F0D0 0%,#C8A030 60%,#A07818 100%);
  box-shadow:0 0 60px rgba(200,160,30,.55),0 0 120px rgba(200,134,10,.20),0 3px 14px rgba(0,0,0,.3);
  top:7%;right:12%;z-index:2;
}
@media(max-width:600px){.hero-moon{width:58px;height:58px;top:5%;right:8%}}

.hl{position:absolute;will-change:transform}

/* ── PALACE / FORT GATE — same positioning as T01 ── */
.hl-palace{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  transform-origin:top center;
  top:0;
  height:85vh;
  min-height:480px;
  width:auto;
  z-index:5;
  filter:drop-shadow(0 20px 60px rgba(0,0,0,.45)) drop-shadow(0 4px 16px rgba(200,134,10,.15));
  opacity:1;
  transition:opacity 1s var(--royal);
  will-change:transform,filter;
}
body.pl-active .hl-palace{opacity:0}
body.pl-active .hl-palace.in{opacity:1}

/* Mobile: gentle gold-glow breathe since mouse tilt unavailable */
@media(pointer:coarse){
  .hl-palace{ animation:palaceMobileGlow 7s ease-in-out infinite; }
  @keyframes palaceMobileGlow{
    0%,100%{filter:drop-shadow(0 20px 60px rgba(0,0,0,.45)) drop-shadow(0 4px 16px rgba(200,134,10,.15))}
    50%    {filter:drop-shadow(0 32px 80px rgba(0,0,0,.55)) drop-shadow(0 4px 24px rgba(200,134,10,.28))}
  }
}

/* Names below palace — ivory on dark sky */
.hero-copy{
  position:absolute;
  top:87%;
  left:0;right:0;
  z-index:9;
  display:flex;
  flex-direction:row;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:0 0.4em;
  text-align:center;
  padding:0 16px;
  pointer-events:none;
}
.hc-bride,.hc-groom{
  font-family:var(--ff-d);font-weight:400;font-style:normal;
  font-size:clamp(2.4rem,5vw,5.5rem);
  /* Ivory names on dark sky — warm text shadow for lift */
  color:var(--ivory);line-height:1.05;
  text-shadow:0 2px 32px rgba(0,0,0,.6),0 0 60px rgba(200,134,10,.25);
}
.hc-weds{
  font-family:var(--ff-s);font-style:italic;font-weight:300;
  font-size:clamp(0.9rem,1.8vw,1.8rem);
  color:var(--gold);line-height:1;
  padding-bottom:0.25em;
}

/* Entry visibility */
.hero-copy>*{opacity:1;transform:none;transition:opacity .9s var(--royal),transform .9s var(--royal)}
body.pl-active .hero-copy>*{opacity:0;transform:translateY(16px)}
body.pl-active .hero-copy.in .hc-bride    {opacity:1;transform:none;transition-delay:.18s}
body.pl-active .hero-copy.in .hc-weds     {opacity:1;transform:none;transition-delay:.32s}
body.pl-active .hero-copy.in .hc-groom    {opacity:1;transform:none;transition-delay:.48s}
body.pl-active .hero-copy.in .hc-countdown{opacity:1;transform:none;transition-delay:.62s}

/* Mobile — raised to fit countdown row */
@media(max-width:600px){
  .hl-palace{ height:70vh; min-height:360px; }
  .hero-copy{ top:69%; flex-direction:column; align-items:center; gap:0.06em; }
  .hc-bride,.hc-groom{ font-size:clamp(2rem,9vw,3.2rem); }
  .hc-weds{ font-size:clamp(.8rem,3.5vw,1rem); padding:0.08em 0; }
}

/* Floating ornaments — lamp glow amber on dark sky */
.hero-floats{position:absolute;inset:0;z-index:8;pointer-events:none}
.fl{position:absolute;mix-blend-mode:screen}

.diya-l{width:clamp(52px,7vw,96px);top:14%;left:3%;transform-origin:50% 0%;
  filter:drop-shadow(0 0 18px rgba(200,134,10,.8)) drop-shadow(0 0 40px rgba(200,134,10,.3));
  animation:swing 2.4s ease-in-out infinite}
.diya-r{width:clamp(46px,6vw,86px);top:18%;right:4%;transform-origin:50% 0%;
  filter:drop-shadow(0 0 18px rgba(200,134,10,.8)) drop-shadow(0 0 40px rgba(200,134,10,.3));
  animation:swingR 2.4s ease-in-out infinite 1.1s}
/* Botanicals use multiply on lighter sections — screen on hero dark bg */
.fall-l{width:clamp(44px,6vw,80px);left:8%;animation:fallLeaf 9s ease-in-out infinite;
  mix-blend-mode:screen;
  filter:drop-shadow(0 4px 12px rgba(107,142,122,.4))}
.fall-r{width:clamp(38px,5vw,68px);right:7%;animation:fallLeaf 11s ease-in-out infinite 2.5s;
  mix-blend-mode:screen;
  filter:drop-shadow(0 4px 12px rgba(107,142,122,.4))}

@keyframes swing  {0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@keyframes swingR {0%,100%{transform:scaleX(-1) rotate(-12deg)}50%{transform:scaleX(-1) rotate(12deg)}}
@keyframes fallLeaf{
  0%  {transform:translateY(-70px) rotate(-18deg);opacity:0}
  6%  {opacity:.6}
  40% {transform:translateY(28vh) rotate(10deg) translateX(14px);opacity:.6}
  75% {transform:translateY(62vh) rotate(-10deg) translateX(-11px);opacity:.4}
  100%{transform:translateY(102vh) rotate(6deg) translateX(8px);opacity:0}
}
@keyframes leafL{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes leafR{0%,100%{transform:rotate(9deg)}50%{transform:rotate(-9deg)}}

/* Scroll nudge — ivory on dark */
.scroll-nudge{
  position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);
  z-index:9;text-align:center;transition:opacity .4s;
}
.scroll-nudge span{
  display:block;font-size:.5rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ivory);opacity:.35;margin-bottom:6px;font-weight:200;
}
.sn-line{width:1px;height:34px;background:rgba(240,224,176,.2);margin:0 auto;position:relative;overflow:hidden}
.sn-dot{position:absolute;top:-8px;left:0;width:1px;height:8px;background:var(--gold);animation:snDrop 2s ease-in-out infinite}
@keyframes snDrop{0%{top:-8px;opacity:1}100%{top:100%;opacity:0}}

/* ═══ GOLD ATMOSPHERE ORBS — dark sky version (T02 Change 11) ═══ */
.rangoli-orb{
  position:absolute;width:60px;height:60px;
  background:radial-gradient(circle,rgba(200,134,10,.20) 0%,rgba(200,134,10,.08) 50%,transparent 72%);
  border-radius:50%;filter:blur(10px);z-index:3;pointer-events:none;
  animation:orbFloat 24s ease-in-out infinite;
  will-change:transform;
}
.rangoli-orb:nth-of-type(2){
  width:44px;height:44px;
  background:radial-gradient(circle,rgba(160,24,48,.18) 0%,rgba(200,134,10,.08) 55%,transparent 75%);
  animation-duration:30s;animation-direction:reverse;
}
@keyframes orbFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  33%{transform:translateY(-55px) rotate(14deg)}
  66%{transform:translateY(-28px) rotate(-9deg)}
}

/* ═══ HERO COUNTDOWN — ivory/gold on dark sky (T02) ═══ */
.hc-countdown{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,2.5vw,22px);
  margin-top:clamp(8px,1.2vh,16px);
  pointer-events:none;flex-wrap:nowrap;
}
.hc-cd-unit{display:flex;flex-direction:column;align-items:center;gap:3px}
.hc-cd-num{
  font-family:var(--ff-s);font-style:italic;font-weight:300;
  font-size:clamp(1.4rem,4vw,2.2rem);
  color:var(--gold);line-height:1;
  text-shadow:0 0 24px rgba(200,134,10,.60),0 2px 8px rgba(0,0,0,.40);
  min-width:2ch;text-align:center;
}
.hc-cd-label{
  font-family:var(--ff-b);font-size:clamp(7px,1.8vw,9px);
  font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ivory);opacity:.50;
}
.hc-cd-sep{
  font-family:var(--ff-s);font-style:italic;
  font-size:clamp(1rem,2.5vw,1.6rem);
  color:var(--gold);opacity:.50;line-height:1;margin-bottom:12px;
}
@media(max-width:600px){
  .hc-countdown{gap:6px;margin-top:8px}
  .hc-cd-num{font-size:clamp(1.2rem,6vw,1.6rem)}
  .hc-cd-sep{font-size:clamp(.9rem,3vw,1.1rem)}
  .hc-cd-label{font-size:7px;letter-spacing:.12em}
}
@media(max-width:360px){
  .hc-cd-unit:last-child,.hc-cd-sep:last-of-type{display:none}
}

/* ═══ ELEPHANT BRIDGE — dark twilight gradient ═══ */
.eleph-bridge{
  position:relative;
  width:100%;
  height:320px;
  /* Full dark — navy throughout, no cream bottom clash with invite section */
  background:linear-gradient(180deg,#0A1228 0%,#1A2C5B 45%,#162240 80%,#0D1B3E 100%);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  overflow:visible;
  z-index:10;
}
@media(max-width:600px){.eleph-bridge{height:220px}}

.eleph{
  position:relative;
  width:42%;
  max-width:280px;
  flex-shrink:0;
}
.eleph-l{
  align-self:flex-end;
  transform-origin:50% 100%;
  animation:elephWalkL 3.2s ease-in-out infinite;
}
.eleph-r{
  align-self:flex-end;
  transform-origin:50% 100%;
  animation:elephWalkR 3.2s ease-in-out infinite 0.4s;
}

@keyframes elephWalkL{
  0%   { transform: rotate(-1.5deg) translateY(0px); }
  25%  { transform: rotate(1.2deg)  translateY(-5px); }
  50%  { transform: rotate(-1.8deg) translateY(-2px); }
  75%  { transform: rotate(1.0deg)  translateY(-6px); }
  100% { transform: rotate(-1.5deg) translateY(0px); }
}
@keyframes elephWalkR{
  0%   { transform: rotate(1.5deg)  translateY(-2px); }
  25%  { transform: rotate(-1.2deg) translateY(-6px); }
  50%  { transform: rotate(1.8deg)  translateY(-1px); }
  75%  { transform: rotate(-1.0deg) translateY(-5px); }
  100% { transform: rotate(1.5deg)  translateY(-2px); }
}

.eleph img,.eleph-svg{
  width:100%;
  height:auto;
  display:block;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.35));
}

.confetti-canvas{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:2;
}

.confetti-rain{
  position:absolute;
  inset:0;
  width:100%;
  height:200%;
  pointer-events:none;
  z-index:20;
}

.petal-canvas{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:10}

/* ═══ SHARED SECTION STYLES ═══ */
.container{max-width:1080px;margin:0 auto;padding:0 24px}
section{position:relative;overflow:hidden;padding:100px 0}
.bg-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;z-index:0}
.s-head{text-align:center;margin-bottom:56px;position:relative;z-index:1}
.sh-eye{display:block;font-weight:300;font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.sh-h{font-family:var(--ff-d);font-weight:400;font-size:clamp(2rem,5.5vw,3.4rem);color:var(--deep);line-height:1.1}
.sh-h em{font-style:italic;color:var(--rose)}
/* Light-text variants for dark sections */
.sh-eye--lt{color:rgba(200,134,10,.75)}
.sh-h--lt{color:var(--ivory)}
.sh-h--lt em{color:var(--gold)}
.scroll-in{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .75s var(--royal),transform .75s var(--spring);
  transition-delay:var(--sd,0s);
}
.scroll-in.vis{opacity:1;transform:translateY(0)}
body:not(.pl-active) .scroll-in:not(.vis){
  animation: scrollInFallback 0.01s 5s forwards;
}
@keyframes scrollInFallback{
  to { opacity:1; transform:none; }
}
.wdiv,.w-out{line-height:0}
.wdiv svg,.w-out svg{width:100%;display:block}

/* ═══ INVITATION — dark textile background, ivory card ═══ */
.s-invite{background:#1A2C5B;padding-top:0;padding-bottom:80px}
/* The bg-fill (Background 6.jpg) shows at low opacity — jewel-texture behind card */
.s-invite .bg-fill{opacity:.18;mix-blend-mode:luminosity}

/* Couple silhouette — screen mode on dark section */
.invite-couple-bg{
  position:absolute;
  right:-2%;
  bottom:0%;
  width:52%;
  max-width:420px;
  mix-blend-mode:screen;
  opacity:.40;
  z-index:1;
  pointer-events:none;
  animation:coupleFloat 6s ease-in-out infinite;
}
@keyframes coupleFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@media(max-width:640px){
  .invite-couple-bg{width:75%;right:-6%;opacity:.30}
}

/* Toran banner — gold SVG arch designed for dark section */
.toran{
  position:absolute;top:0;left:0;right:0;
  height:auto;overflow:visible;
  z-index:2;pointer-events:none;
}
.toran-img{
  width:100%;height:auto;max-height:200px;
  display:block;object-fit:cover;object-position:top center;
  opacity:0.55;mix-blend-mode:screen;
}

/* Floating elements in invite — screen on dark section */
.fl-moon{position:absolute;top:12%;right:3%;width:90px;mix-blend-mode:screen;z-index:2;animation:moonFloat 7s ease-in-out infinite;pointer-events:none}
.fl-leaf-l{position:absolute;bottom:15%;left:1%;width:80px;mix-blend-mode:screen;z-index:2;animation:leafL 6s ease-in-out infinite;pointer-events:none}
.fl-leaf-r{position:absolute;bottom:12%;right:1%;width:70px;mix-blend-mode:screen;z-index:2;animation:leafR 7s ease-in-out infinite 3s;pointer-events:none}
@keyframes moonFloat{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-12px) rotate(5deg)}}

.s-invite .container{position:relative;z-index:3;padding-top:100px}

/* Invite card — deep glass on dark navy section (T02 Change 02) */
.invite-card{
  max-width:540px;margin:0 auto;
  background:rgba(240,224,176,0.78);
  backdrop-filter:blur(14px) saturate(130%) brightness(1.03);
  -webkit-backdrop-filter:blur(14px) saturate(130%) brightness(1.03);
  border-top:1px solid rgba(240,224,176,0.55);
  border-left:1px solid rgba(240,224,176,0.35);
  border-right:1px solid rgba(200,134,10,0.25);
  border-bottom:1px solid rgba(200,134,10,0.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 32px 64px rgba(0,0,0,0.45),
    0 0 0 1px rgba(200,134,10,0.18);
  padding:52px 44px;text-align:center;
  position:relative;z-index:2;
  transition:transform .65s var(--jelly),box-shadow .65s var(--jelly);
}
@media(pointer:fine){
  .invite-card:hover{
    transform:scale(1.016) rotate(0.4deg);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.50),
      inset 0 -1px 0 rgba(0,0,0,0.15),
      0 50px 90px rgba(0,0,0,0.50),
      0 0 0 1px rgba(200,134,10,0.35);
  }
}
@media(max-width:480px){.invite-card{padding:36px 20px}}

/* Paisley corner decorations — gold on ivory card */
.card-tl,.card-tr{position:absolute;top:0}
.card-tl{left:0}
.card-tr{right:0}

/* Ganesha — gold glow on ivory card */
.i-ganesha{margin-bottom:14px;display:flex;justify-content:center}
.i-ganesha-img{
  width:100px;height:100px;
  object-fit:contain;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 4px 20px rgba(200,134,10,.50));
  animation:pulse 4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.i-rule{margin:16px auto;max-width:300px;display:flex;justify-content:center}
.i-bless{font-family:var(--ff-s);font-style:italic;font-size:.9rem;line-height:2;color:#5A3820;margin-bottom:14px}
.i-label{font-size:.56rem;font-weight:300;letter-spacing:.3em;text-transform:uppercase;color:var(--rose);margin-bottom:12px}
.i-names{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:4px 0 16px;flex-wrap:wrap}
.i-bride,.i-groom{font-family:var(--ff-d);font-style:normal;font-weight:600;font-size:clamp(2rem,6vw,3.4rem);color:var(--deep);
  opacity:0;transform:translateY(30px) scale(0.88);
  transition:opacity .9s var(--royal), transform .9s var(--spring);
}
.i-amp{font-family:var(--ff-s);font-style:italic;font-size:1.6rem;color:var(--rose);
  opacity:0;transform:scale(0.6);
  transition:opacity .7s var(--royal) .3s, transform .7s var(--spring) .3s;
}
.invite-card.vis .i-bride{opacity:1;transform:translateY(0) scale(1);transition-delay:.1s}
.invite-card.vis .i-amp  {opacity:1;transform:scale(1);transition-delay:.32s}
.invite-card.vis .i-groom{opacity:1;transform:translateY(0) scale(1);transition-delay:.52s}
.i-fam{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin:16px 0;font-family:var(--ff-b);font-weight:300;font-size:.78rem;line-height:1.9;color:#4A2818}
.i-fam em{font-style:italic;color:var(--deep);display:block;font-size:.88rem}
.fam-dot{color:var(--rose);align-self:center;font-size:.7rem}
.i-close{font-family:var(--ff-s);font-style:italic;font-size:.85rem;color:var(--deep);opacity:.6;margin-top:14px}

/* ═══ EVENTS — dark section with jewel-scatter background ═══ */
.s-events{
  background:#0D1B3E;
  padding:120px 0 160px;
}
/* The bg-fill (Background 3.png) shows as a dark jewel scatter */
.s-events .bg-fill{opacity:.22;mix-blend-mode:screen}
/* Paper veil is now a dark gradient, not a light one */
.ev-paper-veil{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(13,27,62,.88) 0%,rgba(10,18,40,.78) 100%);
  pointer-events:none;
}
.s-events .container,.s-events .s-head{position:relative;z-index:2}
/* Botanicals — screen mode on dark section */
.s-events .fl-leaf-l{top:8%;bottom:auto;opacity:.4;mix-blend-mode:screen}
.s-events .fl-leaf-r{top:14%;bottom:auto;opacity:.3;mix-blend-mode:screen}

/* Section head on dark — override to light text */
.s-events .sh-eye{color:var(--gold)}
.s-events .sh-h{color:var(--ivory)}
.s-events .sh-h em{color:var(--rose)}

/* ── Journey SVG line — gold on dark ── */
.ev-journey-wrap{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.ev-journey-svg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible}
.ej-track{stroke:rgba(200,134,10,.15);stroke-width:1.2;stroke-dasharray:5 9}
.ej-drawn{stroke:rgba(200,134,10,.50);stroke-width:1.4;stroke-linecap:round;transition:stroke-dashoffset .04s linear}

.ev-float-stage{
  position:relative;z-index:2;
  --row-gap: 160px;
  --icon-w:  190px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0;
  row-gap: 0;
  padding: 20px 40px 40px;
}

.ev-row1{ grid-row: 1; align-self: start; }
.ev-row2{ grid-row: 2; align-self: start; margin-top: -60px; }

.ev-row2:nth-child(4){ margin-top: 0px; }
.ev-row2:nth-child(5){ margin-top: -40px; }
.ev-row2:nth-child(6){ margin-top: 20px; }

@media(max-width:680px){
  .ev-float-stage{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:60px;
    padding:20px 0 20px;
  }
  .ev-row2{ margin-top: 0 !important; }
}

.ev-node{
  text-align:center;
  cursor:pointer;
  padding:8px 12px 16px;
  width:100%;
  max-width:var(--icon-w);
  margin:0 auto;
}

.ev-icon-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
  z-index:2;
  transition:transform .7s cubic-bezier(0.25,0.46,0.45,0.94),
             filter .7s cubic-bezier(0.25,0.46,0.45,0.94);
}

.ev-node:nth-child(1) .ev-icon-wrap{animation:evFloat 5.8s ease-in-out infinite}
.ev-node:nth-child(2) .ev-icon-wrap{animation:evFloat 6.4s ease-in-out infinite 1.1s}
.ev-node:nth-child(3) .ev-icon-wrap{animation:evFloat 5.2s ease-in-out infinite 0.5s}
.ev-node:nth-child(4) .ev-icon-wrap{animation:evFloat 7.0s ease-in-out infinite 2.0s}
.ev-node:nth-child(5) .ev-icon-wrap{animation:evFloat 6.0s ease-in-out infinite 0.8s}
.ev-node:nth-child(6) .ev-icon-wrap{animation:evFloat 5.6s ease-in-out infinite 1.6s}
@keyframes evFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-9px)}
}

.ev-node:hover .ev-icon-wrap{
  transform:translateY(-12px) scale(1.05);
  animation-play-state:paused;
}
.ev-node:hover .ev-icon{
  filter:drop-shadow(0 14px 30px rgba(200,134,10,.55))
         drop-shadow(0 4px 10px rgba(0,0,0,.3));
}
.ev-node:hover .ev-glow{ opacity:1; transform:scale(1.35); }

/* Icons on dark background — screen mode so dark areas vanish */
.ev-icon{
  width:90px;height:90px;
  object-fit:contain;
  mix-blend-mode:screen;
  display:block;
  position:relative;z-index:1;
  filter:drop-shadow(0 6px 18px rgba(200,134,10,.35))
         drop-shadow(0 2px 6px rgba(0,0,0,.2));
  transition:filter .7s cubic-bezier(0.25,0.46,0.45,0.94);
}
.ev-node--hero .ev-icon{width:112px;height:112px}

@media(max-width:680px){
  .ev-icon{ width:122px !important; height:122px !important; }
  .ev-node--hero .ev-icon{ width:148px !important; height:148px !important; }
}

/* Glow disc — gold on dark */
.ev-glow{
  position:absolute;inset:-20px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,134,10,.25) 0%,rgba(200,134,10,0) 68%);
  z-index:0;
  opacity:.55;
  transition:opacity .7s ease, transform .7s ease;
}

/* Event labels — ivory on dark */
.ev-label{margin-top:14px;transition:transform .5s cubic-bezier(0.25,0.46,0.45,0.94)}
.ev-name{
  display:block;font-family:var(--ff-d);font-style:normal;font-weight:400;
  font-size:1.08rem;color:var(--ivory);line-height:1.2;
}
.ev-date{
  display:block;margin-top:5px;
  font-size:.54rem;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ivory);
  opacity:.55;
}
.ev-node:hover .ev-label{transform:translateY(3px)}

.ev-detail{
  margin-top:10px;
  opacity:0;
  transform:translateY(6px);
  max-height:0;overflow:hidden;
  transition:opacity .6s cubic-bezier(0.25,0.46,0.45,0.94),
             transform .6s cubic-bezier(0.25,0.46,0.45,0.94),
             max-height .6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.ev-node:hover .ev-detail,
.ev-node.ev-active .ev-detail{
  opacity:1;transform:translateY(0);max-height:140px;
}
.ev-venue{
  font-size:.58rem;font-weight:300;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(200,134,10,.90);margin-bottom:5px;
}
.ev-desc{
  font-family:var(--ff-s);font-style:italic;
  font-size:.76rem;line-height:1.65;
  color:var(--ivory);opacity:.65;margin-bottom:8px;
}
.ev-cta{
  display:inline-block;font-size:.52rem;font-weight:300;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);border-bottom:1px solid rgba(200,134,10,.4);
  padding-bottom:1px;transition:border-color .2s,letter-spacing .2s;
}
.ev-cta:hover{border-color:var(--gold);letter-spacing:.3em}

/* ═══ DIVIDERS — dark background versions ═══ */
.leaf-div{padding:8px 0;background:#0D1B3E;line-height:0}
.leaf-div svg{width:100%;display:block}

.diya-div{padding:4px 0;background:#1A2C5B;line-height:0}
.diya-div svg{width:100%;display:block}

/* ═══ STORY — deep ruby curtains, jewel night ═══ */
.s-story{
  position:relative;
  background:#1A2C5B;
  padding:0;
  overflow:hidden;
}

.st-paper-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 44%, rgba(160,24,48,.18) 0%, transparent 65%),
    linear-gradient(180deg,#1A2C5B 0%,#0D1B3E 100%);
}

.st-stage{
  position:relative;
  width:100%;
  /* Taller stage for 3x characters */
  height:900px;
  overflow:hidden;
}
@media(max-width:900px){ .st-stage{ height:780px; } }
@media(max-width:600px){ .st-stage{ height:640px; } }
@media(max-width:420px){ .st-stage{ height:560px; } }

/* Revealed content — ivory text on dark stage */
.st-reveal{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  pointer-events:none;
  padding:48px 24px 60px;
}

/* Mandala — gold on dark */
.st-mandala{
  position:absolute;
  top:38%; left:50%;
  transform:translate(-50%,-50%);
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.4s ease 0.6s;
}
.st-reveal.revealed .st-mandala{ opacity:1; }

.st-rv-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  width:100%;
}

.st-rv-header{
  margin-bottom:14px;
  opacity:0; transform:translateY(16px);
  transition:opacity .85s ease, transform .85s ease;
}
.st-rv-header .sh-eye{
  display:block;font-weight:300;font-size:.58rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
.st-rv-header .sh-h{
  font-family:var(--ff-d);font-weight:400;
  font-size:clamp(1.7rem,4vw,2.8rem);color:var(--ivory);line-height:1.1;
}
.st-rv-header .sh-h em{font-style:italic;color:var(--rose)}

/* Names — ivory/gold on dark */
.st-rv-names{
  display:flex;align-items:baseline;justify-content:center;gap:12px;
  flex-wrap:wrap;margin-bottom:10px;
  opacity:0;
  transform:translateY(30px) scale(.80);
  transition:opacity 1.1s cubic-bezier(0.16,1,0.3,1) .20s,
             transform 1.1s cubic-bezier(0.16,1,0.3,1) .20s;
}
.st-rv-bride,.st-rv-groom{
  font-family:var(--ff-d);font-style:normal;font-weight:600;
  font-size:clamp(2.4rem,5.6vw,4.2rem);color:var(--ivory);
}
.st-rv-amp{
  font-family:var(--ff-s);font-style:italic;
  font-size:clamp(1.2rem,2.5vw,1.8rem);color:var(--gold);
}

.st-rv-verse{
  font-family:var(--ff-s);font-style:italic;
  font-size:clamp(.84rem,1.8vw,.98rem);
  color:var(--ivory);line-height:1.9;margin-bottom:16px;
  opacity:0;transform:translateY(16px);
  transition:opacity .8s ease .40s, transform .8s ease .40s;
}

/* Tags — ivory border, dark night look */
.st-rv-tags{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 10px;
  width:min(360px, 88%);
  justify-items:stretch;
}
.st-rv-tag{
  font-size:.56rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ivory);
  padding:7px 14px;
  background:rgba(13,27,62,.75);
  border:1px solid rgba(200,134,10,.45);
  text-align:center;
  opacity:0;transform:translateY(10px);
  transition:opacity .55s ease, transform .55s ease;
}
.st-rv-tag:nth-child(1){transition-delay:.55s}
.st-rv-tag:nth-child(2){transition-delay:.68s}
.st-rv-tag:nth-child(3){transition-delay:.81s}
.st-rv-tag:nth-child(4){transition-delay:.94s}

.st-reveal.revealed .st-rv-header{ opacity:1; transform:translateY(0); }
.st-reveal.revealed .st-rv-names { opacity:1; transform:translateY(0) scale(1); }
.st-reveal.revealed .st-rv-verse { opacity:.70; transform:translateY(0); }
.st-reveal.revealed .st-rv-tag   { opacity:1; transform:translateY(0); }

.st-petals{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:9}

/* Curtains — ruby red with gold shadow on dark stage */
.st-curtains{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  z-index:4;
  pointer-events:none;
}
.st-curt{
  position:absolute;
  top:0; bottom:0;
  width:50%;
  overflow:hidden;
  will-change:transform;
  transition:filter 1.2s ease;
  /* Deep navy backing — curtain ivory+multiply renders rich fabric fold on dark stage */
  background:#0D1B3E;
}
.st-curt-l{ left:0;  transform-origin:left center; }
.st-curt-r{ right:0; transform-origin:right center; }

.st-curt-img{
  display:block;
  position:absolute;
  top:0;
  height:100%;
  width:auto;
  max-width:none;
  /* multiply on dark navy: removes white, leaves gold-edged ivory fabric visible */
  mix-blend-mode:multiply;
}
.st-curt-l .st-curt-img{
  right:0; left:auto;
  filter:drop-shadow(8px 0 40px rgba(0,0,0,.70));
}
.st-curt-r .st-curt-img{
  left:0; right:auto;
  transform:scaleX(-1);
  filter:drop-shadow(-8px 0 40px rgba(0,0,0,.70));
}
.st-curt-shadow{
  position:absolute;
  top:0; bottom:0;
  width:60px;
  pointer-events:none;
  z-index:3;
}
.st-curt-shadow-l{
  right:0;
  background:linear-gradient(to right, transparent, rgba(0,0,0,.35));
}
.st-curt-shadow-r{
  left:0;
  background:linear-gradient(to left, transparent, rgba(0,0,0,.35));
}

/* Characters — 3x larger, matched visual height (Fix 2) */
.st-char{
  position:absolute;
  bottom:0;
  z-index:6;
  pointer-events:none;
  width:clamp(300px, 38vw, 560px);
}
.st-bride{
  left:2%;
  transform-origin:right bottom;
}
.st-groom{
  right:2%;
  transform-origin:left bottom;
}

/* Fixed height wrapper ensures bride (landscape) and groom (portrait) look same height */
.st-char-img{
  display:block;
  width:100%;
  /* Fixed visual height — both bride and groom fill same height from bottom */
  height:clamp(460px, 72vh, 760px);
  object-fit:contain;
  object-position:bottom center;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 12px 40px rgba(0,0,0,.55));
}

/* Groom is portrait so naturally fills height well — match exactly */
.st-groom .st-char-img{
  height:clamp(460px, 72vh, 760px);
  object-position: center 70%;
}

.st-bride .st-char-img{ 
  animation:stIdleFloat 5.8s ease-in-out infinite; 
}

.st-groom .st-char-img{ 
  animation:stIdleFloatGroom 6.5s ease-in-out infinite 1.1s; 
}

/* Bride stays same */
@keyframes stIdleFloat{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-8px) }
}

/* Groom = same animation + 30% bigger */
@keyframes stIdleFloatGroom{
  0%,100%{ transform:scale(1.3) translateY(0) }
  50%    { transform:scale(1.3) translateY(-8px) }
}

.st-bride.st-pull .st-char-img{animation:bridePull 0.72s cubic-bezier(0.4,0,0.2,1) forwards;}
@keyframes bridePull{
  0%  { transform:translateY(0)   translateX(0)   rotate(0deg) }
  50% { transform:translateY(-10px) translateX(-14px) rotate(-3.5deg) }
  100%{ transform:translateY(-6px)  translateX(-10px) rotate(-2.5deg) }
}
.st-bride.st-tension .st-char-img{animation:brideTension 0.4s ease-in-out forwards;}
@keyframes brideTension{
  0%  { transform:translateY(-6px) translateX(-10px) rotate(-2.5deg) }
  50% { transform:translateY(-8px) translateX(-12px) rotate(-3deg) }
  100%{ transform:translateY(-5px) translateX(-9px)  rotate(-2deg) }
}
/* Groom (UPDATED with scale) */
.st-groom.st-pull .st-char-img{
  animation:groomPull 0.72s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes groomPull{
  0%  { transform:scale(1.3) translateY(-20px) translateX(0)  rotate(0deg) }
  50% { transform:scale(1.3) translateY(-30px) translateX(14px) rotate(3.5deg) }
  100%{ transform:scale(1.3) translateY(-26px) translateX(10px) rotate(2.5deg) }
}

.st-groom.st-tension .st-char-img{
  animation:groomTension 0.4s ease-in-out forwards;
}
@keyframes groomTension{
  0%  { transform:scale(1.3) translateY(-26px) translateX(10px) rotate(2.5deg) }
  50% { transform:scale(1.3) translateY(-30px) translateX(12px) rotate(3deg) }
  100%{ transform:scale(1.3) translateY(-25px) translateX(9px)  rotate(2deg) }
}

@media(max-width:600px){
  .st-bride{ left:20px; transform-origin:right bottom; }
  .st-groom{ right:20px; transform-origin:left bottom; }
  .st-char{ width:48vw; }
  .st-char-img{ height:clamp(360px,65vh,520px)!important; }
  .st-groom .st-char-img{ height:clamp(280px,55vh,420px)!important; }
  .st-bride, .st-groom{
  position:absolute;
  bottom:0;
}
}

/* ═══ GALLERY — dark navy base ═══ */
.s-gallery{background:#1A2C5B}
.s-gallery .bg-fill{opacity:.12;mix-blend-mode:screen}
.s-gallery .container{position:relative;z-index:1}
/* Gallery head — light text on dark */
.s-gallery .sh-eye{color:var(--gold)}
.s-gallery .sh-h{color:var(--ivory)}
.s-gallery .sh-h em{color:var(--rose)}
.gal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.gal-grid{grid-template-columns:repeat(4,1fr)}}
.gal-item{aspect-ratio:4/5;overflow:hidden;transition:transform .35s var(--spring)}
.gal-item:hover{transform:scale(1.02)}
.gal-tall{aspect-ratio:3/5}
@media(min-width:640px){.gal-tall{grid-row:span 2;aspect-ratio:auto}}
/* Placeholder — dark navy with gold text */
.gal-ph{width:100%;height:100%;background:linear-gradient(135deg,#1A2C5B,#0D1B3E);border:1px solid rgba(200,134,10,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.gal-m{font-family:var(--ff-d);font-style:normal;font-size:1.8rem;color:var(--gold)}
.gal-s{font-size:.56rem;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);opacity:.45}

/* ═══ THINGS TO KNOW — dark sky section ═══ */
.s-things{position:relative;padding:110px 0;overflow:hidden;background:#0A1228}
.things-sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.12;mix-blend-mode:screen}
/* Radial gold ambient glow in dark section */
.things-veil{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%, rgba(200,134,10,.14) 0%, transparent 65%),
    linear-gradient(180deg,#0A1228 0%,#0D1B3E 100%);
}
.s-things .container{position:relative;z-index:2}
/* Things head — light on dark */
.s-things .sh-eye--lt{color:rgba(200,134,10,.75)}
.s-things .sh-h--lt{color:var(--ivory)}
.s-things .sh-h--lt em{color:var(--gold)}
.tt-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px;margin:0 auto}
@media(min-width:640px){.tt-row{grid-template-columns:repeat(4,1fr);gap:22px}}
/* Cards — dark glass look */
.tt{
  background:rgba(13,27,62,.80);
  border:1px solid rgba(200,134,10,.22);
  padding:32px 16px;text-align:center;
  transition:background .3s,border-color .3s,transform .3s var(--spring);
}
.tt:hover{
  background:rgba(13,27,62,.98);
  border-color:rgba(200,134,10,.55);
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.35),0 4px 12px rgba(200,134,10,.12);
}
.tt-ic{margin:0 auto 12px;display:block;color:var(--gold)}
/* Override SVG stroke color inline won't work with CSS alone — see HTML inline SVG */
.tt-l{
  display:block;font-size:.52rem;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
.tt-v{
  font-family:var(--ff-s);font-style:italic;font-size:.9rem;
  line-height:1.6;color:var(--ivory);
}
.tt-ig{
  text-align:center;margin-top:40px;
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(240,224,176,.45);
}
.tt-ig a{color:var(--gold);display:block;margin-top:6px;font-size:.76rem;letter-spacing:.06em;text-transform:none;text-decoration:none;}
.tt-ig a:hover{text-decoration:underline}

/* ═══ RSVP — deep parchment-on-dark ═══ */
.s-rsvp{
  position:relative;
  background:#FAF4E4;
  padding:120px 0 100px;
  overflow:hidden;
}

/* Soft parchment background for RSVP */
.rsvp-paper-veil{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 65% 55% at 50% 35%, rgba(200,134,10,.08) 0%, transparent 60%),
    linear-gradient(180deg,#FAF4E4 0%,#F0E0B0 100%);
}

/* Floral scatter — now ruby on parchment */
.rsvp-florals{position:absolute;inset:0;pointer-events:none;z-index:0}
.rsvp-fl{position:absolute}
.rsvp-fl--tl{top:-30px;left:-30px;width:200px;height:200px}
.rsvp-fl--br{bottom:-30px;right:-30px;width:200px;height:200px;transform:rotate(180deg)}
.rsvp-fl--tr{top:-20px;right:5%;width:140px;height:140px}
.rsvp-fl--bl{bottom:-20px;left:5%;width:140px;height:140px}

/* Floating lamps in RSVP */
.s-diya-l{position:absolute;left:3%;top:18%;width:clamp(48px,6vw,88px);
  filter:drop-shadow(0 0 16px rgba(200,134,10,.7));
  animation:swing 2.4s ease-in-out infinite;z-index:1;mix-blend-mode:multiply}
.s-diya-r{position:absolute;right:3%;top:22%;width:clamp(42px,5.5vw,78px);
  filter:drop-shadow(0 0 16px rgba(200,134,10,.7));
  animation:swingR 2.4s ease-in-out infinite 1.1s;z-index:1;mix-blend-mode:multiply}

/* Toran at top of RSVP */
.rsvp-toran{position:absolute;top:0;left:0;right:0;height:120px;overflow:hidden;z-index:2;pointer-events:none}

/* RSVP text on parchment */
.rsvp-rule{display:flex;justify-content:center;margin-bottom:14px}
.rsvp-eye{
  display:block;font-weight:300;font-size:.58rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--rose);margin-bottom:10px;
  position:relative;z-index:1;
}
.rsvp-heading{
  font-family:var(--ff-d);font-weight:400;
  font-size:clamp(2.4rem,5.5vw,4rem);
  color:var(--deep);line-height:1.1;
  margin-bottom:18px;
  position:relative;z-index:1;
}
.rsvp-heading em{font-style:italic;color:var(--rose)}
.rsvp-sub{
  font-family:var(--ff-s);font-style:italic;
  font-size:.96rem;line-height:1.85;
  color:var(--deep);opacity:.72;
  max-width:500px;
  margin:0 auto;
  margin-bottom:44px;
  position:relative;z-index:1;
}
.rsvp-cta-wrap{margin-bottom:24px;position:relative;z-index:1}

/* RSVP button — deep navy with jelly press (T02 Change 17) */
.rsvp-wa-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  overflow:hidden;
  border-radius:2px;
  background:#0D1B3E;
  box-shadow:
    inset 0 1px 0 rgba(200,134,10,.35),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 4px 14px rgba(200,134,10,.28),
    0 8px 32px rgba(0,0,0,.40),
    0 0 0 1px rgba(200,134,10,.30);
  padding:0;
  cursor:pointer;
  transition:transform .18s var(--jelly),box-shadow .18s var(--jelly);
}

.rsvp-wa-shimmer{
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(200,134,10,.12) 50%,transparent 70%);
  transform:translateX(-100%);
  transition:transform .7s ease;
  pointer-events:none;
  z-index:0;
}
.rsvp-wa-btn:hover .rsvp-wa-shimmer{transform:translateX(100%)}

.rsvp-wa-btn:hover{
  transform:translateY(-3px) scale(1.012);
  box-shadow:
    inset 0 1px 0 rgba(200,134,10,.45),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 8px 28px rgba(200,134,10,.45),
    0 18px 48px rgba(0,0,0,.50),
    0 0 0 1px rgba(200,134,10,.50);
}

.rsvp-wa-btn:active{
  transform:translateY(1px) scale(0.972);
  transition-duration:.08s;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(0,0,0,.15),
    0 1px 4px rgba(200,134,10,.20),
    0 2px 8px rgba(0,0,0,.30);
}

@media(max-width:520px){
  .rsvp-wa-btn:hover{transform:none}
}

.rsvp-wa-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:10px;
  padding:18px 48px;
  font-family:var(--ff-b);
  font-size:.72rem;
  font-weight:300;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ivory);
  white-space:nowrap;
}

.rsvp-wa-icon{
  flex-shrink:0;
  opacity:.85;
  transition:opacity .3s, transform .4s cubic-bezier(0.16,1,0.3,1);
}
.rsvp-wa-btn:hover .rsvp-wa-icon{
  opacity:1;
  transform:scale(1.12);
}

@media(max-width:520px){
  .rsvp-wa-inner{ padding:16px 28px; letter-spacing:.18em; font-size:.66rem; }
  .rsvp-wa-btn{ width:min(340px, 90vw); }
}

.rsvp-ps{
  font-size:.58rem;
  font-weight:300;
  letter-spacing:.12em;
  color:var(--deep);
  opacity:.35;
  margin-bottom:18px;
  position:relative;z-index:1;
}

.burst-p{position:fixed;pointer-events:none;z-index:9000;mix-blend-mode:multiply}

/* ═══ FOOTER — deepest navy ═══ */
.footer{
  background:linear-gradient(170deg,#0A1228 0%,#060C18 100%);
  padding:70px 24px 48px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.footer::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(200,134,10,.10) 0%, transparent 65%);
  pointer-events:none;
}
.ft-lotus{margin:0 auto 18px;display:block;position:relative;z-index:1}
.ft-names{
  font-family:var(--ff-d);font-style:normal;font-weight:400;
  font-size:clamp(1.8rem,4vw,2.6rem);
  color:var(--ivory);margin-bottom:14px;
  position:relative;z-index:1;
}
.ft-rule{
  width:56px;height:1px;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
  margin:0 auto 18px;
  position:relative;z-index:1;
}
.ft-date{
  font-size:.62rem;font-weight:300;letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(200,134,10,.45);
  margin-bottom:28px;
  position:relative;z-index:1;
}
.ft-credit{font-size:.6rem;opacity:.22;letter-spacing:.08em;position:relative;z-index:1;color:var(--ivory)}
.ft-credit a{color:var(--gold);opacity:1}

/* ═══ RESPONSIVE ═══ */
section{ padding:80px 0; }
.hero-wrap,.hero-pin{ padding:0!important; }
.container{ max-width:1080px; margin:0 auto; padding:0 20px; }

@media(min-width:640px){
  section{ padding:100px 0; }
  .container{ padding:0 32px; }
  .ev-float-stage{ padding:20px 24px 40px; }
  .tt-row{ grid-template-columns:repeat(4,1fr); gap:20px; }
}

@media(min-width:1024px){
  section{ padding:120px 0; }
  .container{ padding:0 48px; }

  .invite-card{ max-width:660px; padding:68px 76px; }
  .s-invite .container{ padding-top:120px; }

  .ev-float-stage{ padding:40px 60px 60px; }
  .ev-icon{ width:110px!important; height:110px!important; }
  .ev-node--hero .ev-icon{ width:136px!important; height:136px!important; }
  .ev-name{ font-size:1.18rem; }

  .st-stage{ height:1000px; }
  .st-char{ width:clamp(360px,40vw,620px); }
  .st-char-img{ height:clamp(560px,80vh,860px)!important; }
  .st-groom .st-char-img{ height:clamp(560px,80vh,860px)!important; }

  .tt-row{ max-width:820px; gap:24px; }
  .tt{ padding:36px 20px; }
  .tt-v{ font-size:1rem; }

  .s-rsvp{ padding:140px 0 120px; }
  .rsvp-heading{ font-size:clamp(3rem,5vw,4.5rem); }
  .rsvp-sub{ font-size:1.08rem; max-width:560px; }

  .sh-h{ font-size:clamp(2.4rem,4vw,3.8rem); }
  .s-head{ margin-bottom:64px; }
}

@media(min-width:1400px){
  .container{ max-width:1240px; }
  .ev-float-stage{ padding:40px 80px 80px; }
  .st-stage{ height:1060px; }
  .st-char{ width:clamp(400px,36vw,660px); }
  .st-char-img{ height:clamp(620px,84vh,920px)!important; }
  .st-groom .st-char-img{ height:clamp(620px,84vh,920px)!important; }
}

@media(max-width:480px){
  section{ padding:64px 0; }
  .container{ padding:0 16px; }
  .s-head{ margin-bottom:40px; }
  .sh-h{ font-size:clamp(1.8rem,7vw,2.6rem); }

  .invite-card{ padding:28px 16px; }
  .i-names{ gap:6px; }

  .tt-row{ grid-template-columns:1fr 1fr; gap:10px; }
  .tt{ padding:20px 12px; }

  .ev-float-stage{ gap:48px; padding:12px 0 24px; }
  .ev-node{ padding:6px 8px 12px; }
  .ev-name{ font-size:.98rem; }
  .ev-date{ font-size:.50rem; }
  .ev-desc{ font-size:.72rem; }

  .st-stage{ height:440px; }
  .st-char{ width:clamp(100px,24vw,150px); }
  .st-char-img{ height:clamp(180px,38vh,260px)!important; }
  .st-groom .st-char-img{ height:clamp(216px,46vh,312px)!important; }

  .rsvp-heading{ font-size:clamp(2rem,7vw,2.8rem); }
  .rsvp-sub{ font-size:.88rem; }
  .rsvp-wa-inner{ padding:15px 22px; font-size:.62rem; letter-spacing:.16em; }

  .ft-names{ font-size:1.6rem; }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01s!important;transition-duration:.01s!important}
}

/* ══ MUSIC TOGGLE BUTTON — midnight navy glass pill (T02 Change 18) ══ */
.music-btn{
  position:fixed;bottom:24px;right:24px;z-index:9999;
  display:flex;align-items:center;gap:8px;
  padding:11px 20px;
  background:rgba(10,18,40,0.90);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-radius:50px;
  border:none;
  box-shadow:
    inset 0 1.5px 0 rgba(200,134,10,.50),
    inset 0 -1px 0 rgba(0,0,0,.50),
    0 0 0 1px rgba(200,134,10,.55),
    0 4px 20px rgba(0,0,0,.50),
    0 1px 4px rgba(0,0,0,.35);
  color:var(--ivory);
  font-family:var(--ff-b);font-size:.56rem;font-weight:300;
  letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;
  transition:box-shadow .3s var(--royal),transform .3s var(--royal);
  overflow:hidden;
}
/* Top-half gold sheen */
.music-btn::after{
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(200,134,10,.15) 0%,rgba(200,134,10,0) 100%);
  border-radius:50px 50px 0 0;pointer-events:none;
}
/* Shimmer sweep */
.music-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 20%,rgba(200,134,10,.22) 50%,transparent 80%);
  transform:translateX(-150%);transition:transform 0s;
  border-radius:50px;pointer-events:none;
}
.music-btn:hover::before,.music-btn:active::before{
  transform:translateX(150%);transition:transform .55s ease;
}
.music-btn:hover{
  box-shadow:
    inset 0 1.5px 0 rgba(200,134,10,.65),
    inset 0 -1px 0 rgba(0,0,0,.50),
    0 0 0 1.5px rgba(200,134,10,.85),
    0 0 22px rgba(200,134,10,.35),
    0 6px 24px rgba(0,0,0,.55);
  transform:translateY(-2px);
}
.music-btn.playing{
  background:rgba(6,12,24,0.94);
  box-shadow:
    inset 0 1.5px 0 rgba(200,134,10,.55),
    inset 0 -1px 0 rgba(0,0,0,.50),
    0 0 0 1.5px rgba(200,134,10,.90),
    0 0 28px rgba(200,134,10,.45),
    0 4px 20px rgba(0,0,0,.50);
}
.music-btn.playing .music-label{color:var(--gold)}
.music-btn.playing #musicIconOn{display:none!important}
.music-icon{flex-shrink:0;color:var(--gold);filter:drop-shadow(0 0 5px rgba(200,134,10,.75));position:relative;z-index:1}
.music-label{color:rgba(240,224,176,.88);font-size:.54rem;position:relative;z-index:1}

/* Waveform bars — gold gradient for T02 */
.music-wave{display:none;align-items:center;gap:2.5px;height:14px;position:relative;z-index:1}
.music-btn.playing .music-wave{display:flex}
.music-wave span{
  display:block;width:2.5px;
  background:linear-gradient(to top,#C8860A,rgba(240,224,176,.95));
  border-radius:2px;
  animation:wavebar .85s ease-in-out infinite;
  transform-origin:bottom;
  box-shadow:0 0 4px rgba(200,134,10,.65);
}
.music-wave span:nth-child(1){height:5px; animation-delay:0s}
.music-wave span:nth-child(2){height:11px;animation-delay:.18s}
.music-wave span:nth-child(3){height:7px; animation-delay:.06s}
.music-wave span:nth-child(4){height:13px;animation-delay:.28s}
.music-wave span:nth-child(5){height:5px; animation-delay:.12s}
@keyframes wavebar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.22)}}

@media(max-width:520px){
  .music-btn{bottom:16px;right:16px;padding:10px 16px;font-size:.50rem}
}

/* ══ INVITE CARD — FAMILY + GRANDPARENTS ALIGNMENT ══ */
.i-fam{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(12px,4vw,32px);
  margin:16px 0 12px;
  text-align:center;
}
.fam-side{
  flex:1;max-width:200px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.fam-gp{
  font-family:var(--ff-s);font-style:italic;font-weight:300;
  font-size:.7rem;color:rgba(13,27,62,.75);
  line-height:1.6;
  padding-bottom:6px;
  border-bottom:1px solid rgba(200,134,10,.20);
  width:100%;
}
.fam-gp em{font-style:italic;font-size:.65rem;display:block;color:var(--rose);margin-bottom:2px}
.fam-parents{
  font-family:var(--ff-b);font-weight:300;font-size:.76rem;
  color:var(--deep);line-height:1.7;
}
.fam-parents em{font-family:var(--ff-s);font-style:italic;font-size:.8rem;display:block;color:rgba(13,27,62,.55)}
.fam-dot{
  flex-shrink:0;font-size:.9rem;color:var(--gold);
  margin-top:32px;
  opacity:.6;
}
@media(max-width:480px){
  .i-fam{flex-direction:column;align-items:center;gap:14px}
  .fam-dot{margin:0;transform:rotate(90deg)}
  .fam-side{max-width:100%}
/* Music button: bottom-right with iOS safe-area support, all screen sizes */
.music-btn{bottom:calc(24px + env(safe-area-inset-bottom));top:auto;left:auto;right:24px;z-index:9999}
/* ═══ EVENTS FIX 1: hide timeline line on desktop ═══ */
@media(min-width:681px){
  .ev-journey-wrap{display:none!important}
}
/* ═══ EVENTS FIX 2: desktop grid — flat rows, z-index, detail height ═══ */
@media(min-width:681px){
  .ev-float-stage{row-gap:40px}
  .ev-row2,.ev-row2:nth-child(4),.ev-row2:nth-child(5),.ev-row2:nth-child(6){margin-top:0!important}
  .ev-node{position:relative;z-index:2}
  .ev-node:hover .ev-detail,.ev-node.ev-active .ev-detail{max-height:200px}
}
/* ═══ EVENTS FIX 3: font size +20% ═══ */
.ev-name{font-size:1.28rem}
.ev-date{font-size:0.62rem}
.ev-venue{font-size:0.66rem}
.ev-desc{font-size:0.89rem}
@media(min-width:1024px){.ev-name{font-size:1.42rem}}
@media(max-width:480px){.ev-name{font-size:1.18rem}.ev-date{font-size:0.60rem}.ev-desc{font-size:0.86rem}}