/* ============================================================================
   ROHAN & NANDINI — WEDDING WEBSITE  ·  STYLES
   ----------------------------------------------------------------------------
   You do NOT need to edit this file to change text, photos, videos or music.
   All of that lives in  assets/js/config.js
   Colours can also be changed from config.js (section 12 · LOOK & FEEL).
   Edit here only if you want to change the layout or spacing.
   ========================================================================= */

:root{
  --gold      : #c9a227;
  --light-gold: #e8cf8b;
  --deep-rose : #8e1b47;
  --rose      : #c2185b;
  --cream     : #fdf6ec;
  --ink       : #3b1f2b;
  --reveal    : 1.1s;

  /* Cinzel  = engraved Roman capitals: reads as royal/luxury, and stays legible
                at small sizes because the letterforms are wide and open.
     Lora    = warm, high-legibility serif for anything that must be READ.
     Nothing cursive anywhere — deliberate. */
  --font-body   : "Lora", Georgia, "Times New Roman", serif;
  --font-display: "Cinzel", Georgia, serif;
  --font-script : "Cinzel", Georgia, serif;   /* kept as an alias so older rules still work */

  /* Panels are a cool smoked ink rather than the old warm brown — against the
     pink-and-gold palace it reads as tinted glass, and it never muddies into
     brown the way the maroon panels did. */
  --panel-top: rgba(24,21,38,.66);
  --panel-bot: rgba(13,12,24,.82);
  --panel-line: rgba(232,207,139,.38);

  --pad: clamp(20px, 6vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:#1a0f14;
  color:var(--cream);
  font-family:var(--font-body);
  font-size:clamp(16px,4.1vw,19px);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.is-locked{ overflow:hidden; }

img,video{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }
figure,dl,dd{ margin:0; }          /* browsers give figures a 40px side margin */

/* the hidden attribute must always win over the display rules below */
[hidden]{ display:none !important; }

/* ---------------------------------------------------------------- shared */

.wrap{
  position:relative; z-index:3;
  width:100%; max-width:1180px;
  margin-inline:auto;
  padding:clamp(72px,16vw,132px) var(--pad);
}
.wrap--center{ text-align:center; }

.sec{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
}

/* full-bleed background image / video for every section */
.bgmedia{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
}
/* Background stills are held to one screen tall and pinned while the section
   scrolls past. On a tall section this keeps the picture at its natural size
   instead of blowing it up to the full section height, so it stays sharp —
   and it gives a soft parallax reveal for free. */
.bgimg{
  overflow:hidden;
  background-size:0 0;          /* the pane below does the painting */
}
.bgimg::before{
  content:"";
  display:block;
  position:sticky;
  top:0;
  width:100%;
  height:100svh;
  background-image:inherit;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}

.scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 42%, rgba(26,15,20,.48) 0%, rgba(26,15,20,.74) 62%, rgba(20,10,15,.92) 100%),
    /* top and bottom end at the same darkness so neighbouring sections
       meet without a visible seam */
    linear-gradient(180deg, rgba(20,10,15,.90) 0%, rgba(26,15,20,.48) 24%, rgba(26,15,20,.54) 70%, rgba(20,10,15,.90) 100%);
}
/* Kept deliberately light so the sunset video stays bright and colourful.
   The wording is protected by its own focal shadow and text-shadows instead
   of by darkening the whole picture. */
.scrim--hero{
  background:
    radial-gradient(110% 76% at 50% 46%, rgba(26,15,20,0) 0%, rgba(26,15,20,.20) 58%, rgba(20,10,15,.62) 100%),
    linear-gradient(180deg, rgba(26,15,20,.34) 0%, rgba(26,15,20,0) 30%, rgba(26,15,20,.10) 66%, rgba(20,10,15,.82) 100%);
}
.scrim--deep{
  background:linear-gradient(180deg, rgba(20,10,15,.90) 0%, rgba(20,10,15,.80) 42%, rgba(14,7,11,.96) 100%);
}

/* The families section was sitting noticeably darker than the rest, so the
   middle is lifted to let the palace show through. The top and bottom edges
   stay as dark as their neighbours so the sections still join seamlessly. */
#family .scrim{
  background:
    radial-gradient(120% 85% at 50% 42%, rgba(26,15,20,.14) 0%, rgba(26,15,20,.42) 62%, rgba(20,10,15,.80) 100%),
    linear-gradient(180deg, rgba(20,10,15,.88) 0%, rgba(26,15,20,.16) 26%, rgba(26,15,20,.22) 70%, rgba(20,10,15,.88) 100%);
}

/* colour wash that follows the scroll (see the celebrations section) */
.tint{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:0;
  /* fades up as the invitation arrives, and crossfades between colours */
  transition:opacity .6s ease, background .6s ease;
  /* screen lifts a dark backdrop towards the colour, so the palace glows
     turmeric / magenta / red / indigo instead of just going muddy */
  mix-blend-mode:screen;
}
.tint.is-on{ opacity:1; }

/* soft gold sheen over every section — plain alpha, no blend mode, because a
   blended layer per section forces an expensive recomposite on every scroll */
.sec::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(80% 55% at 50% 50%, rgba(232,207,139,.05), transparent 70%);
}

/* A heading block that carries its own contrast. The celebrations background
   washes to bright turmeric, which would otherwise swallow white wording, so
   the heading sits in a soft dark pool of its own. */
.sec-head{
  position:relative;
  z-index:1;
}
/* A slowly turning mandala sits behind each heading — the rangoli drawn on
   the floor at a wedding, and the circular motion the page was missing. */
.mandala{
  position:absolute;
  left:50%; top:50%;
  width:min(126%, 560px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:-1;
  opacity:.16;
  pointer-events:none;
  animation:turn 150s linear infinite;
}
.mandala svg{ width:100%; height:100%; display:block; }
@keyframes turn{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* ------------------------------------------------------------ typography */

.eyebrow{
  margin:0 0 clamp(14px,3vw,20px);
  font-family:var(--font-display);
  font-size:clamp(10px,2.7vw,13px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:#f3e2b4;
  text-shadow:0 1px 3px rgba(8,6,14,.95), 0 2px 10px rgba(8,6,14,.9), 0 0 22px rgba(8,6,14,.7);
}

.h2{
  margin:0 0 clamp(6px,2vw,10px);
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(27px,6.8vw,48px);
  line-height:1.22;
  letter-spacing:.07em;      /* the airy tracking is what makes Cinzel read as engraved */
  color:#fff;
  text-shadow:0 1px 3px rgba(8,6,14,.9), 0 2px 16px rgba(8,6,14,.8), 0 4px 40px rgba(0,0,0,.6);
}

/* long sentences stay in the body serif — Cinzel is for short lines only */
.h-script{
  margin:0 0 clamp(6px,2vw,10px);
  font-family:var(--font-body);
  font-weight:500;
  font-size:clamp(24px,6.2vw,40px);
  line-height:1.42;
  letter-spacing:.005em;
  color:#fff;
  text-shadow:0 3px 30px rgba(0,0,0,.55);
}

.lead{
  margin:clamp(14px,3.4vw,20px) auto 0;
  max-width:34ch;
  font-size:clamp(17px,4.4vw,21px);
  font-weight:400;
  line-height:1.76;
  letter-spacing:.012em;
  color:#fff;
  text-shadow:0 1px 3px rgba(8,6,14,.9), 0 2px 14px rgba(8,6,14,.75);
}
.lead--foot{ max-width:36ch; }

.names{
  margin:clamp(20px,5vw,32px) 0 0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(26px,7.2vw,52px);
  line-height:1.24;
  letter-spacing:.05em;
  color:var(--light-gold);
  text-shadow:0 3px 34px rgba(0,0,0,.55);
}
.names--footer{ margin-top:clamp(14px,3vw,20px); }

.tag{
  margin:clamp(10px,2.4vw,14px) 0 0;
  font-family:var(--font-display);
  font-size:clamp(11px,3vw,14px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(232,207,139,.78);
}

/* divider  —✦—  */
.rule{
  display:flex; align-items:center; justify-content:center;
  gap:14px;
  margin:clamp(18px,4vw,26px) auto;
  max-width:280px;
}
.rule i{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,207,139,.75), transparent);
}
.rule span{ color:var(--gold); font-size:15px; line-height:1; }

/* corner ornaments */
.orn{
  height:26px; margin-inline:auto; max-width:340px;
  background:
    radial-gradient(circle at 50% 50%, rgba(232,207,139,.85) 0 1.5px, transparent 2px) center/22px 22px repeat-x;
  opacity:.5;
}
.orn--top{ margin-bottom:clamp(20px,5vw,34px); }
.orn--bottom{ margin-top:clamp(24px,6vw,40px); }

/* --------------------------------------------------------------- buttons */

.btn{
  position:relative;
  display:inline-block;
  margin-top:clamp(26px,6vw,38px);
  padding:clamp(14px,3.6vw,17px) clamp(30px,8vw,46px);
  border:1px solid rgba(232,207,139,.55);
  border-radius:999px;
  /* champagne glass over ink — gold-forward, no brown anywhere */
  background:
    linear-gradient(180deg, rgba(232,207,139,.22), rgba(232,207,139,.07)),
    rgba(18,16,30,.58);
  color:var(--cream);
  font-family:var(--font-display);
  font-size:clamp(12px,3.2vw,14.5px);
  letter-spacing:.24em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.35), inset 0 0 22px rgba(232,207,139,.10);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), border-color .35s, box-shadow .35s;
}
.btn::after{           /* travelling gold shimmer */
  content:""; position:absolute; top:0; left:-140%;
  width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,240,200,.42), transparent);
  animation:shimmer 4.6s ease-in-out infinite;
}
@keyframes shimmer{
  0%,62%  { left:-140%; }
  100%    { left:160%; }
}
.btn:hover,.btn:focus-visible{
  border-color:var(--light-gold);
  transform:translateY(-2px);
  box-shadow:0 16px 48px rgba(0,0,0,.45), inset 0 0 30px rgba(232,207,139,.20);
}
.btn:active{ transform:translateY(0) scale(.985); }

.btn--ghost{ background:rgba(255,255,255,.05); }

/* ================================================ SCROLL SYMBOL ======= */
/* Not a button — a thin gold thread with a drop running down it and two
   chevrons falling away below. */

.scroller{
  position:absolute; z-index:4;
  left:50%;
  bottom:max(26px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:11px;
  padding:10px 18px 6px;
  border:0; background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.scroller.reveal{ transform:translateX(-50%) translateY(26px); }
.scroller.reveal.is-in{ transform:translateX(-50%); }

.scroller__label{
  font-family:var(--font-display);
  font-size:clamp(9px,2.4vw,10.5px);
  letter-spacing:.44em;
  text-indent:.44em;               /* balances the trailing letter-space */
  text-transform:uppercase;
  color:rgba(240,222,178,.95);
  text-shadow:0 1px 3px rgba(12,6,9,.95), 0 2px 14px rgba(12,6,9,.9);
}

.scroller__line{
  position:relative;
  width:1px; height:46px;
  background:linear-gradient(180deg, rgba(232,207,139,.5), rgba(232,207,139,.05));
  overflow:hidden;
}
.scroller__line i{
  position:absolute; left:50%; top:0;
  width:3px; height:3px; margin-left:-1.5px;
  border-radius:50%;
  background:var(--light-gold);
  box-shadow:0 0 8px 2px rgba(232,207,139,.7);
  animation:drop 2.3s cubic-bezier(.55,0,.35,1) infinite;
}
@keyframes drop{
  0%   { transform:translateY(-6px); opacity:0; }
  18%  { opacity:1; }
  72%  { transform:translateY(44px); opacity:1; }
  100% { transform:translateY(50px); opacity:0; }
}

.scroller__chevs{ display:block; height:15px; position:relative; width:16px; }
.scroller__chevs b{
  position:absolute; left:50%;
  width:8px; height:8px; margin-left:-4px;
  border-right:1.4px solid rgba(232,207,139,.9);
  border-bottom:1.4px solid rgba(232,207,139,.9);
  animation:chevFall 2.3s cubic-bezier(.55,0,.35,1) infinite;
}
.scroller__chevs b:nth-child(2){ animation-delay:.22s; opacity:.55; }
@keyframes chevFall{
  0%   { transform:rotate(45deg) translateY(-4px); opacity:0; }
  35%  { opacity:1; }
  75%  { transform:rotate(45deg) translateY(4px);  opacity:0; }
  100% { transform:rotate(45deg) translateY(4px);  opacity:0; }
}

.scroller:hover .scroller__label{ color:var(--light-gold); }

.btn--gate{
  margin-top:clamp(30px,7vw,42px);
  padding:clamp(16px,4vw,19px) clamp(36px,10vw,58px);
  animation:breathe 3.6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ box-shadow:0 10px 40px rgba(0,0,0,.35), 0 0 0 0 rgba(232,207,139,.30); }
  50%    { box-shadow:0 10px 44px rgba(0,0,0,.4),  0 0 0 14px rgba(232,207,139,0); }
}

/* ================================================= 1 · OPENING SCREEN === */

.gate{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  opacity:1;
  transition:opacity .9s ease;
}
.gate.is-out{ opacity:0; pointer-events:none; }

.gate__bg{
  position:absolute; inset:-4%;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  transform:scale(1.06);
  animation:slowzoom 26s ease-in-out infinite alternate;
}
@keyframes slowzoom{ from{ transform:scale(1.06);} to{ transform:scale(1.16);} }

.gate__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(100% 70% at 50% 44%, rgba(26,15,20,.02) 0%, rgba(26,15,20,.30) 55%, rgba(16,8,12,.74) 100%),
    linear-gradient(180deg, rgba(26,15,20,.42) 0%, rgba(26,15,20,.14) 30%, rgba(26,15,20,.30) 66%, rgba(16,8,12,.76) 100%);
}

.gate__inner{
  position:relative; z-index:2;
  width:100%; max-width:640px;
  padding:clamp(30px,8vw,54px) var(--pad);
  text-align:center;
}
/* soft focal shadow so the wording stays readable over the bright archway */
.gate__inner::before{
  content:""; position:absolute; inset:-8% -6%; z-index:-1;
  background:radial-gradient(58% 48% at 50% 52%,
             rgba(14,7,11,.68) 0%, rgba(14,7,11,.44) 52%, rgba(14,7,11,0) 80%);
  filter:blur(10px);
  pointer-events:none;
}

.gate__eyebrow{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-size:clamp(11px,3vw,14px);
  letter-spacing:.46em; text-transform:uppercase;
  color:var(--light-gold);
}
.gate__sub{
  margin:0;
  font-size:clamp(15px,3.9vw,18px);
  font-weight:400; font-style:italic;
  color:rgba(253,246,236,.82);
}
.gate__names{
  margin:clamp(12px,3vw,20px) 0 0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(29px,7.9vw,58px);
  line-height:1.24;
  letter-spacing:.04em;
  color:var(--light-gold);
  text-shadow:0 2px 6px rgba(12,6,9,.75), 0 4px 44px rgba(0,0,0,.8);
}
.gate__eyebrow,.gate__sub,.gate__date,.gate__hint,.gate__tag{
  text-shadow:0 1px 4px rgba(12,6,9,.8), 0 2px 22px rgba(0,0,0,.7);
}
.gate__names .amp{
  display:inline-block;
  margin-inline:.14em;
  font-family:var(--font-body);
  font-weight:400;
  font-size:.78em;
  color:var(--gold);
}
.gate__date{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(13.5px,3.5vw,16px);
  letter-spacing:.02em;
  line-height:1.6;
  color:rgba(253,246,236,.9);
}
.gate__hint{
  margin:clamp(16px,4vw,22px) 0 0;
  font-size:clamp(12px,3.2vw,14px);
  font-style:italic;
  color:rgba(253,246,236,.6);
}
.gate__tag{
  margin:clamp(6px,1.6vw,10px) 0 0;
  font-family:var(--font-display);
  font-size:clamp(10.5px,2.8vw,12.5px);
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(232,207,139,.6);
}

/* ================================================ 2 · INTRO ANIMATION == */

.intro{
  position:fixed; inset:0; z-index:95;
  background:#0d0609;
  opacity:0;
  transition:opacity .7s ease;
}
.intro.is-in{ opacity:1; }
.intro.is-out{ opacity:0; pointer-events:none; }

.intro__video{
  width:100%; height:100%;
  object-fit:cover;          /* fills the screen, feels part of the site */
  background:#0d0609;
}

.intro__skip{
  position:absolute;
  right:max(16px, env(safe-area-inset-right));
  bottom:max(20px, env(safe-area-inset-bottom));
  z-index:2;
  padding:9px 20px;
  border:1px solid rgba(255,255,255,.30);
  border-radius:999px;
  background:rgba(0,0,0,.32);
  color:rgba(255,255,255,.85);
  font-family:var(--font-display);
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  cursor:pointer;
  opacity:0; animation:fadein .6s ease 1.4s forwards;
}
@keyframes fadein{ to{ opacity:1; } }

/* the gold flash that carries the video into the hero */
.intro__flash{
  position:absolute; inset:0; z-index:3;
  background:radial-gradient(circle at 50% 56%, #fff8e6 0%, #f6d9a8 42%, rgba(246,217,168,0) 78%);
  opacity:0; pointer-events:none;
}
.intro__flash.is-flash{ animation:flash 1.15s ease-out forwards; }
@keyframes flash{
  0%  { opacity:0; transform:scale(.7); }
  38% { opacity:1; transform:scale(1.15); }
  100%{ opacity:0; transform:scale(1.5); }
}

/* ======================================================== 3 · HERO ===== */

.sec--hero .wrap{ padding-block:clamp(96px,20vw,150px); }

/* focal shadow so the wording holds up over the bright sunset archway */
.sec--hero .wrap::before{
  content:""; position:absolute; inset:6% -4%; z-index:-1;
  background:radial-gradient(56% 44% at 50% 46%,
             rgba(14,7,11,.78) 0%, rgba(14,7,11,.5) 54%, rgba(14,7,11,0) 82%);
  filter:blur(14px);
  pointer-events:none;
}
.sec--hero .eyebrow,
.sec--hero .h-script,
.sec--hero .lead,
.sec--hero .names,
.sec--hero .tag{
  text-shadow:0 1px 3px rgba(12,6,9,.95), 0 2px 12px rgba(12,6,9,.85), 0 4px 34px rgba(0,0,0,.8);
}
.sec--hero .tag{ color:rgba(240,222,178,.94); }

/* room at the foot of the hero for the scroll symbol */
.sec--hero .wrap{ padding-bottom:clamp(150px,28vw,210px); }

/* ================================================ 4 · SCRATCH CARD ===== */

.card-scratch{
  position:relative;
  width:min(400px, 88vw);
  aspect-ratio:16/10;
  margin:clamp(30px,7vw,44px) auto 0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(232,207,139,.45);
  box-shadow:0 26px 70px rgba(0,0,0,.5), inset 0 0 40px rgba(232,207,139,.10);
  background:linear-gradient(155deg, #17142a 0%, #2a2450 52%, #17142a 100%);
  touch-action:none;                /* lets a finger scratch without scrolling */
}

.card-scratch__under{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2px; padding:16px;
  text-align:center;
}
.cs-small{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(10px,2.8vw,12.5px);
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--light-gold);
}
.cs-big{
  margin:8px 0 0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(21px,5.6vw,32px);
  line-height:1.28;
  letter-spacing:.04em;
  color:#fff;
}
.cs-sub{
  margin:6px 0 0;
  font-size:clamp(12.5px,3.3vw,15px);
  font-weight:400; font-style:italic;
  color:rgba(253,246,236,.85);
}

.card-scratch__cover{
  position:absolute; inset:0;
  width:100%; height:100%;
  cursor:grab;
  transition:opacity .85s ease;
}
.card-scratch.is-done .card-scratch__cover{ opacity:0; pointer-events:none; }
.card-scratch.is-done .card-scratch__under{ animation:pop .85s cubic-bezier(.2,.9,.3,1); }
@keyframes pop{
  0%  { transform:scale(.9); opacity:.4; }
  60% { transform:scale(1.03); opacity:1; }
  100%{ transform:scale(1); }
}

.card-scratch__hint{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  transition:opacity .4s ease;
}
.card-scratch__hint span{
  width:66px; height:66px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  animation:ripple 2.1s ease-out infinite;
}
@keyframes ripple{
  0%  { transform:scale(.55); opacity:.9; }
  100%{ transform:scale(1.7); opacity:0; }
}
.card-scratch.is-touched .card-scratch__hint{ opacity:0; }

/* ============================================= 5 · MEET THE COUPLE ===== */

/* The photographs lean left, then right down the page, so the eye zigzags
   instead of marching straight through the middle. Each sits inside a cusped
   arch — the shape of the palace doorway in the artwork behind it. */
.grid-couple{
  display:flex;
  flex-direction:column;
  gap:clamp(38px,9vw,60px);
  margin-top:clamp(36px,8vw,60px);
}

.pcard{
  position:relative;
  width:min(84%, 440px);
  transition:transform .7s cubic-bezier(.2,.8,.3,1);
}
.pcard[data-side="left"]{  align-self:flex-start; }
.pcard[data-side="right"]{ align-self:flex-end; }

@media (min-width:820px){
  .pcard{ width:min(45%, 390px); }
  .pcard + .pcard{ margin-top:clamp(-110px,-7vw,-50px); }   /* let them interlock */
}

.pcard__media{
  position:relative;
  overflow:hidden;
  background:rgba(18,16,30,.5);
  /* cusped arch: domed head, squared foot */
  border-radius:48% 48% 6px 6px / 30% 30% 6px 6px;
  box-shadow:
    0 0 0 1px rgba(232,207,139,.5),
    0 26px 60px rgba(0,0,0,.55);
  transition:transform .8s cubic-bezier(.2,.8,.3,1);
}
/* each photograph rests at a slight lean, and straightens when touched */
.pcard[data-side="left"]  .pcard__media{ transform:rotate(-1.8deg); }
.pcard[data-side="right"] .pcard__media{ transform:rotate(1.8deg); }
.pcard:hover .pcard__media{ transform:rotate(0deg) translateY(-6px); }

/* faint inner highlight along the top edge, like light catching a print */
.pcard__media::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,247,225,.16);
}
.pcard__media img{
  width:100%;
  height:auto;                 /* the photo decides its own height */
  object-position:center 30%;  /* keeps faces clear of the arch curve */
  transition:transform 1.2s cubic-bezier(.2,.8,.3,1);
}
.pcard:hover .pcard__media img{ transform:scale(1.035); }

/* elegant placeholder shown if a photo file is ever missing */
.pcard__ph{
  aspect-ratio:4/5;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:
    radial-gradient(70% 55% at 50% 38%, rgba(232,207,139,.16), transparent 72%),
    linear-gradient(155deg,#331824,#4d1d33);
}
.pcard__ph b{
  font-family:var(--font-display);
  font-size:clamp(38px,10vw,54px);
  font-weight:600;
  letter-spacing:.06em;
  color:rgba(232,207,139,.85);
  line-height:1;
}
.pcard__ph i{
  font-style:normal;
  font-family:var(--font-display);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(253,246,236,.45);
  text-align:center; padding-inline:12px;
}

.pcard__cap{
  padding:clamp(16px,3.6vw,22px) 10px 0;
  text-align:center;
}
.pcard__cap b{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(17px,4.4vw,24px);
  letter-spacing:.05em;
  color:#fff;
}
.pcard__cap span{
  display:block; margin-top:7px;
  font-family:var(--font-body);
  font-style:italic;
  font-size:clamp(13.5px,3.5vw,16px);
  letter-spacing:.02em;
  color:rgba(232,207,139,.86);
}

/* ============================================== 6 · CELEBRATIONS ====== */

/* One invitation per row so each card is as large as the screen allows and
   the writing on it can actually be read. On a phone the cards reach past the
   section padding to win back every pixel of width. */
.grid-events{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(40px,10vw,72px);
  margin-top:clamp(32px,7vw,50px);
}
/* on a wider screen the invitations lean left and right like the photographs;
   on a phone they stay full width, because reading them matters more */
@media (min-width:820px){
  .grid-events{ align-items:stretch; }
  .ecard[data-side="left"]{  align-self:flex-start; margin-left:clamp(0px,4vw,60px); }
  .ecard[data-side="right"]{ align-self:flex-end;   margin-right:clamp(0px,4vw,60px); }
}
@media (max-width:700px){
  .grid-events{
    width:calc(100% + var(--pad) * 1.4);
    margin-inline:calc(var(--pad) * -0.7);
  }
}

/* The invitation artwork already has its own painted border, so it gets no
   second frame — just a hairline and a shadow, with the wording sitting
   directly on the palace background beneath it. */
.ecard{
  width:min(100%, 560px);
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.ecard:hover{ transform:translateY(-5px); }

/* No fixed frame and no cropping — the invitation is always shown complete. */
.ecard__media{
  position:relative;
  display:block; width:100%;
  padding:0; border:0;
  background:rgba(18,16,30,.5);
  cursor:zoom-in;
  overflow:hidden;
  border-radius:3px;
  box-shadow:
    0 0 0 1px rgba(232,207,139,.42),
    0 26px 64px rgba(0,0,0,.58);
}
/* The invitation artwork runs right to its bottom edge with almost no margin,
   so a soft vignette there stops it reading as though it had been chopped. */
.ecard__media::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,247,225,.16);
  background:linear-gradient(180deg,
    rgba(20,10,15,0) 88%, rgba(20,10,15,.16) 96%, rgba(20,10,15,.34) 100%);
}
.ecard__media img{
  width:100%;
  height:auto;
  transition:transform 1.2s cubic-bezier(.2,.8,.3,1);
}
.ecard:hover .ecard__media img{ transform:scale(1.03); }


.ecard__body{
  position:relative;
  padding:clamp(22px,5vw,30px) 4px 0;
  text-align:center;
}
/* No shadow behind the wording. When the background washes to a light colour
   the type flips to the deep henna ink used on the invitation cards
   themselves — see the .is-light rules in the celebrations section. */

.ecard__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(22px,5.6vw,30px);
  letter-spacing:.04em;
  line-height:1.24;
  color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.6);
}
.ecard__text{
  margin:10px auto 0;
  max-width:32ch;
  font-size:clamp(15px,3.9vw,17.5px);
  font-weight:400; font-style:italic;
  color:rgba(253,246,236,.86);
}

/* When the celebrations background washes to a pale colour — the turmeric of
   the Haldi — white type stops working. Rather than hide the wording behind a
   shadow, it switches to the deep henna ink the invitation cards are lettered
   in, which is what a printed card would do. */
#events.is-light .h2,
#events.is-light .ecard__title{
  color:#43210d;
  text-shadow:0 1px 0 rgba(255,247,225,.35);
}
#events.is-light .lead,
#events.is-light .ecard__text{
  color:#5a3016;
  text-shadow:0 1px 0 rgba(255,247,225,.3);
}
#events.is-light .eyebrow{
  color:#7a4a1c;
  text-shadow:0 1px 0 rgba(255,247,225,.35);
}
#events.is-light .rule i{
  background:linear-gradient(90deg, transparent, rgba(90,48,22,.55), transparent);
}
#events.is-light .rule span{ color:#8a5520; }
#events.is-light .mandala{ opacity:.22; }
#events .h2, #events .lead, #events .eyebrow,
#events .ecard__title, #events .ecard__text,
#events .rule i, #events .rule span{
  transition:color .6s ease, text-shadow .6s ease, background .6s ease;
}

/* ============================================= 9b · SEND BLESSINGS ==== */

.blessing{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:min(100%, 560px);
  margin:clamp(28px,6vw,42px) auto 0;
}

/* label is for screen readers — the placeholder carries it visually */
.blessing__label{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%);
  white-space:nowrap;
}

.blessing__input{
  width:100%;
  padding:clamp(16px,4vw,20px) clamp(16px,4vw,22px);
  border:1px solid rgba(232,207,139,.42);
  border-radius:3px;
  background:rgba(18,16,30,.55);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:clamp(16px,4.1vw,18px);   /* 16px min stops iOS zooming on focus */
  line-height:1.65;
  resize:vertical;
  transition:border-color .35s, box-shadow .35s, background .35s;
}
.blessing__input::placeholder{
  color:rgba(253,246,236,.5);
  font-style:italic;
}
.blessing__input:focus{
  outline:none;
  border-color:var(--light-gold);
  background:rgba(18,16,30,.7);
  box-shadow:0 0 0 3px rgba(232,207,139,.14);
}

.blessing__note{
  margin:10px 0 0;
  min-height:1.2em;
  font-size:clamp(13px,3.4vw,15px);
  font-style:italic;
  color:rgba(253,246,236,.75);
}
.blessing__note.is-warn{ color:#f0b9a0; }

.blessing .btn{ margin-top:clamp(18px,4vw,24px); }

/* ================================================= 7 · WITH LOVE ====== */

.grid-family{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(18px,4.4vw,30px);
  margin-top:clamp(30px,7vw,46px);
}
@media (min-width:760px){ .grid-family{ grid-template-columns:repeat(2,1fr); } }

.fcard{
  padding:clamp(28px,7vw,44px) clamp(20px,5vw,32px);
  border-radius:16px;
  border:1px solid var(--panel-line);
  background:linear-gradient(160deg, var(--panel-top), var(--panel-bot));
  box-shadow:0 18px 50px rgba(0,0,0,.4);
  text-align:center;
}
.fcard__side{
  margin:0 0 clamp(12px,3vw,18px);
  font-family:var(--font-display);
  font-size:clamp(10px,2.7vw,12px);
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(232,207,139,.85);
}
.fcard__name{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(19px,4.8vw,28px);
  line-height:1.32;
  letter-spacing:.04em;
  color:var(--light-gold);
}
.fcard__parents{
  margin:clamp(12px,3vw,18px) 0 0;
  font-size:clamp(15.5px,4vw,18.5px);
  font-weight:400;
  color:#fff;
}
.fcard__note{
  margin:6px 0 0;
  font-size:clamp(12.5px,3.2vw,14px);
  font-style:italic;
  color:rgba(253,246,236,.62);
}

/* ==================================================== 8 · VENUE ======= */

.venue-card{
  margin:clamp(30px,7vw,44px) auto 0;
  max-width:560px;
  padding:clamp(30px,7vw,46px) clamp(22px,5.5vw,38px);
  border-radius:18px;
  border:1px solid var(--panel-line);
  background:linear-gradient(160deg, var(--panel-top), var(--panel-bot));
  box-shadow:0 24px 62px rgba(0,0,0,.46);
}
.venue-card__name{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(23px,6.2vw,34px);
  line-height:1.25;
  color:#fff;
}
.venue-card__addr{
  margin:clamp(10px,2.6vw,16px) 0 0;
  font-size:clamp(15px,3.9vw,17.5px);
  font-weight:400; line-height:1.7;
  color:rgba(253,246,236,.88);
}

/* =================================================== 9 · FOOTER ======= */

.sec--footer{ min-height:auto; }
.sec--footer .wrap{ padding-block:clamp(80px,18vw,140px); }

.foot-date{
  margin:clamp(8px,2vw,12px) 0 0;
  font-family:var(--font-display);
  font-size:clamp(13px,3.5vw,17px);
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(253,246,236,.9);
}
.foot-sign{
  margin:clamp(16px,4vw,24px) 0 0;
  font-family:var(--font-body);
  font-style:italic;
  font-size:clamp(17px,4.4vw,22px);
  color:var(--light-gold);
}

/* ============================================== MUSIC TOGGLE ========== */

.music{
  position:fixed; z-index:80;
  right:max(14px, env(safe-area-inset-right));
  bottom:max(16px, env(safe-area-inset-bottom));
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(232,207,139,.5);
  border-radius:50%;
  background:rgba(18,16,30,.68);
  cursor:pointer;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  box-shadow:0 8px 26px rgba(0,0,0,.4);
  transition:transform .3s, border-color .3s, opacity .5s;
}
.music:hover{ transform:scale(1.07); border-color:var(--light-gold); }

.music__bars{ display:flex; align-items:flex-end; gap:3px; height:17px; }
.music__bars i{
  width:2.5px; height:5px;
  border-radius:2px;
  background:var(--light-gold);
  animation:eq .95s ease-in-out infinite;
}
.music__bars i:nth-child(2){ animation-delay:.16s; }
.music__bars i:nth-child(3){ animation-delay:.32s; }
.music__bars i:nth-child(4){ animation-delay:.48s; }
@keyframes eq{
  0%,100%{ height:4px; }
  50%    { height:16px; }
}
.music.is-muted .music__bars i{ animation-play-state:paused; height:4px; opacity:.42; }

/* ================================================= LIGHTBOX =========== */

.lightbox{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,4vw,40px);
  background:rgba(10,5,8,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .4s ease;
}
.lightbox.is-in{ opacity:1; }

.lightbox__img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;                /* never crops, never distorts */
  border-radius:10px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
  transform:scale(.96);
  transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
.lightbox.is-in .lightbox__img{ transform:scale(1); }

.lightbox__close{
  position:absolute;
  top:max(12px, env(safe-area-inset-top));
  right:max(14px, env(safe-area-inset-right));
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(0,0,0,.4);
  color:#fff; font-size:26px; line-height:1;
  cursor:pointer;
}

/* ============================================ SCROLL REVEAL =========== */

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity var(--reveal) cubic-bezier(.2,.8,.3,1),
             transform var(--reveal) cubic-bezier(.2,.8,.3,1);
  /* No will-change here on purpose: it would promote every one of these
     elements to its own GPU layer for the whole visit and make scrolling
     stutter. The browser handles a plain opacity/transform fade fine. */
}
.reveal.is-in{ opacity:1; transform:none; }

/* Photographs and invitations arrive from the side they lean towards, turning
   upright as they settle — the one orchestrated motion on the page. */
.reveal--left{  transform:translate3d(-46px,26px,0) rotate(-3deg); }
.reveal--right{ transform:translate3d(46px,26px,0)  rotate(3deg); }
.reveal--left, .reveal--right{
  transition:opacity 1s cubic-bezier(.2,.8,.3,1),
             transform 1.15s cubic-bezier(.16,.84,.28,1);
}
.reveal--left.is-in, .reveal--right.is-in{ transform:none; }

/* stagger children inside a grid */
.grid-couple .reveal:nth-child(2),
.grid-events .reveal:nth-child(2),
.grid-family .reveal:nth-child(2){ transition-delay:.11s; }
.grid-couple .reveal:nth-child(3),
.grid-events .reveal:nth-child(3){ transition-delay:.22s; }
.grid-couple .reveal:nth-child(4),
.grid-events .reveal:nth-child(4){ transition-delay:.33s; }

/* ============================================ FALLING PETALS ========== */

#petals{
  position:fixed; inset:0; z-index:60;
  pointer-events:none;
}

/* ==================================== ACCESSIBILITY / REDUCED MOTION == */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  #petals{ display:none; }
}

:focus-visible{ outline:2px solid var(--light-gold); outline-offset:3px; }