/**
 * ==========================================================================
 * Royal Pichwai & Udaipur Palace Wedding Theme
 * Beautified & Offline-Ready Stylesheet
 * ==========================================================================
 */

/**
 * ==============================================================================
 * 1. DESIGN TOKENS & ROOT THEME VARIABLES
 * ==============================================================================
 * Royal Rajasthani & Pichwai-inspired color palette, classical typography,
 * and dynamic 3D depth variables updated in real-time by the parallax engine.
 * ==============================================================================
 */
:root {
  --rose:  #a6384f;
  --rose-dark:  #77283a;
  --sage:  #8d9a7a;
  --leaf-dark:  #1f3329;
  --ivory:  #f7eedc;
  --parchment:  #e9d7b8;
  --amber:  #d8a957;
  --amber-lit:  #f0c86a;
  --ink:  #3e2b22;
  --night:  #060d0b;
  --display:  "Cormorant Garamond", Georgia, serif;
  --script:  "Parisienne", cursive;
  --body:  "EB Garamond", Georgia, serif;
  --px-bg-x:  0px;
  --px-bg-y:  0px;
  --px-jhm-x:  0px;
  --px-jhm-y:  0px;
  --px-flr-x:  0px;
  --px-flr-y:  0px;
  --px-dya-x:  0px;
  --px-dya-y:  0px
}

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

html {
  scroll-behavior: smooth
}

/**
 * ==============================================================================
 * 2. BASE STYLES, TYPOGRAPHY & TEXTURE OVERLAYS
 * ==============================================================================
 * Foundational document styles, default fonts, text smoothing, and background
 * radial gradients simulating warm palace candlelight and aged handmade parchment.
 * ==============================================================================
 */
/* [ORIGINAL CODE PRESERVED BELOW]
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--night);
  overflow-x: hidden
}

body.intro-active {
  overflow: hidden;
  height: 100svh
} */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--night);
}

body.intro-active {
  overflow: hidden;
  height: 100svh
}

button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Consistent lining figures across all wedding dates and times to ensure numbers match month text height */
.inv-date,
.farman-datetime,
.evt-stop-datetime,
.closing-date,
.intro-reveal .date,
.date,
.ft-date,
.hero-date,
.hero-range,
.preloader-date,
.pl-date {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* Hidden sections per user request (Gallery Wall and Things to Know) */
.gallery-section,
.ttk-section {
  display: none !important;
}

/**
 * ==============================================================================
 * 3. INTERACTIVE HERO COURTYARD & LIGHTING RITUAL
 * ==============================================================================
 * Implements the day/night royal palace courtyard lighting sequence:
 * - Dual layered background images (dark night courtyard & illuminated courtyard)
 * - Radial vignettes and warm golden lighting overlays
 * - Floating ambient dust particles and falling rose petals
 * - Pendulum-swaying royal jhoomer chandelier with depth parallax
 * - Interactive rope-pull cord with spring physics, inertia, and glowing halo
 * - Glowing brass diyas on courtyard steps with animated flicker
 * - Multi-phase sacred blooming lotus transition button
 * ==============================================================================
 */
.intro {
  position: fixed;
  inset: 0;
  z-index: 20;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--night)
}

.intro.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.2s ease,visibility 1.2s ease
}

.intro-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none
}

.intro-bg-dark {
  z-index: 1;
  transform: translate3d(var(--px-bg-x),var(--px-bg-y),0) scale(1.06);
  transition: transform 1.1s ease-out
}

.intro-bg-lit {
  z-index: 2;
  opacity: 0;
  transform: translate3d(var(--px-bg-x),var(--px-bg-y),0) scale(1.06);
  transition: transform 1.1s ease-out
}

@keyframes lightFlicker {
  0% {
    opacity: 0
  }

  4% {
    opacity: .55
  }

  8% {
    opacity: .03
  }

  15% {
    opacity: .68
  }

  21% {
    opacity: .07
  }

  29% {
    opacity: .82
  }

  40% {
    opacity: .58
  }

  52% {
    opacity: .94
  }

  62% {
    opacity: .82
  }

  to {
    opacity: 1
  }

}

.intro.is-lit .intro-bg-lit {
  animation: lightFlicker 1.4s ease forwards
}

.intro-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse 54% 62% at 50% 43%,rgba(216,169,87,.075) 0%,rgba(166,56,79,.045) 38%,transparent 66%),linear-gradient(180deg,rgba(4,8,6,.78) 0%,transparent 18%,transparent 50%,rgba(4,8,6,.92) 100%),linear-gradient(90deg,rgba(4,8,6,.54) 0%,transparent 20%,transparent 80%,rgba(4,8,6,.52) 100%);
  transition: background 2.2s ease
}

.intro.is-lit .intro-vignette {
  background: linear-gradient(180deg,rgba(4,8,6,.28) 0%,transparent 16%,transparent 58%,rgba(4,8,6,.72) 100%),linear-gradient(90deg,rgba(4,8,6,.22) 0%,transparent 18%,transparent 82%,rgba(4,8,6,.2) 100%)
}

.intro-dark-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 70% at 50% 46%,transparent 28%,rgba(2,5,4,.76) 100%);
  opacity: 1;
  transition: opacity 2.4s ease
}

.intro.is-lit .intro-dark-vignette {
  opacity: 0
}

.intro-warm-glow {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--px-jhm-x),var(--px-jhm-y),0);
  background: radial-gradient(ellipse 70% 34% at 50% 0%,rgba(216,169,87,.3) 0%,transparent 68%);
  mix-blend-mode: screen;
  transition: opacity 1.6s ease .3s;
  will-change: transform,opacity
}

.intro.is-lit .intro-warm-glow {
  opacity: 1;
  animation: warmBreath 8s ease-in-out 1.4s infinite
}

@keyframes warmBreath {
  0%,to {
    opacity: .85
  }

  50% {
    opacity: 1
  }

}

.intro-jhoomer-glow {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--px-jhm-x),var(--px-jhm-y),0);
  background: radial-gradient(ellipse 52% 28% at 50% 0%,rgba(216,169,87,.42) 0%,rgba(216,169,87,.12) 40%,transparent 66%);
  mix-blend-mode: screen;
  transition: opacity 1.4s ease .32s;
  will-change: transform,opacity
}

.intro.is-lit .intro-jhoomer-glow {
  opacity: 1;
  animation: lampBreath 6s ease-in-out 1.1s infinite
}

@keyframes lampBreath {
  0%,to {
    opacity: .85
  }

  50% {
    opacity: 1
  }

}

@keyframes cinemaFlash {
  0% {
    opacity: 0
  }

  10% {
    opacity: .94
  }

  to {
    opacity: 0
  }

}

.diya-floor-glow {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 120%;
  padding-top: 40%;
  transform: translate(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%,rgba(216,169,87,.55) 0%,transparent 72%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease .9s
}

.intro.is-lit .diya-floor-glow {
  opacity: 1
}

.intro-rose-scatter {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 60% 28% at 14% 86%,rgba(166,56,79,.14) 0%,transparent 68%),radial-gradient(ellipse 56% 26% at 86% 86%,rgba(166,56,79,.12) 0%,transparent 64%);
  mix-blend-mode: screen;
  transition: opacity 2s ease .9s
}

.intro.is-lit .intro-rose-scatter {
  opacity: 1
}

.intro-dust {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2.4s ease 1.1s
}

.intro.is-lit .intro-dust {
  opacity: 1
}

.dust-particle {
  position: absolute;
  border-radius: 50%;
  background: #d8a957cc;
  animation: dustRise linear infinite;
  will-change: transform,opacity
}

@keyframes dustRise {
  0% {
    transform: translateY(0) scale(1);
    opacity: .72
  }

  55% {
    opacity: .48
  }

  to {
    transform: translateY(-58svh) scale(.35);
    opacity: 0
  }

}

.intro-petals {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2s ease 1.6s
}

.intro.is-lit .intro-petals {
  opacity: 1
}

.petal {
  position: absolute;
  border-radius: 50% 50% 0;
  background: #dfa2a894;
  animation: petalDrift ease-in-out infinite;
  will-change: transform,opacity
}

@keyframes petalDrift {
  0% {
    transform: translateY(0) rotate(0) translate(0);
    opacity: 0
  }

  7% {
    opacity: .62
  }

  86% {
    opacity: .38
  }

  to {
    transform: translateY(-52svh) rotate(300deg) translate(24px);
    opacity: 0
  }

}

.intro-jhoomer {
  position: absolute;
  top: -20px;
  left: 50%;
  width: min(200px,50vw);
  transform: translate3d(calc(-50% + var(--px-jhm-x)),var(--px-jhm-y),0);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.28)) drop-shadow(0 0 0px rgba(216,169,87,0));
  transition: opacity 1.2s ease .28s,filter 1.2s ease .28s;
  will-change: transform,opacity
}

.intro.is-lit .intro-jhoomer {
  opacity: .92;
  filter:drop-shadow(0 26px 52px rgba(0,0,0,.22)) drop-shadow(0 0 52px rgba(216,169,87,.78)) drop-shadow(0 0 16px rgba(247,218,166,.5));
  animation: jhoomerSway 5.4s ease-in-out 1.1s infinite
}

@keyframes jhoomerSway {
  0%,to {
    transform: translate3d(calc(-50% + var(--px-jhm-x)),var(--px-jhm-y),0) rotate(-.55deg)
  }

  50% {
    transform: translate3d(calc(-50% + var(--px-jhm-x)),calc(var(--px-jhm-y) + 4px),0) rotate(.55deg)
  }

}

.rope-button {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  z-index: 11;
  width: clamp(100px,24vw,132px);
  height: clamp(440px,60svh,580px);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transform-origin: 50% 0;
  overflow: visible;
  filter:drop-shadow(0 32px 64px rgba(0,0,0,.78)) drop-shadow(0 0 20px rgba(0,0,0,.36));
  animation: ropeDrop 1.15s ease .35s both;
  will-change: transform,filter
}

@keyframes ropeDrop {
  0% {
    transform: translate(-50%) rotate(-.4deg);
    opacity: 0
  }

  55% {
    transform: translate(-50%) rotate(.22deg);
    opacity: 1
  }

  to {
    transform: translate(-50%) rotate(0);
    opacity: 1
  }

}

@keyframes ropeIdle {
  0% {
    transform: translate(-50%) rotate(0)
  }

  20% {
    transform: translate(-50%) rotate(.5deg)
  }

  52% {
    transform: translate(-50%) rotate(-.42deg)
  }

  78% {
    transform: translate(-50%) rotate(.28deg)
  }

  to {
    transform: translate(-50%) rotate(0)
  }

}

.rope-button.rope-ready:not(.rope-idle) {
  animation: none;
  opacity: 1
}

.rope-button.rope-idle {
  animation: ropeIdle 5.2s ease-in-out infinite;
  opacity: 1
}

.rope-button.is-pulling {
  animation: none;
  opacity: 1;
  cursor: grabbing;
  filter:drop-shadow(0 38px 74px rgba(0,0,0,.84)) drop-shadow(0 0 24px rgba(216,169,87,.16))
}

.rope-button.is-pulling:after {
  opacity: .62;
  filter:blur(10px);
  animation-duration: 2.2s
}

.rope-button:active {
  cursor: grabbing
}

.rope-button:focus {
  outline: none
}

.rope-button:focus-visible {
  filter:drop-shadow(-6px 0 16px rgba(0,0,0,.82)) drop-shadow(6px 0 16px rgba(0,0,0,.82)) drop-shadow(0 48px 90px rgba(0,0,0,.92)) drop-shadow(0 0 34px rgba(247,238,220,.22))
}

.rope-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  transform-origin: top center;
  will-change: transform;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none
}

.rope-halo {
  position: absolute;
  top: clamp(112px,20svh,168px);
  left: 50%;
  width: min(118px,34vw);
  height: min(118px,34vw);
  border-radius: 50%;
  transform: translate(-50%);
  background: radial-gradient(circle,rgba(216,169,87,.34) 0%,rgba(216,169,87,.12) 42%,transparent 70%);
  pointer-events: none;
  animation: haloBreath 3.4s ease-in-out infinite
}

.rope-button:after {
  content: "";
  position: absolute;
  left: 50%;
  top: clamp(104px,19svh,158px);
  width: min(148px,40vw);
  height: min(148px,40vw);
  border-radius: 50%;
  transform: translate(-50%);
  background: radial-gradient(circle,rgba(240,200,106,.3) 0%,rgba(216,169,87,.15) 34%,rgba(166,56,79,.07) 58%,transparent 74%);
  filter:blur(8px);
  opacity: .42;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: tasselBloom 4.4s ease-in-out infinite
}

@keyframes haloBreath {
  0%,to {
    opacity: .28;
    transform: translate(-50%) scale(1)
  }

  50% {
    opacity: .72;
    transform: translate(-50%) scale(1.24)
  }

}

@keyframes tasselBloom {
  0%,to {
    opacity: .3;
    transform: translate(-50%) scale(.94)
  }

  50% {
    opacity: .56;
    transform: translate(-50%) scale(1.08)
  }

}

.intro.is-lit .rope-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transform: translate(-50%) translateY(-120%);
  transition: opacity .52s ease 40ms,visibility 0ms linear .62s,transform .62s ease 40ms
}

.rope-anchor-glow {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(180px,46vw);
  height: min(120px,15svh);
  transform: translate(-50%);
  z-index: 9;
  pointer-events: none;
  background: radial-gradient(ellipse 100% 100% at 50% 0%,rgba(216,169,87,.22) 0%,transparent 100%);
  animation: anchorBreath 4.8s ease-in-out infinite
}

@keyframes anchorBreath {
  0%,to {
    opacity: .36;
    transform: translate(-50%) scale(1)
  }

  50% {
    opacity: .8;
    transform: translate(-50%) scale(1.14)
  }

}

.intro.is-lit .rope-anchor-glow {
  opacity: 0;
  transition: opacity .8s ease
}

.intro-floral-left {
  position: absolute;
  left: -14vw;
  bottom: -12svh;
  width: min(280px,70vw);
  z-index: 8;
  opacity: 0;
  transform: translate3d(var(--px-flr-x),var(--px-flr-y),0) rotate(-4deg) translateY(16px);
  filter:saturate(0) blur(.6px);
  transition: opacity 1.8s ease .6s,filter 2s ease .6s,transform 2s ease .6s;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none
}

.intro.is-lit .intro-floral-left {
  opacity: .72;
  filter:saturate(1) blur(0);
  transform: translate3d(var(--px-flr-x),var(--px-flr-y),0) rotate(-3deg) translateY(0);
  animation: floralSway 10s ease-in-out 1.8s infinite
}

.intro-floral-right {
  position: absolute;
  right: -14vw;
  bottom: -12svh;
  width: min(280px,70vw);
  z-index: 8;
  opacity: 0;
  transform: translate3d(calc(var(--px-flr-x) * -1),var(--px-flr-y),0) scaleX(-1) rotate(-4deg) translateY(16px);
  filter:saturate(0) blur(.6px);
  transition: opacity 1.8s ease .7s,filter 2s ease .7s,transform 2s ease .7s;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none
}

.intro.is-lit .intro-floral-right {
  opacity: .65;
  filter:saturate(1) blur(0);
  transform: translate3d(calc(var(--px-flr-x) * -1),var(--px-flr-y),0) scaleX(-1) rotate(-3deg) translateY(0);
  animation: floralSwayR 11.5s ease-in-out 2s infinite
}

@keyframes floralSway {
  0%,to {
    transform: translate3d(var(--px-flr-x),var(--px-flr-y),0) rotate(-3deg) translateY(0)
  }

  50% {
    transform: translate3d(var(--px-flr-x),calc(var(--px-flr-y) - 6px),0) rotate(-2.2deg) translateY(-4px)
  }

}

@keyframes floralSwayR {
  0%,to {
    transform: translate3d(calc(var(--px-flr-x) * -1),var(--px-flr-y),0) scaleX(-1) rotate(-3deg) translateY(0)
  }

  50% {
    transform: translate3d(calc(var(--px-flr-x) * -1),calc(var(--px-flr-y) - 6px),0) scaleX(-1) rotate(-2.2deg) translateY(-4px)
  }

}

.diya-wrap {
  position: absolute;
  width: min(76px,19vw);
  z-index: 8;
  opacity: 0;
  transition: opacity 1s ease 1s,transform 1s ease 1s;
  pointer-events: none
}

.diya-wrap.diya-left {
  left: 4vw;
  bottom: 27svh;
  transform: translate3d(var(--px-dya-x),var(--px-dya-y),0) scale(.88) translateY(10px)
}

.diya-wrap.diya-right {
  right: 4vw;
  bottom: 27svh;
  transform: translate3d(calc(var(--px-dya-x) * -1),var(--px-dya-y),0) scale(.88) translateY(10px)
}

.intro.is-lit .diya-wrap {
  opacity: 1
}

.intro.is-lit .diya-wrap.diya-left {
  transform: translate3d(var(--px-dya-x),var(--px-dya-y),0) scale(1) translateY(0);
  animation: diyaFlicker 4.3s ease-in-out 1.3s infinite
}

.intro.is-lit .diya-wrap.diya-right {
  transform: translate3d(calc(var(--px-dya-x) * -1),var(--px-dya-y),0) scale(1) translateY(0);
  animation: diyaFlicker 5.4s ease-in-out 1.7s infinite
}

@keyframes diyaFlicker {
  0%,to {
    filter:drop-shadow(0 -10px 18px rgba(216,169,87,.5)) drop-shadow(0 12px 20px rgba(0,0,0,.22));
    opacity: .88
  }

  30% {
    opacity: .78
  }

  48% {
    filter:drop-shadow(0 -10px 28px rgba(216,169,87,.9)) drop-shadow(0 12px 20px rgba(0,0,0,.18));
    opacity: .96
  }

  72% {
    opacity: .84
  }

}

.diya-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none
}

.intro-instruction {
  position: absolute;
  z-index: 12;
  bottom: 28svh;
  left: 50%;
  transform: translate(-50%) translateY(14px);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease,transform .6s ease
}

.intro.is-waiting .intro-instruction {
  opacity: 1;
  transform: translate(-50%) translateY(0)
}

.pull-label {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.46rem,6.3vw,2.28rem);
  color: #f8e2badb;
  text-shadow: 0 2px 20px rgba(0,0,0,.6),0 0 30px rgba(216,169,87,.2);
  letter-spacing: .075em;
  white-space: nowrap
}

.pull-feedback {
  position: absolute;
  left: 50%;
  bottom: 21.5svh;
  z-index: 13;
  transform: translate(-50%) translateY(10px) scale(.97);
  padding: 9px 16px 10px;
  border: 1px solid rgba(216,169,87,.22);
  border-radius: 999px;
  background: radial-gradient(ellipse 80% 120% at 50% 0%,#d8a95729,#1f120d33 62%,#1f120d14);
  color: #f8e2bad6;
  font-family: var(--display);
  font-size: clamp(.92rem,3.45vw,1.08rem);
  font-style: italic;
  letter-spacing: .055em;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,.52),0 0 18px rgba(216,169,87,.14);
  box-shadow: 0 16px 42px #0003,inset 0 0 18px #f7e2be0a;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .42s ease,visibility 0ms linear .42s,transform .52s cubic-bezier(.18,1,.3,1);
  white-space: nowrap
}

.pull-feedback.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%) translateY(0) scale(1);
  transition: opacity .42s ease,visibility 0ms,transform .52s cubic-bezier(.18,1,.3,1)
}

.pull-ritual-cue {
  position: relative;
  width: 26px;
  height: 34px;
  margin: 0 auto 10px
}

.pull-ritual-cue:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 22px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%);
  background: radial-gradient(ellipse,rgba(216,169,87,.46),transparent 72%);
  filter:blur(1px);
  opacity: .62;
  animation: diyaEmber 3.4s ease-in-out infinite
}

.pull-ritual-cue:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 12px;
  height: 22px;
  border-radius: 60% 60% 55% 55%;
  transform: translate(-50%) rotate(2deg);
  background: radial-gradient(circle at 50% 78%,rgba(255,236,176,.88) 0 18%,transparent 19%),radial-gradient(ellipse at 50% 60%,rgba(240,200,106,.88) 0%,rgba(216,122,66,.72) 42%,rgba(166,56,79,.22) 72%,transparent 100%);
  filter:blur(.15px) drop-shadow(0 0 12px rgba(216,169,87,.36));
  animation: diyaFlame 2.8s ease-in-out infinite;
  transform-origin: 50% 100%
}

@keyframes diyaFlame {
  0%,to {
    opacity: .62;
    transform: translate(-50%) rotate(2deg) scaleY(.92)
  }

  45% {
    opacity: .92;
    transform: translate(-50%) rotate(-3deg) scaleY(1.08)
  }

  70% {
    opacity: .74;
    transform: translate(-50%) rotate(1deg) scaleY(.98)
  }

}

@keyframes diyaEmber {
  0%,to {
    opacity: .42;
    transform: translate(-50%) scale(.88)
  }

  50% {
    opacity: .72;
    transform: translate(-50%) scale(1.12)
  }

}

.intro-reveal {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none
}

.intro-reveal:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 28svh;
  width: min(500px,94vw);
  height: 40svh;
  transform: translate(-50%) scale(.88);
  border-radius: 50% 50% 46% 46%/12% 12% 18% 18%;
  background: radial-gradient(ellipse at 50% 38%,rgba(18,5,4,.58) 0%,rgba(18,5,4,.32) 42%,rgba(18,5,4,.08) 68%,transparent 88%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.6s ease .4s,transform 1.8s ease .4s
}

.intro.show-names .intro-reveal:after {
  opacity: 1;
  transform: translate(-50%) scale(1)
}

.intro-reveal:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46svh;
  width: min(520px,94vw);
  height: 42svh;
  transform: translate(-50%,-50%) scale(.86);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,rgba(247,226,190,.16) 0%,rgba(247,226,190,.06) 40%,transparent 70%);
  opacity: 0;
  transition: opacity 1.8s ease .52s,transform 2.2s ease .52s
}

.intro.show-names .intro-reveal:before {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1)
}

.intro-reveal-item {
  position: absolute;
  left: 50%;
  opacity: 0;
  transform: translate(-50%) translateY(22px);
  transition: opacity 1.1s ease,transform 1.2s cubic-bezier(.16,1,.3,1);
  text-align: center;
  z-index: 1;
  width: min(600px,calc(100vw - 24px))
}

.intro-reveal .names {
  top: 34svh;
  font-family: var(--display);
  font-size: clamp(4rem,17vw,7.2rem);
  font-weight: 300;
  font-style: italic;
  color: #fcf1dafc;
  line-height: 1;
  letter-spacing: .012em;
  text-shadow: 0 1px 0 rgba(255,240,200,.22),0 2px 4px rgba(0,0,0,.96),0 6px 32px rgba(0,0,0,.82),0 0 60px rgba(216,169,87,.55),0 0 120px rgba(216,169,87,.28);
  transform: translate(-50%) translateY(28px) scale(.96);
  transition: opacity 1.3s ease,transform 1.5s cubic-bezier(.14,1,.28,1)
}

.intro.show-names .names {
  opacity: 1;
  transform: translate(-50%) translateY(0) scale(1);
  animation: nameGlow 6s ease-in-out 1.8s infinite
}

@keyframes nameGlow {
  0%,to {
    text-shadow: 0 1px 0 rgba(255,240,200,.18),0 2px 4px rgba(0,0,0,.96),0 6px 32px rgba(0,0,0,.82),0 0 60px rgba(216,169,87,.48),0 0 120px rgba(216,169,87,.22)
  }

  50% {
    text-shadow: 0 1px 0 rgba(255,248,210,.36),0 2px 4px rgba(0,0,0,.92),0 6px 28px rgba(0,0,0,.72),0 0 80px rgba(240,200,106,.78),0 0 150px rgba(216,169,87,.42),0 0 220px rgba(216,169,87,.18)
  }

}

.names .amp {
  font-family: var(--script);
  font-size: .84em;
  font-style: normal;
  color: #f0c46cfc;
  display: inline-block;
  margin: 0 .06em;
  text-shadow: 0 0 10px rgba(255,220,120,.6),0 0 28px rgba(216,169,87,.55),0 0 60px rgba(216,169,87,.32),0 3px 20px rgba(0,0,0,.52)
}

.names .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) scale(.96);
  transition: opacity .9s ease,transform 1.05s cubic-bezier(.14,1,.28,1)
}

.names .amp-wrap {
  margin: 0 .05em
}

.intro.show-names .names .word {
  opacity: 1;
  transform: translateY(0) scale(1)
}

.intro.show-names .names .word:nth-child(1) {
  transition-delay: 0ms
}

.intro.show-names .names .word:nth-child(2) {
  transition-delay: 175ms
}

.intro.show-names .names .word:nth-child(3) {
  transition-delay: .34s
}

.intro-reveal .ornament {
  top: 54.4svh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(240px,60vw);
  transition: opacity .9s ease,transform 1s ease
}

.intro-reveal .ornament span {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg,transparent,rgba(216,169,87,.88),transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .85s cubic-bezier(.22,1,.36,1) .16s
}

.intro.show-date .ornament span {
  transform: scaleX(1)
}

.intro-reveal .ornament i {
  width: 7px;
  height: 7px;
  background: #d8a957e6;
  font-style: normal;
  transform: rotate(45deg);
  border-radius: 1px;
  box-shadow: 0 0 8px #d8a95799,0 0 18px #d8a9574d;
  flex-shrink: 0
}

.intro.show-date .ornament {
  opacity: 1;
  transform: translate(-50%) translateY(0)
}

/* [ORIGINAL CODE PRESERVED BELOW]
.intro-reveal .date {
  top: 57.2svh;
  font-family: var(--display);
  font-size: clamp(1.08rem,4.45vw,1.28rem);
  font-weight: 600;
  letter-spacing: .155em;
  text-transform: uppercase;
  color: #fcf2dafc;
  padding: 5px 20px 6px;
  background: #08030270;
  border-radius: 999px;
  border: 1px solid rgba(216,169,87,.22);
  text-shadow: 0 1px 2px rgba(0,0,0,1),0 3px 14px rgba(0,0,0,.9),0 0 40px rgba(216,169,87,.42);
  transition: opacity .9s ease,transform 1s ease
} */
.intro-reveal .date {
  top: 57.2svh;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.08rem,4.45vw,1.28rem);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  color: #fcf2dafc;
  padding: 5px 20px 6px;
  background: #08030270;
  border-radius: 999px;
  border: 1px solid rgba(216,169,87,.22);
  text-shadow: 0 1px 2px rgba(0,0,0,1),0 3px 14px rgba(0,0,0,.9),0 0 40px rgba(216,169,87,.42);
  transition: opacity .9s ease,transform 1s ease
}

.intro.show-date .date {
  opacity: 1;
  transform: translate(-50%) translateY(0)
}

.intro-reveal .venue {
  top: 62.2svh;
  font-family: var(--display);
  font-size: clamp(1.02rem,4.05vw,1.22rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: .06em;
  color: #fceed6f7;
  text-shadow: 0 1px 2px rgba(0,0,0,1),0 3px 16px rgba(0,0,0,.9),0 0 36px rgba(166,56,79,.42),0 0 70px rgba(216,169,87,.28);
  transition: opacity .9s ease,transform 1s ease
}

.intro.show-venue .venue {
  opacity: 1;
  transform: translate(-50%) translateY(0)
}

/* Intermediary intro reveal screen disabled */
.intro-reveal,
#introReveal {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Lotus CTA disabled: ensure hidden completely across all states */
.lotus-cta-group,
.lotus-button,
#lotusCTAGroup,
#lotusButton {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.lotus-cta-group {
  position: absolute;
  left: 50%;
  top: 70svh;
  transform: translate(-50%,30px) scale(.9);
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: opacity 1.1s ease,transform 1.1s cubic-bezier(.22,1,.36,1)
}

.intro.show-lotus .lotus-cta-group {
  opacity: 1;
  transform: translate(-50%) scale(1);
  pointer-events: auto
}

.lotus-button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: clamp(84px,23vw,112px);
  height: clamp(84px,23vw,112px);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0
}

.lotus-icon-img {
  display: block;
  width: clamp(80px,22vw,108px);
  height: clamp(80px,22vw,108px);
  grid-area: 1 / 1;
  object-fit: contain;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.32)) drop-shadow(0 0 22px rgba(223,162,168,.55));
  transition: transform .8s ease,filter .8s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none
}

.intro.show-lotus .lotus-icon-img {
  animation: lotusPulse 3.8s ease-in-out .6s infinite,lotusSacredTurn 18s linear .6s infinite,lotusBlink 1.18s ease-in-out .8s infinite
}

@keyframes lotusBlink {
  0%,to {
    opacity: 1
  }

  50% {
    opacity: .42
  }

}

@keyframes lotusPulse {
  0%,to {
    filter:drop-shadow(0 12px 24px rgba(0,0,0,.28)) drop-shadow(0 0 16px rgba(223,162,168,.4))
  }

  50% {
    filter:drop-shadow(0 10px 28px rgba(0,0,0,.16)) drop-shadow(0 0 48px rgba(223,162,168,.85)) drop-shadow(0 0 80px rgba(216,169,87,.35))
  }

}

@keyframes lotusSacredTurn {
  0% {
    transform: rotate(-1.5deg) scale(1)
  }

  50% {
    transform: rotate(1.5deg) scale(1.022)
  }

  to {
    transform: rotate(-1.5deg) scale(1)
  }

}

.lotus-button.is-open .lotus-icon-img {
  transform: scale(1.4);
  animation: none;
  opacity: 1;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.16)) drop-shadow(0 0 54px rgba(223,162,168,.88))
}

.lotus-glow-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(340px,86vw);
  aspect-ratio: 1;
  transform: translate(-50%,-50%) scale(.28);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  transition: opacity .8s ease,transform 1s ease
}

.lotus-button.is-open .lotus-glow-burst {
  opacity: .46;
  transform: translate(-50%,-50%) scale(.92)
}

.lotus-cta-label {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.05rem,4.2vw,1.22rem);
  letter-spacing: .06em;
  color: #fcf1daf2;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.9),0 3px 18px rgba(0,0,0,.72),0 0 36px rgba(216,169,87,.3);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s ease .2s,transform .7s cubic-bezier(.16,1,.3,1) .2s;
  pointer-events: none
}

.intro.show-lotus .lotus-cta-label {
  opacity: 1;
  transform: translateY(0);
  animation: lotusBlink 1.18s ease-in-out .8s infinite
}

.lotus-button.is-open~.lotus-cta-label {
  opacity: 0;
  animation: none;
  transition: opacity .4s ease
}

/* [ORIGINAL CODE PRESERVED BELOW]
.skip-intro {
  position: absolute;
  z-index: 14;
  right: max(16px,env(safe-area-inset-right));
  bottom: max(18px,calc(env(safe-area-inset-bottom) + 18px));
  transform: none;
  border: 0;
  padding: 8px 0 8px 14px;
  background: transparent;
  color: rgba(247, 226, 190, 0.84);
  font-family: var(--display);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,.44);
  cursor: pointer;
  white-space: nowrap;
  transition: color .3s ease
} */
.skip-intro {
  position: absolute;
  z-index: 14;
  right: max(16px,env(safe-area-inset-right));
  bottom: max(18px,calc(env(safe-area-inset-bottom) + 18px));
  transform: none;
  border: 0;
  padding: 10px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: rgba(247, 226, 190, 0.84);
  font-family: var(--display);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,.44);
  cursor: pointer;
  white-space: nowrap;
  transition: color .3s ease;
  touch-action: manipulation;
}

.skip-intro:hover {
  /* [ORIGINAL CODE PRESERVED BELOW]
  color: #f7e2bea3 */
  color: #f7e2be
}

.intro.is-lit .skip-intro {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .42s ease,visibility 0ms linear .46s
}

@media (prefers-reduced-motion: reduce) {
  *,*: before,*: after {
    animation-duration: .001ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .001ms!important
  }

}

.page-shell {
  position: relative;
  z-index: 1
}

.section {
  position: relative;
  padding: clamp(72px,10vw,120px) 18px;
  overflow: hidden
}

.section-inner {
  width: min(1120px,100%);
  margin: 0 auto;
  position: relative;
  z-index: 1
}

h1,h2,h3 {
  font-family: var(--display);
  font-weight: 500
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--rose);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase
}

.section-title {
  color: var(--rose);
  font-size: clamp(2.8rem,7vw,5.6rem);
  line-height: .9
}

.section-lede {
  max-width: 620px;
  margin: 18px auto 0;
  font-family: var(--display);
  font-size: clamp(1.18rem,2.6vw,1.72rem);
  line-height: 1.38
}

body {
  background: radial-gradient(circle at top left,rgba(166,56,79,.13),transparent 28rem),radial-gradient(circle at 82% 20%,rgba(86,107,61,.16),transparent 24rem),linear-gradient(135deg,#f9efdd,#ead8b9)
}

/**
 * ==============================================================================
 * 4. AUSPICIOUS PICHWAI INVITATION CARD
 * ==============================================================================
 * Traditional Rajasthani Pichwai panel artwork featuring:
 * - Animated soaring bird sprites with multi-frame wing flapping
 * - Live HTML5 canvas falling rose petal shower with aerodynamic flutter
 * - Ornate gold-embossed floral corners and lotus dividers
 * - Divine blessings, family tributes (D/O & S/O), and couple names
 * ==============================================================================
 */
.invite-section {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0
}

.invite-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(../assets/invite/pn-inv-bg-panel-m-v01.webp) center / cover no-repeat;
  animation: kenBurns 10s ease-in-out infinite alternate;
  pointer-events: none
}

@keyframes kenBurns {
  0% {
    transform: scale(1)
  }

  to {
    transform: scale(1.05)
  }

}

.invite-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.45) 100%);
  pointer-events: none
}

.invite-petals {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none
}

.invite-birds {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2s ease 2.2s
}

.invite-section.invite-active .invite-birds {
  opacity: 1
}

.inv-bird {
  position: absolute;
  overflow: hidden;
  background-image: url(../assets/invite/Bird_frames.webp);
  background-repeat: no-repeat;
  pointer-events: none
}

.inv-bird--a {
  width: 80px;
  height: 82px;
  background-size: 480px 160px;
  background-position: 0px -38px;
  top: 10%;
  animation: birdFlapA .35s steps(6,end) infinite,birdFlyA 5s linear 1.8s infinite,birdDriftA 3.7s ease-in-out 1.8s infinite
}

@keyframes birdFlapA {
  0% {
    background-position-x: 0px
  }

  to {
    background-position-x: -480px
  }

}

@keyframes birdFlyA {
  0% {
    left: -12%
  }

  to {
    left: 108%
  }

}

@keyframes birdDriftA {
  0% {
    top: 10%
  }

  25% {
    top: 8%
  }

  55% {
    top: 11%
  }

  80% {
    top: 9%
  }

  to {
    top: 10%
  }

}

.inv-bird--b {
  width: 60px;
  height: 62px;
  background-size: 360px 120px;
  background-position: 0px -28px;
  top: 6%;
  transform: scaleX(-1);
  animation: birdFlapB .42s steps(6,end) .15s infinite,birdFlyB 7s linear 8s infinite,birdDriftB 5.1s ease-in-out 8s infinite
}

@keyframes birdFlapB {
  0% {
    background-position-x: 0px
  }

  to {
    background-position-x: -360px
  }

}

@keyframes birdFlyB {
  0% {
    left: 110%
  }

  to {
    left: -12%
  }

}

@keyframes birdDriftB {
  0% {
    top: 6%
  }

  22% {
    top: 8%
  }

  60% {
    top: 4%
  }

  85% {
    top: 7%
  }

  to {
    top: 6%
  }

}

@media (prefers-reduced-motion: reduce) {
  .invite-birds {
    display: none!important
  }

}

.invite-card-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: archFloat 7s ease-in-out infinite;
  pointer-events: none
}

@keyframes archFloat {
  0%,to {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-8px)
  }

}

.invite-arch-frame {
  display: block;
  height: 216svh;
  width: auto;
  max-width: 96vw;
  position: relative;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter:drop-shadow(0 0 28px rgba(216,169,87,.44)) drop-shadow(0 0 10px rgba(166,56,79,.24))
}

.invite-text-content {
  position: absolute;
  top: 16%;
  bottom: 16%;
  left: 50%;
  transform: translate(-50%);
  max-width: min(360px,70vw);
  width: 100%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  overflow: visible;
  background: radial-gradient(ellipse 85% 90% at 50% 50%,rgba(247,238,220,.28) 0%,rgba(247,238,220,.12) 55%,transparent 80%);
  border-radius: 50% 50% 46% 46%/8% 8% 14% 14%
}

.inv-cta {
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 5;
  opacity: 0
}

.invite-section.invite-active .inv-cta {
  animation: fadeUp .9s ease-out 1.3s both
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(24px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }

}

@keyframes goldGlow {
  0%,to {
    text-shadow: 0 1px 0 rgba(255,255,255,.6),0 0 24px rgba(166,56,79,.1)
  }

  50% {
    text-shadow: 0 1px 0 rgba(255,255,255,.6),0 0 40px rgba(166,56,79,.22)
  }

}

@keyframes nameReveal {
  0% {
    opacity: 0;
    transform: scale(.86) translateY(18px);
    filter:blur(6px);
    letter-spacing: .12em
  }

  55% {
    filter:blur(0)
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter:blur(0);
    letter-spacing: .05em
  }

}

@keyframes namePulse {
  0%,to {
    text-shadow: 0 1px 0 rgba(255,255,255,.45),0 0 18px rgba(200,144,42,.22),0 0 48px rgba(200,144,42,.08)
  }

  50% {
    text-shadow: 0 1px 0 rgba(255,255,255,.55),0 0 36px rgba(200,144,42,.46),0 0 80px rgba(200,144,42,.16),0 0 10px rgba(166,56,79,.14)
  }

}

@keyframes ampFlicker {
  0%,to {
    opacity: 1;
    filter:drop-shadow(0 0 5px rgba(200,144,42,.3))
  }

  28% {
    opacity: .82;
    filter:drop-shadow(0 0 14px rgba(216,169,87,.7))
  }

  52% {
    opacity: .94;
    filter:drop-shadow(0 0 8px rgba(200,144,42,.5))
  }

  74% {
    opacity: .88;
    filter:drop-shadow(0 0 18px rgba(216,169,87,.6))
  }

}

@keyframes nameRadiance {
  0%,to {
    opacity: .55;
    transform: scale(.88)
  }

  50% {
    opacity: 1;
    transform: scale(1.12)
  }

}

@keyframes inkSettle {
  0% {
    opacity: 0;
    filter:blur(4px);
    transform: translateY(14px)
  }

  60% {
    filter:blur(0)
  }

  to {
    opacity: 1;
    filter:blur(0);
    transform: translateY(0)
  }

}

@keyframes scrollUnfurl {
  0% {
    opacity: 0;
    letter-spacing: .04em;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    letter-spacing: .24em;
    transform: translateY(0)
  }

}

@keyframes lotusBloom {
  0% {
    opacity: 0;
    transform: scale(.78) translateY(8px)
  }

  to {
    opacity: .68;
    transform: scale(1) translateY(0)
  }

}

@keyframes datePulse {
  0%,to {
    text-shadow: 0 0 0px rgba(166,56,79,0)
  }

  50% {
    text-shadow: 0 0 22px rgba(166,56,79,.36),0 0 8px rgba(216,169,87,.22)
  }

}

@keyframes venueDrift {
  0%,to {
    transform: translateY(0);
    opacity: .65
  }

  50% {
    transform: translateY(-2px);
    opacity: .8
  }

}

@keyframes occasionShimmer {
  0% {
    opacity: 0;
    letter-spacing: .01em;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    letter-spacing: .03em;
    transform: translateY(0)
  }

}

.inv-blessing,.inv-blessing-alt,.inv-kicker,.inv-lotus-div,.inv-names,.inv-parents,.inv-occasion,.inv-meta,.inv-cta {
  opacity: 0
}

.invite-section.invite-active .inv-blessing,.invite-section.invite-active .inv-blessing-alt {
  animation: inkSettle 1.1s cubic-bezier(.16,1,.3,1) 0s both
}

.invite-section.invite-active .inv-kicker {
  animation: scrollUnfurl 1s cubic-bezier(.16,1,.3,1) .22s both
}

.invite-section.invite-active .inv-lotus-div {
  animation: lotusBloom 1s cubic-bezier(.16,1,.3,1) .4s both
}

.invite-section.invite-active .inv-names {
  animation: nameReveal 1.5s cubic-bezier(.16,1,.3,1) .55s both,namePulse 5.5s ease-in-out 2.2s infinite
}

.invite-section.invite-active .inv-amp {
  animation: ampFlicker 6.5s ease-in-out 2.4s infinite
}

.invite-section.invite-active .inv-parents {
  animation: inkSettle 1.1s cubic-bezier(.16,1,.3,1) .88s both
}

.invite-section.invite-active .inv-occasion {
  animation: occasionShimmer 1s cubic-bezier(.16,1,.3,1) 1.05s both
}

.invite-section.invite-active .inv-meta {
  animation: inkSettle 1s cubic-bezier(.16,1,.3,1) 1.2s both
}

.invite-section.invite-active .inv-date {
  animation: datePulse 4.2s ease-in-out 2.4s infinite
}

.invite-section.invite-active .inv-venue {
  animation: venueDrift 6s ease-in-out 2.8s infinite
}

.inv-blessing {
  font-family: var(--display);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: .6rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(119,40,58,.15);
  width: 80%
}

.inv-overline {
  font-size: .88rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--rose-dark);
  opacity: .78;
  font-weight: 600;
  margin-bottom: 3px;
  text-shadow: 0 1px 6px rgba(247,238,220,.55)
}

.inv-blessing p:not(.inv-overline) {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.07rem;
  color: var(--ink);
  opacity: .82;
  line-height: 1.5;
  margin: 0;
  text-shadow: 0 1px 4px rgba(247,238,220,.4)
}

.inv-blessing-alt {
  font-family: var(--display);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: .5rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(119,40,58,.15);
  width: 80%
}

.inv-blessing-alt-line1 {
  font-size: 1rem;
  font-style: italic;
  color: var(--ink);
  opacity: .85;
  line-height: 1.5;
  margin: 0;
  text-shadow: 0 1px 4px rgba(247,238,220,.4)
}

.inv-blessing-alt-line2 {
  font-size: 1rem;
  font-style: italic;
  color: var(--ink);
  opacity: .75;
  line-height: 1.5;
  margin: 0;
  text-shadow: 0 1px 4px rgba(247,238,220,.4)
}

.inv-blessing-alt-line3 {
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rose-dark);
  font-weight: 500;
  opacity: .82;
  margin-top: 4px
}

.inv-blessing-alt.inv-bless-stacked {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: .35rem;
  gap: 6px
}

.inv-blessing-alt.inv-bless-stacked .inv-blessing-alt-line1,.inv-blessing-alt.inv-bless-stacked .inv-blessing-alt-line2 {
  font-size: .86rem;
  line-height: 1.45
}

.inv-blessing-alt.inv-bless-deva .inv-blessing-alt-line1,.inv-blessing-alt.inv-bless-deva .inv-blessing-alt-line2 {
  font-style: normal;
  line-height: 1.6
}

.inv-kicker {
  font-family: var(--display);
  font-size: .76rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rose-dark);
  font-weight: 500;
  opacity: .82;
  margin-bottom: .3rem
}

.inv-lotus-div {
  display: block;
  width: clamp(70px,19vw,110px);
  height: auto;
  margin: .2rem auto;
  opacity: .68;
  pointer-events: none;
  user-select: none
}

/* [ORIGINAL CODE PRESERVED BELOW]
.inv-names {
  font-family: var(--display);
  font-size: clamp(4.2rem,9vw,6.4rem);
  font-weight: 300;
  font-style: italic;
  color: #c8902a;
  line-height: 1.1;
  letter-spacing: .05em;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  margin: .3rem 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  position: relative
} */
.inv-names {
  font-family: var(--display);
  font-size: clamp(3.2rem,7.5vw,5.2rem);
  font-weight: 300;
  font-style: italic;
  color: #c8902a;
  line-height: 1.08;
  letter-spacing: .05em;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  margin: .3rem 0;
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: break-word;
  position: relative
}

.inv-names:before {
  content: "";
  position: absolute;
  inset: -60% -28%;
  background: radial-gradient(ellipse at center,rgba(200,144,42,.16) 0%,rgba(216,169,87,.07) 42%,transparent 68%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  animation: none
}

.invite-section.invite-active .inv-names:before {
  animation: nameRadiance 5.5s ease-in-out 2s infinite
}

/* [ORIGINAL CODE PRESERVED BELOW]
.inv-amp {
  font-family: var(--script);
  font-style: normal;
  font-size: .8em;
  color: #c8902a
} */
/* [ORIGINAL CODE PRESERVED BELOW]
.inv-names .inv-name--groom,
.inv-names .inv-name--bride {
  display: block;
}

.inv-amp {
  display: block;
  font-family: var(--script);
  font-style: normal;
  font-size: .7em;
  line-height: 1;
  margin: .12rem auto;
  color: #c8902a
} */
.inv-names .inv-name--groom,
.inv-names .inv-name--bride {
  display: inline-block;
}

.inv-amp {
  display: inline-block;
  font-family: var(--script);
  font-style: normal;
  font-size: .75em;
  line-height: 1;
  color: #c8902a
}

.inv-parents {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
  opacity: .88;
  line-height: 1.52;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: .5rem;
  width: 92%;
  text-shadow: 0 1px 4px rgba(247,238,220,.4)
}

.inv-parents p {
  margin: 0;
  padding: 6px 0
}

.inv-parents p+p {
  border-top: 1px solid rgba(119,40,58,.14)
}

.inv-occasion {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--ink);
  opacity: .65;
  margin-bottom: .55rem
}

.inv-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: .55rem;
  border-top: 1px solid rgba(119,40,58,.15);
  width: 84%
}

/* [ORIGINAL CODE PRESERVED BELOW]
.inv-date {
  font-family: var(--display);
  font-size: 1.79rem;
  letter-spacing: .16em;
  color: var(--rose-dark);
  font-weight: 500;
  white-space: nowrap
} */
.inv-date {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.79rem;
  letter-spacing: normal;
  color: var(--rose-dark);
  font-weight: 400;
  white-space: nowrap;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.inv-venue {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.29rem;
  color: var(--ink);
  opacity: .65
}

/* [ORIGINAL CODE PRESERVED BELOW]
.inv-map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--rose-dark);
  text-decoration: none;
  opacity: .68;
  margin-top: 6px;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity .22s ease, transform .2s ease;
} */
.inv-map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--rose-dark);
  text-decoration: none;
  opacity: .68;
  margin-top: 4px;
  padding: 6px 14px;
  min-height: 44px;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: opacity .22s ease, transform .2s ease;
}

.inv-map:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.inv-btn {
  display: inline-block;
  border: 1px solid rgba(216,169,87,.55);
  color: var(--ivory);
  background: #060d0b5c;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding: .52rem 2.2rem;
  letter-spacing: .2em;
  font-size: .62rem;
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s ease,border-color .3s ease,color .3s ease
}

.inv-btn:hover {
  background: #d8a95724;
  border-color: #d8a957d1;
  color: var(--amber)
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid rgba(62,43,34,.14);
  border-radius: 999px;
  padding: 12px 22px;
  color: var(--ivory);
  background: var(--rose);
  font-family: var(--body);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 30px #3e2b2224
}

.btn.secondary {
  color: var(--rose);
  background: #f7eedcc7
}

.events-section {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: none;
  color: var(--ivory)
}

.evt-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 80% 28% at 50% 0%,rgba(190,215,255,.07) 0%,transparent 65%),linear-gradient(180deg,#080513,#110a1c 10%,#1b0e22 22%,#24132a 36%,#261520,#2e1a26 68%,#1a0e16)
}

.evt-tex-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(../assets/shared/pn-tex-ovl-watercolor-rose-x-v01.webp) center / cover;
  opacity: .05;
  pointer-events: none
}

.evt-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block
}

.evt-bg-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,#1a0e1699,#1a0e161f 8%,#1a0e1600 20% 80%,#1a0e161f 92%,#1a0e1699)
}

.evt-header {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: clamp(210px,56vw,260px) 24px clamp(8px,1.5svh,18px)
}

.evt-header .evt-eyebrow,.evt-header .evt-title,.evt-header .evt-divider {
  opacity: 0
}

.evt-header.in-view .evt-eyebrow {
  animation: fadeUp .7s cubic-bezier(.16,1,.3,1) 0ms both
}

.evt-header.in-view .evt-title {
  animation: fadeUp .88s cubic-bezier(.16,1,.3,1) .13s both
}

.evt-header.in-view .evt-divider {
  animation: fadeUp .7s cubic-bezier(.16,1,.3,1) .29s both
}

.evt-eyebrow {
  font-family: var(--display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #e9d7b899;
  margin: 0 0 10px;
  text-shadow: 0 1px 8px rgba(0,0,0,.5)
}

.evt-title {
  font-family: var(--display);
  font-size: clamp(2.8rem,9vw,4.8rem);
  font-weight: 300;
  font-style: italic;
  color: #f7eedcf7;
  line-height: .94;
  letter-spacing: .02em;
  margin-bottom: clamp(12px,2.5vw,20px);
  text-shadow: 0 2px 20px rgba(0,0,0,.6),0 0 50px rgba(0,0,0,.22)
}

.evt-divider {
  display: block;
  width: clamp(80px,22vw,148px);
  height: auto;
  margin: 0 auto clamp(8px,1.8vw,16px);
  pointer-events: none;
  user-select: none;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.36))
}

.evt-journey {
  position: relative;
  z-index: 2;
  max-width: 420px;
  margin: 0 auto;
  padding-bottom: clamp(36px,6svh,72px)
}

.evt-path-wrap {
  display: none
}

.evt-stops {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: clamp(12px,2.5vw,20px) 0 clamp(18px,4vw,32px)
}

.evt-stop {
  width: min(168px,46vw);
  opacity: 0;
  transform: translateY(28px) scale(.976);
  transition: opacity .86s cubic-bezier(.16,1,.3,1),transform .96s cubic-bezier(.16,1,.3,1)
}

.evt-stop.in-view {
  opacity: 1;
  transform: translateY(0) scale(1)
}

.evt-stop--left {
  align-self: flex-start;
  margin-left: clamp(10px,5vw,28px)
}

.evt-stop--right {
  align-self: flex-end;
  margin-right: clamp(10px,5vw,28px)
}

.evt-stop-plaque {
  position: relative;
  background-image: url(../assets/event/pn-evt-farman-rolled-x-v01.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  aspect-ratio: 971 / 1619;
  width: 100%
}

.evt-stop-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 34% 10% 18%;
  gap: 4px
}

.evt-stop-motif {
  width: clamp(40px,10.5vw,54px);
  height: clamp(40px,10.5vw,54px);
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  margin-bottom: clamp(4px,1.2vw,7px);
  filter:drop-shadow(0 2px 6px rgba(62,43,34,.26))
}

@keyframes motifFloat {
  0%,to {
    transform: translateY(0) rotate(0)
  }

  38% {
    transform: translateY(-7px) rotate(.5deg)
  }

  72% {
    transform: translateY(-3px) rotate(-.3deg)
  }

}

@keyframes motifGlow {
  0%,to {
    filter:drop-shadow(0 3px 8px rgba(62,43,34,.22)) drop-shadow(0 0 0px rgba(166,56,79,0))
  }

  50% {
    filter:drop-shadow(0 7px 18px rgba(62,43,34,.12)) drop-shadow(0 0 18px rgba(166,56,79,.18))
  }

}

.evt-stop.in-view .evt-stop-motif {
  animation: motifFloat var(--motif-dur, 6s) ease-in-out var(--motif-del, .9s) infinite,motifGlow var(--motif-gdur, 4.4s) ease-in-out var(--motif-del, .9s) infinite
}

.evt-stop-name {
  font-family: var(--display);
  font-size: clamp(1.1rem,3vw,1.45rem);
  font-weight: 300;
  font-style: italic;
  color: var(--rose-dark);
  letter-spacing: .03em;
  line-height: 1.02;
  margin: 0 0 3px
}

/* [ORIGINAL CODE PRESERVED BELOW]
.evt-stop-datetime {
  font-family: var(--display);
  font-size: clamp(.58rem,1.55vw,.68rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0;
  line-height: 1.3
} */
.evt-stop-datetime {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(.65rem,1.7vw,.78rem);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  color: var(--rose);
  margin: 0;
  line-height: 1.3
}

.evt-stop-venue {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(.62rem,1.65vw,.72rem);
  color: var(--ink);
  opacity: .72;
  margin: 2px 0 0;
  line-height: 1.32
}

.evt-stop-note {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(.56rem,1.5vw,.64rem);
  color: var(--ink);
  opacity: .5;
  margin: 1px 0 0;
  line-height: 1.36
}

.evt-stop-map {
  display: inline-block;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(.54rem,1.4vw,.62rem);
  color: var(--rose-dark);
  text-decoration: none;
  opacity: .6;
  margin-top: 6px;
  transition: opacity .22s ease
}

.evt-stop-map:hover {
  opacity: .92
}

.evt-footstep {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: clamp(10px,2.6vw,16px) 0;
  position: relative;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s cubic-bezier(.16,1,.3,1)
}

.evt-footstep.in-view {
  opacity: 1
}

.evt-paw {
  display: block;
  color: #d8a9579e;
  width: 22px;
  height: 26px;
  flex-shrink: 0
}

.evt-paw--l {
  transform: translate(-8px) rotate(-6deg);
  opacity: 0
}

.evt-paw--r {
  transform: translate(8px) rotate(6deg);
  opacity: 0
}

@keyframes pawStepL {
  0% {
    opacity: 0;
    transform: translate(-8px) rotate(-6deg) translateY(8px) scale(.6)
  }

  to {
    opacity: 1;
    transform: translate(-8px) rotate(-6deg) translateY(0) scale(1)
  }

}

@keyframes pawStepR {
  0% {
    opacity: 0;
    transform: translate(8px) rotate(6deg) translateY(8px) scale(.6)
  }

  to {
    opacity: 1;
    transform: translate(8px) rotate(6deg) translateY(0) scale(1)
  }

}

.evt-footstep.in-view .evt-paw--l {
  animation: pawStepL .52s cubic-bezier(.16,1,.3,1) 80ms both
}

.evt-footstep.in-view .evt-paw--r {
  animation: pawStepR .52s cubic-bezier(.16,1,.3,1) .28s both
}

.evt-birds {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden
}

.evt-bird {
  position: absolute;
  top: var(--bird-top, 20%);
  width: var(--bird-w, 20px);
  height: calc(var(--bird-w, 20px) * .5);
  color: #3e2b2261;
  animation: birdFly var(--bird-dur, 26s) linear var(--bird-del, 0s) infinite;
  will-change: transform
}

.evt-bird:before,.evt-bird:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  border-top: 2px solid currentColor;
  border-radius: 50% 50% 0 0
}

.evt-bird:before {
  left: 0;
  border-right: none;
  transform: skew(4deg)
}

.evt-bird:after {
  right: 0;
  border-left: none;
  transform: skew(-4deg)
}

@keyframes birdFly {
  0% {
    transform: translate(108vw) translateY(0);
    opacity: 0
  }

  4% {
    opacity: 1
  }

  96% {
    opacity: 1
  }

  to {
    transform: translate(-14vw) translateY(var(--bird-drift,0));
    opacity: 0
  }

}

@media (prefers-reduced-motion: reduce) {
  .evt-bird {
    animation: none!important;
    display: none
  }

}

.evt-glow-mid {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%);
  width: 140%;
  height: 55%;
  background: radial-gradient(ellipse 60% 55% at 50% 50%,rgba(216,169,87,.09) 0%,rgba(166,56,79,.07) 45%,transparent 75%);
  pointer-events: none;
  z-index: 0
}

.evt-jhoomer-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  z-index: 4;
  width: clamp(82px,22vw,110px);
  pointer-events: none
}

.evt-jhoomer-inner {
  transform-origin: 50% 0%;
  animation: evtJhoomerSway 7s ease-in-out infinite
}

@keyframes evtJhoomerSway {
  0%,to {
    transform: rotate(0)
  }

  28% {
    transform: rotate(2deg)
  }

  72% {
    transform: rotate(-2deg)
  }

}

.evt-jhoomer-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: evtJhoomerGlow 3.8s ease-in-out infinite
}

@keyframes evtJhoomerGlow {
  0%,to {
    filter:drop-shadow(0 6px 20px rgba(166,56,79,.38)) drop-shadow(0 2px 8px rgba(0,0,0,.55)) drop-shadow(0 0 0px rgba(216,169,87,0))
  }

  50% {
    filter:drop-shadow(0 6px 20px rgba(166,56,79,.28)) drop-shadow(0 2px 8px rgba(0,0,0,.45)) drop-shadow(0 0 38px rgba(216,169,87,.55))
  }

}

.evt-corner {
  position: absolute;
  z-index: 3;
  width: clamp(80px,22vw,148px);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: .65
}

.evt-corner--tl {
  top: 0;
  left: 0
}

.evt-corner--tr {
  top: 0;
  right: 0
}

.evt-floral-border {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  line-height: 0;
  opacity: .58
}

.evt-floral-border--top {
  top: clamp(44px,12vw,80px)
}

.evt-floral-border--bot {
  bottom: 0;
  transform: scaleY(-1)
}

.evt-floral-border img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none
}

.evt-bananaleaf {
  position: absolute;
  top: 12%;
  left: -8%;
  z-index: 1;
  width: clamp(110px,30vw,200px);
  opacity: .52;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter:drop-shadow(0 8px 28px rgba(0,0,0,.45));
  transform-origin: 80% 10%;
  animation: evtLeafSway 9s ease-in-out infinite
}

.evt-chhatri {
  position: absolute;
  top: 8%;
  right: -10%;
  z-index: 1;
  width: clamp(100px,28vw,190px);
  opacity: .45;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter:drop-shadow(0 6px 22px rgba(49,27,40,.5));
  animation: evtMotifDrift 12s ease-in-out 2s infinite
}

.evt-peacock {
  position: absolute;
  top: 36%;
  left: -8%;
  z-index: 1;
  width: clamp(130px,36vw,210px);
  opacity: .6;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter:drop-shadow(0 -4px 28px rgba(49,27,40,.55)) drop-shadow(0 8px 20px rgba(0,0,0,.38));
  animation: evtMotifDrift 14s ease-in-out 0s infinite;
  will-change: transform
}

.evt-diya {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none
}

/* [ORIGINAL CODE PRESERVED BELOW]
.evt-diya--l {
  width: clamp(44px,11vw,76px);
  bottom: 22%;
  left: 4%;
  opacity: .72;
  filter:drop-shadow(0 -6px 22px rgba(255,180,60,.38)) drop-shadow(0 4px 12px rgba(0,0,0,.45));
  animation: evtDiyaFlicker 2.8s ease-in-out 0s infinite
} */
.evt-diya--l {
  display: none !important;
}

/* [ORIGINAL CODE PRESERVED BELOW]
.evt-diya--r {
  width: clamp(38px,9vw,64px);
  bottom: 28%;
  right: 5%;
  opacity: .65;
  filter:drop-shadow(0 -6px 20px rgba(255,180,60,.32)) drop-shadow(0 4px 12px rgba(0,0,0,.4));
  animation: evtDiyaFlicker 3.2s ease-in-out 1.1s infinite
} */
.evt-diya--r {
  display: none !important;
}

.evt-elephant {
  position: absolute;
  top: 44%;
  right: -8%;
  z-index: 1;
  width: clamp(140px,38vw,220px);
  opacity: .58;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter:drop-shadow(0 -4px 28px rgba(49,27,40,.5)) drop-shadow(0 8px 20px rgba(0,0,0,.35));
  transform: scaleX(-1);
  animation: evtElephantDrift 16s ease-in-out 3s infinite;
  will-change: transform
}

.evt-cow {
  position: absolute;
  bottom: -2%;
  left: 50%;
  transform: translate(-50%);
  z-index: 2;
  width: clamp(100px,26vw,180px);
  opacity: .55;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter:drop-shadow(0 -4px 24px rgba(49,27,40,.45));
  animation: evtMotifDrift 13s ease-in-out 5s infinite
}

.evt-lotus {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none
}

.evt-lotus--1 {
  width: clamp(52px,13vw,88px);
  top: 22%;
  left: 5%;
  opacity: .28;
  filter:drop-shadow(0 4px 16px rgba(216,169,87,.22));
  animation: evtLotusFloat 9s ease-in-out 0s infinite
}

.evt-lotus--2 {
  width: clamp(38px,9vw,64px);
  top: 58%;
  right: 6%;
  opacity: .22;
  filter:drop-shadow(0 4px 14px rgba(166,56,79,.2));
  animation: evtLotusFloat 11s ease-in-out 3.5s infinite
}

@keyframes evtLeafSway {
  0%,to {
    transform: rotate(0)
  }

  30% {
    transform: rotate(4deg)
  }

  70% {
    transform: rotate(-3deg)
  }

}

@keyframes evtMotifDrift {
  0%,to {
    transform: translateY(0)
  }

  40% {
    transform: translateY(-10px)
  }

  75% {
    transform: translateY(-4px)
  }

}

@keyframes evtElephantDrift {
  0%,to {
    transform: scaleX(-1) translateY(0)
  }

  40% {
    transform: scaleX(-1) translateY(-8px)
  }

  75% {
    transform: scaleX(-1) translateY(-3px)
  }

}

@keyframes evtDiyaFlicker {
  0%,to {
    opacity: .72
  }

  30% {
    opacity: .55
  }

  60% {
    opacity: .8
  }

  80% {
    opacity: .5
  }

}

@keyframes evtLotusFloat {
  0%,to {
    transform: translateY(0) rotate(0)
  }

  45% {
    transform: translateY(-10px) rotate(4deg)
  }

  78% {
    transform: translateY(-4px) rotate(-2deg)
  }

}

@media (prefers-reduced-motion: reduce) {
  .evt-jhoomer-inner,.evt-jhoomer-img,.evt-lotus,.evt-bananaleaf,.evt-chhatri,.evt-peacock,.evt-elephant,.evt-cow,.evt-diya {
    animation: none!important
  }

}

/* [ORIGINAL CODE PRESERVED BELOW]
.gallery-section {
  position: relative;
  overflow: hidden;
  padding: 0 0 80px;
  min-height: 100vh
} */
.gallery-section {
  position: relative;
  overflow: hidden;
  padding: 0 0 80px;
  min-height: 100svh;
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

/**
 * ==============================================================================
 * 5. HANGING COURTYARD PHOTO GALLERY WALL & LIGHTBOX
 * ==============================================================================
 * Ornate gold-embossed hanging frames (hero arch, landscape, portrait):
 * - Floating dust motes inside gilded frames
 * - Staggered entrance animations on scroll
 * - Interactive photo upload placeholders
 * - Full-screen lightbox modal with smooth zoom, pan, and keyboard navigation
 * ==============================================================================
 */
.gal-bg {
  position: absolute;
  inset: 0;
  background: url(../assets/gallery/pn-gal-bg-hanging-courtyard-m-v01.webp) center top / cover no-repeat;
  transform-origin: center top
}

.gal-bg-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,#1e120a2e,#1e120a0a 18% 72%,#1e120a85);
  pointer-events: none;
  z-index: 1
}

.gal-header {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 72px 24px 0
}

.gal-eyebrow {
  color: var(--amber);
  letter-spacing: .22em
}

.gal-title {
  color: var(--ivory);
  text-shadow: 0 2px 18px rgba(30,18,10,.55)
}

.gal-lede {
  color: #f7eedcb8;
  max-width: 460px;
  margin: 12px auto 0;
  font-style: italic
}

.gal-wall {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0 32px;
  padding: 48px 24px 0;
  max-width: 1240px;
  margin: 0 auto
}

.gal-frame-slot {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-60px);
  opacity: 0;
  transition: transform .9s cubic-bezier(.16,1,.3,1),opacity .7s ease
}

.gal-frame-slot.in-view {
  transform: translateY(0);
  opacity: 1
}

@keyframes galSway {
  0%,to {
    transform: rotate(0)
  }

  25% {
    transform: rotate(.9deg)
  }

  75% {
    transform: rotate(-.9deg)
  }

}

.gal-frame-slot.in-view .gal-frame-inner {
  animation: galSway 6s ease-in-out infinite;
  transform-origin: 50% 0%
}

.gal-frame-slot:nth-child(1) .gal-frame-inner {
  animation-delay: 0s
}

.gal-frame-slot:nth-child(2) .gal-frame-inner {
  animation-delay: -2.1s
}

.gal-frame-slot:nth-child(3) .gal-frame-inner {
  animation-delay: -4.3s
}

.gal-frame-slot:nth-child(4) .gal-frame-inner {
  animation-delay: -1.6s
}

.gal-frame-inner {
  position: relative;
  display: block;
  overflow: hidden
}

.gal-frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 3;
  user-select: none;
  -webkit-user-drag: none
}

.gal-photo-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  cursor: pointer;
  background: transparent;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .9s cubic-bezier(.16,1,.3,1)
}

.gal-frame-slot.in-view .gal-photo-wrap {
  transform: scaleY(1)
}

.gal-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.16,1,.3,1)
}

.gal-photo-wrap:hover .gal-photo {
  transform: scale(1.045)
}

.gal-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #f7eedc14;
  cursor: pointer
}

.gal-placeholder-icon {
  width: 44px;
  height: 44px;
  border: 1.5px dashed rgba(216,169,87,.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #d8a9578c
}

.gal-placeholder-label {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(.7rem,2vw,.82rem);
  color: #d8a95773;
  text-align: center;
  padding: 0 12px
}

input.gal-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 10
}

.gal-slot-landscape {
  width: clamp(280px,52vw,560px)
}

.gal-slot-landscape .gal-frame-inner {
  width: 100%;
  padding-top: 80%
}

.gal-slot-landscape .gal-photo-wrap {
  clip-path: polygon(14% 86%,16% 88%,84% 88%,86% 86%,86% 38%,76% 32%,24% 32%,14% 38%)
}

.gal-slot-portrait {
  width: clamp(180px,32vw,340px)
}

.gal-slot-portrait .gal-frame-inner {
  width: 100%;
  padding-top: 150%
}

.gal-slot-portrait .gal-photo-wrap {
  clip-path: polygon(18% 94%,82% 94%,82% 25%,78% 23%,65% 21.5%,50% 21%,35% 21.5%,22% 23%,18% 25%)
}

.gal-slot-hero {
  width: clamp(200px,36vw,380px)
}

.gal-slot-hero .gal-frame-inner {
  width: 100%;
  padding-top: 150%
}

.gal-slot-hero .gal-photo-wrap {
  clip-path: polygon(15% 93%,85% 93%,85% 28%,80% 26.5%,65% 25.5%,50% 25%,35% 25.5%,20% 26.5%,15% 28%)
}

.gal-frame-dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2
}

@keyframes galDustRise {
  0% {
    opacity: 0;
    transform: translateY(0) translate(0)
  }

  15% {
    opacity: .65
  }

  85% {
    opacity: .35
  }

  to {
    opacity: 0;
    transform: translateY(-40px) translate(var(--dx,8px))
  }

}

.gal-dust-dot {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,#d8a957d9,#d8a95700 70%);
  animation: galDustRise var(--dur,4s) ease-out var(--del,0s) infinite;
  opacity: 0
}

.gal-frame-caption {
  display: none
}

.gal-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #060d0beb;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .32s ease
}

.gal-lightbox:not([hidden]) {
  opacity: 1
}

.gal-lightbox[hidden] {
  display: none!important
}

.gal-lb-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(90vw,900px);
  max-height: 90vh;
  gap: 14px
}

.gal-lb-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 32px 80px #0009;
  transform: scale(.92);
  opacity: 0;
  transition: transform .4s cubic-bezier(.16,1,.3,1),opacity .3s ease
}

.gal-lightbox:not([hidden]) .gal-lb-img {
  transform: scale(1);
  opacity: 1
}

.gal-lb-caption {
  font-family: var(--display);
  font-style: italic;
  color: #f7eedc8c;
  font-size: .88rem;
  letter-spacing: .06em
}

.gal-lb-close,.gal-lb-prev,.gal-lb-next {
  position: fixed;
  background: #f7eedc1a;
  border: .5px solid rgba(247,238,220,.18);
  color: var(--ivory);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease,transform .2s ease;
  font-family: var(--display)
}

.gal-lb-close:hover,.gal-lb-prev:hover,.gal-lb-next:hover {
  background: #d8a95738;
  transform: scale(1.08)
}

.gal-lb-close {
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  font-size: 16px
}

.gal-lb-prev,.gal-lb-next {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 28px;
  line-height: 1
}

.gal-lb-prev {
  left: 16px
}

.gal-lb-next {
  right: 16px
}

.gal-lb-prev:hover,.gal-lb-next:hover {
  transform: translateY(-50%) scale(1.08)
}

.gal-lightbox.single .gal-lb-prev,.gal-lightbox.single .gal-lb-next {
  display: none
}

@media (max-width: 860px) {
  .gal-wall {
    gap: 0 18px;
    padding-top: 32px
  }

  .gal-slot-landscape {
    width: clamp(240px,80vw,420px)
  }

  .gal-slot-portrait {
    width: clamp(140px,40vw,240px)
  }

  .gal-slot-hero {
    width: clamp(160px,44vw,260px)
  }

}

@media (max-width: 560px) {
  .gal-wall {
    flex-direction: column;
    align-items: center;
    gap: 24px 0
  }

  .gal-slot-landscape,.gal-slot-portrait,.gal-slot-hero {
    width: min(88vw,360px)
  }

  .gal-slot-landscape .gal-frame-inner {
    padding-top: 80%
  }

  .gal-slot-portrait .gal-frame-inner,.gal-slot-hero .gal-frame-inner {
    padding-top: 150%
  }

}

/* [ORIGINAL CODE PRESERVED BELOW]
.ttk-section {
  position: relative;
  overflow: hidden;
  padding: clamp(52px,11svh,100px) 0 clamp(52px,10svh,90px);
  background: radial-gradient(ellipse 80% 45% at 15% 10%,rgba(194,64,96,.55),transparent 65%),radial-gradient(ellipse 70% 45% at 85% 90%,rgba(110,20,45,.65),transparent 65%),radial-gradient(ellipse 60% 35% at 50% 50%,rgba(140,30,55,.3),transparent 70%),linear-gradient(160deg,#bf3e5e,#a6384f 35%,#8e2f42 65%,#70202f);
  color: var(--ivory);
  isolation: isolate
} */
.ttk-section {
  position: relative;
  overflow: hidden;
  padding: clamp(52px,11svh,100px) 0 clamp(52px,10svh,90px);
  background: radial-gradient(ellipse 80% 45% at 15% 10%,rgba(194,64,96,.55),transparent 65%),radial-gradient(ellipse 70% 45% at 85% 90%,rgba(110,20,45,.65),transparent 65%),radial-gradient(ellipse 60% 35% at 50% 50%,rgba(140,30,55,.3),transparent 70%),linear-gradient(160deg,#bf3e5e,#a6384f 35%,#8e2f42 65%,#70202f);
  color: var(--ivory);
  isolation: isolate;
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

.ttk-section:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 100% 40% at 50% 0%,rgba(247,238,220,.09),transparent 70%),radial-gradient(ellipse 80% 30% at 50% 100%,rgba(20,40,30,.28),transparent 80%)
}

.ttk-section:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(45deg,rgba(216,169,87,.025) 0px,rgba(216,169,87,.025) 1px,transparent 1px,transparent 28px),repeating-linear-gradient(-45deg,rgba(216,169,87,.025) 0px,rgba(216,169,87,.025) 1px,transparent 1px,transparent 28px)
}

.ttk-border-top,.ttk-border-bot {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg,transparent 0%,rgba(216,169,87,.5) 18%,rgba(247,238,220,.85) 50%,rgba(216,169,87,.5) 82%,transparent 100%)
}

.ttk-border-top {
  top: 0
}

.ttk-border-bot {
  bottom: 0
}

.ttk-motif-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden
}

.ttk-motif {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter:brightness(3.5) sepia(.6) saturate(.4) hue-rotate(-10deg)
}

.ttk-motif--peacock {
  bottom: -6%;
  left: 50%;
  transform: translate(-50%);
  width: clamp(260px,68vw,440px);
  opacity: .11
}

.ttk-motif--elephant-l {
  left: -6%;
  bottom: 8%;
  width: clamp(120px,26vw,190px);
  opacity: .14;
  transform: scaleX(1)
}

.ttk-motif--elephant-r {
  right: -6%;
  bottom: 8%;
  width: clamp(120px,26vw,190px);
  opacity: .14;
  transform: scaleX(-1)
}

.ttk-motif--cow {
  top: 8%;
  right: 3%;
  width: clamp(70px,14vw,105px);
  opacity: .1
}

.ttk-inner {
  position: relative;
  z-index: 2;
  width: min(560px,92vw);
  margin: 0 auto
}

.ttk-header {
  text-align: center;
  margin-bottom: clamp(28px,5vw,44px)
}

.ttk-eyebrow {
  font-family: var(--display);
  font-size: clamp(.78rem,2.2vw,.91rem);
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #f0c86abf;
  display: block;
  margin-bottom: 8px
}

.ttk-heading {
  font-family: var(--script);
  font-size: clamp(2.2rem,7vw,3rem);
  font-weight: 400;
  color: var(--ivory);
  line-height: 1.1;
  margin-bottom: 0;
  text-shadow: 0 2px 18px rgba(62,43,34,.35),0 0 40px rgba(216,169,87,.18)
}

.ttk-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 10px
}

.ttk-ornament span {
  height: 1px;
  width: clamp(28px,7vw,48px);
  background: linear-gradient(90deg,transparent,rgba(240,200,106,.8))
}

.ttk-ornament span:last-child {
  background: linear-gradient(90deg,rgba(240,200,106,.8),transparent)
}

.ttk-ornament i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #f0c86ad9;
  transform: rotate(45deg)
}

.ttk-lotus-divider {
  width: clamp(30px,8vw,40px);
  height: auto;
  object-fit: contain;
  opacity: .8;
  filter:brightness(2.2) sepia(.3) saturate(.6);
  pointer-events: none;
  user-select: none
}

.ttk-subline {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.07rem,2.9vw,1.22rem);
  color: #f7eedcb8;
  line-height: 1.55;
  letter-spacing: .01em
}

.ttk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px,3vw,16px)
}

.ttk-grid--single {
  grid-template-columns: minmax(0,220px);
  justify-content: center
}

.ttk-card--last-odd {
  grid-column: 1 / -1;
  max-width: calc(50% - clamp(5px,1.5vw,8px));
  justify-self: center
}

/**
 * ==============================================================================
 * 6. GUEST ESSENTIALS ("THINGS TO KNOW") GRID
 * ==============================================================================
 * Royal cards detailing event essentials:
 * - Dress Code, Venue details, Accommodations, Wedding Hashtag, etc.
 * - Staggered card entrance transitions with elastic icon spring bounce
 * - Gold divider rules and external map links
 * ==============================================================================
 */
.ttk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(22px,5vw,30px) clamp(13px,3vw,20px) clamp(20px,4vw,26px);
  border-radius: 16px;
  background: radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,240,210,.55) 0%,transparent 70%),linear-gradient(170deg,#fef9f0,#f8ecd6 55%,#f1e0c2);
  border: 1.5px solid rgba(216,169,87,.48);
  box-shadow: 0 1px #ffffffe6,0 3px #d8a9572e,0 10px 28px #3e2b2233,inset 0 0 0 1px #ffffff8c;
  opacity: 0;
  transform: translateY(36px) rotate(-1.5deg) scale(.93);
  transition: opacity .7s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),box-shadow .24s ease
}

.ttk-card:nth-child(2n) {
  transform: translateY(36px) rotate(1.5deg) scale(.93)
}

.ttk-card:before,.ttk-card:after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none
}

.ttk-card:before {
  top: 6px;
  left: 6px;
  border-top: 1.5px solid rgba(216,169,87,.55);
  border-left: 1.5px solid rgba(216,169,87,.55);
  border-radius: 4px 0 0
}

.ttk-card:after {
  bottom: 6px;
  right: 6px;
  border-bottom: 1.5px solid rgba(216,169,87,.55);
  border-right: 1.5px solid rgba(216,169,87,.55);
  border-radius: 0 0 4px
}

.ttk-card:hover {
  transform: translateY(-4px) rotate(0) scale(1.02)!important;
  box-shadow: 0 1px #fffffff2,0 3px #d8a9573d,0 22px 44px #3e2b2242,inset 0 0 0 1px #ffffffb3
}

.ttk-card.in-view {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1)
}

.ttk-card-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px,18vw,80px);
  height: clamp(64px,18vw,80px);
  margin-bottom: 10px;
  flex-shrink: 0
}

.ttk-card-icon-wrap:before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(216,169,87,.18) 0%,transparent 70%);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .6s ease,transform .6s ease
}

.ttk-card.in-view .ttk-card-icon-wrap:before {
  opacity: 1;
  transform: scale(1);
  transition-delay: .4s
}

.ttk-card-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter:drop-shadow(0 3px 8px rgba(62,43,34,.18));
  opacity: 0;
  transform: scale(.3) translateY(8px);
  transition: none
}

.ttk-card.in-view .ttk-card-icon {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity .5s ease,transform .7s cubic-bezier(.34,1.56,.64,1);
  transition-delay: .2s
}

@keyframes ttkIconFloat {
  0%,to {
    transform: translateY(0) scale(1)
  }

  45% {
    transform: translateY(-6px) scale(1.03)
  }

  75% {
    transform: translateY(-3px) scale(1.01)
  }

}

.ttk-card.in-view .ttk-card-icon {
  animation: ttkIconFloat 4.2s ease-in-out 1s infinite
}

.ttk-card-icon.icon-sprung {
  transition: none!important
}

.ttk-card:nth-child(1) .ttk-card-icon {
  animation-delay: 1s
}

.ttk-card:nth-child(2) .ttk-card-icon {
  animation-delay: 1.4s
}

.ttk-card:nth-child(3) .ttk-card-icon {
  animation-delay: 1.7s
}

.ttk-card:nth-child(4) .ttk-card-icon {
  animation-delay: 2.1s
}

.ttk-card:nth-child(5) .ttk-card-icon {
  animation-delay: 1.2s
}

.ttk-card:nth-child(6) .ttk-card-icon {
  animation-delay: 1.6s
}

.ttk-card-rule {
  width: 34px;
  height: 1px;
  flex-shrink: 0;
  margin-bottom: 8px;
  background: linear-gradient(90deg,transparent,rgba(216,169,87,.8) 30%,rgba(240,200,106,.9) 50%,rgba(216,169,87,.8) 70%,transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .55s cubic-bezier(.16,1,.3,1)
}

.ttk-card.in-view .ttk-card-rule {
  transform: scaleX(1);
  transition-delay: .35s
}

.ttk-card-title {
  font-family: var(--display);
  font-size: clamp(.83rem,2.3vw,.96rem);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8b2a3d;
  line-height: 1.2;
  margin-bottom: 5px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)
}

.ttk-card.in-view .ttk-card-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .42s
}

.ttk-card-body {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(.98rem,2.6vw,1.12rem);
  color: #3e2b22;
  opacity: 0;
  line-height: 1.48;
  white-space: pre-line;
  transform: translateY(6px);
  transition: opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)
}

.ttk-card.in-view .ttk-card-body {
  opacity: .82;
  transform: translateY(0);
  transition-delay: .5s
}

.ttk-card-link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(.63rem,1.7vw,.72rem);
  color: #8b2a3d;
  text-decoration: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s ease,transform .3s ease
}

.ttk-card.in-view .ttk-card-link {
  opacity: .7;
  transform: translateY(0);
  transition-delay: .58s
}

.ttk-card-link:hover {
  opacity: 1!important;
  text-decoration: underline
}

@media (prefers-reduced-motion: reduce) {
  .ttk-card,.ttk-card-icon,.ttk-card-rule,.ttk-card-title,.ttk-card-body,.ttk-card-link {
    opacity: 1!important;
    transform: none!important;
    transition: none!important;
    animation: none!important
  }

  .ttk-card-icon-wrap: before {
    opacity: 1!important;
    transform: scale(1)!important
  }

}

/**
 * ==============================================================================
 * 8. ROYAL NIGHT FINALE RSVP & CELEBRATORY FIREWORKS
 * ==============================================================================
 * Grand evening palace celebration card:
 * - Night courtyard backdrop with glowing lanterns
 * - Live interactive HTML5 canvas fireworks particle simulation
 * - One-tap WhatsApp RSVP confirmation with pre-filled message
 * - Google Calendar & Apple/iCal calendar integration buttons
 * ==============================================================================
 */
/* [ORIGINAL CODE PRESERVED BELOW]
.rsvp-section {
  min-height: 72svh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 30%,rgba(216,169,87,.18),transparent 15rem),linear-gradient(160deg,var(--leaf-dark),#16231f);
  color: var(--ivory);
  text-align: center
} */
.rsvp-section {
  min-height: 72svh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 30%,rgba(216,169,87,.18),transparent 15rem),linear-gradient(160deg,var(--leaf-dark),#16231f);
  color: var(--ivory);
  text-align: center;
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

.rsvp-card {
  width: min(720px,100%);
  padding: clamp(34px,7vw,70px);
  border: 1px solid rgba(247,238,220,.18);
  border-radius: 34px;
  background: #f7eedc12;
  backdrop-filter:blur(10px);
  box-shadow: 0 22px 70px #1f332938
}

.rsvp-card h2 {
  font-size: clamp(3rem,9vw,6.4rem);
  line-height: .9
}

/**
 * ==============================================================================
 * 9. FLOATING PICHWAI BRASS COMPASS & MUSIC CONTROLLER
 * ==============================================================================
 * Ornate fixed bottom-right interactive navigation:
 * - Rotating brass compass button revealing circular Pichwai menu
 * - Smooth scroll anchor links to each wedding celebration milestone
 * - Ambient instrumental wedding melody player with pulsating sound rings
 * ==============================================================================
 */
/* [ORIGINAL CODE PRESERVED BELOW]
.floating-menu {
  position: fixed;
  right: 6px;
  bottom: 18px;
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px
} */
.floating-menu {
  position: fixed;
  right: max(6px, calc(env(safe-area-inset-right) + 6px));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px
}

.floating-menu.is-visible {
  display: flex
}

/* [ORIGINAL CODE PRESERVED BELOW]
.music-toggle {
  position: relative;
  z-index: 2;
  width: 101px;
  height: 101px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(216,169,87,.18));
  transition: filter .3s ease,opacity .3s ease;
  opacity: .52;
  margin-right: -12px;
  margin-bottom: 0
} */
.music-toggle {
  position: relative;
  z-index: 2;
  width: clamp(52px, 13vw, 68px);
  height: clamp(52px, 13vw, 68px);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(216,169,87,.18));
  transition: filter .3s ease,opacity .3s ease;
  opacity: .52;
  margin-right: -4px;
  margin-bottom: 0
}

.music-toggle.is-playing {
  opacity: 1;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.52)) drop-shadow(0 0 18px rgba(216,169,87,.52))
}

.music-toggle:hover {
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(216,169,87,.44));
  opacity: .85
}

.music-toggle.is-playing:hover {
  opacity: 1
}

/* [ORIGINAL CODE PRESERVED BELOW]
.music-icon-img {
  width: 101px;
  height: 101px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .3s ease
} */
.music-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .3s ease
}

.music-toggle.is-playing .music-icon-img {
  animation: musicSpin 8s linear infinite
}

@keyframes musicSpin {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }

}

@keyframes musicRingPulse {
  0%,to {
    opacity: .7;
    transform: scale(1)
  }

  50% {
    opacity: 1;
    transform: scale(1.08)
  }

}

/* [ORIGINAL CODE PRESERVED BELOW]
.menu-toggle {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.52)) drop-shadow(0 0 12px rgba(216,169,87,.22));
  transition: filter .3s ease
} */
.menu-toggle,
.menu-panel {
  display: none !important;
}

.menu-toggle:hover {
  filter:drop-shadow(0 4px 22px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(216,169,87,.44))
}

.compass-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 50%;
  animation: compassSpin 24s linear infinite;
  transform-origin: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none
}

.floating-menu.is-open .compass-img {
  animation-play-state: paused
}

@keyframes compassSpin {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }

}

.menu-panel {
  position: absolute;
  bottom: 80px;
  right: -28px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  opacity: 0;
  transform: scale(.72) translateY(20px);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .34s cubic-bezier(.16,1,.3,1),transform .38s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 0 0 2.5px #d8a9578c,0 0 0 5px #d8a9572e,0 22px 56px #00000085
}

.floating-menu.is-open .menu-panel {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto
}

.menu-bg-circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden
}

.menu-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none
}

.menu-bg-circle:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #0a040861
}

.menu-nav-header {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #f7eedc8c;
  margin-bottom: 2px
}

.menu-lotus-top {
  position: relative;
  z-index: 2;
  margin-bottom: 4px;
  opacity: .72
}

.menu-links {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%
}

.menu-link {
  display: block;
  width: 100%;
  text-align: center;
  padding: 5px 0;
  color: #f7eedceb;
  font-family: var(--display);
  font-size: clamp(.88rem,2.5vw,1rem);
  letter-spacing: .08em;
  text-decoration: none;
  transition: color .18s ease,letter-spacing .18s ease;
  white-space: nowrap
}

.menu-link:hover {
  color: var(--amber-lit);
  letter-spacing: .14em
}

.menu-divider {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(216,169,87,.55) 30%,rgba(216,169,87,.55) 70%,transparent);
  margin: 0 auto;
  flex-shrink: 0
}

@media (prefers-reduced-motion: reduce) {
  .evt-header .evt-eyebrow,.evt-header .evt-title,.evt-header .evt-divider {
    opacity: 1!important;
    animation: none!important
  }

  .evt-path-wrap {
    display: none!important
  }

  .evt-stop {
    opacity: 1!important;
    transform: none!important;
    transition: none!important
  }

  .evt-stop.in-view .evt-stop-motif {
    animation: none!important
  }

}

@media (max-width: 620px) {
  .invite-arch-frame {
    height: auto;
    width: 125vw;
    max-width: 125vw
  }

  .invite-text-content {
    max-width: min(300px,76vw);
    top: 14%;
    bottom: 6%
  }

  .inv-cta {
    bottom: 4%
  }

  /* [ORIGINAL CODE PRESERVED BELOW]
  .inv-names {
    font-size: clamp(3.4rem,11vw,4.5rem)
  } */
  .inv-names {
    font-size: clamp(2.6rem, 9.5vw, 3.8rem);
    line-height: 1.08;
  }

  .inv-overline {
    font-size: .81rem
  }

  .inv-blessing p: not(.inv-overline) {
    font-size: .98rem
  }

  .inv-kicker {
    font-size: .95rem
  }

  .inv-parents {
    font-size: 1rem
  }

  .inv-occasion {
    font-size: 1.06rem
  }

  .inv-venue {
    font-size: 1.18rem
  }

  .inv-map {
    font-size: .95rem;
    margin-top: 4px;
  }

  /* [ORIGINAL CODE PRESERVED BELOW]
  .inv-date {
    font-size: 1.57rem
  } */
  .inv-date {
    font-size: 1.57rem;
    letter-spacing: normal;
  }

  .inv-lotus-div {
    width: clamp(60px,17vw,90px);
    margin: .1rem auto
  }

  .inv-blessing,.inv-blessing-alt {
    margin-bottom: .2rem;
    padding-bottom: .3rem
  }

  .inv-kicker {
    margin-bottom: .1rem
  }

  .inv-parents {
    margin-bottom: .2rem
  }

  .inv-occasion {
    margin-bottom: .25rem
  }

  .inv-meta {
    padding-top: .25rem
  }

}

.evt-stops {
  align-items: center;
  gap: clamp(32px,8svh,72px);
  padding-bottom: clamp(40px,8svh,90px)
}

/**
 * ==============================================================================
 * 7. CEREMONIAL JOURNEY: UNROLLING ROYAL FARMANS
 * ==============================================================================
 * Mehendi, Haldi, Sangeet, Shaadi, Reception, and Vidaai itinerary scrolls:
 * - Ancient parchment unrolling animation via hardware-accelerated clip-path
 * - Celebratory golden particle dust bursts
 * - Alternating left/right arrangement along ceremonial floral vine path
 * - Responsive typography auto-fit engine with dynamic scale transform
 * ==============================================================================
 */
.farman-stop {
  position: relative;
  width: min(480px,92vw);
  align-self: center
}

.farman-rolled-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%,-50%) translateY(28px);
  opacity: 0;
  transform-origin: center center;
  transition: opacity .26s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)
}

.farman-stop.is-entering .farman-rolled-wrap {
  opacity: 1;
  transform: translate(-50%,-50%) translateY(0);
  animation: farmanRolledFloat 3.6s ease-in-out .7s infinite
}

@keyframes farmanRolledFloat {
  0%,to {
    transform: translate(-50%,-50%) translateY(0)
  }

  44% {
    transform: translate(-50%,-50%) translateY(-10px)
  }

  72% {
    transform: translate(-50%,-50%) translateY(-4px)
  }

}

.farman-stop.is-unrolling .farman-rolled-wrap,.farman-stop.is-open .farman-rolled-wrap {
  opacity: 0;
  animation: none;
  transform: translate(-50%,-50%) scaleY(.12) translateY(10px);
  transition: opacity .5s ease 0ms,transform .6s cubic-bezier(.4,0,.6,1) 0ms
}

.farman-rolled-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter:drop-shadow(0 12px 28px rgba(62,43,34,.32))
}

.farman-open-wrap {
  position: relative;
  width: 100%;
  clip-path: inset(0 0 100% 0 round 2px);
  transition: -webkit-clip-path .86s cubic-bezier(.4,0,.2,1) 60ms,clip-path .86s cubic-bezier(.4,0,.2,1) 60ms;
  will-change: clip-path;
  transform: translateZ(0)
}

.farman-stop.is-unrolling .farman-open-wrap {
  clip-path: inset(0 0 0% 0 round 2px)
}

.farman-stop.is-open .farman-open-wrap {
  clip-path: inset(0 0 0% 0 round 2px);
  transition: none;
  filter:drop-shadow(0 22px 48px rgba(62,43,34,.22)) drop-shadow(0 4px 12px rgba(62,43,34,.12))
}

.farman-parchment-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none
}

.farman-content {
  position: absolute;
  inset: 8% 10% 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 6%;
  padding-bottom: 4%;
  text-align: center;
  gap: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden
}

.ev-fit {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  transform-origin: center center
}

.farman-stop.is-unrolling .farman-content,.farman-stop.is-open .farman-content {
  visibility: visible;
  pointer-events: auto
}

.farman-motif,.farman-name,.farman-rule,.farman-datetime,.farman-venue,.farman-note,.farman-map,.farman-map-rule {
  opacity: 0
}

@keyframes farmanMotifIn {
  0% {
    opacity: 0;
    transform: scale(.82) translateY(8px)
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0)
  }

}

@keyframes farmanTextIn {
  0% {
    opacity: 0;
    transform: translateY(12px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }

}

@keyframes farmanMotifFloat {
  0%,to {
    filter:drop-shadow(0 6px 18px rgba(166,56,79,.22)) drop-shadow(0 0 0px rgba(216,169,87,0))
  }

  50% {
    filter:drop-shadow(0 10px 28px rgba(166,56,79,.18)) drop-shadow(0 0 22px rgba(216,169,87,.3))
  }

}

@keyframes farmanDustRise {
  0% {
    opacity: 0;
    transform: translateY(0) translate(0) scale(1)
  }

  20% {
    opacity: .7
  }

  80% {
    opacity: .4
  }

  to {
    opacity: 0;
    transform: translateY(-38px) translate(var(--dx,6px)) scale(.5)
  }

}

.farman-stop.is-unrolling .farman-motif,.farman-stop.is-open .farman-motif {
  animation: farmanMotifIn .5s cubic-bezier(.4,0,.2,1) .2s both,farmanMotifFloat 3.8s ease-in-out .9s infinite
}

.farman-stop.is-unrolling .farman-name,.farman-stop.is-open .farman-name {
  animation: farmanTextIn .42s cubic-bezier(.4,0,.2,1) .3s both
}

.farman-stop.is-unrolling .farman-rule,.farman-stop.is-open .farman-rule {
  animation: farmanTextIn .38s cubic-bezier(.4,0,.2,1) .42s both
}

.farman-stop.is-unrolling .farman-datetime,.farman-stop.is-open .farman-datetime {
  animation: farmanTextIn .38s cubic-bezier(.4,0,.2,1) .5s both
}

.farman-stop.is-unrolling .farman-venue,.farman-stop.is-open .farman-venue {
  animation: farmanTextIn .36s cubic-bezier(.4,0,.2,1) .58s both
}

.farman-stop.is-unrolling .farman-note,.farman-stop.is-open .farman-note {
  animation: farmanTextIn .34s cubic-bezier(.4,0,.2,1) .65s both
}

.farman-stop.is-unrolling .farman-map,.farman-stop.is-open .farman-map {
  animation: farmanTextIn .32s cubic-bezier(.4,0,.2,1) .72s both
}

.farman-stop.is-unrolling .farman-map-rule,.farman-stop.is-open .farman-map-rule {
  animation: farmanTextIn .3s cubic-bezier(.4,0,.2,1) .76s both
}

.farman-dust-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 2px
}

.farman-dust-dot {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,#d8a957e6,#d8a95700 70%);
  animation: farmanDustRise var(--dur, 4s) ease-out var(--del, 0s) infinite;
  opacity: 0
}

.farman-motif {
  width: clamp(140px,44%,220px);
  height: clamp(140px,44%,220px);
  object-fit: contain;
  flex-shrink: 0;
  margin-top: -18px;
  margin-bottom: 2px
}

.farman-name {
  font-family: var(--script);
  font-size: clamp(3.1rem,9.8vw,4.5rem);
  color: var(--rose-dark);
  line-height: 1;
  margin: 0 0 2px;
  letter-spacing: .01em;
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%
}

.farman-name.farman-name--fallback {
  font-family: var(--display);
  font-style: italic;
  letter-spacing: .01em
}

.farman-name.farman-name--fallback.farman-name--deva {
  font-style: normal
}

.farman-rule {
  width: clamp(60px,16vw,90px);
  height: 1px;
  flex-shrink: 0;
  margin: 8px 0;
  background: linear-gradient(90deg,transparent,rgba(216,169,87,.8) 30%,rgba(216,169,87,.8) 70%,transparent)
}

/* [ORIGINAL CODE PRESERVED BELOW]
.farman-datetime {
  font-family: var(--display);
  font-size: clamp(1.09rem,3.4vw,1.4rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0;
  line-height: 1.2;
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%
} */
.farman-datetime {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.18rem,3.6vw,1.48rem);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  color: var(--rose);
  margin: 0;
  line-height: 1.25;
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%
}

.farman-venue {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.23rem,3.8vw,1.54rem);
  color: var(--ink);
  opacity: .78;
  margin: 4px 0 0;
  line-height: 1.3;
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%
}

.farman-note {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.04rem,3.1vw,1.26rem);
  color: var(--ink);
  opacity: .62;
  max-width: 82%;
  margin: 4px auto 0;
  line-height: 1.34;
  overflow-wrap: break-word;
  min-width: 0;
  white-space: pre-line
}

.farman-map-rule {
  width: clamp(50px,14vw,72px);
  height: 1px;
  flex-shrink: 0;
  margin: 6px 0 0;
  background: linear-gradient(90deg,transparent,rgba(216,169,87,.55) 30%,rgba(216,169,87,.55) 70%,transparent)
}

/* [ORIGINAL CODE PRESERVED BELOW]
.farman-map {
  display: inline-block;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(.98rem,2.9vw,1.18rem);
  color: var(--rose-dark);
  text-decoration: none;
  opacity: .62;
  margin-top: 10px;
  pointer-events: auto;
  transition: opacity .22s ease
} */
.farman-map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(.98rem,2.9vw,1.18rem);
  color: var(--rose-dark);
  text-decoration: none;
  opacity: .62;
  margin-top: 6px;
  padding: 6px 14px;
  min-height: 44px;
  pointer-events: auto;
  touch-action: manipulation;
  transition: opacity .22s ease
}

.farman-map:hover {
  opacity: 1
}

@keyframes farmanAwaitPulse {
  0%,to {
    filter:drop-shadow(0 22px 48px rgba(62,43,34,.22)) drop-shadow(0 4px 12px rgba(62,43,34,.12))
  }

  50% {
    filter:drop-shadow(0 22px 48px rgba(62,43,34,.22)) drop-shadow(0 4px 12px rgba(62,43,34,.12)) drop-shadow(0 0 32px rgba(216,169,87,.28))
  }

}

.farman-stop.farman-awaiting .farman-open-wrap {
  animation: farmanAwaitPulse 2.2s ease-in-out infinite
}

.farman-inter {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .7s ease
}

.farman-inter.in-view {
  opacity: 1
}

@media (prefers-reduced-motion: reduce) {
  .farman-rolled-wrap {
    display: none!important
  }

  .farman-open-wrap {
    clip-path: none!important;
    transition: none!important
  }

  .farman-content {
    visibility: visible!important
  }

  .farman-stop .farman-motif,.farman-stop .farman-name,.farman-stop .farman-rule,.farman-stop .farman-datetime,.farman-stop .farman-venue,.farman-stop .farman-note,.farman-stop .farman-map,.farman-stop .farman-map-rule {
    opacity: 1!important;
    transform: none!important;
    animation: none!important
  }

}

.rsvp-section {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  isolation: isolate
}

.rsvp-bg {
  position: absolute;
  inset: 0;
  background-image: url(../assets/rsvp/pn-rsvp-bg-royal-finale-m-v01.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  transform: scale(1.03);
  transition: transform 14s ease-out
}

.rsvp-section.rsvp-alive .rsvp-bg {
  transform: scale(1)
}

.rsvp-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,#060d0b1a,#060d0b4d 40%,#060d0bb8 72%,#060d0be0),radial-gradient(ellipse 78% 52% at 50% 38%,rgba(8,14,30,.36) 0%,transparent 70%)
}

.rsvp-fireworks-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none
}

.rsvp-lamp-glows {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none
}

.rsvp-lamp {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.rsvp-lamp--l {
  left: 10%;
  bottom: 36%;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle,rgba(240,190,80,.28) 0%,transparent 72%);
  animation: lampPulse 4.8s ease-in-out infinite
}

.rsvp-lamp--r {
  right: 10%;
  bottom: 36%;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle,rgba(240,190,80,.26) 0%,transparent 72%);
  animation: lampPulse 5.2s ease-in-out .6s infinite
}

.rsvp-lamp--cl {
  left: 26%;
  bottom: 28%;
  width: 56px;
  height: 56px;
  background: radial-gradient(circle,rgba(240,190,80,.2) 0%,transparent 72%);
  animation: lampPulse 6.1s ease-in-out 1.1s infinite
}

.rsvp-lamp--cr {
  right: 26%;
  bottom: 28%;
  width: 56px;
  height: 56px;
  background: radial-gradient(circle,rgba(240,190,80,.2) 0%,transparent 72%);
  animation: lampPulse 5.7s ease-in-out 1.8s infinite
}

@keyframes lampPulse {
  0%,to {
    opacity: .55;
    transform: scale(1)
  }

  50% {
    opacity: 1;
    transform: scale(1.22)
  }

}

.rsvp-lotus-top {
  position: relative;
  z-index: 6;
  width: min(340px,82vw);
  margin: clamp(32px,7svh,64px) auto 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 1.1s ease .4s,transform 1.1s ease .4s;
  pointer-events: none
}

.rsvp-section.rsvp-alive .rsvp-lotus-top {
  opacity: .82;
  transform: translateY(0)
}

.rsvp-lotus-top img {
  display: block;
  width: 100%;
  height: auto;
  filter:drop-shadow(0 2px 12px rgba(166,56,79,.28))
}

.rsvp-content {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(20px,4svh,40px) clamp(20px,6vw,48px) clamp(48px,10svh,96px);
  max-width: 540px;
  width: 100%
}

.rsvp-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease,transform .9s ease
}

.rsvp-section.rsvp-alive .rsvp-reveal {
  opacity: 1;
  transform: translateY(0)
}

.rsvp-eyebrow {
  transition-delay: .5s
}

.rsvp-headline {
  transition-delay: .75s
}

.rsvp-body {
  transition-delay: 1.05s
}

.rsvp-cta-wrap {
  transition-delay: 1.35s
}

.rsvp-std {
  transition-delay: 1.7s
}

.rsvp-eyebrow {
  font-family: var(--display);
  font-size: clamp(.94rem,3.1vw,1.12rem);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #d8a957e0;
  margin-bottom: clamp(14px,3vw,22px);
  text-shadow: 0 2px 14px rgba(0,0,0,.55)
}

.rsvp-section.rsvp-alive .rsvp-eyebrow {
  opacity: .5
}

.rsvp-headline {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  line-height: 1.08;
  margin-bottom: clamp(16px,3svh,28px);
  text-shadow: 0 4px 28px rgba(0,0,0,.6),0 1px 6px rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .06em
}

.rsvp-hl-will {
  font-size: clamp(1.9rem,7.5vw,3.2rem);
  color: #f7eedcd1;
  letter-spacing: .04em
}

.rsvp-hl-join {
  font-size: clamp(3.2rem,13vw,5.4rem);
  font-style: normal;
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--ivory);
  line-height: 1;
  text-shadow: 0 0 60px rgba(216,169,87,.34),0 4px 32px rgba(0,0,0,.68),0 1px 6px rgba(0,0,0,.44)
}

.rsvp-body {
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(1.3rem,4.9vw,1.56rem);
  line-height: 1.72;
  color: #f7eedcc7;
  max-width: 360px;
  margin-bottom: clamp(28px,5svh,44px);
  text-shadow: 0 2px 18px rgba(0,0,0,.55)
}

.rsvp-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(36px,7svh,60px)
}

.rsvp-btn-primary {
  display: inline-block;
  text-decoration: none;
  color: var(--ivory);
  background: linear-gradient(135deg,#77283af2,#641c2efa 55%,#501424f5);
  border: 1px solid rgba(216,169,87,.38);
  border-radius: 2px;
  padding: clamp(14px,3.2svh,18px) clamp(32px,8vw,56px);
  font-family: var(--display);
  font-size: clamp(1.14rem,4.4vw,1.37rem);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  box-shadow: 0 8px 36px #641c2e85,0 2px 8px #00000057,inset 0 1px #d8a9572e,inset 0 -1px #0000002e;
  transition: background .28s ease,box-shadow .28s ease,transform .18s ease;
  position: relative;
  overflow: hidden
}

.rsvp-btn-primary:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,transparent 30%,rgba(216,169,87,.14) 50%,transparent 70%);
  transform: translate(-100%);
  transition: transform .55s ease
}

.rsvp-btn-primary:hover:before {
  transform: translate(100%)
}

.rsvp-btn-primary:hover {
  box-shadow: 0 12px 48px #641c2ead,0 3px 12px #00000061,inset 0 1px #d8a95742,inset 0 -1px #00000038;
  transform: translateY(-1px)
}

.rsvp-btn-primary:active {
  transform: translateY(0)
}

.rsvp-btn-inner {
  position: relative;
  z-index: 1
}

.rsvp-helper {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(.94rem,3.4vw,1.07rem);
  color: #f7eedc70;
  letter-spacing: .04em;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
  max-width: 280px;
  line-height: 1.55
}

.rsvp-std {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px,2.8svh,22px)
}

.rsvp-std-heading {
  font-family: var(--display);
  font-size: clamp(.88rem,2.9vw,1.04rem);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #d8a957b8;
  text-shadow: 0 2px 10px rgba(0,0,0,.44);
  display: flex;
  align-items: center;
  gap: 14px
}

.rsvp-std-heading:before,.rsvp-std-heading:after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(216,169,87,.48),transparent)
}

.rsvp-std-btns {
  display: flex;
  gap: clamp(10px,3vw,16px);
  flex-wrap: wrap;
  justify-content: center
}

.rsvp-cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #f7e2bee0;
  background: #060d0b80;
  border: 1px solid rgba(216,169,87,.38);
  border-radius: 999px;
  padding: 9px 20px;
  font-family: var(--display);
  font-style: italic;
  font-size: .96rem;
  letter-spacing: .1em;
  text-transform: none;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow: 0 4px 18px #0000003d;
  transition: background .3s,border-color .3s
}

.rsvp-cal-btn:hover {
  background: #d8a9571f;
  border-color: #d8a957b3;
  color: #f7eedcf5
}

.rsvp-cal-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: .72
}

@media (min-width: 640px) {
  .rsvp-content {
    padding-top: clamp(16px,3svh,28px)
  }

}

@media (prefers-reduced-motion: reduce) {
  .rsvp-fireworks-canvas {
    display: none!important
  }

  .ftn-jet,.ftn-mist,.ftn-pool-shim {
    animation: none!important;
    opacity: .5!important
  }

  .rsvp-lamp {
    animation: none!important;
    opacity: .4!important
  }

  .rsvp-bg {
    transform: none!important;
    transition: none!important
  }

  .rsvp-reveal {
    opacity: 1!important;
    transform: none!important;
    transition: none!important
  }

  .rsvp-lotus-top {
    opacity: .8!important;
    transform: none!important;
    transition: none!important
  }

}

.cpl-section {
  position: relative;
  overflow: hidden;
  color: var(--ink)
}

.cpl-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(../assets/meet_the_couple/pn-cpl-bg-secret-garden-m-v01.webp) center top / cover no-repeat
}

.cpl-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,#060d0b8c,#060d0b00 10% 55%,#f7eedc8c 80%,#f7eedceb)
}

.cpl-content {
  position: relative;
  z-index: 3;
  padding: clamp(48px,8svh,80px) 32px clamp(40px,7svh,64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 400px;
  margin: 0 auto
}

/**
 * ==============================================================================
 * 10. SECRET GARDEN & PARTING PALACE TREES REVEAL
 * ==============================================================================
 * Scroll-driven romantic narrative reveal:
 * - Ornate left and right palace tree overlays that part outward with power-4 easing
 * - High-resolution couple portrait revealed in the secret garden
 * - Romantic love story narrative and personality tag chips
 * ==============================================================================
 */
.cpl-header {
  text-align: center
}

.cpl-eyebrow {
  font-family: var(--display);
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #c48c2deb;
  margin-bottom: 6px
}

.cpl-title {
  font-family: var(--display);
  font-size: clamp(3rem,10.6vw,4.75rem);
  font-weight: 300;
  font-style: italic;
  color: var(--rose-dark);
  line-height: .96;
  letter-spacing: .01em;
  margin-bottom: 14px;
  text-shadow: 0 2px 20px rgba(247,238,220,.7),0 4px 32px rgba(0,0,0,.35)
}

.cpl-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto
}

.cpl-ornament span {
  display: block;
  width: clamp(24px,7vw,38px);
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(166,56,79,.5))
}

.cpl-ornament span:last-child {
  background: linear-gradient(270deg,transparent,rgba(166,56,79,.5))
}

.cpl-ornament i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rose);
  opacity: .65
}

.cpl-story {
  text-align: center;
  width: 100%
}

.cpl-story-body {
  font-family: var(--body);
  font-size: clamp(1.1rem,4.25vw,1.25rem);
  line-height: 1.78;
  color: #3e2b22f5
}

.cpl-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 24px
}

.cpl-tags:empty {
  display: none
}

.cpl-tag-chip {
  font-family: var(--body);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #3e2b22c7;
  border: 1px solid rgba(216,169,87,.45);
  padding: 5px 14px;
  background: #d8a95714
}

.cpl-story-htag {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem,4.5vw,1.45rem);
  letter-spacing: .02em;
  color: var(--amber);
  text-align: center;
  margin-top: 26px
}

.cpl-story-htag[hidden] {
  display: none
}

.cpl-tree {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
  width: 58%;
  pointer-events: none;
  user-select: none;
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: top center
}

.cpl-tree--left {
  left: 0;
  background-image: url(../assets/meet_the_couple/pn-cpl-ovl-tree-left-m-v01.webp)
}

.cpl-tree--right {
  right: 0;
  background-image: url(../assets/meet_the_couple/pn-cpl-ovl-tree-right-m-v01.webp)
}

.cpl-tree img {
  display: none
}

@media (prefers-reduced-motion: reduce) {
  .cpl-tree--left {
    transform: translate(-100%)!important
  }

  .cpl-tree--right {
    transform: translate(100%)!important
  }

  .cpl-header,.cpl-story {
    opacity: 1!important;
    transform: none!important
  }

}

.inv-kicker {
  font-family: var(--script)!important;
  font-size: clamp(1.54rem,5.3vw,1.85rem)!important;
  letter-spacing: .03em!important;
  text-transform: none!important;
  font-style: italic;
  color: var(--rose)!important;
  font-weight: 400!important;
  opacity: .88!important;
  margin-bottom: .45rem!important;
  text-shadow: 0 1px 10px rgba(166,56,79,.14)
}

.invite-section.invite-active .inv-kicker {
  animation: inkSettle 1.1s cubic-bezier(.16,1,.3,1) .22s both!important
}

@keyframes lotusRipple {
  0% {
    transform: translate(-50%,-50%) scale(.72);
    opacity: .62
  }

  to {
    transform: translate(-50%,-50%) scale(1.9);
    opacity: 0
  }

}

.lotus-button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(84px,22vw,108px);
  height: clamp(84px,22vw,108px);
  border-radius: 50%;
  border: 1.5px solid rgba(223,162,168,.52);
  transform: translate(-50%,-50%) scale(.72);
  opacity: 0;
  pointer-events: none;
  animation: lotusRipple 2.6s ease-out 1.2s infinite
}

.intro.show-lotus .lotus-button:before {
  animation: lotusRipple 2.6s ease-out 0s infinite
}

.lotus-cta-group:before {
  content: "";
  position: absolute;
  top: clamp(42px,11vw,54px);
  left: 50%;
  width: clamp(84px,22vw,108px);
  height: clamp(84px,22vw,108px);
  border-radius: 50%;
  border: 1px solid rgba(216,169,87,.36);
  transform: translate(-50%,-50%) scale(.72);
  opacity: 0;
  pointer-events: none;
  animation: lotusRipple 2.6s ease-out 1.9s infinite
}

.lotus-open-img {
  display: block;
  width: clamp(80px,22vw,108px);
  height: clamp(80px,22vw,108px);
  grid-area: 1 / 1;
  object-fit: contain;
  opacity: 0;
  transition: opacity .42s ease .1s;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.28)) drop-shadow(0 0 38px rgba(223,162,168,.75)) drop-shadow(0 0 70px rgba(216,169,87,.4))
}

.lotus-button.lotus-phase-1 .lotus-icon-img {
  animation: none!important;
  transform: scale(.9)!important;
  transition: transform .2s cubic-bezier(.16,1,.3,1)!important;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.32)) drop-shadow(0 0 12px rgba(223,162,168,.35))!important
}

.lotus-button.lotus-phase-2 .lotus-icon-img {
  animation: none!important;
  transform: scale(1.15)!important;
  transition: transform .4s cubic-bezier(.22,1,.36,1),filter .4s ease!important;
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.2)) drop-shadow(0 0 52px rgba(223,162,168,.95)) drop-shadow(0 0 90px rgba(216,169,87,.52))!important
}

.lotus-button.lotus-phase-2 .lotus-glow-burst {
  opacity: .28!important;
  transform: translate(-50%,-50%) scale(.6)!important;
  transition: opacity .4s ease,transform .6s ease!important
}

.lotus-button.lotus-phase-3 .lotus-glow-burst {
  opacity: .36!important;
  transform: translate(-50%,-50%) scale(.75)!important;
  transition: opacity .3s ease,transform .5s ease!important
}

.lotus-button.is-open .lotus-open-img {
  opacity: 1;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.18)) drop-shadow(0 0 60px rgba(223,162,168,.92)) drop-shadow(0 0 110px rgba(216,169,87,.55))
}

.farman-stop.farman-left {
  align-self: flex-start;
  margin-left: clamp(0px,3vw,18px)
}

.farman-stop.farman-right {
  align-self: flex-end;
  margin-right: clamp(0px,3vw,18px)
}

.farman-stop--main {
  width: min(520px,96vw)
}

.farman-stop--main .farman-open-wrap {
  filter:drop-shadow(0 28px 60px rgba(62,43,34,.32)) drop-shadow(0 0 42px rgba(216,169,87,.22)) drop-shadow(0 4px 14px rgba(62,43,34,.18))
}

/* [ORIGINAL CODE PRESERVED BELOW]
.farman-stop--main .farman-name {
  font-size: clamp(1.96rem,6.3vw,2.66rem)
} */
.farman-stop--main .farman-name {
  font-size: clamp(3.1rem,9.8vw,4.5rem)
}

.farman-inter--lotus {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: clamp(6px,1.5svh,12px) 0;
  opacity: 0;
  transition: opacity .7s ease
}

.farman-inter--lotus.in-view {
  opacity: 1
}

.farman-inter--lotus img {
  width: clamp(48px,14vw,72px);
  height: auto;
  opacity: .55;
  filter:drop-shadow(0 0 12px rgba(216,169,87,.28));
  animation: closingLotusBreath 5s ease-in-out infinite
}

@keyframes ttkGlowPulse {
  0%,to {
    opacity: .7;
    transform: scale(1);
    box-shadow: 0 0 0 3px #d8a9571f,0 0 18px #d8a9571a
  }

  50% {
    opacity: 1;
    transform: scale(1.06);
    box-shadow: 0 0 0 5px #d8a95738,0 0 32px #d8a95738
  }

}

.ttk-card.in-view .ttk-card-icon-wrap:before {
  background: radial-gradient(circle,rgba(216,169,87,.28) 0%,rgba(216,169,87,.12) 45%,transparent 72%);
  animation: ttkGlowPulse 3.8s ease-in-out infinite;
  animation-delay: .6s
}

.ttk-ornament svg,.cpl-ornament svg {
  display: block;
  flex-shrink: 0
}

.closing-section {
  position: relative;
  overflow: hidden;
  min-height: 62svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(64px,12svh,120px) 24px clamp(80px,14svh,144px);
  background: linear-gradient(180deg,#0c1a16,#060d0b);
  color: var(--ivory);
  text-align: center
}

.closing-bg {
  position: absolute;
  inset: 0;
  background: url(../assets/rsvp/pn-rsvp-bg-royal-finale-m-v01.webp) center bottom / cover no-repeat;
  opacity: .18;
  pointer-events: none
}

.closing-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,#060d0beb,#060d0b9e 45%,#060d0bd1);
  pointer-events: none
}

.closing-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%
}

/* [ORIGINAL CODE PRESERVED BELOW]
.rsvp-closing-frame {
  position: relative;
  width: 100%;
  max-width: min(300px,88vw);
  margin: 0 auto;
  padding: clamp(28px,6vw,48px) clamp(24px,6vw,44px);
  display: flex;
  flex-direction: column;
  align-items: center
} */
.rsvp-closing-frame {
  position: relative;
  width: 100%;
  max-width: min(340px,90vw);
  margin: 0 auto;
  padding: clamp(28px,6vw,48px) clamp(20px,5vw,36px);
  display: flex;
  flex-direction: column;
  align-items: center
}

.rsvp-closing-frame:before,.rsvp-closing-frame:after,.rsvp-corner {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  pointer-events: none;
  border-color: #d8a95766;
  border-style: solid
}

.rsvp-closing-frame:before {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px
}

.rsvp-closing-frame:after {
  right: 0;
  bottom: 0;
  border-width: 0 1px 1px 0
}

.rsvp-corner--tr {
  top: 0;
  right: 0;
  border-width: 1px 1px 0 0
}

.rsvp-corner--bl {
  bottom: 0;
  left: 0;
  border-width: 0 0 1px 1px
}

.closing-lotus {
  width: clamp(56px,16vw,84px);
  height: auto;
  opacity: 0;
  margin-bottom: 1.4rem;
  filter:drop-shadow(0 0 18px rgba(216,169,87,.38))
}

.closing-content.in-view .closing-lotus {
  animation: inkSettle 1.2s cubic-bezier(.16,1,.3,1) 0ms both,closingLotusBreath 5.5s ease-in-out 1.5s infinite
}

@keyframes closingLotusBreath {
  0%,to {
    opacity: .72;
    transform: scale(1)
  }

  50% {
    opacity: .92;
    transform: scale(1.06)
  }

}

.closing-eyebrow {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(.8rem,2.5vw,.94rem);
  letter-spacing: .2em;
  color: #d8a957b3;
  margin-bottom: .7rem;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: .2s
}

.closing-content.in-view .closing-eyebrow {
  opacity: 1;
  transform: translateY(0)
}

.closing-names {
  font-family: var(--script);
  font-size: clamp(3.2rem,11vw,5.4rem);
  font-weight: 400;
  color: var(--ivory);
  line-height: 1.12;
  letter-spacing: .02em;
  margin-bottom: 1.4rem;
  opacity: 0;
  transform: translateY(18px) scale(.96);
  transition: opacity 1.1s ease,transform 1.2s cubic-bezier(.14,1,.28,1);
  transition-delay: .38s
}

/* [ORIGINAL CODE PRESERVED BELOW]
.closing-names .closing-name--groom,
.closing-names .closing-name--bride {
  display: block;
}

.closing-names .closing-amp {
  display: block;
  font-size: .78em;
  line-height: 1;
  margin: .15rem auto;
} */
.closing-names .closing-name--groom,
.closing-names .closing-name--bride {
  display: inline-block;
}

.closing-names .closing-amp {
  display: inline-block;
  font-size: .78em;
  line-height: 1;
}

.closing-content.in-view .closing-names {
  opacity: 1;
  transform: translateY(0) scale(1);
  text-shadow: 0 2px 24px rgba(0,0,0,.65),0 0 60px rgba(216,169,87,.3),0 0 130px rgba(216,169,87,.14);
  animation: closingNameGlow 6s ease-in-out 1.4s infinite
}

@keyframes closingNameGlow {
  0%,to {
    text-shadow: 0 2px 24px rgba(0,0,0,.65),0 0 50px rgba(216,169,87,.24)
  }

  50% {
    text-shadow: 0 2px 20px rgba(0,0,0,.55),0 0 80px rgba(216,169,87,.46),0 0 150px rgba(216,169,87,.18)
  }

}

.closing-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 1.4rem;
  opacity: 0;
  transform: scaleX(.6);
  transition: opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay: .56s
}

.closing-content.in-view .closing-ornament {
  opacity: 1;
  transform: scaleX(1)
}

.closing-ornament span {
  height: 1px;
  flex: 1;
  max-width: 60px;
  background: linear-gradient(90deg,transparent,rgba(216,169,87,.55))
}

.closing-ornament span:last-child {
  background: linear-gradient(90deg,rgba(216,169,87,.55),transparent)
}

.closing-ornament i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d8a957c7;
  box-shadow: 0 0 9px #d8a95785;
  font-style: normal
}

.closing-line {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(.92rem,3vw,1.08rem);
  color: #f7e2beb8;
  line-height: 1.7;
  max-width: 400px;
  margin-bottom: 1rem;
  letter-spacing: .03em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: .68s
}

.closing-content.in-view .closing-line {
  opacity: 1;
  transform: translateY(0)
}

/* [ORIGINAL CODE PRESERVED BELOW]
.closing-date {
  font-family: var(--display);
  font-size: clamp(.7rem,2.1vw,.82rem);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #d8a95770;
  opacity: 0;
  transition: opacity .7s ease;
  transition-delay: .84s
} */
/* [ORIGINAL CODE PRESERVED BELOW]
.closing-date {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(.85rem,2.3vw,.98rem);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #d8a957b8;
  opacity: 0;
  transition: opacity .7s ease;
  transition-delay: .84s
} */
.closing-date {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.28rem,3.45vw,1.47rem);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  color: #d8a957b8;
  opacity: 0;
  transition: opacity .7s ease;
  transition-delay: .84s
}

.closing-content.in-view .closing-date {
  opacity: 1
}

/* [ORIGINAL CODE PRESERVED BELOW]
.closing-monogram {
  display: block;
  width: clamp(120px, 34vw, 160px);
  height: auto;
  margin: 1.25rem auto 0;
  filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 14px rgba(216, 169, 87, 0.22));
  opacity: 0;
  transform: translateY(12px) scale(.95);
  transition: opacity .85s ease, transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: .96s;
  pointer-events: none;
} */
/* [ORIGINAL CODE PRESERVED BELOW]
.closing-monogram {
  display: block;
  width: clamp(144px, 41vw, 192px);
  height: auto;
  margin: 1.25rem auto 0;
  filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 16px rgba(216, 169, 87, 0.25));
  opacity: 0;
  transform: translateY(12px) scale(.95);
  transition: opacity .85s ease, transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: .96s;
  pointer-events: none;
} */
/* [ORIGINAL CODE PRESERVED BELOW]
.closing-monogram {
  display: block;
  width: clamp(172px, 49vw, 230px);
  height: auto;
  margin: 1.25rem auto 0;
  filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 16px rgba(216, 169, 87, 0.25));
  opacity: 0;
  transform: translateY(12px) scale(.95);
  transition: opacity .85s ease, transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: .96s;
  pointer-events: none;
} */
.closing-monogram {
  display: block;
  width: clamp(224px, 64vw, 300px);
  height: auto;
  margin: 1.25rem auto 0;
  /* Inverts black lines to white while preserving the red wedding rings */
  filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 16px rgba(216, 169, 87, 0.25));
  opacity: 0;
  transform: translateY(12px) scale(.95);
  transition: opacity .85s ease, transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: .96s;
  pointer-events: none;
}

.closing-content.in-view .closing-monogram {
  opacity: .92;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  /* [ORIGINAL CODE PRESERVED BELOW]
  .closing-lotus,.closing-eyebrow,.closing-names,.closing-ornament,.closing-line,.closing-date {
    opacity: 1!important;
    transform: none!important;
    animation: none!important;
    transition: none!important
  } */
  .closing-lotus,.closing-eyebrow,.closing-names,.closing-ornament,.closing-line,.closing-date,.closing-monogram {
    opacity: 1!important;
    transform: none!important;
    animation: none!important;
    transition: none!important
  }
}

@media (min-width: 768px) {
  html,body {
    max-width: 100%;
    overflow-x: hidden
  }

  .section {
    padding-left: clamp(28px,4vw,56px);
    padding-right: clamp(28px,4vw,56px)
  }

  .section-inner {
    width: min(1180px,100%)
  }

  .section-title {
    font-size: clamp(4.2rem,7.2vw,6.8rem)
  }

  .section-lede {
    max-width: 560px;
    font-size: clamp(1.22rem,1.8vw,1.62rem)
  }

  .intro-bg {
    object-position: center top
  }

  .intro-vignette {
    background: radial-gradient(ellipse 42% 60% at 50% 43%,rgba(216,169,87,.09) 0%,rgba(166,56,79,.04) 44%,transparent 70%),linear-gradient(180deg,rgba(4,8,6,.72) 0%,transparent 20%,transparent 56%,rgba(4,8,6,.86) 100%),linear-gradient(90deg,rgba(4,8,6,.62) 0%,transparent 24%,transparent 76%,rgba(4,8,6,.6) 100%)
  }

  .intro.is-lit .intro-vignette {
    background: linear-gradient(180deg,rgba(4,8,6,.24) 0%,transparent 18%,transparent 62%,rgba(4,8,6,.66) 100%),linear-gradient(90deg,rgba(4,8,6,.36) 0%,transparent 22%,transparent 78%,rgba(4,8,6,.34) 100%)
  }

  .intro-jhoomer {
    top: -24px;
    width: clamp(210px,24vw,290px)
  }

  .rope-button {
    width: clamp(110px,13vw,144px);
    height: clamp(500px,64svh,640px)
  }

  .intro-floral-left,.intro-floral-right {
    width: clamp(180px,18vw,260px);
    bottom: -10svh
  }

  .intro-floral-left {
    left: -6vw
  }

  .intro-floral-right {
    right: -6vw
  }

  .diya-wrap {
    width: clamp(72px,8vw,102px)
  }

  .diya-wrap.diya-left {
    left: clamp(120px,22vw,280px);
    bottom: 22svh
  }

  .diya-wrap.diya-right {
    right: clamp(120px,22vw,280px);
    bottom: 22svh
  }

  .intro-reveal: after {
    top: 38svh;
    width: min(680px,66vw);
    height: 43svh
  }

  .intro-reveal: before {
    width: min(720px,70vw);
    top: 56svh
  }

  .intro-reveal-item {
    width: min(760px,82vw)
  }

  .intro-reveal .names {
    top: 42svh;
    font-size: clamp(6rem,9vw,8.4rem)
  }

  .intro-reveal .ornament {
    top: 66svh;
    width: clamp(220px,24vw,320px)
  }

  .intro-reveal .date {
    top: 69svh;
    font-size: clamp(1.08rem,1.5vw,1.34rem)
  }

  .intro-reveal .venue {
    top: 73svh;
    font-size: clamp(1.06rem,1.45vw,1.3rem)
  }

  .lotus-cta-group {
    top: 79svh
  }

  .lotus-button,.lotus-icon-img,.lotus-open-img {
    width: clamp(96px,10vw,124px);
    height: clamp(96px,10vw,124px)
  }

  .lotus-button: before,.lotus-cta-group: before {
    width: clamp(96px,10vw,124px);
    height: clamp(96px,10vw,124px)
  }

  .lotus-cta-group: before {
    top: clamp(48px,5vw,62px)
  }

  .lotus-cta-label {
    font-size: clamp(1.12rem,1.45vw,1.34rem)
  }

  .invite-section {
    min-height: 100svh;
    padding: 0
  }

  .invite-bg {
    background-image: url(../assets/invite/pn-inv-bg-panel-d-v01.webp);
    background-size: cover;
    background-position: center center
  }

  .invite-vignette {
    background: radial-gradient(ellipse 35% 72% at center,#00000005,#0000001f 62%,#0000007a),linear-gradient(90deg,rgba(6,13,11,.38) 0%,transparent 22%,transparent 78%,rgba(6,13,11,.36) 100%)
  }

  .invite-card-wrap {
    align-items: center
  }

  .invite-arch-frame {
    content: url(../assets/invite/pn-inv-fr-card-d-v01.webp);
    width: clamp(1040px,172vw,1320px);
    height: auto;
    max-width: none
  }

  .invite-text-content {
    top: 58%;
    bottom: auto;
    transform: translate(-50%,-50%);
    max-width: min(500px,52vw);
    min-height: 0;
    height: min(480px,50svh);
    justify-content: center;
    padding-top: 0
  }

  .inv-blessing,.inv-blessing-alt {
    font-size: .88rem
  }

  .inv-blessing p: not(.inv-overline) {
    font-size: .9rem
  }

  .inv-kicker {
    margin-bottom: 0
  }

  .inv-lotus-div {
    margin: 0 auto;
    width: clamp(54px,10vw,80px)
  }

  /* [ORIGINAL CODE PRESERVED BELOW]
  .inv-names {
    font-size: clamp(3.6rem,5.2vw,4.8rem);
    white-space: nowrap;
    margin-top: 0;
    margin-bottom: 0
  } */
  .inv-names {
    font-size: clamp(3.2rem, 4.4vw, 4.4rem);
    white-space: normal;
    margin-top: 0;
    margin-bottom: 0;
  }

  .inv-parents {
    max-width: 420px;
    margin-bottom: .2rem;
    font-size: .95rem
  }

  .inv-parents p {
    padding: 3px 0
  }

  .inv-occasion {
    font-size: 1rem;
    margin-bottom: .25rem
  }

  .inv-meta {
    gap: 1px
  }

  .inv-cta {
    bottom: clamp(42px,6svh,72px)
  }

  .inv-btn {
    padding: .62rem 2.6rem
  }

  .inv-bird--a {
    width: 92px;
    height: 94px;
    background-size: 552px 184px;
    background-position: 0 -43px;
    animation: birdFlapADesktop .35s steps(6,end) infinite,birdFlyA 5s linear 1.8s infinite,birdDriftA 3.7s ease-in-out 1.8s infinite
  }

  .inv-bird--b {
    width: 72px;
    height: 74px;
    background-size: 432px 144px;
    background-position: 0 -34px;
    animation: birdFlapBDesktop .42s steps(6,end) .15s infinite,birdFlyB 7s linear 8s infinite,birdDriftB 5.1s ease-in-out 8s infinite
  }

  @keyframes birdFlapADesktop {
    0% {
      background-position-x: 0px
    }

    to {
      background-position-x: -552px
    }

  }

  @keyframes birdFlapBDesktop {
    0% {
      background-position-x: 0px
    }

    to {
      background-position-x: -432px
    }

  }

  .events-section {
    padding-left: 0;
    padding-right: 0
  }

  .evt-bg-vignette {
    background: linear-gradient(180deg,#1a0e168c,#1a0e161a 10%,#1a0e1600 22% 78%,#1a0e161a 90%,#1a0e168c)
  }

  .evt-glow-mid {
    top: 20%;
    width: 100%;
    height: 65%
  }

  .evt-jhoomer-wrap {
    width: clamp(120px,11vw,180px);
    top: 0
  }

  .evt-corner {
    width: clamp(140px,15vw,220px)
  }

  .evt-peacock {
    width: clamp(200px,20vw,320px);
    left: 0;
    bottom: 0
  }

  .evt-elephant {
    width: clamp(220px,22vw,340px);
    right: 0;
    bottom: 0
  }

  .evt-lotus--1 {
    width: clamp(70px,6vw,110px);
    top: 16%;
    left: 2%
  }

  .evt-lotus--2 {
    width: clamp(52px,4.5vw,80px);
    top: 58%;
    right: 3%
  }

  /* [ORIGINAL CODE PRESERVED BELOW (Orphaned selectors: only evt-lotus--1 and evt-lotus--2 exist in HTML)]
  .evt-lotus--3 {
    width: clamp(58px,5vw,90px);
    top: 36%;
    right: 2%
  }

  .evt-lotus--4 {
    width: clamp(40px,3.5vw,64px);
    top: 76%;
    left: 3%
  } */

  .evt-header {
    padding-top: clamp(260px,24vw,420px)
  }

  .evt-title {
    font-size: clamp(4.2rem,7vw,6.8rem)
  }

  .evt-divider {
    width: clamp(126px,16vw,180px)
  }

  .evt-journey {
    max-width: min(720px,86vw)
  }

  .evt-stops {
    align-items: center;
    gap: clamp(46px,8svh,82px)
  }

  .farman-stop,.farman-stop.farman-left,.farman-stop.farman-right {
    align-self: center;
    width: min(560px,72vw);
    margin-left: 0;
    margin-right: 0
  }

  .farman-stop--main {
    width: min(600px,76vw)
  }

  .farman-content {
    left: 12%;
    right: 12%
  }

  .farman-motif {
    width: clamp(150px,34%,210px);
    height: clamp(150px,34%,210px)
  }

  .farman-name {
    font-size: clamp(3.29rem,5.6vw,4.69rem)
  }

  /* [ORIGINAL CODE PRESERVED BELOW]
  .farman-stop--main .farman-name {
    font-size: clamp(2.52rem,4.5vw,3.29rem)
  } */
  .farman-stop--main .farman-name {
    font-size: clamp(3.29rem,5.6vw,4.69rem)
  }

  .farman-datetime {
    font-size: clamp(1.15rem,1.75vw,1.4rem)
  }

  .farman-venue {
    font-size: clamp(1.32rem,1.9vw,1.57rem)
  }

  .farman-note {
    font-size: clamp(1.09rem,1.5vw,1.29rem)
  }

  .farman-map {
    font-size: clamp(.72rem,1vw,.84rem)
  }

  .farman-inter--lotus img {
    width: clamp(62px,8vw,84px)
  }

  .evt-floral-border--bot {
    display: none
  }

  .evt-cow {
    bottom: 8%;
    left: 2%;
    top: auto;
    transform: none;
    width: clamp(70px,7vw,110px);
    opacity: .55;
    z-index: 1
  }

  .cpl-section {
    min-height: 82svh;
    padding-left: 0;
    padding-right: 0
  }

  .cpl-bg {
    background-image: url(../assets/meet_the_couple/pn-cpl-bg-secret-garden-d-v01.webp);
    background-position: center top;
    background-size: cover
  }

  .cpl-vignette {
    background: linear-gradient(180deg,#060d0b9e,#060d0b1f 12%,#060d0b00 50%,#f7eedc57 78%,#f7eedce6),radial-gradient(ellipse 38% 58% at 50% 48%,rgba(247,238,220,.62) 0%,rgba(247,238,220,.28) 48%,transparent 76%)
  }

  .cpl-content {
    max-width: min(620px,70vw);
    min-height: 82svh;
    justify-content: center;
    padding: clamp(78px,11svh,126px) clamp(44px,6vw,72px);
    isolation: isolate
  }

  .cpl-content: before {
    content: "";
    position: absolute;
    inset: clamp(44px,7svh,84px) 0;
    z-index: -1;
    border-radius: 48% 48% 44% 44%/12% 12% 18% 18%;
    background: radial-gradient(ellipse 72% 66% at 50% 42%,rgba(247,238,220,.68) 0%,rgba(247,238,220,.34) 54%,transparent 78%);
    filter:blur(.2px);
    pointer-events: none
  }

  .cpl-title {
    font-size: clamp(3.4rem,5.2vw,5.2rem)
  }

  .cpl-story-body {
    max-width: 580px;
    margin: 0 auto;
    font-size: clamp(1rem,1.45vw,1.18rem);
    line-height: 1.86
  }

  .cpl-tree {
    width: 64%;
    background-size: 100% auto;
    z-index: 1
  }

  .cpl-tree--left {
    left: -6vw
  }

  .cpl-tree--right {
    right: -6vw
  }

  .gallery-section {
    min-height: 100svh;
    padding-bottom: clamp(92px,11svh,132px)
  }

  .gal-bg {
    background-image: url(../assets/gallery/pn-gal-bg-hanging-courtyard-d-v01.webp);
    background-position: center top;
    background-size: cover
  }

  .gal-bg-vignette {
    background: linear-gradient(to bottom,#1e120a7a,#1e120a24 18%,#1e120a0f 50%,#1e120a24 72%,#1e120aa3),linear-gradient(90deg,rgba(30,18,10,.34) 0%,transparent 22%,transparent 78%,rgba(30,18,10,.32) 100%)
  }

  .gal-header {
    padding-top: clamp(86px,11svh,128px)
  }

  .gal-lede {
    max-width: 520px;
    text-shadow: 0 1px 12px rgba(20,10,4,.62),0 2px 24px rgba(20,10,4,.38)
  }

  .gal-wall {
    max-width: min(940px,94vw);
    padding-top: clamp(56px,7svh,82px);
    gap: clamp(16px,3vw,34px)
  }

  .gal-slot-hero {
    width: clamp(240px,34vw,390px)
  }

  .gal-slot-portrait {
    width: clamp(170px,24vw,280px)
  }

  .gal-slot-landscape {
    width: clamp(320px,56vw,540px)
  }

  .ttk-section {
    padding-top: clamp(76px,10svh,112px);
    padding-bottom: clamp(78px,10svh,118px)
  }

  .ttk-inner {
    width: min(760px,90vw)
  }

  .ttk-heading {
    font-size: clamp(3rem,5.4vw,4rem)
  }

  .ttk-subline {
    max-width: 460px;
    margin: 0 auto;
    font-size: clamp(.96rem,1.45vw,1.08rem)
  }

  .ttk-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: clamp(14px,2.2vw,22px)
  }

  .ttk-card {
    border-radius: 14px;
    padding: clamp(24px,3.2vw,32px) clamp(18px,2.5vw,24px) clamp(22px,2.8vw,28px)
  }

  .ttk-card-icon-wrap {
    width: clamp(68px,9vw,84px);
    height: clamp(68px,9vw,84px)
  }

  .ttk-card-title {
    font-size: clamp(.88rem,1.3vw,1.01rem)
  }

  .ttk-card-body {
    font-size: clamp(1.07rem,1.5vw,1.2rem)
  }

  .ttk-motif--peacock {
    width: clamp(420px,46vw,640px);
    bottom: -12%
  }

  .ttk-motif--elephant-l,.ttk-motif--elephant-r {
    width: clamp(190px,18vw,280px)
  }

  .ttk-motif--cow {
    width: clamp(100px,9vw,138px)
  }

  .rsvp-section {
    min-height: 100svh;
    justify-content: center;
    padding-left: 0;
    padding-right: 0
  }

  .rsvp-bg {
    background-image: url(../assets/rsvp/pn-rsvp-bg-royal-finale-d-v01.webp);
    background-position: center center;
    transform: scale(1.04)
  }

  .rsvp-veil {
    background: linear-gradient(180deg,#060d0b1a,#060d0b4d 40%,#060d0bb8 72%,#060d0be0),radial-gradient(ellipse 44% 48% at 50% 42%,rgba(8,14,30,.42) 0%,rgba(8,14,30,.22) 46%,transparent 76%)
  }

  .rsvp-lotus-top {
    width: clamp(280px,28vw,390px);
    margin-top: clamp(28px,5svh,54px)
  }

  .rsvp-content {
    max-width: 600px;
    padding: clamp(18px,3svh,30px) 44px clamp(100px,13svh,150px)
  }

  .rsvp-hl-will {
    font-size: clamp(2.35rem,3.6vw,3.7rem)
  }

  .rsvp-hl-join {
    font-size: clamp(4.6rem,7.2vw,7.2rem)
  }

  .rsvp-body {
    max-width: 430px;
    font-size: clamp(1.08rem,1.55vw,1.28rem)
  }

  .rsvp-btn-primary {
    padding-left: clamp(44px,5vw,70px);
    padding-right: clamp(44px,5vw,70px)
  }

  .rsvp-lamp--l {
    left: 15%;
    bottom: 35%
  }

  .rsvp-lamp--r {
    right: 15%;
    bottom: 35%
  }

  .rsvp-lamp--cl {
    left: 32%;
    bottom: 27%
  }

  .rsvp-lamp--cr {
    right: 32%;
    bottom: 27%
  }

  .closing-section {
    min-height: 70svh
  }

  .closing-bg {
    background-image: url(../assets/rsvp/pn-rsvp-bg-royal-finale-d-v01.webp)
  }

  .closing-content {
    max-width: 620px
  }

  .closing-names {
    font-size: clamp(5.2rem,7vw,7rem)
  }

  .rsvp-closing-frame {
    max-width: min(680px,78vw);
    padding: clamp(40px,5vw,60px) clamp(60px,9vw,110px)
  }

}

@media (min-width: 1024px) {
  .intro-bg {
    object-position: center center
  }

  .intro-jhoomer {
    width: clamp(250px,20vw,330px)
  }

  .intro-floral-left,.intro-floral-right {
    width: clamp(190px,16vw,280px);
    bottom: -12svh
  }

  .intro-floral-left {
    left: max(-5vw,calc(50% - 760px))
  }

  .intro-floral-right {
    right: max(-5vw,calc(50% - 760px))
  }

  .diya-wrap.diya-left {
    left: clamp(200px,26vw,400px);
    bottom: 20svh
  }

  .diya-wrap.diya-right {
    right: clamp(200px,26vw,400px);
    bottom: 20svh
  }

  .intro-reveal .names {
    width: min(820px,78vw);
    font-size: clamp(6.8rem,7.4vw,9rem)
  }

  .invite-arch-frame {
    width: clamp(1320px,128vw,1440px)
  }

  .invite-text-content {
    max-width: min(540px,46vw);
    height: min(580px,60svh)
  }

  /* [ORIGINAL CODE PRESERVED BELOW]
  .inv-names {
    font-size: clamp(5.95rem,6.4vw,7.5rem)
  } */
  .inv-names {
    font-size: clamp(4.6rem, 5.2vw, 6.2rem);
  }

  .evt-journey {
    max-width: min(1120px,92vw)
  }

  .evt-stops {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    align-items: start;
    justify-items: center;
    column-gap: clamp(22px,3vw,42px);
    row-gap: clamp(42px,7svh,76px);
    padding-left: clamp(20px,3vw,38px);
    padding-right: clamp(20px,3vw,38px)
  }

  .farman-stop,.farman-stop.farman-left,.farman-stop.farman-right {
    width: min(100%,340px);
    align-self: start;
    justify-self: center
  }

  .farman-stop--main {
    width: min(100%,350px)
  }

  .farman-inter {
    display: none
  }

  .farman-content {
    inset: 8% 10% 12%;
    padding-top: 5%;
    padding-bottom: 3%
  }

  .farman-motif {
    width: clamp(94px,30%,128px);
    height: clamp(94px,30%,128px);
    margin-top: -8px
  }

  .farman-name {
    font-size: clamp(2.52rem,3.78vw,3.57rem)
  }

  /* [ORIGINAL CODE PRESERVED BELOW]
  .farman-stop--main .farman-name {
    font-size: clamp(2.03rem,2.8vw,2.66rem)
  } */
  .farman-stop--main .farman-name {
    font-size: clamp(2.52rem,3.78vw,3.57rem)
  }

  .farman-rule {
    margin: 5px 0
  }

  /* [ORIGINAL CODE PRESERVED BELOW]
  .farman-datetime {
    font-size: clamp(.9rem,1.15vw,1.09rem);
    letter-spacing: .13em
  } */
  .farman-datetime {
    font-size: clamp(1rem,1.25vw,1.18rem);
    letter-spacing: normal;
  }

  .farman-venue {
    font-size: clamp(1.04rem,1.33vw,1.26rem);
    margin-top: 3px
  }

  .farman-note {
    font-size: clamp(.87rem,1.15vw,1.06rem);
    max-width: 76%;
    margin-top: 3px
  }

  .farman-map {
    font-size: clamp(.84rem,1.09vw,1.01rem);
    margin-top: 6px
  }

  .farman-map-rule {
    margin-top: 4px
  }

  .cpl-section {
    min-height: 92svh
  }

  .cpl-content {
    max-width: min(680px,58vw);
    min-height: 92svh
  }

  .cpl-tree {
    width: 66%
  }

  .cpl-tree--left {
    left: -10vw
  }

  .cpl-tree--right {
    right: -10vw
  }

  .gallery-section {
    min-height: 108svh
  }

  .gal-wall {
    display: grid;
    grid-template-columns: minmax(150px,.8fr) minmax(240px,1.12fr) minmax(240px,1.12fr) minmax(150px,.8fr);
    align-items: start;
    max-width: min(1120px,92vw);
    gap: clamp(8px,1.8vw,26px) clamp(22px,3vw,46px);
    padding-left: 0;
    padding-right: 0
  }

  .gal-frame-slot {
    justify-self: center
  }

  .gal-slot-hero {
    grid-column: 2 / 4;
    grid-row: 1;
    width: clamp(300px,28vw,430px);
    z-index: 3
  }

  .gal-frame-slot: nth-child(2) {
    grid-column: 1 / 2;
    grid-row: 1;
    margin-top: clamp(68px,9vw,116px)
  }

  .gal-frame-slot: nth-child(3) {
    grid-column: 2 / 4;
    grid-row: 2;
    margin-top: clamp(-34px,-2vw,-12px)
  }

  .gal-frame-slot: nth-child(4) {
    grid-column: 4 / 5;
    grid-row: 1;
    margin-top: clamp(108px,13vw,168px)
  }

  .gal-slot-landscape {
    width: clamp(390px,42vw,590px)
  }

  .gal-slot-portrait {
    width: clamp(180px,17vw,250px)
  }

  .ttk-inner {
    width: min(1040px,90vw)
  }

  .ttk-grid {
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: clamp(16px,1.8vw,24px)
  }

  .ttk-card {
    grid-column: span 2
  }

  .ttk-grid--single {
    grid-template-columns: repeat(6,minmax(0,1fr))
  }

  .ttk-grid--single .ttk-card {
    grid-column: 3 / span 2
  }

  .ttk-card--last-odd {
    grid-column: span 2;
    max-width: none;
    justify-self: stretch
  }

  .ttk-card: last-child: nth-child(3n+1) {
    grid-column: 3 / span 2
  }

  .ttk-card: nth-last-child(2): nth-child(3n+1) {
    grid-column: 2 / span 2
  }

  .ttk-card: last-child: nth-child(3n+2) {
    grid-column: 4 / span 2
  }

  .rsvp-content {
    margin-top: -2svh
  }

  .floating-menu {
    right: clamp(8px,1.2vw,18px);
    bottom: clamp(24px,2.4vw,38px);
    transform: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px
  }

  .music-toggle {
    pointer-events: auto;
    touch-action: manipulation
  }

  .menu-panel {
    right: 84px;
    bottom: 0;
    transform-origin: bottom right
  }

  .floating-menu.is-open .menu-panel {
    transform: scale(1) translateY(0)
  }

}

@media (min-width: 1280px) {
  .section-title {
    font-size: clamp(5rem,5.4vw,7.4rem)
  }

  .intro-jhoomer {
    width: clamp(280px,18vw,360px)
  }

  .rope-button {
    width: clamp(118px,9vw,152px)
  }

  .intro-floral-left,.intro-floral-right {
    width: clamp(200px,14vw,280px)
  }

  .diya-wrap {
    width: clamp(88px,6.5vw,116px)
  }

  .diya-wrap.diya-left {
    left: clamp(250px,28vw,430px);
    bottom: 18svh
  }

  .diya-wrap.diya-right {
    right: clamp(250px,28vw,430px);
    bottom: 18svh
  }

  .intro-reveal: after {
    top: 40svh
  }

  .intro-reveal .names {
    top: 44svh;
    font-size: clamp(7.2rem,6.6vw,9.4rem)
  }

  .intro-reveal .ornament {
    top: 73svh
  }

  .intro-reveal .date {
    top: 76svh
  }

  .intro-reveal .venue {
    top: 80svh
  }

  .lotus-cta-group {
    top: 82svh
  }

  .invite-arch-frame {
    width: clamp(1420px,112vw,1540px)
  }

  .invite-text-content {
    max-width: 560px;
    height: min(620px,64svh)
  }

  .events-section {
    min-height: 100svh
  }

  .evt-journey {
    max-width: min(1180px,90vw)
  }

  .farman-stop,.farman-stop.farman-left,.farman-stop.farman-right {
    width: min(100%,350px)
  }

  .farman-stop--main {
    width: min(100%,360px)
  }

  .cpl-content {
    max-width: 680px
  }

  .cpl-tree {
    width: 68%
  }

  .cpl-tree--left {
    left: -14vw
  }

  .cpl-tree--right {
    right: -14vw
  }

  .gal-wall {
    max-width: min(1240px,90vw)
  }

  .gal-slot-hero {
    width: clamp(340px,26vw,460px)
  }

  .gal-slot-landscape {
    width: clamp(440px,40vw,620px)
  }

  .gal-slot-portrait {
    width: clamp(200px,15vw,270px)
  }

  .ttk-inner {
    width: min(1120px,88vw)
  }

  .ttk-grid {
    grid-template-columns: repeat(8,minmax(0,1fr))
  }

  .ttk-card {
    grid-column: span 2
  }

  .ttk-grid--single .ttk-card {
    grid-column: 4 / span 2
  }

  .ttk-card: last-child: nth-child(3n+1),.ttk-card: nth-last-child(2): nth-child(3n+1),.ttk-card: last-child: nth-child(3n+2) {
    grid-column: span 2
  }

  .ttk-card: last-child: nth-child(4n+1) {
    grid-column: 4 / span 2
  }

  .ttk-card: nth-last-child(2): nth-child(4n+1) {
    grid-column: 3 / span 2
  }

  .ttk-card: last-child: nth-child(4n+2) {
    grid-column: 5 / span 2
  }

  .ttk-card: nth-last-child(3): nth-child(4n+1) {
    grid-column: 2 / span 2
  }

  .ttk-card: nth-last-child(2): nth-child(4n+2) {
    grid-column: 4 / span 2
  }

  .ttk-card: last-child: nth-child(4n+3) {
    grid-column: 6 / span 2
  }

  .rsvp-bg {
    background-position: center center
  }

  .rsvp-content {
    max-width: 640px
  }

}

@media (min-width: 1536px) {
  .intro-bg {
    object-position: center 46%
  }

  .intro-floral-left {
    left: calc(50% - 900px)
  }

  .intro-floral-right {
    right: calc(50% - 900px)
  }

  .diya-wrap.diya-left {
    left: calc(50% - 520px)
  }

  .diya-wrap.diya-right {
    right: calc(50% - 520px)
  }

  .invite-arch-frame {
    width: 1560px
  }

  .evt-journey {
    max-width: min(1220px,88vw)
  }

  .gallery-section {
    min-height: 112svh
  }

  .gal-wall {
    max-width: 1320px
  }

  .cpl-tree {
    width: 70%
  }

  .cpl-tree--left {
    left: -17vw
  }

  .cpl-tree--right {
    right: -17vw
  }

  .rsvp-content {
    padding-bottom: clamp(120px,14svh,172px)
  }

  .rsvp-hl-join {
    font-size: clamp(6rem,5.2vw,7.8rem)
  }

}

@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
  .invite-bg,.gal-bg,.rsvp-bg {
    transform: none!important
  }

}

@media (max-width: 767px) {
  .invite-bg {
    animation: none!important;
    transform: none!important
  }

  .inv-btn {
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background: #060d0b9e!important
  }

  .rsvp-card {
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background: #22342ceb!important
  }

  .rsvp-cal-btn {
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background: #060d0bb8!important
  }

}