/* ============================================================
   Arpit & Gunjan — Custom Wedding Website
   Intro · Hero (layered parallax) · Invite · Events ·
   Blessings · Venue · RSVP · Countdown · Music
   ============================================================ */

:root {
  --ivory:        #fbf4e8;
  --ivory-soft:   #faf0df;
  --blush:        #f3d9d2;
  --rose:         #c4748c;
  --rose-deep:    #a83d5b;
  --lotus:        #c97388;
  --plum:         #6c2a3d;
  --plum-deep:    #4a1a2a;
  --ink:          #3a1623;
  --gold:         #b48848;
  --gold-soft:    #d4ad6a;

  /* Festive warm palette — hero + invite + events */
  --mh-ivory:        #fff7ea;
  --mh-ivory-soft:   #faf0df;
  --mh-green:        #4f6f3a;
  --mh-green-deep:   #3c5a2c;
  --mh-marigold:     #c8881f;
  --mh-marigold-deep:#a8740f;
  --mh-red:          #9c2b22;
  --mh-terracotta:   #c1502e;
  --mh-brown:        #5f4733;

  /* Fonts */
  --font-script:  "Allura", "Pinyon Script", cursive;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-label:   "Marcellus", "Cormorant Garamond", Georgia, serif;
  --font-date:    "Cinzel", "Marcellus", Georgia, serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: var(--ivory);
  color: var(--ink);
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   INTRO  (tap-to-begin gate)
   ============================================================ */
.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a0d10;
  cursor: pointer;
  opacity: 1;
  transform: scale(1);
  transition: opacity 1400ms ease, filter 1400ms ease, transform 1800ms ease;
}
.intro-screen .scene-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #2a0d10;
}
.intro-screen.is-fading {
  opacity: 0;
  filter: blur(16px);
  transform: scale(1.035);
  pointer-events: none;
}

.begin-button {
  position: absolute;
  left: 50%;
  bottom: max(8dvh, 48px);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 8px 6px;
  color: var(--mh-ivory);
  text-align: center;
  border: 0;
  background: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 2px 16px rgba(0,0,0,0.6);
  transform: translateX(-50%);
  cursor: pointer;
  transition: opacity 700ms ease, transform 700ms ease, filter 700ms ease;
}
.begin-button::before {
  position: absolute;
  z-index: -1;
  inset: -40% -22%;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(42,13,16,0.66) 0%, rgba(42,13,16,0.32) 45%, rgba(42,13,16,0) 72%);
  filter: blur(12px);
}
.begin-button:disabled { cursor: default; }
.begin-button:not(:disabled):active { transform: translateX(-50%) translateY(1px); }
.begin-button.is-hidden {
  opacity: 0;
  filter: blur(6px);
  transform: translateX(-50%) translateY(16px);
  pointer-events: none;
}

.begin-main {
  position: relative;
  max-width: min(82vw, 340px);
  margin: 0 auto;
  padding-bottom: 16px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5.8vw, 1.85rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.2;
  color: var(--mh-ivory);
}
.begin-main::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 36px;
  height: 1px;
  content: "";
  background: var(--mh-marigold);
  opacity: 0.7;
  transform: translateX(-50%);
}
.begin-button.is-loading .begin-main { font-style: normal; font-weight: 500; }

/* Cinematic ivory cross-dissolve: a full-screen ivory veil blooms up to cover
   the fading intro video, holds for a beat, then lifts to reveal the hero. */
.ivory-dissolve {
  position: fixed;
  inset: 0;
  z-index: 49;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 44%, #fffdf8 0%, #fff7ea 36%, #fbeed8 66%, #f1dfc2 100%);
}
.ivory-dissolve::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(200,136,31,0.22), transparent 58%);
  mix-blend-mode: screen;
}
.ivory-dissolve.is-active { animation: ivoryDissolve 2400ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes ivoryDissolve {
  0%   { opacity: 0; transform: scale(1.05); filter: blur(8px); }
  30%  { opacity: 1; transform: scale(1);    filter: blur(0); }
  60%  { opacity: 1; transform: scale(1);    filter: blur(0); }
  100% { opacity: 0; transform: scale(1.07); filter: blur(5px); }
}


/* ============================================================
   HERO  (layered parallax — BG + FG + monogram)
   ============================================================ */
.hero-screen {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: var(--mh-ivory);
  isolation: isolate;
}

.hero-parallax {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}
.hero-bg { z-index: 0; transform: scale(1.14); }
.hero-fg { z-index: 1; transform: scale(1.2); }

/* ── sky planes (colour-smoke air-show) — three jets sweep left → right ── */
.hero-flight-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.hero-flight {
  position: absolute;
  left: -28vw;
  top: var(--flight-top, 12vh);
  width: var(--flight-size, 54px);
  height: var(--flight-size, 54px);
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(var(--flight-tilt, -5deg)) scale(var(--flight-scale, 1));
  animation: heroFlight var(--flight-duration, 16s) linear var(--flight-delay, 0s) infinite;
  will-change: transform, opacity;
}
.hero-screen:not(.is-animated) .hero-flight { animation-play-state: paused; }

.hero-flight--one {
  --flight-top: 6.5vh; --flight-size: 60px; --flight-scale: 1;
  --flight-duration: 17s; --flight-delay: -1s; --flight-rise: -38px; --flight-tilt: -6deg;
  --smoke: 235, 128, 38;   /* vivid saffron */
}
.hero-flight--two {
  --flight-top: 13vh; --flight-size: 48px; --flight-scale: 0.86;
  --flight-duration: 21s; --flight-delay: -9s; --flight-rise: -30px; --flight-tilt: -4deg;
  --smoke: 224, 64, 122;   /* vivid pink */
}
.hero-flight--three {
  --flight-top: 19.5vh; --flight-size: 40px; --flight-scale: 0.72;
  --flight-duration: 14.5s; --flight-delay: -5s; --flight-rise: -24px; --flight-tilt: -5deg;
  --smoke: 64, 150, 208;   /* vivid blue */
}

.hero-plane {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 3px 7px rgba(127, 82, 48, 0.2));
}

/* colour-smoke trail — right end anchored at the jet's exhaust, tapering left */
.hero-smoke {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: calc(var(--flight-size, 54px) * -2.25);
  width: calc(var(--flight-size, 54px) * 2.25);
  height: calc(var(--flight-size, 54px) * 0.2);
  border-radius: 999px;
  opacity: 0;
  filter: blur(4.5px) saturate(1.5);
  transform-origin: right center;
  animation: heroTrail var(--trail-dur, 3.2s) ease-in-out var(--trail-delay, 0s) infinite;
  background:
    linear-gradient(to left,
      rgba(var(--smoke, 232,142,55), 0.95),
      rgba(var(--smoke, 232,142,55), 0.42) 46%,
      transparent 92%),
    radial-gradient(ellipse 30% 150% at 88% 50%,
      rgba(var(--smoke, 232,142,55), 0.65), transparent 72%);
}
.hero-smoke:nth-of-type(1) { top: 48%; --trail-dur: 3.1s; --trail-delay: 0s; }
.hero-smoke:nth-of-type(2) {
  top: 52%;
  width: calc(var(--flight-size, 54px) * 1.95);
  height: calc(var(--flight-size, 54px) * 0.16);
  --trail-dur: 3.6s; --trail-delay: -1.3s;
}
.hero-smoke:nth-of-type(3) {
  top: 50%;
  width: calc(var(--flight-size, 54px) * 1.7);
  height: calc(var(--flight-size, 54px) * 0.13);
  --trail-dur: 2.7s; --trail-delay: -2.1s;
}

@keyframes heroFlight {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--flight-tilt, -5deg)) scale(var(--flight-scale, 1)); }
  10%  { opacity: 0.9; }
  84%  { opacity: 0.85; }
  100% { opacity: 0; transform: translate3d(140vw, var(--flight-rise, -30px), 0) rotate(var(--flight-tilt, -5deg)) scale(var(--flight-scale, 1)); }
}
@keyframes heroTrail {
  0%   { opacity: 0;    transform: translate3d(8%, 0, 0)    scaleX(0.45) scaleY(0.7); }
  16%  { opacity: 0.85; transform: translate3d(2%, -3%, 0)  scaleX(0.8)  scaleY(0.92); }
  52%  { opacity: 0.7;  transform: translate3d(-6%, -6%, 0) scaleX(1.1)  scaleY(1.0); }
  80%  { opacity: 0.34; transform: translate3d(-12%, -2%, 0) scaleX(1.24) scaleY(0.9); }
  100% { opacity: 0;    transform: translate3d(-18%, 4%, 0) scaleX(1.38) scaleY(0.72); }
}

/* soft ivory glow at the top so the names + date read over the artwork */
.hero-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,247,234,0.6) 0%, rgba(255,247,234,0.18) 24%, transparent 46%),
    linear-gradient(0deg, rgba(46,13,16,0.28) 0%, transparent 22%);
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: start;
  justify-items: center;
  width: min(86vw, 400px);
  min-height: 100svh;
  margin: 0 auto;
  padding: 7dvh 20px 9dvh;
  text-align: center;
  text-shadow: 0 1px 18px rgba(255, 247, 234, 0.55);
}

.hero-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  opacity: 0;
}
.hero-logo img { display: block; width: min(16vw, 58px); height: auto; }
.hero-screen.is-animated .hero-logo {
  animation:
    heroSlideFadeIn 1400ms cubic-bezier(0.16, 1, 0.3, 1) forwards 200ms,
    heroLogoFloat 5s ease-in-out 1.6s infinite,
    heroLogoGlow  3.5s ease-in-out 1.6s infinite;
}

.couple-name span,
.gold-divider,
.wedding-date,
.wedding-venue { opacity: 0; }

.couple-name {
  display: grid;
  gap: 2px;
  margin: 0;
  color: #a82a63;   /* rich magenta-rose — beautiful on the ivory hero sky */
  font-family: var(--font-script);
  font-size: clamp(2.9rem, 13.5vw, 4.6rem);
  font-weight: 400;
  line-height: 1.06;
}
.couple-name span {
  display: block;
  filter: blur(24px);
  transform: translateY(66px) scale(1.2);
  letter-spacing: 0.26em;
}
.couple-name .weds {
  margin: -2px 0;
  color: var(--mh-marigold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.34em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.gold-divider {
  width: min(44%, 140px);
  height: 1px;
  margin: 14px 0 12px;
  background: linear-gradient(90deg, transparent, rgba(200, 136, 31, 0.6), transparent);
  transform: scaleX(0);
}
.gold-divider span, .gold-divider i { display: none; }

.wedding-date,
.wedding-venue {
  margin: 0;
  color: var(--mh-green-deep);
  font-family: var(--font-date);
  font-size: clamp(0.78rem, 3.3vw, 0.96rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  line-height: 2;
  text-transform: uppercase;
  transform: translateY(18px);
}
.wedding-venue {
  color: var(--mh-terracotta);
  font-weight: 700;
  font-size: clamp(0.72rem, 3vw, 0.9rem);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-shadow: 0 1px 10px rgba(255, 247, 234, 0.6), 0 1px 3px rgba(60, 20, 10, 0.28);
}

/* hero date — larger, bold, with a true superscript "th" */
.wedding-date {
  font-size: clamp(1.02rem, 4.4vw, 1.32rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
.wedding-date sup {
  font-size: 0.56em;
  font-weight: 700;
  vertical-align: super;
  letter-spacing: 0;
}

.hero-screen.is-animated .couple-name span:nth-child(1) {
  animation:
    heroNameReveal 2100ms cubic-bezier(0.16, 1, 0.3, 1) forwards 420ms,
    heroNameGlow 4.6s ease-in-out 2700ms infinite;
}
.hero-screen.is-animated .couple-name .weds            { animation: heroAmpReveal 1300ms ease forwards 1320ms; }
.hero-screen.is-animated .couple-name span:nth-child(3) {
  animation:
    heroNameReveal 2100ms cubic-bezier(0.16, 1, 0.3, 1) forwards 1500ms,
    heroNameGlow 4.6s ease-in-out 3800ms infinite;
}
.hero-screen.is-animated .gold-divider                 { animation: heroDividerReveal 1300ms cubic-bezier(0.16, 1, 0.3, 1) forwards 3250ms; }
.hero-screen.is-animated .wedding-date                 { animation: heroSlideFadeIn 1300ms cubic-bezier(0.16, 1, 0.3, 1) forwards 3550ms; }
.hero-screen.is-animated .wedding-venue                { animation: heroSlideFadeIn 1300ms cubic-bezier(0.16, 1, 0.3, 1) forwards 3800ms; }

/* Cinematic name reveal: each name surges up from a deep blur with a settling
   scale + letter-spacing and a soft overshoot, then a gentle gold under-glow
   keeps breathing once it lands. */
@keyframes heroNameReveal {
  0%   { opacity: 0; filter: blur(24px); transform: translateY(66px) scale(1.2);   letter-spacing: 0.26em; }
  42%  { opacity: 1; }
  72%  { filter: blur(0); transform: translateY(-7px) scale(1.014); letter-spacing: 0.04em; }
  100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); letter-spacing: 0; }
}
@keyframes heroNameGlow {
  0%, 100% { text-shadow: 0 1px 18px rgba(255, 247, 234, 0.55); }
  50%      { text-shadow: 0 1px 18px rgba(255, 247, 234, 0.7), 0 0 26px rgba(200, 136, 31, 0.42), 0 0 46px rgba(168, 42, 99, 0.28); }
}
@keyframes heroAmpReveal {
  from { opacity: 0; filter: blur(8px); transform: translateY(10px) scale(0.92); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
@keyframes heroSlideFadeIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroDividerReveal {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}
@keyframes heroLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes heroLogoGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(200, 136, 31, 0.28)) drop-shadow(0 3px 14px rgba(0,0,0,0.22)); }
  50%      { filter: drop-shadow(0 0 24px rgba(200, 136, 31, 0.90)) drop-shadow(0 0 48px rgba(193, 80, 46, 0.40)) drop-shadow(0 6px 24px rgba(200, 136, 31, 0.5)); }
}

/* ── scroll cue ── */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: max(4dvh, 24px);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 9px;
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 1000ms ease 700ms, transform 1000ms ease 700ms;
  pointer-events: none;
}
.scroll-cue::before {
  position: absolute;
  z-index: -1;
  inset: -18px -34px;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(120, 50, 20, 0.5) 0%, rgba(120, 50, 20, 0.26) 46%, rgba(120, 50, 20, 0) 76%);
  filter: blur(8px);
}
.hero-screen.is-animated .scroll-cue { opacity: 1; transform: translateX(-50%); }

.scroll-cue-label {
  color: var(--mh-ivory);
  font-family: var(--font-date);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 2px 14px rgba(120,50,20,0.85), 0 0 22px rgba(255,247,234,0.45);
}
.scroll-arrows { display: grid; justify-items: center; height: 34px; }
.scroll-arrows i {
  display: block;
  width: 16px;
  height: 16px;
  margin-top: -7px;
  border-right: 4px solid var(--mh-ivory);
  border-bottom: 4px solid var(--mh-ivory);
  transform: rotate(45deg);
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.75));
  animation: heroChevronDrop 1700ms ease-in-out infinite;
}
.scroll-arrows i:nth-child(2) { animation-delay: 180ms; }
.scroll-arrows i:nth-child(3) { animation-delay: 360ms; }
@keyframes heroChevronDrop {
  0%   { opacity: 0; transform: translateY(-5px) rotate(45deg); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(6px) rotate(45deg); }
}


/* ============================================================
   INVITE  (formal invitation — both families)
   ============================================================ */
.invite-screen {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(200, 136, 31, 0.10), transparent 64%),
    linear-gradient(180deg, var(--mh-ivory) 0%, var(--mh-ivory-soft) 100%);
  isolation: isolate;
}

.invite-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.invite-card {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: center;
  row-gap: clamp(13px, 2.9vh, 20px);   /* one even rhythm for the whole invitation */
  /* keep the column inside the arch's clear interior so no line touches the
     decorative side borders */
  width: min(78%, 348px);
  min-height: 100svh;
  margin: 0 auto;
  /* asymmetric padding seats the centred block a touch low — clear of the top
     arch foliage, filling the lower cream, yet stopping above the bottom
     illustration band (gazebo / peacock / fountain / flowers, ~78% down) */
  padding: 5dvh 14px 30dvh;
  text-align: center;
  color: var(--mh-brown);
}
.invite-card::before {
  position: absolute;
  z-index: -1;
  inset: 3dvh -8% 3dvh;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(255, 247, 234, 0.78) 0%, rgba(255, 247, 234, 0.5) 44%, rgba(255, 247, 234, 0) 78%);
  filter: blur(16px);
}

.invite-ganesha {
  width: clamp(56px, 15vw, 78px);
  height: auto;
  margin: 0 auto;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 1100ms ease, filter 1100ms ease;
}
.invite-screen.is-revealed .invite-ganesha {
  opacity: 1;
  filter: blur(0);
  animation: inviteFloatA 6s ease-in-out infinite 1200ms;
}
@keyframes inviteFloatA {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.invite-line {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  filter: blur(12px);
  transition:
    opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.invite-screen.is-revealed .invite-line {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.invite-screen.is-revealed .invite-blessing            { transition-delay: 140ms; }
.invite-screen.is-revealed .invite-hosts               { transition-delay: 300ms; }
.invite-screen.is-revealed .invite-person:nth-of-type(1) { transition-delay: 480ms; }
.invite-screen.is-revealed .invite-with                { transition-delay: 620ms; }
.invite-screen.is-revealed .invite-person:nth-of-type(2) { transition-delay: 760ms; }
.invite-screen.is-revealed .invite-closing             { transition-delay: 960ms; }

.invite-blessing {
  margin: 0;
  color: #B28A3B;
  font-family: var(--font-date);
  font-size: clamp(0.74rem, 3.1vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.55;
  text-transform: uppercase;
}

.invite-hosts {
  margin: 0;
  color: #4B3A2A;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(0.94rem, 4.1vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 0.012em;
  line-height: 1.58;
}

.invite-person {
  width: 100%;
  margin: 0;
}
.invite-couple {
  display: block;
  margin: 0 0 clamp(5px, 1.2vh, 9px);
  color: #8E2522;
  font-family: var(--font-script);
  font-size: clamp(2.7rem, 11vw, 3.8rem);
  font-weight: 400;
  line-height: 1.0;
}
.invite-lineage {
  margin: 0;
  color: #4B3A2A;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(0.6rem, 2.85vw, 0.78rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.75;
  text-wrap: balance;    /* wrap tidily if a line is too long — never clip a word */
}

.invite-with {
  margin: 0;
}
.invite-with span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
  color: #B28A3B;
  letter-spacing: 0.04em;
}

.invite-closing {
  margin: 0;
  color: var(--mh-brown);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(0.9rem, 3.8vw, 1.04rem);
  font-weight: 400;
  line-height: 1.55;
}


/* ============================================================
   EVENTS  (layered watercolour cards — three webp layers each)
   ============================================================ */
.events-screen {
  position: relative;
  padding: clamp(54px, 9vw, 96px) 16px clamp(58px, 9vw, 100px);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(200, 136, 31, 0.08), transparent 60%),
    linear-gradient(180deg, var(--mh-ivory) 0%, var(--mh-ivory-soft) 100%);
  overflow: hidden;
}

.events-head {
  text-align: center;
  margin: clamp(18px, 5vw, 44px) auto clamp(34px, 6vw, 56px);
  max-width: 640px;
}
.events-kicker {
  margin: 0 0 10px;
  font-family: var(--font-label);
  font-size: clamp(12px, 3.1vw, 15px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--mh-marigold-deep);
}
.events-title {
  margin: 0;
  font-family: var(--font-date);
  font-weight: 600;
  font-size: clamp(28px, 7.4vw, 46px);
  letter-spacing: 0.05em;
  color: var(--mh-red);
  line-height: 1.1;
}
.events-title .events-amp {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--mh-marigold);
  font-size: 1.05em;
  letter-spacing: 0;
}
.events-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.events-divider span {
  display: block;
  width: clamp(40px, 14vw, 80px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.events-divider i {
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--mh-marigold);
  box-shadow: 0 0 0 3px rgba(200, 136, 31, 0.18);
}

.events-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 7vw, 72px);
}

.ev-card {
  width: 100%;
  max-width: 440px;
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 900ms ease, transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--ev-i, 0) * 90ms);
}
.events-screen.is-revealed .ev-card { opacity: 1; transform: translateY(0); }

.ev-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 941 / 1672;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(180, 136, 72, 0.45);
  box-shadow:
    0 22px 50px -18px rgba(60, 30, 18, 0.45),
    inset 0 0 0 1px rgba(255, 247, 234, 0.35),
    inset 0 0 70px rgba(95, 71, 51, 0.10);
  background: var(--mh-ivory-soft);
}
/* themed fallback fill behind transparent edges / while art loads */
.ev-stage--carnival  { background: linear-gradient(165deg, #f3e3cf 0%, #e7cdb0 100%); }
.ev-stage--mayra     { background: linear-gradient(165deg, #f9e0e6 0%, #f3c9d4 100%); }
.ev-stage--baraat    { background: linear-gradient(165deg, #fbeede 0%, #f3dcc4 100%); }
.ev-stage--sangeet   { background: linear-gradient(165deg, #2a0a10 0%, #43101b 100%); }
.ev-stage--phera     { background: linear-gradient(165deg, #f0d6c4 0%, #e6b59c 100%); }
.ev-stage--reception { background: linear-gradient(165deg, #0c1430 0%, #14243f 58%, #0a1b2e 100%); }

.ev-layer {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.ev-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* full-frame event video (Beera Mayra) — fills the stage; text sits above */
.ev-video {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.ev-couple {
  left: 50%;
  bottom: 0;
  width: auto;
  height: 63%;
  aspect-ratio: 941 / 1672;
  transform-origin: 50% 100%;
  transform: translateX(calc(-50% + var(--cdx, 0%)));
  filter: drop-shadow(0 12px 16px rgba(60, 30, 18, 0.24));
  animation: evCoupleFloat 5.6s ease-in-out infinite;
  z-index: 2;
}
.ev-fg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(var(--fgdy, 8%));
  filter: drop-shadow(0 8px 12px rgba(60, 30, 18, 0.20));
  animation: evFgFloat 6.4s ease-in-out infinite;
  z-index: 3;
}
@keyframes evCoupleFloat {
  0%   { transform: translateX(calc(-50% + var(--cdx, 0%) - 5px)) translateY(0)     rotate(-0.9deg); }
  50%  { transform: translateX(calc(-50% + var(--cdx, 0%) + 5px)) translateY(-22px) rotate(0.9deg); }
  100% { transform: translateX(calc(-50% + var(--cdx, 0%) - 5px)) translateY(0)     rotate(-0.9deg); }
}
@keyframes evFgFloat {
  0%, 100% { transform: translateY(calc(var(--fgdy, 8%) + 0px))  rotate(-0.4deg); }
  50%      { transform: translateY(calc(var(--fgdy, 8%) - 14px)) rotate(0.4deg); }
}

/* ── Mayra — bespoke layer layout ──
   FG (AG_MAYRA_FG) sits 40% shorter in the bottom-left; the SUBJECT
   (AG_MAYRA_SUBJECT) sits 15% shorter in the bottom-right and is promoted
   to the outermost layer. Each gets its own float that keeps it anchored to
   its corner (the default subject float re-centres horizontally). */
.ev-stage--mayra .ev-fg {
  inset: auto auto 0 0;       /* anchor bottom-left */
  left: 2%;
  width: auto;
  height: 60%;                /* 40% shorter than the full-frame default */
  object-fit: contain;
  object-position: left bottom;
  transform: none;
  transform-origin: 0% 100%;
  animation: evMayraFgFloat 6.4s ease-in-out infinite;
  z-index: 2;
}
.ev-stage--mayra .ev-couple {
  left: auto;
  right: 2%;                  /* anchor bottom-right */
  bottom: 0;
  width: auto;
  height: 53.5%;              /* 15% shorter than the 63% default */
  transform: none;
  transform-origin: 100% 100%;
  animation: evMayraSubjectFloat 5.6s ease-in-out infinite;
  z-index: 4;                 /* outermost layer */
}
@keyframes evMayraSubjectFloat {
  0%, 100% { transform: translateY(0)     rotate(0.6deg); }
  50%      { transform: translateY(-18px) rotate(-0.6deg); }
}
@keyframes evMayraFgFloat {
  0%, 100% { transform: translateY(0)     rotate(-0.4deg); }
  50%      { transform: translateY(-12px) rotate(0.4deg); }
}

/* ── Baraat — bespoke layer layout ──
   The groom on the white horse (SUBJECT) is promoted to the outermost layer.
   The chhatri / umbrella (FG) sits behind him, but is raised well up its frame
   (it's painted low in its own art) and nudged right so the canopy hovers over
   and shades the groom's head — the look of a parasol carried over him in the
   procession. The pole falls away behind the rider, reinforcing the depth. */
.ev-stage--baraat .ev-fg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform: translate(7%, -36%) scale(1.08);
  transform-origin: 50% 50%;
  animation: evBaraatUmbrella 6s ease-in-out infinite;
  z-index: 2;
}
.ev-stage--baraat .ev-couple {
  left: 50%;
  bottom: 0;
  width: auto;
  height: 64%;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: evBaraatGroom 5.8s ease-in-out infinite;
  z-index: 4;                 /* outermost layer */
}
.ev-stage--baraat .ev-info { top: clamp(20px, 6%, 56px); }   /* lifted clear of the umbrella canopy */
@keyframes evBaraatUmbrella {
  0%, 100% { transform: translate(7%, -36%)   scale(1.08) rotate(-0.8deg); }
  50%      { transform: translate(7%, -38.5%) scale(1.08) rotate(0.8deg); }
}
@keyframes evBaraatGroom {
  0%, 100% { transform: translateX(-50%) translateY(0)    rotate(-0.4deg); }
  50%      { transform: translateX(-50%) translateY(-8px) rotate(0.4deg); }
}

/* ── Phera — bespoke layer layout ──
   The havan kund (FG) is reduced and grounded at the base of the card so it
   reads as the sacred fire resting on the mandap floor (the negative bottom
   crops the art's transparent foot so the altar base meets the ground). It is
   promoted to the OUTERMOST layer, so the couple (SUBJECT) stand behind it —
   the feel of the pheras being taken around the fire. A soft warm glow breathes
   under the flames. */
.ev-stage--phera .ev-fg {
  inset: auto;
  left: 50%;
  bottom: -7%;                /* drop the art's transparent foot off-frame so the altar base sits on the floor */
  width: 32%;                 /* compact fire on the mandap floor */
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: evPheraHavan 4.6s ease-in-out infinite;
  z-index: 4;                 /* outermost — the couple sits behind */
  filter: drop-shadow(0 -6px 18px rgba(255, 150, 40, 0.35)) drop-shadow(0 10px 14px rgba(60, 30, 18, 0.28));
}
.ev-stage--phera .ev-couple {
  left: 50%;
  bottom: 0;                  /* feet planted on the card base */
  height: 47%;                /* smaller; feet planted */
  width: auto;
  transform: translateX(-50%);
  transform-origin: 50% 100%; /* sway pivots from the feet — stays grounded */
  animation: evPheraCouple 6s ease-in-out infinite;
}
.ev-stage--phera .ev-info { top: clamp(28px, 9%, 72px); }   /* nudged up */
@keyframes evPheraCouple {
  0%, 100% { transform: translateX(-50%) rotate(-0.5deg); }
  50%      { transform: translateX(-50%) rotate(0.5deg); }
}
@keyframes evPheraHavan {
  0%, 100% { transform: translateX(-50%) scale(1);     filter: drop-shadow(0 -6px 18px rgba(255, 150, 40, 0.35)) drop-shadow(0 10px 14px rgba(60, 30, 18, 0.28)); }
  50%      { transform: translateX(-50%) scale(1.015);  filter: drop-shadow(0 -12px 28px rgba(255, 175, 65, 0.6)) drop-shadow(0 10px 14px rgba(60, 30, 18, 0.28)); }
}

/* ── Sangeet / Phera / Reception — seat the FG flush to the card bottom ──
   Each FG art carries a transparent band at its foot (measured ~10.8% / 17.6%
   / 19.7% of height), leaving a visible gap above the card edge. Push each FG
   down by that band so its content meets the bottom, and use a downward-only
   float so the breathing motion never re-opens the gap. */
.ev-stage--sangeet .ev-fg   { --fgdy: 11.5%; animation-name: evFgFloatDown; }
.ev-stage--reception .ev-fg { --fgdy: 20.5%; animation-name: evFgFloatDown; }
@keyframes evFgFloatDown {
  0%, 100% { transform: translateY(calc(var(--fgdy, 8%) + 0px))  rotate(-0.4deg); }
  50%      { transform: translateY(calc(var(--fgdy, 8%) + 12px)) rotate(0.4deg); }
}

/* ── text block — sits in the open upper area of each card ── */
.ev-info {
  position: absolute;
  top: clamp(48px, 14%, 104px);
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  text-align: center;
  z-index: 5;
  pointer-events: none;
}
.ev-info::before {
  content: "";
  position: absolute;
  inset: -26px -16% -34px;
  z-index: -1;
  pointer-events: none;
}
.ev-info--ink::before {
  background: radial-gradient(115% 100% at 50% 38%, rgba(255, 247, 234, 0.2), rgba(255, 247, 234, 0) 72%);
}
.ev-info--light::before {
  background: radial-gradient(115% 100% at 50% 38%, rgba(20, 8, 12, 0.28), rgba(20, 8, 12, 0) 72%);
}

.ev-name {
  margin: 0;
  font-family: var(--font-date);
  font-weight: 600;
  font-size: clamp(24px, 7.4vw, 36px);
  letter-spacing: 0.06em;
  line-height: 1.05;
}
.ev-sub {
  margin: 5px 0 0;
  font-family: var(--font-label);
  font-size: clamp(11px, 3vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ev-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0;
}
.ev-rule span {
  display: block;
  width: clamp(26px, 9vw, 46px);
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.ev-rule i {
  width: 6px; height: 6px;
  transform: rotate(45deg);
  background: currentColor;
  opacity: 0.8;
}
.ev-date {
  margin: 0;
  font-family: var(--font-date);
  font-weight: 600;
  font-size: clamp(18px, 4.93vw, 23.5px);   /* +12% */
  letter-spacing: 0.08em;
}
.ev-date sup {
  font-size: 0.56em;
  font-weight: 600;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 0.04em;
}
.ev-time {
  margin: 4px 0 0;
  font-family: var(--font-date);
  font-weight: 700;
  font-size: clamp(14.6px, 4.14vw, 19px);   /* +12% */
  letter-spacing: 0.05em;
}

/* ── theme: ink text on the pale cards ── */
.ev-info--ink .ev-name   { color: var(--mh-red); text-shadow: 0 1px 2px rgba(255, 247, 234, 0.7); }
.ev-info--ink .ev-sub    { color: var(--mh-marigold-deep); }
.ev-info--ink .ev-rule   { color: var(--gold); }
.ev-info--ink .ev-date   { color: var(--plum); text-shadow: 0 1px 2px rgba(255, 247, 234, 0.7); }
.ev-info--ink .ev-time   { color: var(--mh-brown); }

/* Carnival — terracotta / burnt-orange */
.ev-info--carnival .ev-name { color: #b8451f; }
.ev-info--carnival .ev-sub  { color: #9c6a2e; }
.ev-info--carnival .ev-rule { color: #c1502e; }

/* Mayra — shades of pink */
.ev-info--mayra .ev-name { color: #b23a63; }
.ev-info--mayra .ev-sub  { color: #c46a7e; }
.ev-info--mayra .ev-rule { color: #d1859a; }
.ev-info--mayra .ev-date { color: #a83d5b; }

/* raise the text block so the Nanihal Paksh names have breathing room
   above the illustrated figures */
.ev-info--raise { top: clamp(28px, 8%, 64px); }

/* ── Nanihal Paksh — family panel under the date/time ── */
.ev-nanihal {
  margin: clamp(10px, 3vw, 16px) auto 0;
  max-width: 30ch;
}
.ev-nanihal-head {
  margin: 0 0 6px;
  font-family: var(--font-date);
  font-weight: 700;
  font-size: clamp(15px, 4.2vw, 20px);
  letter-spacing: 0.1em;
  color: #8a1c45;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-shadow: 0 1px 2px rgba(255, 247, 234, 0.7);
}
.ev-nanihal-name {
  margin: 1px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(13px, 3.6vw, 16px);
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: #7a2440;
}
.ev-nanihal-lead {
  font-weight: 600;
  font-size: clamp(14px, 3.9vw, 17px);
}
.ev-nanihal-place {
  margin: 5px 0 0;
  font-family: var(--font-label);
  font-size: clamp(10px, 2.9vw, 12px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a8536b;
}

/* Phera — royal red + marigold */
.ev-info--phera .ev-name { color: #8a1c20; }
.ev-info--phera .ev-sub  { color: #b07a18; }
.ev-info--phera .ev-rule { color: #c8881f; }

/* Baraat — warm regal ink on the pale peach courtyard backdrop */
.ev-info--baraat .ev-name { color: #9c2b22; }   /* royal red */
.ev-info--baraat .ev-rule { color: #c8881f; }   /* marigold */
.ev-info--baraat .ev-date { color: #7a2f1a; }   /* deep terracotta-brown */
.ev-info--baraat .ev-time { color: #5f4733; }   /* warm brown */

/* ── theme: ivory / champagne text on the dark cards ── */
.ev-info--light .ev-name {
  color: var(--mh-ivory);
  text-shadow: 0 2px 10px rgba(20, 6, 10, 0.78), 0 0 22px rgba(0, 0, 0, 0.35);
}
.ev-info--light .ev-sub  { color: var(--gold-soft); text-shadow: 0 1px 6px rgba(20, 6, 10, 0.7); }
.ev-info--light .ev-rule { color: var(--gold-soft); }
.ev-info--light .ev-date {
  color: #fff3e0;
  text-shadow: 0 2px 9px rgba(20, 6, 10, 0.8);
}
.ev-info--light .ev-time {
  color: #f3e2cd;
  text-shadow: 0 1px 7px rgba(20, 6, 10, 0.74);
}

/* Sangeet — scarlet glam */
.ev-info--sangeet .ev-name { color: #ffe1c4; }
.ev-info--sangeet .ev-sub  { color: #e9b87a; }

/* Reception — champagne on midnight */
.ev-info--reception .ev-name { color: #f3e7cc; }
/* tighter spacing pulls the subtitle inward (more breathing room left/right),
   bolder weight gives it presence */
.ev-info--reception .ev-sub  { color: #d8c08a; letter-spacing: 0.08em; font-weight: 700; }
.ev-info--reception .ev-date { color: #e7d5a8; }

@media (prefers-reduced-motion: reduce) {
  .ev-couple, .ev-fg { animation: none; }
  .ev-card { transition: opacity 600ms ease; transform: none; }
}


/* ============================================================
   LOVE & BLESSINGS  (venue backdrop + hanging decor — muskan style)
   Single page: cream-sky venue bg, hanging trees + fairy-lights with
   pointer parallax, and the three blessing groups revealed in cascade.
   ============================================================ */
.blessings-screen {
  --bl-gold: #b1862f;
  --bl-gold-soft: #c19247;
  --bl-red: #9c2b22;
  --bl-green: #33492b;
  --bl-parallax-x: 0px;
  --bl-parallax-y: 0px;

  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #fbf4e6 0%, #f6ecd8 48%, #eadfc6 100%);
  color: var(--bl-gold);
}

.blessings-bg,
.blessings-wash,
.blessings-decor,
.blessings-petals { position: absolute; pointer-events: none; }

.blessings-bg,
.blessings-wash { inset: 0; }

.blessings-bg {
  z-index: 0;
  background-image: url('assets/love%20and%20blessings/blessings_bg.webp');
  background-size: cover;
  background-position: center bottom;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1.35s ease, transform 2.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.blessings-screen.is-visible .blessings-bg { opacity: 1; transform: scale(1); }

.blessings-wash {
  z-index: 1;
  background:
    radial-gradient(ellipse 74% 40% at 50% 30%, rgba(255, 250, 238, 0.46), transparent 72%),
    linear-gradient(to bottom, rgba(255, 250, 238, 0.18), rgba(255, 250, 238, 0) 56%);
}

/* ── hanging decor: trees + fairy lights — reveal + pointer parallax ── */
.blessings-decor {
  z-index: 3;
  opacity: 0;
  transform: translate3d(var(--bl-parallax-x, 0px), calc(var(--bl-parallax-y, 0px) - 18px), 0) scale(0.985);
  transition:
    opacity 1.05s ease var(--decor-delay, 700ms),
    transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) var(--decor-delay, 700ms);
  will-change: transform, opacity;
}
.blessings-screen.is-visible .blessings-decor {
  opacity: var(--decor-opacity, 0.97);
  transform: translate3d(var(--bl-parallax-x, 0px), var(--bl-parallax-y, 0px), 0) scale(1);
}
.blessings-decor img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

.blessings-top-left {
  --decor-delay: 640ms;
  top: clamp(-14px, -2vh, -6px);
  left: clamp(-40px, -7vw, -16px);
  width: clamp(146px, 43vw, 224px);
  transform-origin: 12% 0;
  animation: blDecorFloatLeft 4.8s ease-in-out infinite;
  filter: drop-shadow(0 0 9px rgba(252, 218, 141, 0.22)) drop-shadow(0 12px 18px rgba(96, 87, 58, 0.10));
}
.blessings-top-right {
  --decor-delay: 720ms;
  top: clamp(-14px, -2vh, -6px);
  right: clamp(-40px, -7vw, -16px);
  width: clamp(146px, 43vw, 224px);
  transform-origin: 88% 0;
  animation: blDecorFloatRight 5.2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(252, 218, 141, 0.24)) drop-shadow(0 12px 18px rgba(96, 87, 58, 0.10));
}
.blessings-top-left::after,
.blessings-top-right::after {
  content: '';
  position: absolute;
  top: clamp(58px, 17vw, 96px);
  width: clamp(44px, 13vw, 66px);
  height: clamp(46px, 13.5vw, 70px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 156, 0.45) 0 16%, rgba(255, 206, 103, 0.24) 32%, transparent 69%);
  filter: blur(8px);
  opacity: 0.6;
  mix-blend-mode: screen;
  animation: blChandelierGlow 2.6s ease-in-out infinite;
}
.blessings-top-left::after  { left: clamp(44px, 15vw, 78px); }
.blessings-top-right::after { right: clamp(44px, 15vw, 78px); animation-delay: 0.8s; }

.blessings-top-center {
  --decor-delay: 520ms;
  --decor-opacity: 0.95;
  top: clamp(-14px, -1.5vh, 0px);   /* fairy-lights hung at the very top */
  left: 50%;
  translate: -50% 0;
  width: clamp(230px, 86vw, 430px);
  transform-origin: 50% 0;
  filter: drop-shadow(0 0 8px rgba(255, 220, 137, 0.34)) drop-shadow(0 2px 8px rgba(145, 109, 46, 0.12));
}
.blessings-screen.is-visible .blessings-top-center { animation: blSeriesGlow 4.6s ease-in-out infinite; }

/* ── content block ── */
.blessings-content {
  position: absolute;
  z-index: 4;
  top: clamp(98px, 15vh, 158px);   /* heading lifted toward the top */
  left: 50%;
  width: min(88vw, 398px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-shadow: 0 1px 10px rgba(255, 252, 244, 0.5);
}

.blessings-reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.965);
  filter: blur(8px);
  transition:
    opacity 1.1s ease var(--blessings-delay, 0ms),
    transform 1.25s cubic-bezier(0.22, 1, 0.36, 1) var(--blessings-delay, 0ms),
    filter 1.1s ease var(--blessings-delay, 0ms);
}
.blessings-screen.is-visible .blessings-reveal {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.blessings-kicker {
  margin: 0 0 8px;
  color: var(--bl-gold);
  font-family: var(--font-date);
  font-size: clamp(0.58rem, 2.4vw, 0.7rem);
  font-weight: 600;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
}

.blessings-heading {
  margin: 0;
  color: #8a2a2b;
  font-family: 'Great Vibes', 'Allura', cursive;
  font-size: clamp(2.5rem, 11vw, 3.7rem);
  font-weight: 400;
  line-height: 1.04;
}
.blessings-amp { color: var(--bl-gold); }
.blessings-screen.is-visible .blessings-heading { animation: blHeadingGlow 4.6s ease-in-out 1.4s infinite; }

.blessings-divider {
  position: relative;
  width: clamp(70px, 22vw, 120px);
  height: 1px;
  margin: clamp(10px, 1.8vh, 16px) auto clamp(16px, 2.6vh, 24px);
  background: linear-gradient(90deg, transparent, rgba(177, 134, 47, 0.7), transparent);
}
.blessings-divider::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  background: var(--bl-gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

.blessings-group { width: 100%; margin: 0 0 clamp(12px, 2.2vh, 20px); }
.blessings-group:last-child { margin-bottom: 0; }

.blessings-relation {
  margin: 0 0 5px;
  color: var(--bl-red);
  font-family: var(--font-date);
  font-size: clamp(0.6rem, 2.5vw, 0.74rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
}
.blessings-names {
  margin: 0 auto;
  max-width: 30em;
  color: var(--bl-green);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(0.86rem, 3.5vw, 1.02rem);
  font-weight: 600;
  line-height: 1.45;
  text-shadow: 0 1px 6px rgba(255, 250, 240, 0.55);
}
.blessings-names .bl-sep {
  margin: 0 0.45em;
  color: var(--bl-gold);
  font-weight: 400;
  opacity: 0.72;
}

/* ── petal shower (behind the decor + content, above the bg) ── */
.blessings-petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.blessings-petal {
  position: absolute;
  top: 0;
  left: var(--p-left, 50%);
  width: var(--p-size, 24px);
  animation: bpSway var(--p-sway-dur, 3.2s) ease-in-out var(--p-delay, 0s) infinite alternate;
  will-change: transform;
}
.blessings-petal img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform-origin: 50% 20%;
  animation: bpFall var(--p-fall-dur, 7s) ease-in var(--p-delay, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes bpSway {
  0%   { transform: translateX(0); }
  28%  { transform: translateX(var(--p-sway, 22px)); }
  52%  { transform: translateX(calc(var(--p-sway, 22px) * -0.35)); }
  74%  { transform: translateX(var(--p-sway, 22px)); }
  100% { transform: translateX(calc(var(--p-sway, 22px) * 0.55)); }
}
@keyframes bpFall {
  0%   { transform: translateY(-80px)  rotate(var(--p-r0, -20deg)) scale(0.55); opacity: 0; }
  5%   { opacity: var(--p-op, 0.62);   transform: translateY(4vh)   rotate(calc(var(--p-r0, -20deg) + 18deg)) scale(1); }
  92%  { opacity: var(--p-op, 0.62); }
  100% { transform: translateY(var(--fall-h, 200vh)) rotate(var(--p-r1, 230deg)) scale(0.88); opacity: 0; }
}

/* ── decor float + glow keyframes ── */
@keyframes blDecorFloatLeft {
  0%, 100% { rotate: -4deg; translate: 0 0; }
  50%      { rotate: 4deg;  translate: 6px 7px; }
}
@keyframes blDecorFloatRight {
  0%, 100% { rotate: 4deg;  translate: 0 0; }
  50%      { rotate: -4deg; translate: -6px 7px; }
}
@keyframes blChandelierGlow {
  0%, 100% { opacity: 0.4;  transform: scale(0.9)  translateX(-6px); }
  48%      { opacity: 0.92; transform: scale(1.16) translateX(6px); }
}
@keyframes blHeadingGlow {
  0%, 100% { text-shadow: 0 1px 10px rgba(255, 252, 244, 0.5); }
  50%      { text-shadow: 0 1px 12px rgba(255, 252, 244, 0.66), 0 0 22px rgba(200, 136, 31, 0.4); }
}
/* fairy-light twinkle — irregular bright flashes between a soft warm glow */
@keyframes blSeriesGlow {
  0%   { filter: drop-shadow(0 0 6px rgba(255, 220, 137, 0.30)) brightness(1);    opacity: 0.9; }
  7%   { filter: drop-shadow(0 0 22px rgba(255, 226, 150, 0.80)) brightness(1.55); opacity: 1; }
  13%  { filter: drop-shadow(0 0 8px rgba(255, 220, 137, 0.34)) brightness(1.04); opacity: 0.92; }
  37%  { filter: drop-shadow(0 0 26px rgba(255, 230, 162, 0.85)) brightness(1.62); opacity: 1; }
  43%  { filter: drop-shadow(0 0 9px rgba(255, 220, 137, 0.34)) brightness(1.05); opacity: 0.92; }
  69%  { filter: drop-shadow(0 0 28px rgba(255, 232, 168, 0.9)) brightness(1.66);  opacity: 1; }
  76%  { filter: drop-shadow(0 0 8px rgba(255, 220, 137, 0.3)) brightness(1.02);  opacity: 0.9; }
  100% { filter: drop-shadow(0 0 6px rgba(255, 220, 137, 0.30)) brightness(1);    opacity: 0.9; }
}

@media (max-height: 760px) {
  .blessings-content { top: clamp(88px, 13vh, 132px); width: min(90vw, 372px); }
  .blessings-heading { font-size: clamp(2.2rem, 9vw, 3rem); }
  .blessings-group   { margin-bottom: clamp(9px, 1.6vh, 15px); }
  .blessings-names   { font-size: clamp(0.8rem, 3.3vw, 0.96rem); line-height: 1.36; }
}


/* ============================================================
   CONCERNS  (business concerns / compliments — below RSVP)
   ============================================================ */
.concerns-screen {
  position: relative;
  padding: clamp(54px, 10vw, 92px) 20px clamp(58px, 11vw, 100px);
  /* continuous sage wash — top matches rsvp's bottom, bottom matches countdown's top */
  background: linear-gradient(180deg, #dde9e0 0%, #d4e2d8 100%);
  overflow: hidden;
}
.concerns-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.concerns-kicker {
  margin: 0 0 10px;
  color: var(--mh-marigold-deep);
  font-family: var(--font-label);
  font-size: clamp(11px, 3vw, 14px);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
}
.concerns-title {
  margin: 0;
  color: var(--mh-red);
  font-family: var(--font-date);
  font-weight: 600;
  font-size: clamp(28px, 8vw, 46px);
  letter-spacing: 0.06em;
}
.concerns-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px 0 clamp(22px, 4vw, 34px);
}
.concerns-divider span {
  display: block;
  width: clamp(34px, 12vw, 64px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.concerns-divider i {
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--mh-marigold);
  box-shadow: 0 0 0 3px rgba(200, 136, 31, 0.18);
}
.concerns-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: clamp(12px, 2.6vw, 18px);
  max-width: 460px;
}
.concerns-item {
  margin: 0;
  color: var(--mh-brown);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.1rem, 4.6vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-bottom: clamp(10px, 2.2vw, 16px);
  border-bottom: 1px solid rgba(184, 146, 69, 0.3);
}
.concerns-item:last-child { border-bottom: none; padding-bottom: 0; }

.concerns-reveal {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(10px);
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.concerns-screen.is-visible .concerns-reveal { opacity: 1; transform: none; filter: blur(0); }
.concerns-screen.is-visible .concerns-title              { transition-delay: 120ms; }
.concerns-screen.is-visible .concerns-divider            { transition-delay: 260ms; }
.concerns-screen.is-visible .concerns-item:nth-child(1)  { transition-delay: 380ms; }
.concerns-screen.is-visible .concerns-item:nth-child(2)  { transition-delay: 500ms; }
.concerns-screen.is-visible .concerns-item:nth-child(3)  { transition-delay: 620ms; }
.concerns-screen.is-visible .concerns-item:nth-child(4)  { transition-delay: 740ms; }


/* ============================================================
   VENUE / MAP  (structure from muskan-weds-kush)
   ============================================================ */
.venue-section {
  --venue-sage: #7a4a2e;
  --venue-sage-deep: #6b3c22;
  --venue-sage-soft: #9a6a4a;
  --venue-gold: #b08a4a;
  --venue-gold-warm: #bd9450;
  --venue-paper: #fbf3e6;
  --venue-parallax-x: 0px;
  --venue-parallax-y: 0px;

  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  /* premium light sage / sea-green — one continuous wash from the map through
     to the countdown: this section's bottom == the next section's top. */
  background: linear-gradient(180deg, #eef4ee 0%, #e6efe7 100%);
  color: var(--venue-sage);
}
.venue-section::before,
.venue-section::after,
.venue-paper-texture,
.venue-route-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.venue-route-layer { z-index: 2; overflow: hidden; }
.venue-route {
  position: absolute;
  top: clamp(300px, 45vh, 412px);
  left: 50%;
  width: clamp(320px, 104vw, 520px);
  height: auto;
  opacity: 0;
  transform: translateX(-52%) rotate(-5deg) scaleX(0);
  transform-origin: 0 50%;
  filter: drop-shadow(0 4px 8px rgba(176, 138, 74, 0.10));
  transition: opacity 0.9s ease 180ms, transform 1.7s cubic-bezier(0.16, 1, 0.3, 1) 180ms;
}
.venue-section.is-visible .venue-route {
  opacity: 0.55;
  transform: translateX(-52%) rotate(-5deg) scaleX(1);
}
.venue-route-track {
  position: absolute;
  top: clamp(300px, 45vh, 412px);
  left: 50%;
  width: clamp(320px, 104vw, 520px);
  height: auto;
  transform: translateX(-52%) rotate(-5deg);
  transform-origin: 0 50%;
  opacity: 0;
  overflow: visible;
  transition: opacity 0.9s ease 700ms;
}
.venue-section.is-visible .venue-route-track { opacity: 1; }
.venue-route-dot { filter: drop-shadow(0 0 10px rgba(212, 165, 77, 0.6)); }
.venue-section::before {
  content: '';
  z-index: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(176, 138, 74, 0.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 30%, rgba(150, 90, 40, 0.06) 0 1px, transparent 1.5px),
    radial-gradient(circle at 46% 76%, rgba(176, 138, 74, 0.06) 0 1px, transparent 1.5px);
  background-size: 24px 24px, 31px 31px, 36px 36px;
  opacity: 0.48;
}
.venue-section::after {
  content: '';
  z-index: 1;
  box-shadow: none;   /* no edge vignette → seamless seam with the next section */
}
.venue-paper-texture {
  z-index: 1;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 28%, rgba(176, 138, 74, 0.03) 54%, transparent 78%),
    repeating-linear-gradient(86deg, rgba(150, 120, 90, 0.02) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.venue-section.is-visible .venue-paper-texture { opacity: 1; }

.venue-content {
  position: absolute;
  z-index: 5;
  top: clamp(40px, 6vh, 74px);
  left: 50%;
  width: min(86vw, 356px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateX(-50%);
}
.venue-nav-icon {
  margin: clamp(4px, 1vh, 9px) 0 clamp(12px, 2.2vh, 20px);
  width: clamp(38px, 10vw, 50px);
  height: clamp(38px, 10vw, 50px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--venue-gold);
  background: radial-gradient(circle, rgba(255, 250, 238, 0.8), rgba(255, 246, 230, 0.22) 70%, transparent);
  filter: drop-shadow(0 4px 10px rgba(142, 95, 40, 0.14));
  animation: venueNavPulse 3.4s ease-in-out infinite;
}
.venue-nav-icon svg { width: 56%; height: 56%; fill: currentColor; }
@keyframes venueNavPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-3px) scale(1.06); }
}

.venue-reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(5px);
  transition:
    opacity 0.95s ease var(--venue-delay, 0ms),
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) var(--venue-delay, 0ms),
    filter 0.95s ease var(--venue-delay, 0ms);
}
.venue-section.is-visible .venue-reveal { opacity: 1; transform: translateY(0); filter: blur(0); }

.venue-label {
  margin: 0 0 clamp(6px, 1vh, 10px);
  color: var(--venue-gold);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(13px, 3.5vw, 17px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.55);
}

.venue-card {
  width: min(100%, 340px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(4px, 1.4vh, 12px) 8px 0;
}
.venue-pin-wrap {
  position: relative;
  width: clamp(96px, 30vw, 146px);
  height: clamp(96px, 30vw, 146px);
  margin: 0 auto clamp(8px, 1.6vh, 14px);
}
.venue-pin {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(142, 95, 40, 0.18));
  opacity: 0;
  transform: translateY(-22px) scale(0.88);
}
.venue-section.is-visible .venue-pin {
  animation: venuePinDrop 1.05s cubic-bezier(0.18, 0.86, 0.28, 1.12) 640ms forwards;
}
.venue-pin-pulse {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 52%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 165, 77, 0.22), rgba(212, 165, 77, 0.06) 50%, transparent 72%);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
}
.venue-section.is-visible .venue-pin-pulse {
  animation: venuePinPulse 2.8s ease-out 1.2s infinite;
}
.venue-card h3 {
  margin: 0 0 clamp(7px, 1.2vh, 11px);
  color: var(--venue-sage-deep);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(19px, 5.4vw, 28px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: 0.025em;
}
.venue-card p {
  margin: 0 auto clamp(15px, 2.7vh, 22px);
  max-width: 26em;
  color: var(--venue-sage-soft);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(15px, 4.2vw, 19px);
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: 0.035em;
}
.venue-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin-top: clamp(8px, 1.6vh, 14px);
  padding: 4px 8px;
  border: none;
  background: none;
  color: var(--venue-gold);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(14px, 4vw, 18px);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease;
}
.venue-button::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 1px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(176, 138, 74, 0.9), transparent);
  transform: scaleX(0.5);
  opacity: 0.7;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.venue-button:hover, .venue-button:focus-visible { color: var(--venue-gold-warm); }
.venue-button:hover::after, .venue-button:focus-visible::after { transform: scaleX(1); opacity: 1; }
.venue-button:focus-visible { outline: 2px solid rgba(176, 138, 74, 0.42); outline-offset: 3px; border-radius: 4px; }
.venue-button-arrow { display: inline-block; transition: transform 0.25s ease; }
.venue-button:hover .venue-button-arrow, .venue-button:focus-visible .venue-button-arrow { transform: translateX(3px); }
.venue-tap-note {
  display: block;
  margin-top: clamp(8px, 1.5vh, 12px);
  color: rgba(150, 106, 74, 0.78);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(11px, 3vw, 13px);
  letter-spacing: 0.08em;
}

.venue-illustration {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(6px, 1.2vh, 16px));
  width: clamp(244px, 74vw, 360px);
  height: auto;
  opacity: 0;
  transform:
    translate3d(calc(-50% + var(--venue-parallax-x, 0px)), calc(46px + var(--venue-parallax-y, 0px)), 0)
    scale(0.94);
  filter: drop-shadow(0 16px 24px rgba(120, 80, 50, 0.16));
  transition: opacity 1.35s ease 820ms, transform 1.75s cubic-bezier(0.16, 1, 0.3, 1) 820ms;
  animation: venueIllustrationFloat 8s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.venue-section.is-visible .venue-illustration {
  opacity: 0.96;
  transform: translate3d(calc(-50% + var(--venue-parallax-x, 0px)), var(--venue-parallax-y, 0px), 0) scale(1);
}
@keyframes venuePinDrop {
  0%   { opacity: 0; transform: translateY(-24px) scale(0.88); }
  64%  { opacity: 1; transform: translateY(4px) scale(1.04); }
  82%  { opacity: 1; transform: translateY(-2px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes venuePinPulse {
  0%   { opacity: 0.44; transform: translate(-50%, -50%) scale(0.58); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.75); }
}
@keyframes venueIllustrationFloat {
  0%, 100% { rotate: -0.6deg; translate: 0 0;    scale: 1; }
  50%       { rotate: 0.7deg;  translate: 0 -7px; scale: 1.014; }
}
@media (max-height: 740px) {
  .venue-content { top: clamp(58px, 8vh, 78px); width: min(88vw, 346px); }
  .venue-card h3 { font-size: clamp(18px, 5vw, 24px); }
  .venue-card p { margin-bottom: 12px; }
  .venue-illustration { width: clamp(216px, 64vw, 300px); bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); }
}
@media (min-width: 600px) and (orientation: landscape) {
  .venue-section { min-height: 820px; max-width: 430px; margin: 0 auto; }
}


/* ============================================================
   RSVP  (contact cards — WhatsApp + Call)
   ============================================================ */
.rsvp-screen {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  /* continuous sage wash — top matches venue's bottom, bottom matches concerns' top */
  background: linear-gradient(180deg, #e6efe7 0%, #dde9e0 100%);
  color: var(--mh-red);
}
.rsvp-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  box-shadow: none;   /* no edge vignette → seamless seams */
}
.rsvp-inner {
  position: relative;
  z-index: 1;
  width: min(88%, 400px);
  margin: 0 auto;
  padding: 8dvh 0 8dvh;
  text-align: center;
}
.rsvp-title {
  margin: 0 0 12px;
  color: var(--mh-red);
  font-family: var(--font-script);
  font-size: clamp(2.8rem, 12vw, 4rem);
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 2px 16px rgba(255, 255, 255, 0.64);
  transform-origin: center bottom;
}
.rsvp-sub {
  margin: 0 0 4dvh;
  color: rgba(120, 70, 40, 0.78);
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 4.1vw, 1.14rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
}
.rsvp-contacts { display: grid; gap: 10px; text-align: left; }
.rsvp-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(200, 136, 31, 0.34);
  background: rgba(255, 247, 234, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.rsvp-info { display: grid; gap: 2px; flex: 1; min-width: 0; }
.rsvp-name {
  font-family: var(--font-display);
  font-size: clamp(0.94rem, 3.9vw, 1.06rem);
  font-weight: 600;
  color: var(--mh-brown);
}
.rsvp-phone {
  font-family: var(--font-date);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgba(120, 80, 50, 0.7);
}
.rsvp-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rsvp-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 220ms ease, filter 220ms ease, box-shadow 220ms ease;
}
.rsvp-btn:active { transform: scale(0.88); }
.rsvp-btn:hover, .rsvp-btn:focus-visible { transform: translateY(-2px); outline: none; }
.rsvp-btn--wa {
  background: var(--mh-green);
  color: #fff;
  box-shadow: 0 4px 14px rgba(76, 111, 58, 0.4), 0 0 0 1px rgba(76, 111, 58, 0.22);
}
.rsvp-btn--wa:hover, .rsvp-btn--wa:focus-visible {
  background: #5c8044;
  box-shadow: 0 6px 20px rgba(76, 111, 58, 0.54), 0 0 0 1px rgba(76, 111, 58, 0.34);
}
.rsvp-btn--call {
  background: var(--mh-terracotta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(193, 80, 46, 0.4), 0 0 0 1px rgba(193, 80, 46, 0.22);
}
.rsvp-btn--call:hover, .rsvp-btn--call:focus-visible {
  background: #d05d38;
  box-shadow: 0 6px 20px rgba(193, 80, 46, 0.54), 0 0 0 1px rgba(193, 80, 46, 0.34);
}
.rsvp-line { opacity: 0; filter: blur(12px); }
.rsvp-contacts .rsvp-card {
  transform: translateX(36px);
  transition:
    opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1000ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rsvp-line:not(.rsvp-card) {
  transform: translateY(32px);
  transition:
    opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rsvp-screen.is-revealed .rsvp-line { opacity: 1; filter: blur(0); }
.rsvp-screen.is-revealed .rsvp-line:not(.rsvp-card) { transform: translateY(0); }
.rsvp-screen.is-revealed .rsvp-contacts .rsvp-card { transform: translateX(0); }
.rsvp-screen.is-revealed .rsvp-title { animation: cinemaRsvpTitle 1.5s cubic-bezier(0.16, 1, 0.3, 1) 80ms both; }
.rsvp-screen.is-revealed .rsvp-sub               { transition-delay: 280ms; }
.rsvp-screen.is-revealed .rsvp-card:nth-child(1) { transition-delay: 420ms; }
.rsvp-screen.is-revealed .rsvp-card:nth-child(2) { transition-delay: 530ms; }
.rsvp-screen.is-revealed .rsvp-card:nth-child(3) { transition-delay: 640ms; }
.rsvp-screen.is-revealed .rsvp-card:nth-child(4) { transition-delay: 750ms; }
.rsvp-screen.is-revealed .rsvp-card:nth-child(5) { transition-delay: 860ms; }
.rsvp-screen.is-revealed .rsvp-card:nth-child(6) { transition-delay: 970ms; }
@keyframes cinemaRsvpTitle {
  from { opacity: 0; transform: scale(0.68) translateY(28px); filter: blur(22px); }
  40%  { opacity: 1; filter: blur(0); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}


/* ============================================================
   COUNTDOWN + FOOTER  (structure from muskan-weds-kush)
   ============================================================ */
.countdown-section {
  --countdown-rose: #9c2b22;
  --countdown-sage: #7a4a2e;
  --countdown-sage-deep: #6b3c22;
  --countdown-sage-soft: #9a6a4a;
  --countdown-gold: #c8881f;
  --countdown-ivory: #fff7ea;

  position: relative;
  width: 100%;
  min-height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  /* continuous sage wash — top matches concerns' bottom; grounds the page end */
  background: linear-gradient(180deg, #d4e2d8 0%, #cbdcd1 100%);
  color: var(--countdown-sage);
}
.countdown-section::before,
.countdown-section::after,
.countdown-bg,
.countdown-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.countdown-section::before {
  content: '';
  z-index: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(200, 136, 31, 0.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 30%, rgba(150, 90, 40, 0.07) 0 1px, transparent 1.5px),
    radial-gradient(circle at 46% 76%, rgba(156, 43, 34, 0.06) 0 1px, transparent 1.5px);
  background-size: 24px 24px, 31px 31px, 36px 36px;
  opacity: 0.5;
}
.countdown-section::after {
  content: '';
  z-index: 1;
  box-shadow: none;   /* no edge vignette → seamless seam with concerns above */
}
.countdown-bg {
  z-index: 1;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 28%, rgba(200, 136, 31, 0.04) 54%, transparent 78%),
    repeating-linear-gradient(86deg, rgba(150, 120, 80, 0.02) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.countdown-section.is-visible .countdown-bg { opacity: 1; transform: scale(1); }
.countdown-particles { z-index: 2; overflow: hidden; }
.countdown-particles span {
  position: absolute;
  width: var(--dust-size, 5px);
  height: var(--dust-size, 5px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 179, 0.96), rgba(216, 149, 31, 0.5) 55%, transparent 74%);
  box-shadow: 0 0 10px rgba(216, 149, 31, 0.4);
  opacity: 0;
  animation: countdownDust var(--dust-duration, 9s) ease-in-out var(--dust-delay, 0s) infinite;
}
.countdown-particles span:nth-child(1) { --dust-size: 5px; --dust-duration: 8.5s; --dust-delay: -1s; left: 13%; top: 24%; }
.countdown-particles span:nth-child(2) { --dust-size: 4px; --dust-duration: 10s;  --dust-delay: -5s; left: 78%; top: 18%; }
.countdown-particles span:nth-child(3) { --dust-size: 6px; --dust-duration: 11s;  --dust-delay: -3s; left: 86%; top: 55%; }
.countdown-particles span:nth-child(4) { --dust-size: 4px; --dust-duration: 9.5s; --dust-delay: -7s; left: 20%; top: 66%; }
.countdown-particles span:nth-child(5) { --dust-size: 5px; --dust-duration: 12s;  --dust-delay: -2s; left: 62%; top: 78%; }
.countdown-particles span:nth-child(6) { --dust-size: 3px; --dust-duration: 8s;   --dust-delay: -4s; left: 42%; top: 13%; }

.countdown-content {
  position: relative;
  z-index: 4;
  min-height: 100dvh;
  min-height: 100svh;
  width: min(90vw, 380px);
  margin: 0 auto;
  padding:
    calc(env(safe-area-inset-top, 0px) + clamp(52px, 7.2vh, 80px))
    0
    calc(env(safe-area-inset-bottom, 0px) + clamp(20px, 3.4vh, 34px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.countdown-reveal {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(5px);
  transition:
    opacity 0.95s ease var(--countdown-delay, 0ms),
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) var(--countdown-delay, 0ms),
    filter 0.95s ease var(--countdown-delay, 0ms);
}
.countdown-section.is-visible .countdown-reveal { opacity: 1; transform: translateY(0); filter: blur(0); }
.countdown-eyebrow {
  margin: 0 0 clamp(6px, 1.1vh, 10px);
  color: var(--countdown-gold);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(14px, 3.8vw, 18px);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
/* wider gap between the three words of "Counting down to" */
.countdown-eyebrow span.cd-space { width: 0.6em; }
.countdown-eyebrow span {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(3px);
  transition:
    opacity 0.62s ease calc(var(--countdown-delay, 0ms) + var(--letter-delay, 0ms)),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--countdown-delay, 0ms) + var(--letter-delay, 0ms)),
    filter 0.62s ease calc(var(--countdown-delay, 0ms) + var(--letter-delay, 0ms));
}
.countdown-section.is-visible .countdown-eyebrow span { opacity: 1; transform: translateY(0); filter: blur(0); }
.countdown-names {
  position: relative;
  margin: 0;
  color: var(--countdown-rose);
  font-family: 'Pinyon Script', 'Brush Script MT', cursive;
  font-size: clamp(54px, 15vw, 78px);
  line-height: 0.92;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 16px rgba(255, 255, 255, 0.64);
  clip-path: inset(0 100% 0 0);
}
.countdown-names::before {
  content: '';
  position: absolute;
  inset: -28% -18%;
  z-index: -1;
  background: radial-gradient(ellipse, rgba(216, 149, 31, 0.22), transparent 70%);
  animation: countdownNameGlow 4.8s ease-in-out infinite;
}
.countdown-section.is-visible .countdown-names {
  animation: countdownInkReveal 1.55s cubic-bezier(0.16, 1, 0.3, 1) 460ms forwards;
}
.countdown-divider {
  width: clamp(86px, 24vw, 126px);
  height: clamp(18px, 3vh, 24px);
  margin: clamp(12px, 2vh, 18px) auto clamp(14px, 2.4vh, 22px);
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(200, 136, 31, 0.64) 0 2.4px, transparent 2.9px),
    radial-gradient(circle at 43% 50%, rgba(200, 136, 31, 0.36) 0 1.5px, transparent 1.9px),
    radial-gradient(circle at 57% 50%, rgba(200, 136, 31, 0.36) 0 1.5px, transparent 1.9px);
}
.countdown-divider::before,
.countdown-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(200, 136, 31, 0.66));
  transition: width 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--countdown-delay, 0ms);
}
.countdown-divider::before { right: 50%; }
.countdown-divider::after  { left: 50%; transform: scaleX(-1); }
.countdown-section.is-visible .countdown-divider::before,
.countdown-section.is-visible .countdown-divider::after { width: 44%; }
.countdown-grid {
  width: min(78vw, 320px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2.4vw, 14px);
  margin-bottom: clamp(18px, 3vh, 26px);
}
.countdown-card {
  position: relative;
  aspect-ratio: 0.75;
  display: grid;
  place-items: center;
  isolation: isolate;
  filter: drop-shadow(0 12px 18px rgba(150, 90, 40, 0.14));
  transform-origin: center;
}
.countdown-card-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.94;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* no fill behind the frame art — the block.webp frame's transparent corners
   show the sage section through (no cream tile). */
.countdown-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 72%;
  min-height: 58%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(1px);
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.62);
}
.countdown-number {
  color: var(--countdown-sage-deep);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(31px, 9.5vw, 48px);
  line-height: 0.92;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.35s ease, color 0.35s ease, text-shadow 0.35s ease;
}
.countdown-label {
  margin-top: clamp(6px, 1.3vh, 10px);
  color: var(--countdown-gold);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(10px, 2.7vw, 13px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.countdown-card.is-changing { animation: countdownCardPulse 0.52s ease; }
.countdown-card.is-changing .countdown-number {
  color: var(--countdown-gold);
  transform: translateY(-3px) scale(1.04);
  text-shadow: 0 0 16px rgba(226, 175, 100, 0.5);
}
.wedding-footer {
  margin-top: auto;
  padding-top: clamp(4px, 1vh, 10px);
  width: 100%;
  color: var(--countdown-sage-soft);
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.wedding-footer p { margin: 0; }
.footer-names {
  color: var(--countdown-rose);
  font-family: var(--font-script);
  font-size: clamp(32px, 9vw, 48px);
  line-height: 1;
}
.footer-date,
.footer-venue {
  font-size: clamp(12px, 3.25vw, 15px);
  line-height: 1.34;
  letter-spacing: 0.12em;
}
.footer-date {
  margin-top: clamp(7px, 1.2vh, 10px) !important;
  color: var(--countdown-sage);
  font-family: var(--font-date);   /* Cinzel — even lining numerals, matches the hero date */
  text-transform: uppercase;
  white-space: nowrap;   /* keep "6th - 7th July 2026" on a single line */
}
.footer-date sup {
  font-size: 0.6em;
  vertical-align: super;
  letter-spacing: 0;
}
.footer-venue { color: var(--countdown-sage-soft); }
.footer-credit {
  margin-top: clamp(13px, 2.1vh, 18px) !important;
  color: rgba(150, 106, 74, 0.82);
  font-size: clamp(11px, 3vw, 13px);
  letter-spacing: 0.08em;
}
.footer-credit a {
  position: relative;
  color: var(--countdown-gold);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.footer-credit a:hover, .footer-credit a:focus-visible {
  color: #d49526;
  text-shadow: 0 0 12px rgba(224, 175, 90, 0.3);
}
@keyframes countdownInkReveal { to { clip-path: inset(0 0 0 0); } }
@keyframes countdownNameGlow {
  0%, 100% { opacity: 0.56; transform: scale(0.96); }
  48%      { opacity: 0.88; transform: scale(1.04); }
}
@keyframes countdownCardPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 12px 18px rgba(150, 90, 40, 0.14)); }
  44%      { transform: scale(1.025); filter: drop-shadow(0 13px 20px rgba(150, 90, 40, 0.16)) drop-shadow(0 0 14px rgba(216, 149, 31, 0.2)); }
}
@keyframes countdownDust {
  0%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.74); }
  24%      { opacity: 0.72; }
  55%      { opacity: 0.46; transform: translate3d(12px, -18px, 0) scale(1); }
  82%      { opacity: 0.62; transform: translate3d(-8px, -34px, 0) scale(0.9); }
}
@media (min-width: 640px) {
  .countdown-grid { width: min(88vw, 560px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-height: 740px) {
  .countdown-content {
    padding-top: calc(env(safe-area-inset-top, 0px) + 34px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  }
  .countdown-names { font-size: clamp(46px, 13vw, 62px); }
  .countdown-divider { margin-top: 8px; margin-bottom: 10px; }
  .countdown-grid { width: min(72vw, 282px); gap: 8px; margin-bottom: 12px; }
  .countdown-number { font-size: clamp(27px, 8vw, 40px); }
  .footer-names { font-size: clamp(28px, 8vw, 40px); }
  .footer-credit { margin-top: 8px !important; }
}
@media (min-width: 600px) and (orientation: landscape) {
  .countdown-section { min-height: 820px; max-width: 430px; margin: 0 auto; }
}


/* ============================================================
   BACKGROUND MUSIC TOGGLE  (fixed bottom-right)
   ============================================================ */
.music-btn {
  position: fixed;
  right: clamp(14px, 4vw, 22px);
  bottom: clamp(14px, 4vw, 22px);
  z-index: 45;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(212, 173, 106, 0.6);
  border-radius: 999px;
  background: linear-gradient(180deg, #9c2b22 0%, #6c2a3d 100%);
  color: var(--mh-ivory);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(60, 30, 18, 0.4), inset 0 0 0 1px rgba(251, 244, 232, 0.12);
  transition: transform 0.2s ease, box-shadow 0.25s ease, opacity 0.4s ease;
  animation: musicBtnIn 0.5s ease both;
}
.music-btn[hidden] { display: none; }
.music-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(60, 30, 18, 0.5), inset 0 0 0 1px rgba(251, 244, 232, 0.12);
}
.music-btn:active { transform: scale(0.95); }
@keyframes musicBtnIn {
  from { opacity: 0; transform: translateY(12px) scale(0.85); }
  to   { opacity: 1; transform: none; }
}
.music-disc {
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(251, 244, 232, 0.12) 0 1.5px, transparent 1.5px 4px);
  opacity: 0.5;
  animation: musicSpin 6s linear infinite;
}
.music-btn.is-muted .music-disc { animation-play-state: paused; opacity: 0.28; }
@keyframes musicSpin { to { transform: rotate(360deg); } }
.music-ico { position: relative; width: 22px; height: 22px; }
.music-ico--off { display: none; }
.music-btn.is-muted .music-ico--on  { display: none; }
.music-btn.is-muted .music-ico--off { display: block; }


/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-screen.is-animated .hero-logo,
  .hero-screen.is-animated .couple-name span,
  .hero-screen.is-animated .couple-name .weds,
  .hero-screen.is-animated .gold-divider,
  .hero-screen.is-animated .wedding-date,
  .hero-screen.is-animated .wedding-venue { animation: none; opacity: 1; filter: none; transform: none; }
  .hero-logo { opacity: 1; }
  .hero-bg { transform: scale(1.14); }
  .hero-fg { transform: scale(1.2); }
  .hero-flight-layer { display: none; }
  .scroll-arrows i { animation: none; opacity: 0.7; }
  .blessings-decor, .blessings-top-center { animation: none !important; }
  .blessings-petals { display: none; }
  .music-disc, .music-btn { animation: none; }
  .countdown-particles span,
  .countdown-names::before { animation-duration: revert !important; }
}