:root {
  --ivory: #fff8ed;
  --ivory-soft: #f9efdf;
  --deep-teal: #123f3b;
  --charcoal-green: #1f332d;
  --antique-gold: #b58a43;
  --soft-coral: #d88772;
  --royal-blue: #1f4f8f;
  --warm-brown: #5f4733;
  --deep-gold: #9a6f2e;
  --shadow-green: rgba(18, 63, 59, 0.26);
  --panel-glow: rgba(255, 248, 237, 0.84);
  --font-heading: "Bickham Script Pro", "Allura", cursive;
  --font-script: "Bickham Script Pro", "Allura", cursive;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-label: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --font-name: "Bodoni Moda", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-date: "Cinzel", "Marcellus", Georgia, serif;
  --peacock-green: #0e4641;
  --intro-ink: #123c36;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--charcoal-green);
  color: var(--deep-teal);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button {
  font: inherit;
}

.experience {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: hidden;
  isolation: isolate;
  background: var(--ivory);
  box-shadow: 0 0 64px rgba(0, 0, 0, 0.28);
}

/* unlocked once the celebration begins so the invite can be scrolled to */
.experience.is-scrollable {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.intro-screen,
.hero-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.intro-screen {
  z-index: 3;
  background: var(--charcoal-green);
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 1400ms ease,
    filter 1400ms ease,
    transform 1800ms ease;
}

.intro-screen.is-fading {
  opacity: 0;
  filter: blur(16px);
  transform: scale(1.035);
  pointer-events: none;
}

/* ── Intro logo ─────────────────────────────────────── */
.intro-logo {
  position: absolute;
  top: max(6dvh, 36px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

/* warm haze behind the logo for visibility over dark/busy video */
.intro-logo::before {
  content: '';
  position: absolute;
  inset: -70% -55%;
  background: radial-gradient(ellipse,
    rgba(181, 138, 67, 0.18) 0%,
    rgba(255, 248, 237, 0.10) 42%,
    transparent 70%);
  filter: blur(22px);
  z-index: -1;
  animation: introLogoBgPulse 3.5s ease-in-out 1.8s infinite;
}

.intro-logo-wrap {
  opacity: 0;
  animation:
    introLogoReveal 1.4s ease 0.4s forwards,
    introLogoFloat 5s ease-in-out 1.8s infinite;
}

.intro-logo img {
  display: block;
  width: min(34vw, 117px);
  height: auto;
  animation: introLogoGlow 3.5s ease-in-out 1.8s infinite;
}

@keyframes introLogoBgPulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; }
}

@keyframes introLogoReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes introLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes introLogoGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px rgba(181, 138, 67, 0.28))
      drop-shadow(0 3px 14px rgba(0, 0, 0, 0.22));
  }
  50% {
    filter:
      drop-shadow(0 0 24px rgba(181, 138, 67, 0.90))
      drop-shadow(0 0 48px rgba(216, 135, 114, 0.44))
      drop-shadow(0 6px 24px rgba(181, 138, 67, 0.55));
  }
}

.hero-screen {
  z-index: 1;
  opacity: 0;
  background: var(--ivory);
  transition: opacity 1300ms ease 360ms;
}

.hero-screen.is-visible {
  opacity: 1;
}

.scene-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ivory-soft);
}

.begin-button {
  position: absolute;
  left: 50%;
  bottom: max(8dvh, 48px);
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 8px 6px;
  color: var(--intro-ink);
  text-align: center;
  border: 0;
  background: none;
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.6),
    0 2px 16px rgba(255, 248, 237, 0.9);
  transform: translateX(-50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 700ms ease,
    transform 700ms ease,
    filter 700ms ease;
}

/* soft cream glow so the text stays legible over a light video */
.begin-button::before {
  position: absolute;
  z-index: -1;
  inset: -40% -22%;
  content: "";
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 248, 237, 0.72) 0%,
    rgba(255, 248, 237, 0.32) 45%,
    rgba(255, 248, 237, 0) 72%
  );
  filter: blur(12px);
}

.begin-button:disabled {
  cursor: default;
}

.begin-button:not(:disabled):active {
  transform: translateX(-50%) translateY(1px);
}

.begin-button.is-hidden {
  opacity: 0;
  filter: blur(6px);
  transform: translateX(-50%) translateY(16px);
  pointer-events: none;
}

.begin-main {
  position: relative;
  max-width: min(80vw, 320px);
  margin: 0 auto;
  padding-bottom: 16px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6.6vw, 2.05rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.18;
  color: var(--intro-ink);
}

.begin-main::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 36px;
  height: 1px;
  content: "";
  background: var(--antique-gold);
  opacity: 0.55;
  transform: translateX(-50%);
}

.begin-button.is-loading .begin-main {
  font-style: normal;
  font-weight: 500;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: start;
  justify-items: center;
  width: min(86vw, 390px);
  min-height: 100%;
  margin: 0 auto;
  padding: 6dvh 20px 9dvh;
  text-align: center;
  text-shadow: 0 1px 18px rgba(255, 248, 237, 0.45);
}

/* ── Hero logo (moved from intro) ───────────────────────── */
.hero-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  opacity: 0;
}

.hero-logo img {
  display: block;
  width: min(20vw, 68px);
  height: auto;
}

.hero-screen.is-animated .hero-logo {
  animation:
    slideFadeIn 1400ms cubic-bezier(0.16, 1, 0.3, 1) forwards 200ms,
    introLogoFloat 5s ease-in-out 1.6s infinite,
    introLogoGlow  3.5s ease-in-out 1.6s infinite;
}

.hero-content::before {
  position: absolute;
  top: 18dvh;
  left: 50%;
  z-index: -1;
  width: 132%;
  height: 56dvh;
  content: "";
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 248, 237, 0.62) 0%,
    rgba(255, 248, 237, 0.34) 36%,
    rgba(255, 248, 237, 0) 72%
  );
  filter: blur(10px);
  transform: translateX(-50%);
}

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

.couple-name {
  display: grid;
  gap: 4px;
  margin: 0;
  color: #0f4f46;
  font-family: var(--font-heading);
  font-size: clamp(2.72rem, 12.75vw, 4.42rem);
  font-weight: 400;
  line-height: 1.12;
}

.couple-name span {
  display: block;
  filter: blur(14px);
  transform: translateY(34px) scale(1.04);
}

.couple-name .ampersand {
  margin: 2px 0;
  color: var(--antique-gold);
  font-family: var(--font-heading);
  font-size: 0.62em;
  font-weight: 400;
  line-height: 1;
}

.gold-divider {
  width: min(44%, 140px);
  height: 1px;
  margin: 14px 0 12px;
  background: linear-gradient(90deg, transparent, rgba(181, 138, 67, 0.5), transparent);
  transform: scaleX(0);
}

.gold-divider span,
.gold-divider i {
  display: none;
}

.wedding-date,
.wedding-venue {
  margin: 0;
  color: var(--peacock-green);
  font-family: var(--font-date);
  font-size: clamp(0.78rem, 3.3vw, 0.96rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  line-height: 2;
  text-transform: uppercase;
  transform: translateY(18px);
}

.wedding-venue {
  color: var(--soft-coral);
  font-weight: 400;
  font-size: clamp(0.68rem, 2.8vw, 0.84rem);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}

.hero-screen.is-animated .couple-name span:first-child {
  animation: nameReveal 1900ms cubic-bezier(0.16, 1, 0.3, 1) forwards 500ms;
}

.hero-screen.is-animated .couple-name .ampersand {
  animation: ampersandReveal 1300ms ease forwards 1350ms;
}

.hero-screen.is-animated .couple-name span:last-child {
  animation: nameReveal 1900ms cubic-bezier(0.16, 1, 0.3, 1) forwards 1500ms;
}

.hero-screen.is-animated .gold-divider {
  animation: dividerReveal 1300ms cubic-bezier(0.16, 1, 0.3, 1) forwards 2500ms;
}

.hero-screen.is-animated .wedding-date {
  animation: slideFadeIn 1300ms cubic-bezier(0.16, 1, 0.3, 1) forwards 2900ms;
}

.hero-screen.is-animated .wedding-venue {
  animation: slideFadeIn 1300ms cubic-bezier(0.16, 1, 0.3, 1) forwards 3180ms;
}

.ivory-dissolve {
  position: absolute;
  inset: -12%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 248, 237, 1) 0%, rgba(255, 248, 237, 0.94) 24%, rgba(255, 248, 237, 0.74) 42%, transparent 68%),
    radial-gradient(circle at 50% 60%, rgba(181, 138, 67, 0.2), transparent 48%);
  filter: blur(18px);
  transform: scale(0.86);
}

.ivory-dissolve.is-active {
  animation: ivoryDissolve 1900ms ease forwards;
}

.video-error .begin-main {
  font-size: clamp(1.2rem, 6vw, 1.65rem);
}

@keyframes nameReveal {
  0% {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(34px) scale(1.04);
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes ampersandReveal {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(16px) scale(0.92);
  }

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

@keyframes slideFadeIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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

@keyframes dividerReveal {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes ivoryDissolve {
  0% {
    opacity: 0;
    transform: scale(0.86);
  }

  36% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@media (min-width: 700px) {
  body {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: 24px;
    background: var(--charcoal-green);
  }

  .experience {
    width: min(100%, 480px);
    height: min(100dvh - 48px, 880px);
    border-radius: 10px;
  }
}

/* ============================================================
   Scroll cue (hero → invitation)
   ============================================================ */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: max(4dvh, 24px);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 9px;
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  transition:
    opacity 1000ms ease 700ms,
    transform 1000ms ease 700ms;
  pointer-events: none;
}

/* soft dark scrim so the ivory cue stays readable over a bright video */
.scroll-cue::before {
  position: absolute;
  z-index: -1;
  inset: -18px -34px;
  content: "";
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(18, 63, 59, 0.58) 0%,
    rgba(18, 63, 59, 0.3) 46%,
    rgba(18, 63, 59, 0) 76%
  );
  filter: blur(8px);
}

.hero-screen.is-animated .scroll-cue {
  opacity: 1;
  transform: translateX(-50%);
}

.scroll-cue-label {
  color: var(--ivory);
  font-family: var(--font-date);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.75),
    0 2px 14px rgba(18, 63, 59, 0.85),
    0 0 22px rgba(255, 248, 237, 0.45);
}

.scroll-arrows {
  display: grid;
  justify-items: center;
  height: 34px;
}

.scroll-arrows i {
  display: block;
  width: 16px;
  height: 16px;
  margin-top: -7px;
  border-right: 4px solid var(--ivory);
  border-bottom: 4px solid var(--ivory);
  transform: rotate(45deg);
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75));
  animation: chevronDrop 1700ms ease-in-out infinite;
}

.scroll-arrows i:nth-child(2) {
  animation-delay: 180ms;
}

.scroll-arrows i:nth-child(3) {
  animation-delay: 360ms;
}

@keyframes chevronDrop {
  0% {
    opacity: 0;
    transform: translateY(-5px) rotate(45deg);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(6px) rotate(45deg);
  }
}

/* ============================================================
   Music toggle
   ============================================================ */
.music-toggle {
  position: fixed;
  right: max(16px, calc(50vw - 240px + 16px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--peacock-green);
  border: 1px solid rgba(181, 138, 67, 0.6);
  border-radius: 999px;
  background: rgba(255, 248, 237, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px rgba(18, 63, 59, 0.24);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 600ms ease,
    transform 600ms ease,
    color 300ms ease;
}

.music-toggle.is-ready {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.music-toggle:active {
  transform: scale(0.93);
}

.music-toggle.is-muted {
  color: rgba(14, 70, 65, 0.5);
}

.music-icon {
  position: absolute;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.music-icon path:first-child {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1;
}

.music-toggle .music-icon--off {
  display: none;
}

.music-toggle.is-muted .music-icon--on {
  display: none;
}

.music-toggle.is-muted .music-icon--off {
  display: block;
}

/* ============================================================
   Invite section
   ============================================================ */
.invite-screen {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--ivory-soft);
  isolation: isolate;
}

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

.decor-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.decor-wrap {
  position: absolute;
  will-change: transform;
}

.decor-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* miniature festive elements — kept to the far edges, behind the text */
.decor-wrap img {
  opacity: 0.92;
}

/* elephant & camel slowly walk across the bottom, right to left */
.decor-elephant {
  bottom: 4%;
  left: 0;
  width: clamp(87px, 25vw, 137px);
  animation: walkLeft 24s linear infinite;
}

.decor-elephant img {
  animation: walkBob 0.95s ease-in-out infinite;
}

.decor-camel {
  bottom: 4.5%;
  left: 0;
  width: clamp(90px, 25vw, 140px);
  animation: walkLeft 24s linear infinite -12s;
}

.decor-camel img {
  animation: walkBob 1.1s ease-in-out infinite;
}

@keyframes walkLeft {
  from {
    left: 100%;
  }

  to {
    left: -34%;
  }
}

@keyframes walkBob {
  0%,
  100% {
    transform: translateY(0) rotate(-1.5deg);
  }

  50% {
    transform: translateY(-3px) rotate(1.5deg);
  }
}

.invite-card {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: start;
  width: min(82%, 366px);
  min-height: 100%;
  margin: 0 auto;
  padding: 5dvh 18px 3dvh;
  text-align: center;
  color: var(--charcoal-green);
}

/* soft cream haze for readability over the artwork */
.invite-card::before {
  position: absolute;
  z-index: -1;
  inset: 3dvh -8% 3dvh;
  content: "";
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 248, 237, 0.74) 0%,
    rgba(255, 248, 237, 0.5) 44%,
    rgba(255, 248, 237, 0) 76%
  );
  filter: blur(16px);
}

.invite-ganesha {
  width: clamp(60px, 17vw, 82px);
  height: auto;
  margin: 0 auto 12px;
  opacity: 0;
  filter: blur(8px);
  transition:
    opacity 1100ms ease,
    filter 1100ms ease;
}

.invite-screen.is-revealed .invite-ganesha {
  opacity: 1;
  filter: blur(0);
  animation: floatA 6s ease-in-out infinite 1200ms;
}

/* scroll-reveal: soft fade-up + blur-to-clear */
.invite-line {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  filter: blur(12px);
  transition:
    opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.invite-screen.is-revealed .invite-line {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.invite-screen.is-revealed .invite-blessing {
  transition-delay: 140ms;
}
.invite-screen.is-revealed .invite-elders {
  transition-delay: 280ms;
}
.invite-screen.is-revealed .invite-hosts {
  transition-delay: 440ms;
}
.invite-screen.is-revealed .invite-couple {
  transition-delay: 620ms;
}
.invite-screen.is-revealed .invite-parents {
  transition-delay: 800ms;
}
.invite-screen.is-revealed .invite-parents-wrap {
  transition-delay: 1000ms;
}
.invite-screen.is-revealed .invite-date {
  transition-delay: 1080ms;
}
.invite-screen.is-revealed .invite-venue {
  transition-delay: 1200ms;
}

.invite-blessing {
  margin: 0 0 8px;
  color: var(--soft-coral);
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
}

.invite-elders {
  margin: 0 0 14px;
  color: var(--deep-gold);
  font-family: var(--font-date);
  font-size: clamp(0.78rem, 3.2vw, 0.94rem);
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1.55;
  text-transform: uppercase;
}

.elder-name {
  display: block;
}

.invite-amp {
  margin-right: 0.18em;
  color: var(--antique-gold);
  font-family: var(--font-date);
  font-size: 0.9em;
  font-weight: 500;
}

.invite-hosts,
.invite-parents {
  margin: 0;
  color: var(--warm-brown);
  font-family: var(--font-display);
  font-size: clamp(0.88rem, 3.8vw, 1.02rem);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.72;
}

.invite-hosts {
  margin-bottom: 8px;
}

.invite-parents {
  margin-top: 10px;
  font-size: clamp(0.84rem, 3.5vw, 0.98rem);
  color: var(--warm-brown);
  opacity: 0.88;
}

/* ── Parents couple photo — 3D float + glow ──────────────── */
.invite-parents-wrap {
  margin-top: clamp(0.5rem, 1dvh, 0.8rem);
  /* Span the card so the photo's width % references the card, not a
     shrink-to-fit wrap (which previously capped the photo far below its
     intended size). */
  width: 100%;
}

.invite-parents-photo {
  display: block;
  width: min(54%, 172px);
  height: auto;
  /* Portrait shown via `contain`, so height is the size lever. Tie it to the
     viewport so the photo grows on tall phones but auto-shrinks on short ones,
     keeping the whole invite card inside the 100dvh bg (no bottom clipping).
     Uses the spare room below the photo; verified to still fit inside the bg
     on short (360x640) phones. */
  max-height: min(31dvh, 300px);
  object-fit: contain;
  margin: 0 auto;
  border-radius: 4px;
}

.invite-screen.is-revealed .invite-parents-photo {
  animation:
    inviteParentsFloat 7s  ease-in-out 1.4s infinite,
    inviteParentsGlow  4.5s ease-in-out 1.4s infinite;
}

/* Simple 2D float — no perspective/rotateY so bg image stays undisturbed */
@keyframes inviteParentsFloat {
  0%, 100% { transform: translateY(0)    rotate(-0.4deg); }
  50%       { transform: translateY(-8px) rotate( 0.4deg); }
}

/* Warm gold aura that breathes in sync with the float */
@keyframes inviteParentsGlow {
  0%, 100% {
    filter:
      drop-shadow(0 6px 16px rgba(181, 138, 67, 0.22))
      drop-shadow(0 2px 6px  rgba(0,   0,   0,   0.18));
  }
  50% {
    filter:
      drop-shadow(0 10px 30px rgba(181, 138, 67, 0.62))
      drop-shadow(0  0   22px rgba(216, 135, 114, 0.32))
      drop-shadow(0  0   44px rgba(181, 138, 67, 0.28))
      drop-shadow(0 4px  14px rgba(0,   0,   0,   0.24));
  }
}

.invite-couple {
  display: grid;
  justify-items: center;
  gap: 0;
  margin: 0;
  color: #0f4f46;
  font-family: var(--font-script);
  font-size: clamp(2.2rem, 10vw, 3.2rem);
  font-weight: 400;
  line-height: 1.08;
}

.invite-amp--lg {
  display: block;
  margin: 0;
  font-family: var(--font-script);
  font-size: 0.65em;
  color: var(--antique-gold);
}

.invite-date {
  margin: 0;
  color: var(--peacock-green);
  font-family: var(--font-date);
  font-size: clamp(0.82rem, 3.6vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  line-height: 1.8;
  text-transform: uppercase;
}

.invite-venue {
  margin: 4px 0 0;
  color: var(--soft-coral);
  font-family: var(--font-date);
  font-size: clamp(0.72rem, 3vw, 0.86rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  line-height: 1.6;
  text-transform: uppercase;
}

@keyframes floatA {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-12px) rotate(1.5deg);
  }
}

@keyframes floatB {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-16px) rotate(-2deg);
  }
}

@keyframes jhoomerGlow {
  0%, 100% {
    filter:
      drop-shadow(0 6px 18px rgba(0, 0, 0, 0.48))
      drop-shadow(0 0 10px rgba(232, 198, 120, 0.22))
      drop-shadow(0 0 22px rgba(232, 198, 120, 0.10));
  }
  50% {
    filter:
      drop-shadow(0 6px 22px rgba(0, 0, 0, 0.52))
      drop-shadow(0 0 18px rgba(232, 198, 120, 0.72))
      drop-shadow(0 0 30px rgba(232, 198, 120, 0.32));
  }
}

@keyframes jhoomerSway {
  0%, 100% { transform: rotate(-4.5deg); }
  50%       { transform: rotate(4.5deg); }
}

@keyframes sangeetCoupleSway {
  0%, 100% { transform: rotate(-1.3deg); }
  50%       { transform: rotate(1.3deg); }
}

/* ============================================================
   Events — Luxury 3D coverflow carousel
   ============================================================ */

.events {
  /* Section-scoped token aliases */
  --font-serif:     var(--font-display);
  --font-sans:      Inter, system-ui, sans-serif;
  --ease-silk:      cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --ease-expo:      cubic-bezier(0.16, 1, 0.3, 1);
  --clr-gold:       var(--antique-gold);
  --clr-gold-pale:  #d4b47a;
  --clr-gold-light: #c9a260;
  --clr-ivory:      var(--ivory);
  --clr-ivory-mid:  rgba(255, 248, 237, 0.82);

  position: relative;
  width: 100%;
  min-height: 100dvh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  overflow-x: hidden;
  padding-top: clamp(4rem, 10vw, 6rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
  background: #0e3430;
  background-image: url('assets/events/event_bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: local;
}

/* ─── Section header ─────────────────────────────────────── */
.events-header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  padding: 0 1.5rem;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-expo), transform 1s var(--ease-expo);
}

.events-header.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.events-title-rule {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: clamp(80px, 35vw, 160px);
  margin-bottom: 1.2rem;
}

.events-rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(95, 71, 51, 0.45), transparent);
}

.events-rule-motif {
  font-size: 0.44rem;
  color: var(--clr-gold);
  line-height: 1;
}

.events-title {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 10vw, 4.2rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--deep-teal);
  margin: 0 0 0.8rem;
}

.events-subtitle {
  font-family: var(--font-sans);
  font-size: clamp(0.6rem, 2.1vw, 0.72rem);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--warm-brown);
  opacity: 0.82;
  line-height: 1.7;
  margin: 0;
}

/* ─── Swipe hint ─────────────────────────────────────────── */
@keyframes swipe-hint {
  0%   { transform: translateX(0); opacity: 0.6; }
  30%  { transform: translateX(-18px); opacity: 1; }
  60%  { transform: translateX(6px); opacity: 0.8; }
  100% { transform: translateX(0); opacity: 0.6; }
}

@keyframes card-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

@keyframes shimmer-sweep {
  0%   { left: -100%; opacity: 0; }
  30%  { opacity: 0.5; }
  100% { left: 160%; opacity: 0; }
}

@keyframes swipe-nudge {
  0%   { transform: translateX(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  40%  { transform: translateX(-22px) rotate(-8deg); }
  70%  { transform: translateX(8px) rotate(4deg); opacity: 1; }
  100% { transform: translateX(0) rotate(0deg); opacity: 0; }
}

.events-swipe-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1.2rem;
  pointer-events: none;
  opacity: 0;
  animation: swipe-hint 2.2s var(--ease-silk) 1.2s 2 forwards;
}

.events-swipe-hint-icon {
  font-size: 1.1rem;
  color: #ffffff;
  animation: swipe-nudge 2.2s var(--ease-silk) 1.2s 2 forwards;
}

.events-swipe-hint-text {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.95;
}

/* ─── Carousel wrapper ───────────────────────────────────── */
.events-carousel-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

/* ─── Scrollable track ───────────────────────────────────── */
.events-track {
  display: flex;
  align-items: center;
  gap: clamp(20px, 5vw, 32px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 3rem clamp(8vw, 12vw, 18vw);
  width: 100%;
  cursor: grab;
  transform-style: preserve-3d;
}

.events-track:active { cursor: grabbing; }
.events-track::-webkit-scrollbar { display: none; }

/* ─── Card outer shell ───────────────────────────────────── */
.event-card {
  position: relative;
  flex: 0 0 clamp(240px, 72vw, 340px);
  width:  clamp(240px, 72vw, 340px);
  height: clamp(420px, 70vh, 580px);
  scroll-snap-align: center;
  border-radius: 0.75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 1px rgba(181, 138, 67, 0.30),
    0 0 28px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 248, 237, 0.16);
  transition:
    transform  0.65s var(--ease-silk),
    opacity    0.65s var(--ease-silk),
    filter     0.65s var(--ease-silk),
    box-shadow 0.65s var(--ease-silk);
  opacity: 0.46;
  transform: scale(0.86) rotateY(18deg);
  filter: brightness(0.65) saturate(0.7);
  will-change: transform, opacity, filter;
}

.event-card.is-right {
  transform: scale(0.86) rotateY(-18deg);
}

.event-card.is-active {
  opacity: 1;
  transform: scale(1) rotateY(0deg);
  filter: brightness(1) saturate(1);
  box-shadow:
    0 0 0 1px rgba(181, 138, 67, 0.55),
    0 16px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 248, 237, 0.22);
  animation: card-float 5s ease-in-out infinite;
}

.event-card[data-card-entering] {
  opacity: 0.46;
  transform: scale(0.86) rotateY(18deg);
}

/* ─── Card background ────────────────────────────────────── */
.event-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  isolation: isolate;
}

.event-card-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 1s var(--ease-silk);
}

.event-card.is-active .event-card-bg-img {
  transform: scale(1.06);
}

/* Video background */
.event-card-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: transform 1s var(--ease-silk), opacity 1.6s ease;
}

.event-card-bg-video.is-playing {
  opacity: 1;
}

.event-card.is-active .event-card-bg-video {
  transform: scale(1.06);
}

.event-card-bg-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
}

.event-card[data-fallback="true"] .event-card-bg-fallback { opacity: 1; }
.event-card[data-fallback="true"] .event-card-bg-img      { opacity: 0; }

/* ─── Overlay ────────────────────────────────────────────── */
.event-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 55%,
    rgba(10, 7, 4, 0.22) 100%
  );
}

/* ─── Shimmer on active card ─────────────────────────────── */
.event-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  z-index: 8;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 248, 237, 0.07) 50%,
    transparent 70%
  );
  opacity: 0;
}

.event-card.is-active::after {
  animation: shimmer-sweep 3.5s ease-in-out 0.4s infinite;
}

/* ─── Couple cutout ──────────────────────────────────────── */
.event-card-couple {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 88%;
  height: 65%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.9s var(--ease-silk);
}

.event-card.is-active .event-card-couple {
  transform: translateX(-50%) translateY(-8px);
}

.event-card-couple-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 -12px 32px rgba(0, 0, 0, 0.32));
  transform-origin: bottom center;
  animation: sangeetCoupleSway 4.2s ease-in-out infinite;
}

/* ─── Jhoomer chandelier (Sangeet) ───────────────────────── */
.event-card-jhoomer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 42%;
  pointer-events: none;
}

.event-card-jhoomer img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: top center;
  animation:
    jhoomerSway 3.6s ease-in-out infinite,
    jhoomerGlow 3.6s ease-in-out infinite;
}

/* ─── Text panel ─────────────────────────────────────────── */
.event-card-panel {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  z-index: 5;
  width: 88%;
  max-width: 88%;
  padding: 0.85rem 1rem 0.95rem;
  text-align: center;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.event-card-panel::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  margin: 0 auto 0.8rem;
  background: linear-gradient(
    to right,
    transparent,
    var(--evt-accent, var(--clr-gold)) 40%,
    var(--evt-accent, var(--clr-gold)) 60%,
    transparent
  );
  opacity: 0.9;
}

.event-card-name {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 6vw, 1.72rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.02;
  color: var(--evt-title, var(--clr-ivory));
  margin-bottom: 0.375rem;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.18);
  max-width: 100%;
  overflow: hidden;
}

.event-card-date {
  font-family: var(--font-date);
  font-size: clamp(1rem, 4vw, 1.1rem);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--evt-datetime, var(--clr-ivory));
  margin-bottom: 0.375rem;
  opacity: 1;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.22);
}

.event-card-sub {
  font-family: var(--font-sans);
  font-size: clamp(0.6rem, 2.5vw, 0.68rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--evt-title, var(--clr-ivory));
  opacity: 0.82;
  margin-top: -0.28rem;
  margin-bottom: 0.2rem;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.15);
}

.event-card-time {
  font-family: var(--font-sans);
  font-size: clamp(0.8rem, 3.2vw, 0.875rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--evt-datetime, var(--clr-ivory-mid));
  opacity: 0.90;
  margin-bottom: 0.3rem;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.15);
}

.event-card-venue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32em;
  font-family: var(--font-sans);
  font-size: clamp(0.76rem, 3vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--evt-venue, var(--evt-accent, var(--clr-gold)));
  opacity: 0.92;
  margin-bottom: 0.5rem;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.12);
}

a.event-card-venue {
  text-decoration: none;
  cursor: pointer;
}

a.event-card-venue:hover,
a.event-card-venue:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.event-card-venue::before {
  content: '';
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  background-color: currentColor;
  opacity: 0.85;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}

.event-card-rule {
  display: none;
  align-items: center;
  gap: 0.45rem;
  margin: 0.45rem auto 0.6rem;
  width: 55%;
}

.event-card-rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--evt-accent, rgba(181, 138, 67, 0.5)), transparent);
  opacity: 0.6;
}

.event-card-rule-dot {
  font-size: 0.26rem;
  color: var(--evt-accent);
  line-height: 1;
}

/* Quote pill */
.event-card-tag {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  z-index: 5;
  max-width: 82%;
  padding: 0.5em 1.1em 0.55em;
  border-radius: 0.4rem;
  background: var(--evt-quote-fade, rgba(10, 7, 4, 0.42));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  color: var(--evt-quote, var(--clr-ivory-mid));
  opacity: 0.97;
  margin: 0;
  line-height: 1.5;
  white-space: nowrap;
}

.event-card-tag-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.52rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.68;
  margin-bottom: 0.18em;
}

.event-card-tag-value {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(0.78rem, 2.6vw, 0.9rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.04em;
}

/* ─── Inner glow border ──────────────────────────────────── */
.event-card-glow {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 237, 0.10);
  transition: box-shadow 0.5s ease;
}

.event-card.is-active .event-card-glow {
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 237, 0.22),
    inset 0 2px 16px rgba(255, 255, 255, 0.07);
}

/* ─── Readability veil (z-index 2: above overlay, behind couple & panel) ── */
.event-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

.event-card.light-card::before,
.event-card.warm-light-card::before {
  background: linear-gradient(
    to bottom,
    rgba(255, 248, 237, 0.88) 0%,
    rgba(255, 248, 237, 0.72) 20%,
    rgba(255, 248, 237, 0.30) 36%,
    rgba(255, 248, 237, 0)    48%
  );
}

.event-card.floral-light-card::before {
  background: linear-gradient(
    to bottom,
    rgba(255, 244, 229, 0.88) 0%,
    rgba(255, 244, 229, 0.72) 20%,
    rgba(255, 244, 229, 0.30) 36%,
    rgba(255, 244, 229, 0)    48%
  );
}

.event-card.coastal-light-card::before {
  background: linear-gradient(
    to bottom,
    rgba(255, 251, 235, 0.88) 0%,
    rgba(255, 251, 235, 0.72) 20%,
    rgba(255, 251, 235, 0.30) 36%,
    rgba(255, 251, 235, 0)    48%
  );
}

.event-card.dark-card::before {
  background: linear-gradient(
    to bottom,
    rgba(14, 52, 48, 0.88) 0%,
    rgba(14, 52, 48, 0.72) 20%,
    rgba(14, 52, 48, 0.30) 36%,
    rgba(14, 52, 48, 0)    48%
  );
}

/* ─── Card-type text colour overrides ────────────────────── */
.event-card.light-card .event-card-date,
.event-card.light-card .event-card-name,
.event-card.light-card .event-card-time,
.event-card.light-card .event-card-sub,
.event-card.light-card .event-card-venue,
.event-card.warm-light-card .event-card-date,
.event-card.warm-light-card .event-card-name,
.event-card.warm-light-card .event-card-time,
.event-card.warm-light-card .event-card-sub,
.event-card.warm-light-card .event-card-venue,
.event-card.coastal-light-card .event-card-date,
.event-card.coastal-light-card .event-card-name,
.event-card.coastal-light-card .event-card-time,
.event-card.coastal-light-card .event-card-sub,
.event-card.coastal-light-card .event-card-venue,
.event-card.floral-light-card .event-card-date,
.event-card.floral-light-card .event-card-name,
.event-card.floral-light-card .event-card-time,
.event-card.floral-light-card .event-card-sub,
.event-card.floral-light-card .event-card-venue {
  text-shadow: 0 1px 8px rgba(255, 248, 232, 0.70);
}

.event-card.floral-light-card .event-card-panel { top: 2%; }
.event-card.floral-light-card .event-card-name  { color: #8A1C27; }
.event-card.floral-light-card .event-card-date,
.event-card.floral-light-card .event-card-time  { color: #4B3328; }
.event-card.floral-light-card .event-card-sub   { color: #7A5A47; }
.event-card.floral-light-card .event-card-venue { color: #9A5F47; }

.event-card.warm-light-card .event-card-name    { color: #6B1724; }
.event-card.warm-light-card .event-card-venue   { color: #8B6508; }

.event-card.coastal-light-card .event-card-name { color: #1B3B6F; }
.event-card.coastal-light-card .event-card-venue{ color: #2A5C8A; }
.event-card.coastal-light-card .event-card-date,
.event-card.coastal-light-card .event-card-time,
.event-card.coastal-light-card .event-card-sub  { color: #3E4A65; }

.event-card.dark-card .event-card-date,
.event-card.dark-card .event-card-name,
.event-card.dark-card .event-card-time {
  color: #FFF3D8;
  text-shadow: 0 1px 12px rgba(0, 35, 38, 0.62);
}
.event-card.dark-card .event-card-sub,
.event-card.dark-card .event-card-venue {
  color: #E8C678;
  text-shadow: 0 1px 12px rgba(0, 35, 38, 0.62);
}

/* ─── Prev / Next arrows — glassmorphism ─────────────────── */
.events-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(181, 138, 67, 0.38);
  background: rgba(14, 52, 48, 0.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, 0.20),
    0 4px 18px rgba(0, 0, 0, 0.30);
  color: var(--clr-gold-pale);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background   0.3s ease,
    border-color 0.3s ease,
    opacity      0.3s ease,
    transform    0.3s ease,
    box-shadow   0.3s ease;
  opacity: 0.82;
  pointer-events: all;
}

.events-arrow:hover,
.events-arrow:focus {
  background: rgba(181, 138, 67, 0.22);
  border-color: rgba(181, 138, 67, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, 0.30),
    0 6px 24px rgba(0, 0, 0, 0.35),
    0 0 12px rgba(181, 138, 67, 0.18);
  opacity: 1;
  transform: translateY(-50%) scale(1.08);
  outline: none;
}

.events-arrow:disabled {
  opacity: 0.18;
  cursor: default;
}

.events-arrow--prev { left: clamp(6px, 2.5vw, 16px); }
.events-arrow--next { right: clamp(6px, 2.5vw, 16px); }

@media (max-width: 359px) {
  .events-arrow { display: none; }
}

/* ─── Dot indicators ─────────────────────────────────────── */
.events-dots {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: clamp(1.2rem, 3vw, 2rem);
}

.events-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 248, 237, 0.25);
  cursor: pointer;
  transition:
    background 0.4s ease,
    width      0.4s ease;
}

.events-dot.is-active {
  background: var(--clr-gold-light);
  width: 20px;
  border-radius: 3px;
}

.events-dot:hover:not(.is-active),
.events-dot:focus:not(.is-active) {
  background: rgba(255, 248, 237, 0.5);
  outline: none;
}

@media (min-width: 768px) {
  .events-track {
    padding: 3rem clamp(8vw, 12vw, 16vw);
    gap: 28px;
  }

  .event-card {
    flex: 0 0 clamp(280px, 28vw, 340px);
    width:  clamp(280px, 28vw, 340px);
    height: clamp(400px, 58vh, 520px);
  }

  .events-arrow {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }

  .events-arrow--prev { left: clamp(12px, 3vw, 28px); }
  .events-arrow--next { right: clamp(12px, 3vw, 28px); }
}

/* ============================================================
   Love & Blessings section
   ============================================================ */
.blessings-screen {
  position: relative;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  background-image: url('assets/love%20and%20blessings/bg.webp');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-color: #f9efdf;
}


.blessings-inner {
  position: relative;
  z-index: 1;
  width: min(86%, 380px);
  margin: 0 auto;
  padding: 6dvh 0 8dvh;
  text-align: center;
}

.blessing-kicker {
  margin: 0 0 8px;
  color: #A56F2A;
  font-family: var(--font-date);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
}

.blessing-title {
  margin: 0;
  color: #0f4f46;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 10vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1;
  clip-path: inset(0 100% 0 0);
}

.blessing-amp {
  color: #0f4f46;
}

.blessing-divider {
  width: min(40%, 130px);
  height: 1px;
  margin: 18px auto 28px;
  background: linear-gradient(90deg, transparent, rgba(181, 138, 67, 0.65), transparent);
}

.blessing-group {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(181, 138, 67, 0.30);
}

.blessing-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.blessing-relation {
  margin: 0 0 7px;
  color: #A56F2A;
  font-family: var(--font-date);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
}

.blessing-names {
  margin: 0 0 3px;
  color: #3F4A4F;
  font-family: var(--font-display);
  font-size: clamp(0.88rem, 3.8vw, 1.04rem);
  font-weight: 400;
  line-height: 1.6;
}

.blessing-names:last-child {
  margin-bottom: 0;
}

.blessing-names--all {
  margin-top: 10px;
  color: #A56F2A;
  font-family: var(--font-date);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
}

/* ── Atmospheric light — makes petals feel like they fall through light ── */
.blessings-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 35% at 50% 0%,   rgba(181, 138, 67, 0.10), transparent 70%),
    radial-gradient(ellipse 80% 28% at 50% 100%,  rgba(216, 135, 114, 0.10), transparent 70%);
}

/* ── Petal shower ─────────────────────────────────────── */
.blessings-petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.blessings-petal {
  position: absolute;
  top: 0;
  left: var(--p-left, 50%);
  width: var(--p-size, 24px);
  animation: bpSway var(--p-sway-dur, 3.2s) ease-in-out var(--p-delay, 0s) infinite alternate;
  will-change: transform;
}

.blessings-petal img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform-origin: 50% 20%;
  animation: bpFall var(--p-fall-dur, 7s) ease-in var(--p-delay, 0s) infinite;
  will-change: transform, opacity;
}

/* Organic multi-step drift — breaks the mechanical pendulum feel */
@keyframes bpSway {
  0%   { transform: translateX(0); }
  28%  { transform: translateX(var(--p-sway, 22px)); }
  52%  { transform: translateX(calc(var(--p-sway, 22px) * -0.35)); }
  74%  { transform: translateX(var(--p-sway, 22px)); }
  100% { transform: translateX(calc(var(--p-sway, 22px) * 0.55)); }
}

/* Scale from 0.55 → 1 → 0.9 simulates petals emerging from depth */
@keyframes bpFall {
  0%   { transform: translateY(-80px)  rotate(var(--p-r0, -20deg)) scale(0.55); opacity: 0; }
  6%   { opacity: var(--p-op, 0.62);   transform: translateY(4vh)   rotate(calc(var(--p-r0, -20deg) + 18deg)) scale(1); }
  88%  { opacity: var(--p-op, 0.62); }
  100% { transform: translateY(125vh)  rotate(var(--p-r1, 230deg))  scale(0.88); opacity: 0; }
}

/* ── Cinematic scroll-reveal ─────────────────────────── */
.blessing-line {
  opacity: 0;
  transform: translateY(44px);
  filter: blur(14px);
  transition:
    opacity 1400ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1400ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Groups slide in from alternating sides instead of straight up */
.blessing-group.blessing-line           { transform: translateX(-38px); }
.blessing-group.blessing-line:nth-child(even) { transform: translateX(38px); }

.blessings-screen.is-revealed .blessing-line { opacity: 1; transform: none; filter: blur(0); }
.blessings-screen.is-revealed .blessing-kicker  { transition-delay: 60ms; }
.blessings-screen.is-revealed .blessing-divider { transition-delay: 320ms; }
.blessings-screen.is-revealed .blessing-group:nth-child(4)  { transition-delay: 460ms; }
.blessings-screen.is-revealed .blessing-group:nth-child(5)  { transition-delay: 580ms; }
.blessings-screen.is-revealed .blessing-group:nth-child(6)  { transition-delay: 700ms; }
.blessings-screen.is-revealed .blessing-group:nth-child(7)  { transition-delay: 820ms; }
.blessings-screen.is-revealed .blessing-group:nth-child(8)  { transition-delay: 940ms; }
.blessings-screen.is-revealed .blessing-group:nth-child(9)  { transition-delay: 1060ms; }
.blessings-screen.is-revealed .blessing-group:nth-child(10) { transition-delay: 1180ms; }
.blessings-screen.is-revealed .blessing-group:nth-child(11) { transition-delay: 1300ms; }
.blessings-screen.is-revealed .blessing-group:nth-child(12) { transition-delay: 1420ms; }

/* Title gets a cinematic left-to-right wipe instead of a plain fade */
.blessings-screen.is-revealed .blessing-title {
  animation: cinemaTitleWipe 1.6s cubic-bezier(0.16, 1, 0.3, 1) 160ms both;
}

@keyframes cinemaTitleWipe {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    filter: blur(8px);
  }
  30% { opacity: 1; filter: blur(0); }
  to  { clip-path: inset(0 0% 0 0); opacity: 1; filter: blur(0); }
}

/* ============================================================
   RSVP section — same background as countdown for seamless flow
   ============================================================ */
.rsvp-screen {
  position: relative;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 80% 46% at 50% 100%, rgba(18, 90, 80, 0.12), transparent 72%),
    linear-gradient(180deg, #fff8ed 0%, #f5f0e8 52%, #e8f0ef 100%);
  color: #1f5c54;
}

.rsvp-inner {
  position: relative;
  z-index: 1;
  width: min(88%, 400px);
  margin: 0 auto;
  padding: 7dvh 0 8dvh;
  text-align: center;
}

.rsvp-title {
  margin: 0 0 12px;
  color: #d88772;
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 12vw, 4rem);
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 2px 16px rgba(255, 255, 255, 0.64);
}

.rsvp-sub {
  margin: 0 0 4dvh;
  color: rgba(31, 92, 84, 0.72);
  font-family: var(--font-display);
  font-size: clamp(0.84rem, 3.5vw, 0.98rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
}

.rsvp-contacts {
  display: grid;
  gap: 10px;
  text-align: left;
}

.rsvp-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(181, 138, 67, 0.32);
  background: rgba(255, 248, 237, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.rsvp-info {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.rsvp-name {
  font-family: var(--font-display);
  font-size: clamp(0.94rem, 3.9vw, 1.06rem);
  font-weight: 500;
  color: #123f3b;
}

.rsvp-phone {
  font-family: var(--font-date);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: rgba(18, 63, 59, 0.52);
}

/* ── Two-button actions ──────────────────────────────── */
.rsvp-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.rsvp-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 220ms ease, filter 220ms ease, box-shadow 220ms ease;
}

.rsvp-btn:active {
  transform: scale(0.88);
}

.rsvp-btn:hover,
.rsvp-btn:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

/* WhatsApp — antique gold, wedding-palette */
.rsvp-btn--wa {
  background: #b58a43;
  color: #fff;
  box-shadow:
    0 4px 14px rgba(181, 138, 67, 0.38),
    0 0 0 1px rgba(181, 138, 67, 0.20);
}

.rsvp-btn--wa:hover,
.rsvp-btn--wa:focus-visible {
  background: #c99d55;
  box-shadow:
    0 6px 20px rgba(181, 138, 67, 0.52),
    0 0 0 1px rgba(181, 138, 67, 0.32);
}

/* Phone — soft coral, matches RSVP title */
.rsvp-btn--call {
  background: #d88772;
  color: #fff;
  box-shadow:
    0 4px 14px rgba(216, 135, 114, 0.38),
    0 0 0 1px rgba(216, 135, 114, 0.20);
}

.rsvp-btn--call:hover,
.rsvp-btn--call:focus-visible {
  background: #e09580;
  box-shadow:
    0 6px 20px rgba(216, 135, 114, 0.52),
    0 0 0 1px rgba(216, 135, 114, 0.32);
}

/* ── Cinematic scroll-reveal ─────────────────────────── */

/* Title: dramatic scale + blur reveal */
.rsvp-title {
  transform-origin: center bottom;
}

.rsvp-line {
  opacity: 0;
  filter: blur(12px);
}

/* Cards slide in from the right */
.rsvp-contacts .rsvp-card {
  transform: translateX(36px);
  transition:
    opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1000ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Non-card lines slide up */
.rsvp-line:not(.rsvp-card) {
  transform: translateY(32px);
  transition:
    opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rsvp-screen.is-revealed .rsvp-line { opacity: 1; filter: blur(0); }
.rsvp-screen.is-revealed .rsvp-line:not(.rsvp-card) { transform: translateY(0); }
.rsvp-screen.is-revealed .rsvp-contacts .rsvp-card  { transform: translateX(0); }

/* Title gets the cinematic scale reveal */
.rsvp-screen.is-revealed .rsvp-title {
  animation: cinemaRsvpTitle 1.5s cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.rsvp-screen.is-revealed .rsvp-sub           { transition-delay: 280ms; }
.rsvp-screen.is-revealed .rsvp-card:nth-child(1) { transition-delay: 420ms; }
.rsvp-screen.is-revealed .rsvp-card:nth-child(2) { transition-delay: 530ms; }
.rsvp-screen.is-revealed .rsvp-card:nth-child(3) { transition-delay: 640ms; }
.rsvp-screen.is-revealed .rsvp-card:nth-child(4) { transition-delay: 750ms; }
.rsvp-screen.is-revealed .rsvp-card:nth-child(5) { transition-delay: 860ms; }
.rsvp-screen.is-revealed .rsvp-card:nth-child(6) { transition-delay: 970ms; }

@keyframes cinemaRsvpTitle {
  from {
    opacity: 0;
    transform: scale(0.68) translateY(28px);
    filter: blur(22px);
  }
  40% { opacity: 1; filter: blur(0); }
  to  { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

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

/* ============================================================
   Venue / Map section — parchment paper, floating images, wave route
   ============================================================ */
.venues-screen {
  --venue-gold:      #b08a4a;
  --venue-gold-warm: #bd9450;
  --venue-sage:      #1f4f46;
  --venue-sage-soft: #4a6b62;
  --venue-paper:     #fbf7ea;

  position: relative;
  width: 100%;
  background:
    radial-gradient(ellipse 72% 42% at 16% 34%, rgba(18, 90, 80, 0.14), transparent 70%),
    radial-gradient(ellipse 72% 48% at 88% 28%, rgba(18, 90, 80, 0.10), transparent 74%),
    radial-gradient(ellipse 80% 46% at 50% 100%, rgba(18, 90, 80, 0.12), transparent 72%),
    radial-gradient(ellipse 62% 34% at 50% 6%, rgba(181, 138, 67, 0.14), transparent 72%),
    linear-gradient(180deg, #fffaf0 0%, var(--venue-paper) 48%, #edf3f0 100%);
  color: var(--venue-sage);
}

/* subtle dot-grid grain */
.venues-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 18%, rgba(176, 138, 74, 0.07) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 30%, rgba(18, 90, 80, 0.06) 0 1px, transparent 1.5px),
    radial-gradient(circle at 46% 76%, rgba(18, 90, 80, 0.06) 0 1px, transparent 1.5px);
  background-size: 24px 24px, 31px 31px, 36px 36px;
  opacity: 0.48;
}

/* inner vignette */
.venues-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 70px rgba(18, 63, 59, 0.13);
}

.venue-paper-texture {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,0.18), transparent 28%, rgba(176,138,74,0.03) 54%, transparent 78%),
    repeating-linear-gradient(86deg, rgba(18,90,80,0.018) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.venues-screen.is-revealed .venue-paper-texture { opacity: 1; }

/* ── Content column ──────────────────────────────────────── */
.venue-content {
  position: relative;
  z-index: 5;
  width: min(86vw, 356px);
  margin: 0 auto;
  padding: clamp(3rem, 7dvh, 5rem) 0 clamp(3rem, 6dvh, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

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

.venues-screen.is-revealed .venue-reveal {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ── Gold label ──────────────────────────────────────────── */
.venue-label {
  margin: 0 0 clamp(6px, 1vh, 10px);
  color: var(--venue-gold);
  font-family: var(--font-date);
  font-size: clamp(0.72rem, 3.2vw, 0.84rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(255,255,255,0.55);
}

/* ── Pulsing compass icon ────────────────────────────────── */
.venue-nav-icon {
  margin: clamp(4px,1vh,9px) 0 clamp(16px,2.8vh,26px);
  width: clamp(38px, 10vw, 50px);
  height: clamp(38px, 10vw, 50px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--venue-gold);
  background: radial-gradient(circle, rgba(255,252,241,0.80), rgba(255,250,235,0.22) 70%, transparent);
  filter: drop-shadow(0 4px 10px rgba(142,95,40,0.14));
  animation: venueNavPulse 3.4s ease-in-out infinite;
}

.venue-nav-icon svg { width: 52%; height: 52%; fill: currentColor; }

@keyframes venueNavPulse {
  0%, 100% { transform: translateY(0)    scale(1); }
  50%       { transform: translateY(-3px) scale(1.07); }
}

/* ── Venue stop — frameless, parchment carries it ────────── */
.venue-stop {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Floating venue image (transparent bg) ──────────────── */
.venue-float-wrap {
  width: clamp(110px, 36vw, 148px);
  margin: 0 auto clamp(8px, 1.6vh, 14px);
}

.venue-float-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 130px;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 20px rgba(18, 63, 59, 0.20))
    drop-shadow(0 2px  8px rgba(181,138,67,0.14));
  animation: venueImgFloat 7s ease-in-out infinite;
}

/* second image floats with slight phase offset so they don't sync */
.venue-float-img--alt {
  animation-delay: -3.5s;
}

@keyframes venueImgFloat {
  0%, 100% { transform: translateY(0)    rotate(-0.5deg) scale(1); }
  50%       { transform: translateY(-9px) rotate( 0.6deg) scale(1.013); }
}

/* ── Small map pin + golden halo ─────────────────────────── */
.venue-pin-wrap {
  position: relative;
  width: clamp(32px, 8.5vw, 42px);
  height: clamp(32px, 8.5vw, 42px);
  margin: 0 auto clamp(6px, 1.2vh, 10px);
}

.venue-pin-svg {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--venue-gold);
  filter: drop-shadow(0 4px 8px rgba(142,95,40,0.28));
  opacity: 0;
  transform: translateY(-14px) scale(0.88);
}

.venues-screen.is-revealed .venue-pin-svg {
  animation: venuePinDrop 1.05s cubic-bezier(0.18, 0.86, 0.28, 1.12) var(--venue-delay, 600ms) forwards;
}

.venue-pin-pulse {
  position: absolute;
  z-index: 1;
  left: 50%; top: 52%;
  width: 80%; height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(181,138,67,0.26), rgba(181,138,67,0.07) 50%, transparent 72%);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
}

.venues-screen.is-revealed .venue-pin-pulse {
  animation: venuePinPulse 2.8s ease-out 1.4s infinite;
}

@keyframes venuePinDrop {
  0%   { opacity: 0; transform: translateY(-24px) scale(0.88); }
  64%  { opacity: 1; transform: translateY( 4px)  scale(1.04); }
  82%  { opacity: 1; transform: translateY(-2px)  scale(0.99); }
  100% { opacity: 1; transform: translateY( 0)    scale(1); }
}

@keyframes venuePinPulse {
  0%   { opacity: 0.44; transform: translate(-50%,-50%) scale(0.58); }
  100% { opacity: 0;    transform: translate(-50%,-50%) scale(1.75); }
}

/* ── Venue name ──────────────────────────────────────────── */
.venue-stop h3 {
  margin: 0 0 clamp(4px, 0.8vh, 7px);
  color: var(--venue-sage);
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 4.9vw, 1.42rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 10px rgba(255,255,255,0.6);
}

/* ── Events tag ──────────────────────────────────────────── */
.venue-events-tag {
  margin: 0 0 clamp(10px, 2vh, 16px);
  color: var(--venue-sage-soft);
  font-family: var(--font-date);
  font-size: clamp(0.58rem, 2.4vw, 0.66rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  opacity: 0.88;
}

/* ── "Open Location →" — italic gold underline, no pill ─── */
.venue-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 8px;
  border: none;
  background: none;
  color: var(--venue-gold);
  font-family: var(--font-display);
  font-size: clamp(0.86rem, 3.8vw, 1.04rem);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.12em;
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease;
}

.venue-button::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: 2px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(176,138,74,0.9), transparent);
  transform: scaleX(0.5);
  opacity: 0.7;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.venue-button:hover,
.venue-button:focus-visible        { color: var(--venue-gold-warm); outline: none; }
.venue-button:hover::after,
.venue-button:focus-visible::after { transform: scaleX(1); opacity: 1; }

.venue-button-arrow {
  display: inline-block;
  font-style: normal;
  transition: transform 0.25s ease;
}

.venue-button:hover .venue-button-arrow,
.venue-button:focus-visible .venue-button-arrow { transform: translateX(4px); }

/* ── "Tap to open Google Maps" micro-copy ────────────────── */
.venue-tap-note {
  display: block;
  margin-top: clamp(5px, 1vh, 8px);
  color: rgba(31,79,70,0.50);
  font-family: var(--font-date);
  font-size: clamp(0.58rem, 2.3vw, 0.66rem);
  letter-spacing: 0.08em;
}

/* ── Wave route SVG with SMIL travelling dot ─────────────── */
.venue-route-wrap {
  width: min(100%, 340px);
  margin: clamp(10px, 2vh, 18px) auto;
}

.venue-route-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.venue-route-dot {
  filter: drop-shadow(0 0 8px rgba(212,165,77,0.65));
}

/* ============================================================
   Countdown + Footer Section
   Asset paths are set in script.js via COUNTDOWN_ASSETS.
   ============================================================ */

.countdown-section {
  --countdown-rose: #d88772;
  --countdown-sage: #1f5c54;
  --countdown-sage-deep: #123f3b;
  --countdown-sage-soft: #3a6b5a;
  --countdown-gold: #b58a43;
  --countdown-ivory: #fff8ed;

  position: relative;
  width: 100%;
  min-height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 72% 42% at 16% 66%, rgba(18, 63, 59, 0.10), transparent 70%),
    radial-gradient(ellipse 72% 48% at 88% 72%, rgba(18, 63, 59, 0.08), transparent 74%),
    radial-gradient(ellipse 80% 46% at 50% 0%, rgba(18, 90, 80, 0.12), transparent 72%),
    radial-gradient(ellipse 62% 34% at 50% 94%, rgba(181, 138, 67, 0.12), transparent 72%),
    linear-gradient(180deg, #e8f0ef 0%, #f5f0e8 52%, #fff8ed 100%);
  color: var(--countdown-sage);
}

.countdown-section::before,
.countdown-section::after,
.countdown-bg,
.countdown-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.countdown-section::before {
  content: '';
  z-index: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(181, 138, 67, 0.07) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 30%, rgba(18, 63, 59, 0.06) 0 1px, transparent 1.5px),
    radial-gradient(circle at 46% 76%, rgba(18, 90, 80, 0.06) 0 1px, transparent 1.5px);
  background-size: 24px 24px, 31px 31px, 36px 36px;
  opacity: 0.48;
}

.countdown-section::after {
  content: '';
  z-index: 1;
  box-shadow: inset 0 0 70px rgba(18, 63, 59, 0.12);
}

.countdown-bg {
  z-index: 1;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 28%, rgba(181, 138, 67, 0.03) 54%, transparent 78%),
    repeating-linear-gradient(86deg, rgba(18, 63, 59, 0.018) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.countdown-section.is-visible .countdown-bg {
  opacity: 1;
  transform: scale(1);
}

.countdown-particles {
  z-index: 2;
  overflow: hidden;
}

.countdown-particles span {
  position: absolute;
  width: var(--dust-size, 5px);
  height: var(--dust-size, 5px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 243, 201, 0.95), rgba(181, 138, 67, 0.44) 55%, transparent 74%);
  box-shadow: 0 0 10px rgba(181, 138, 67, 0.34);
  opacity: 0;
  animation: countdownDust var(--dust-duration, 9s) ease-in-out var(--dust-delay, 0s) infinite;
}

.countdown-particles span:nth-child(1) { --dust-size: 5px; --dust-duration: 8.5s; --dust-delay: -1s; left: 13%; top: 24%; }
.countdown-particles span:nth-child(2) { --dust-size: 4px; --dust-duration: 10s;  --dust-delay: -5s; left: 78%; top: 18%; }
.countdown-particles span:nth-child(3) { --dust-size: 6px; --dust-duration: 11s;  --dust-delay: -3s; left: 86%; top: 55%; }
.countdown-particles span:nth-child(4) { --dust-size: 4px; --dust-duration: 9.5s; --dust-delay: -7s; left: 20%; top: 66%; }
.countdown-particles span:nth-child(5) { --dust-size: 5px; --dust-duration: 12s;  --dust-delay: -2s; left: 62%; top: 78%; }
.countdown-particles span:nth-child(6) { --dust-size: 3px; --dust-duration: 8s;   --dust-delay: -4s; left: 42%; top: 13%; }

.countdown-content {
  position: relative;
  z-index: 4;
  min-height: 100dvh;
  min-height: 100svh;
  width: min(90vw, 380px);
  margin: 0 auto;
  padding:
    calc(env(safe-area-inset-top, 0px) + clamp(52px, 7.2vh, 80px))
    0
    calc(env(safe-area-inset-bottom, 0px) + clamp(20px, 3.4vh, 34px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

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

.countdown-section.is-visible .countdown-reveal {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.countdown-eyebrow {
  margin: 0 0 clamp(6px, 1.1vh, 10px);
  color: var(--countdown-gold);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(14px, 3.8vw, 18px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.countdown-eyebrow span {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(3px);
  transition:
    opacity 0.62s ease calc(var(--countdown-delay, 0ms) + var(--letter-delay, 0ms)),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--countdown-delay, 0ms) + var(--letter-delay, 0ms)),
    filter 0.62s ease calc(var(--countdown-delay, 0ms) + var(--letter-delay, 0ms));
}

.countdown-section.is-visible .countdown-eyebrow span {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.countdown-names {
  position: relative;
  margin: 0;
  color: var(--countdown-rose);
  font-family: 'Allura', 'Bickham Script Pro', cursive;
  font-size: clamp(54px, 15vw, 78px);
  line-height: 0.92;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 16px rgba(255, 255, 255, 0.64);
  clip-path: inset(0 100% 0 0);
}

.countdown-names::before {
  content: '';
  position: absolute;
  inset: -28% -18%;
  z-index: -1;
  background: radial-gradient(ellipse, rgba(216, 135, 114, 0.22), transparent 70%);
  animation: countdownNameGlow 4.8s ease-in-out infinite;
}

.countdown-section.is-visible .countdown-names {
  animation: countdownInkReveal 1.55s cubic-bezier(0.16, 1, 0.3, 1) 460ms forwards;
}

.countdown-divider {
  width: clamp(86px, 24vw, 126px);
  height: clamp(18px, 3vh, 24px);
  margin: clamp(12px, 2vh, 18px) auto clamp(14px, 2.4vh, 22px);
  position: relative;
}

.countdown-divider::before,
.countdown-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(181, 138, 67, 0.64));
  transition: width 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--countdown-delay, 0ms);
}

.countdown-divider::before { right: 50%; }
.countdown-divider::after  { left: 50%; transform: scaleX(-1); }

.countdown-divider {
  background:
    radial-gradient(circle at 50% 50%, rgba(181, 138, 67, 0.62) 0 2.4px, transparent 2.9px),
    radial-gradient(circle at 43% 50%, rgba(181, 138, 67, 0.34) 0 1.5px, transparent 1.9px),
    radial-gradient(circle at 57% 50%, rgba(181, 138, 67, 0.34) 0 1.5px, transparent 1.9px);
}

.countdown-section.is-visible .countdown-divider::before,
.countdown-section.is-visible .countdown-divider::after {
  width: 44%;
}

.countdown-grid {
  width: min(78vw, 320px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2.4vw, 14px);
  margin-bottom: clamp(18px, 3vh, 26px);
}

.countdown-card {
  position: relative;
  aspect-ratio: 0.75;
  display: grid;
  place-items: center;
  isolation: isolate;
  filter: drop-shadow(0 12px 18px rgba(18, 63, 59, 0.12));
  transform-origin: center;
}

.countdown-card-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.94;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.countdown-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 72%;
  min-height: 58%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(1px);
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.62);
}

.countdown-number {
  color: var(--countdown-sage-deep);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(31px, 9.5vw, 48px);
  line-height: 0.92;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    transform 0.35s ease,
    color 0.35s ease,
    text-shadow 0.35s ease;
}

.countdown-label {
  margin-top: clamp(6px, 1.3vh, 10px);
  color: var(--countdown-gold);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(10px, 2.7vw, 13px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.countdown-card.is-changing {
  animation: countdownCardPulse 0.52s ease;
}

.countdown-card.is-changing .countdown-number {
  color: var(--countdown-gold);
  transform: translateY(-3px) scale(1.04);
  text-shadow: 0 0 16px rgba(181, 138, 67, 0.48);
}

.wedding-footer {
  margin-top: auto;
  padding-top: clamp(4px, 1vh, 10px);
  width: 100%;
  color: var(--countdown-sage-soft);
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.wedding-footer p {
  margin: 0;
}

.footer-names {
  color: var(--countdown-rose);
  font-family: 'Allura', 'Bickham Script Pro', cursive;
  font-size: clamp(32px, 9vw, 48px);
  line-height: 1;
}

.footer-date,
.footer-venue {
  font-size: clamp(12px, 3.25vw, 15px);
  line-height: 1.34;
  letter-spacing: 0.12em;
}

.footer-date {
  margin-top: clamp(7px, 1.2vh, 10px) !important;
  color: var(--countdown-sage);
  text-transform: uppercase;
}

.footer-venue {
  color: var(--countdown-sage-soft);
}

.footer-credit {
  margin-top: clamp(13px, 2.1vh, 18px) !important;
  color: rgba(58, 107, 90, 0.76);
  font-size: clamp(11px, 3vw, 13px);
  letter-spacing: 0.08em;
}

.footer-credit a {
  position: relative;
  color: var(--countdown-gold);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.footer-credit a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.2);
  transform-origin: left;
  opacity: 0.52;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
  color: #c9973c;
  text-shadow: 0 0 12px rgba(181, 138, 67, 0.28);
}

.footer-credit a:hover::after,
.footer-credit a:focus-visible::after {
  transform: scaleX(1);
  opacity: 0.9;
}

.footer-credit a:focus-visible {
  outline: 2px solid rgba(181, 138, 67, 0.35);
  outline-offset: 4px;
  border-radius: 999px;
}

@keyframes countdownInkReveal {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes countdownNameGlow {
  0%, 100% { opacity: 0.56; transform: scale(0.96); }
  48%       { opacity: 0.88; transform: scale(1.04); }
}

@keyframes countdownCardPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 12px 18px rgba(18, 63, 59, 0.12));
  }
  44% {
    transform: scale(1.025);
    filter:
      drop-shadow(0 13px 20px rgba(18, 63, 59, 0.14))
      drop-shadow(0 0 14px rgba(181, 138, 67, 0.18));
  }
}

@keyframes countdownDust {
  0%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.74); }
  24%       { opacity: 0.72; }
  55%       { opacity: 0.46; transform: translate3d(12px, -18px, 0) scale(1); }
  82%       { opacity: 0.62; transform: translate3d(-8px, -34px, 0) scale(0.9); }
}

@media (min-width: 640px) {
  .countdown-grid {
    width: min(88vw, 560px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-height: 740px) {
  .countdown-content {
    padding-top: calc(env(safe-area-inset-top, 0px) + 34px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  }
  .countdown-names { font-size: clamp(46px, 13vw, 62px); }
  .countdown-divider { margin-top: 8px; margin-bottom: 10px; }
  .countdown-grid { width: min(72vw, 282px); gap: 8px; margin-bottom: 12px; }
  .countdown-number { font-size: clamp(27px, 8vw, 40px); }
  .footer-names { font-size: clamp(28px, 8vw, 40px); }
  .footer-credit { margin-top: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .countdown-card.is-changing { animation: none !important; }
  .countdown-bg,
  .countdown-reveal,
  .countdown-eyebrow span { transition: opacity 0.3s ease !important; transform: none !important; filter: none !important; }
  .countdown-names { clip-path: none !important; }
  .countdown-section.is-visible .countdown-bg,
  .countdown-section.is-visible .countdown-reveal,
  .countdown-section.is-visible .countdown-eyebrow span { opacity: 1; }
  .countdown-divider::before,
  .countdown-divider::after { width: 44%; }
}