/* ============================================================================
   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;
}
/* ------------------------------------------------------------ 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);
  /* Poured gold with deep henna lettering. The old ink pills were reading as
     dark patches and dragging the page down; a filled gold button lifts it and
     is unmistakably the thing to press. */
  border:1px solid rgba(255,246,220,.7);
  border-radius:999px;
  background:linear-gradient(160deg, #fdf0c8 0%, #f0d795 34%, #dfba5c 68%, #c9a227 100%);
  color:#40200b;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(12.5px,3.3vw,15px);
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  text-shadow:0 1px 0 rgba(255,250,232,.55);
  box-shadow:
    0 12px 30px rgba(0,0,0,.42),
    0 0 0 1px rgba(201,162,39,.5),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -2px 6px rgba(150,110,20,.25);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s, filter .35s;
}
.btn::after{           /* light travelling across the gold */
  content:""; position:absolute; top:0; left:-140%;
  width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  animation:shimmer 4.6s ease-in-out infinite;
}
@keyframes shimmer{
  0%,62%  { left:-140%; }
  100%    { left:160%; }
}
.btn:hover,.btn:focus-visible{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:
    0 18px 40px rgba(0,0,0,.5),
    0 0 0 1px rgba(232,207,139,.8),
    inset 0 1px 0 rgba(255,255,255,.85);
}
.btn:active{ transform:translateY(0) scale(.985); }

/* the maps button sits on the ink venue card and uses the same gold */
.btn--ghost{ background:linear-gradient(160deg, #fdf0c8 0%, #f0d795 34%, #dfba5c 68%, #c9a227 100%); }

/* On the pale turmeric wash a gold button would vanish, so the flip button
   turns to deep ink there. On the darker washes it stays gold. */
#events.is-light .btn--flip{
  background:linear-gradient(160deg, rgba(30,26,44,.96), rgba(16,14,26,.98));
  color:#f6e7bd;
  border-color:rgba(255,246,220,.5);
  text-shadow:none;
  box-shadow:
    0 12px 28px rgba(0,0,0,.35),
    0 0 0 1px rgba(232,207,139,.45),
    inset 0 1px 0 rgba(255,255,255,.12);
}
#events.is-light .btn--flip::after{
  background:linear-gradient(100deg, transparent, rgba(255,240,200,.28), transparent);
}

/* ================================================ SCROLL SYMBOL ======= */
/* Deliberately large. This is the one instruction a guest needs on the first
   screen, so it is a lit gold thread with a drop running down it, a clear
   label, and two chevrons falling away — sized to be seen, not hunted for. */

.scroller{
  position:absolute; z-index:4;
  left:50%;
  bottom:max(30px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(12px,3vw,15px);
  padding:14px 26px 10px;
  border:0; background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  animation:bob 3.4s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%    { transform:translateX(-50%) translateY(7px); }
}
.scroller.reveal{ transform:translateX(-50%) translateY(26px); animation:none; }
.scroller.reveal.is-in{ transform:translateX(-50%); animation:bob 3.4s ease-in-out infinite; }

.scroller__label{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(13px,3.6vw,16px);
  letter-spacing:.36em;
  text-indent:.36em;               /* balances the trailing letter-space */
  text-transform:uppercase;
  color:#fdf0c8;
  text-shadow:
    0 1px 3px rgba(12,6,9,.95),
    0 2px 14px rgba(12,6,9,.9),
    0 0 26px rgba(232,207,139,.45);
}

.scroller__line{
  position:relative;
  width:2px; height:clamp(58px,12vw,74px);
  border-radius:2px;
  background:linear-gradient(180deg, rgba(232,207,139,.85), rgba(232,207,139,.08));
  box-shadow:0 0 10px rgba(232,207,139,.35);
  overflow:hidden;
}
.scroller__line i{
  position:absolute; left:50%; top:0;
  width:6px; height:6px; margin-left:-3px;
  border-radius:50%;
  background:#fff6dc;
  box-shadow:0 0 14px 4px rgba(232,207,139,.9);
  animation:drop 2.3s cubic-bezier(.55,0,.35,1) infinite;
}
@keyframes drop{
  0%   { transform:translateY(-8px); opacity:0; }
  18%  { opacity:1; }
  72%  { transform:translateY(64px); opacity:1; }
  100% { transform:translateY(72px); opacity:0; }
}

.scroller__chevs{ display:block; position:relative; width:26px; height:26px; }
.scroller__chevs b{
  position:absolute; left:50%;
  width:14px; height:14px; margin-left:-7px;
  border-right:2.5px solid #f3e2b4;
  border-bottom:2.5px solid #f3e2b4;
  filter:drop-shadow(0 1px 3px rgba(12,6,9,.9));
  animation:chevFall 2.3s cubic-bezier(.55,0,.35,1) infinite;
}
.scroller__chevs b:nth-child(2){ animation-delay:.24s; opacity:.6; }
@keyframes chevFall{
  0%   { transform:rotate(45deg) translateY(-6px); opacity:0; }
  35%  { opacity:1; }
  75%  { transform:rotate(45deg) translateY(6px);  opacity:0; }
  100% { transform:rotate(45deg) translateY(6px);  opacity:0; }
}

.scroller:hover .scroller__label{ color:#fff; }

.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);
  }
}

/* Each invitation is mounted in a frame of the site's own making — an ink mat,
   a gold rule set in from the edge, and four corner brackets — so the artwork
   reads as part of the page rather than a photograph dropped onto it. */
.ecard{
  width:min(100%, 560px);
  perspective:1800px;                 /* gives the flip its depth */
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.ecard:hover{ transform:translateY(-5px); }

.ecard__flip{
  position:relative;
  transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.2,.8,.3,1);
}
.ecard.is-flipped .ecard__flip{ transform:rotateY(180deg); }
/* only the face you can actually see should take a click */
.ecard.is-flipped .ecard__face--front{ pointer-events:none; }
.ecard:not(.is-flipped) .ecard__face--back{ pointer-events:none; }

.ecard__face{
  position:relative;
  padding:clamp(10px,2.4vw,16px);
  border:1px solid rgba(232,207,139,.6);
  border-radius:5px;
  /* Near-opaque on purpose. A translucent mat lets the turmeric wash bleed
     through and turns the frame muddy brown, which is exactly what we do not
     want — the mount has to hold its own ink whatever colour is behind it. */
  background:linear-gradient(160deg, rgba(22,19,34,.94), rgba(12,11,22,.97));
  box-shadow:0 26px 64px rgba(0,0,0,.58);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* the inner gold rule, set in from the mat's edge */
.ecard__face::before{
  content:""; position:absolute; inset:5px; z-index:3;
  border:1px solid rgba(232,207,139,.3);
  border-radius:3px;
  pointer-events:none;
}
.ecard__face--back{
  position:absolute; inset:0;
  transform:rotateY(180deg);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

/* corner brackets */
.cnr{
  position:absolute; z-index:4; width:15px; height:15px;
  border:0 solid var(--light-gold);
  opacity:.85; pointer-events:none;
}
.cnr--tl{ top:9px;    left:9px;    border-top-width:1.5px; border-left-width:1.5px;  border-top-left-radius:3px; }
.cnr--tr{ top:9px;    right:9px;   border-top-width:1.5px; border-right-width:1.5px; border-top-right-radius:3px; }
.cnr--bl{ bottom:9px; left:9px;    border-bottom-width:1.5px; border-left-width:1.5px;  border-bottom-left-radius:3px; }
.cnr--br{ bottom:9px; right:9px;   border-bottom-width:1.5px; border-right-width:1.5px; border-bottom-right-radius:3px; }

/* No cropping — the invitation is always shown complete inside its mat. */
.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:2px;
  box-shadow:0 0 0 1px rgba(232,207,139,.28);
}
/* 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); }

/* ---- the reverse of the card ---- */
.ecard__back{
  width:100%;
  padding:clamp(22px,6vw,38px) clamp(16px,5vw,32px);
  text-align:center;
}
.ecard__back-eyebrow{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(9.5px,2.5vw,11.5px);
  letter-spacing:.34em; text-transform:uppercase;
  color:rgba(232,207,139,.85);
}
.ecard__back-title{
  margin:clamp(8px,2vw,12px) 0 0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(21px,5.4vw,30px);
  letter-spacing:.05em; line-height:1.24;
  color:var(--light-gold);
}
.ecard__back-rule{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:clamp(14px,3.4vw,20px) auto; max-width:210px;
}
.ecard__back-rule i{ flex:1; height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,207,139,.7),transparent); }
.ecard__back-rule span{ color:var(--gold); font-size:13px; line-height:1; }

.ecard__meta{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid rgba(232,207,139,.24);
}
.ecard__meta div{
  padding:clamp(12px,3vw,18px) 8px;
  border-bottom:1px solid rgba(232,207,139,.14);
}
.ecard__meta div:nth-child(odd){ border-right:1px solid rgba(232,207,139,.14); }
.ecard__meta dt{
  margin:0 0 5px;
  font-family:var(--font-display);
  font-size:clamp(8.5px,2.2vw,10px);
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(232,207,139,.85);
}
.ecard__meta dd{
  margin:0;
  font-size:clamp(13px,3.4vw,15.5px);
  line-height:1.45; color:#fff;
}
.ecard__back-note{
  margin:clamp(16px,4vw,22px) 0 0;
  font-size:clamp(13.5px,3.5vw,16px);
  font-style:italic; line-height:1.7;
  color:rgba(253,246,236,.82);
}

/* the button that turns the card over */
.btn--flip{
  margin-top:clamp(18px,4vw,24px);
  padding:clamp(12px,3vw,15px) clamp(24px,6vw,34px);
  font-size:clamp(10.5px,2.8vw,12.5px);
  letter-spacing:.2em;
}


.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 .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; }