/* ══════════════════════════════════════════
   RESET & DESIGN TOKENS
══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ivory:       #f5ede0;
  --champagne:   #ddc9a3;
  --warm-white:  #faf6f0;
  --silk:        #ede3d4;
  --dark:        #09080f;
  --ts:          0 1px 16px rgba(0,0,0,0.75), 0 2px 48px rgba(0,0,0,0.55);
  --font-d:      'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;
  --font-u:      'Jost', 'Gill Sans', sans-serif;
  --font-s:      'Tangerine', 'Great Vibes', cursive;   /* script — couple names + decorative headings */
  --silk-ease:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --intro-dur:   1.4s;
}

html {
  height: 100%;
  background: var(--dark);
}

body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-d);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.unlocked {
  overflow-y: auto;
  /* No scroll-snap — snapping yanked half-visible events to the top on scroll.
     Free, native momentum scrolling instead. scroll-behavior:smooth only
     affects programmatic jumps (scroll cue / "Enter the Celebration"). */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* ══════════════════════════════════════════
   INTRO SECTION
══════════════════════════════════════════ */
#intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  pointer-events: auto;
  transition: opacity var(--intro-dur) var(--silk-ease);
}

#intro.fading { opacity: 0; pointer-events: none; }
#intro.gone   { display: none; }

/* Dim image background */
#intro-bg {
  position: absolute;
  inset: 0;
  background: url('assets/intro/dim.webp') center center / cover no-repeat;
  z-index: 0;
}

/* Rich cinematic vignette */
#intro-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 55% at 50% 100%, rgba(6,4,18,0.82) 0%, transparent 68%),
    radial-gradient(ellipse 70% 35% at 50% 0%,   rgba(6,4,18,0.5)  0%, transparent 65%),
    radial-gradient(ellipse 40% 80% at 0%   50%, rgba(6,4,18,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 40% 80% at 100% 50%, rgba(6,4,18,0.25) 0%, transparent 60%);
}

/* ── ROPE ANCHOR GLOW (top of intro, behind the rope) ── */
#rope-anchor-glow {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(180px, 46vw);
  height: min(120px, 15svh);
  transform: translateX(-50%);
  z-index: 9;
  pointer-events: none;
  background: radial-gradient(ellipse 100% 100% at 50% 0%,
    rgba(221,201,163,0.24) 0%, transparent 100%);
  animation: anchorBreath 4.8s ease-in-out infinite;
}
@keyframes anchorBreath {
  0%,100% { opacity: .36; transform: translateX(-50%) scale(1); }
  50%     { opacity: .82; transform: translateX(-50%) scale(1.14); }
}

/* ── ROPE ── */
#rope-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 20;
  width: clamp(100px, 24vw, 132px);
  height: clamp(440px, 60svh, 580px);
  transform: translateX(-50%);
  transform-origin: 50% 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: visible;
  background: transparent;
  border: 0;
  padding: 0;

  will-change: transform, filter;
  /* Heavy multi-layer shadow — gives the rope real weight */
  filter:
    drop-shadow(0 32px 64px rgba(0,0,0,0.78))
    drop-shadow(0 0 20px rgba(0,0,0,0.36));

  /* Entry drop-in animation */
  animation: ropeDrop 1.15s ease 0.35s both;
}

@keyframes ropeDrop {
  0%   { transform: translateX(-50%) rotate(-0.4deg); opacity: 0; }
  55%  { transform: translateX(-50%) rotate( 0.22deg); opacity: 1; }
  100% { transform: translateX(-50%) rotate( 0deg);   opacity: 1; }
}

/* Tassel bloom — atmospheric glow around the tassel, pulses gently */
#rope-wrap::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%, 0);
  background: radial-gradient(circle,
    rgba(240,200,106,0.30) 0%,
    rgba(221,201,163,0.15) 34%,
    rgba(166,56,79,0.07) 58%,
    transparent 74%);
  filter: blur(8px);
  opacity: 0.42;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: tasselBloom 4.4s ease-in-out infinite;
}
@keyframes tasselBloom {
  0%,100% { opacity: .30; transform: translate(-50%, 0) scale(.94); }
  50%     { opacity: .56; transform: translate(-50%, 0) scale(1.08); }
}

/* rope-ready: drop-in finished, no idle yet (settled moment) */
#rope-wrap.rope-ready:not(.rope-idle) {
  animation: none;
  opacity: 1;
}

/* Idle gentle sway — only when rope is at rest after settling */
#rope-wrap.rope-idle {
  animation: ropeIdle 5.2s ease-in-out infinite;
  opacity: 1;
}
@keyframes ropeIdle {
  0%   { transform: translateX(-50%) rotate(0deg); }
  20%  { transform: translateX(-50%) rotate(.5deg); }
  52%  { transform: translateX(-50%) rotate(-.42deg); }
  78%  { transform: translateX(-50%) rotate(.28deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

#rope-wrap.is-pulling {
  animation: none;
  opacity: 1;
  cursor: grabbing;
  filter:
    drop-shadow(0 38px 74px rgba(0,0,0,0.84))
    drop-shadow(0 0 24px rgba(221,201,163,0.16));
}
#rope-wrap.is-pulling::after {
  opacity: 0.62;
  filter: blur(10px);
  animation-duration: 2.2s;
}

#rope-wrap:active { cursor: grabbing; }
#rope-wrap:focus { outline: none; }

#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;
  -webkit-user-drag: none;
}

/* Tassel halo — glows brighter as the user pulls */
#rope-halo {
  position: absolute;
  top: clamp(110px, 22svh, 180px);
  left: 50%;
  width: min(120px, 36vw);
  height: min(120px, 36vw);
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle,
    rgba(221,201,163,0.32) 0%,
    rgba(221,201,163,0.12) 42%,
    transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
  mix-blend-mode: screen;
}
#rope-wrap.rope-idle #rope-halo {
  opacity: .35;
  animation: ropeHaloBreath 3.6s ease-in-out infinite;
}
@keyframes ropeHaloBreath {
  0%,100% { opacity: .28; transform: translateX(-50%) scale(1); }
  50%     { opacity: .60; transform: translateX(-50%) scale(1.18); }
}

/* Two-phase snap is driven by inline JS transitions (snap → elastic rebound) */
#rope-wrap.pull { animation: none; }

/* Rope retreats upward and fades — like the cord recoiling out of the scene */
#rope-wrap.exit {
  animation: none;
  pointer-events: none;
}
/* Also hide the bloom + anchor glow as the rope leaves */
#rope-wrap.exit::after { opacity: 0; transition: opacity 480ms ease; }
#intro.exiting #rope-anchor-glow { opacity: 0; transition: opacity 800ms ease; }

/* Cinematic flash — bright golden burst from the top, masks the rope exit */
#intro .rope-flash {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  background: radial-gradient(ellipse 130% 95% at 50% 8%,
    rgba(255,232,160,0.95) 0%,
    rgba(255,200,90,0.55) 22%,
    rgba(255,170,60,0.20) 46%,
    transparent 74%);
  animation: ropeFlash 1300ms ease-out forwards;
  mix-blend-mode: screen;
}
@keyframes ropeFlash {
  0%   { opacity: 0;   transform: scale(.92); }
  14%  { opacity: 1;   transform: scale(1); }
  60%  { opacity: .55; transform: scale(1.05); }
  100% { opacity: 0;   transform: scale(1.1); }
}

/* Pull-too-little hint */
#pull-feedback {
  position: absolute;
  top: clamp(190px, 38svh, 280px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  z-index: 22;
  font-family: var(--font-d);
  font-style: italic;
  font-size: clamp(13px, 3.4vw, 16px);
  letter-spacing: 0.04em;
  color: var(--champagne);
  text-shadow: var(--ts);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease, transform 280ms ease;
  white-space: nowrap;
}
#pull-feedback.is-visible {
  opacity: .92;
  transform: translateX(-50%) translateY(0);
}

/* ── CTA ── */
#cta {
  position: absolute;
  bottom: 13dvh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: ctaAppear 1.8s var(--silk-ease) 0.8s both;
  transition: opacity 0.7s var(--silk-ease);
  pointer-events: none;
}

@keyframes ctaAppear {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#cta.hide { opacity: 0; }

#cta-text {
  font-family: var(--font-d);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(15px, 4vw, 19px);
  letter-spacing: 0.05em;
  color: var(--champagne);
  text-shadow: var(--ts);
  white-space: nowrap;
}

/* Gentle up-down hint arrow */
.cta-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  animation: arrowBob 2.2s ease-in-out infinite;
  opacity: 0.65;
}

@keyframes arrowBob {
  0%, 100% { transform: translateY(0);    opacity: 0.65; }
  50%       { transform: translateY(-6px); opacity: 0.9; }
}

.cta-arrow span {
  display: block;
  width: 1px;
  background: var(--champagne);
  height: 26px;
  border-radius: 1px;
}

.cta-arrow svg {
  width: 10px;
  height: 10px;
  fill: var(--champagne);
}

/* ══════════════════════════════════════════
   HERO SECTION (video)
══════════════════════════════════════════ */
#hero {
  position: relative;
  width: 100%;
  height: 100dvh;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto 1fr auto;
  justify-items: center;
  overflow: hidden;
  scroll-snap-align: start;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s var(--silk-ease) 0.3s;
}

#hero.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Video */
#hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  background: var(--dark);
}

/* Gradient masks for text areas */
#hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(6,4,18,0.62) 0%,
      rgba(6,4,18,0.10) 22%,
      transparent      42%,
      transparent      60%,
      rgba(6,4,18,0.15) 76%,
      rgba(6,4,18,0.68) 100%
    );
}

/* ── COUPLE NAME (top, three lines, cinematic) ── */
#couple-name {
  position: relative;
  z-index: 10;
  padding-top: max(40px, env(safe-area-inset-top, 40px));
  text-align: center;
  align-self: start;
  grid-row: 1;
}

.cn-line,
.cn-amp {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(8px);
  transition:
    opacity 1.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform, filter;
}

.cn-line {
  font-family: var(--font-s);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(66px, 16.5vw, 116px);
  letter-spacing: 0;
  line-height: 1;
  color: #f9eed6;
  text-shadow:
    0 2px 28px rgba(0,0,0,0.85),
    0 0 60px rgba(221,201,163,0.22),
    0 0 1px rgba(245,237,224,0.45);
  white-space: nowrap;
}

.cn-amp {
  font-family: 'Cormorant Garamond', 'Cormorant', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 8.4vw, 60px);
  letter-spacing: 0;
  color: var(--champagne);
  margin: clamp(2px, 0.6vw, 6px) 0;
  text-shadow:
    0 2px 24px rgba(0,0,0,0.8),
    0 0 30px rgba(221,201,163,0.35);
}

#couple-name.in .cn-line,
#couple-name.in .cn-amp {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

#couple-name.in .cn-amp { opacity: 0.92; }

/* Per-line stagger — moonlight reveal: Chitra → & → Prateek */
#couple-name.in .cn-line:nth-child(1) { transition-delay: 0ms; }
#couple-name.in .cn-amp                { transition-delay: 900ms; transition-duration: 1.4s; }
#couple-name.in .cn-line:nth-child(3) { transition-delay: 1500ms; }

.cn-names-wrap {
  position: relative;
  display: inline-block;
}

/* Subtle ivory breathing glow — like light through clouds, not glitter */
#couple-name.in .cn-names-wrap {
  animation: ivoryBreath 7s ease-in-out 3.2s infinite;
}

@keyframes ivoryBreath {
  0%, 100% {
    filter:
      drop-shadow(0 0 0 rgba(249,238,214,0))
      drop-shadow(0 0 14px rgba(249,238,214,0.05));
  }
  50% {
    filter:
      drop-shadow(0 0 22px rgba(249,238,214,0.18))
      drop-shadow(0 0 60px rgba(249,238,214,0.10));
  }
}

/* Decorative ornament beneath the names */
.cn-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(16px, 2.2vw, 26px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.4s var(--silk-ease) 1.6s, transform 1.4s var(--silk-ease) 1.6s;
}

#couple-name.in .cn-ornament {
  opacity: 1;
  transform: translateY(0);
}

.cn-ornament::before,
.cn-ornament::after {
  content: '';
  width: clamp(40px, 8vw, 80px);
  height: 0.5px;
  background: linear-gradient(90deg, transparent, var(--champagne), transparent);
  opacity: 0.7;
}

.cn-diamond {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--champagne);
  opacity: 0.85;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(221,201,163,0.6);
}

/* ── VENUE (closer to the names) ── */
#venue {
  position: relative;
  z-index: 10;
  grid-row: 3;
  align-self: start;
  margin-top: clamp(-64px, -5.5vh, -28px);
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

#venue.in {
  opacity: 1;
  transform: translateY(0);
}

.venue-name {
  display: block;
  font-family: var(--font-u);
  font-weight: 600;
  font-size: clamp(12px, 2.6vw, 15px);
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
  color: #f2e7cf;
  text-shadow: 0 1px 12px rgba(0,0,0,0.75), 0 2px 30px rgba(0,0,0,0.55);
}

.venue-name-sub {
  opacity: 0.92;
  font-weight: 600;
  font-size: clamp(11px, 2.3vw, 13px);
  letter-spacing: 0.18em;
}

/* ── BOTTOM: SCROLL CUE ── */
#bottom {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding-bottom: max(44px, env(safe-area-inset-bottom, 44px));
  grid-row: 4;
}

/* Scroll cue */
#scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1.4s ease-out, transform 1.4s ease-out;
  cursor: pointer;
}

#scroll-cue.in {
  opacity: 0.75;
  transform: translateY(0);
}

.sc-label {
  font-family: var(--font-u);
  font-weight: 600;
  font-size: clamp(11px, 3vw, 14px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #faf6f0;
  text-shadow: var(--ts);
}

/* Three chevrons, stacked and softly cascading downward */
.sc-arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sc-arrow {
  width: 16px;
  height: 16px;
  margin-top: -8px;          /* overlap so the three read as one flowing cue */
  border-right: 2px solid #faf6f0;
  border-bottom: 2px solid #faf6f0;
  transform: rotate(45deg);
  opacity: 0;
}

.sc-arrow:first-child { margin-top: 0; }

#scroll-cue.in .sc-arrow {
  animation: arrowCascade 2.2s ease-in-out infinite;
}
#scroll-cue.in .sc-arrow:nth-child(1) { animation-delay: 0ms;   }
#scroll-cue.in .sc-arrow:nth-child(2) { animation-delay: 180ms; }
#scroll-cue.in .sc-arrow:nth-child(3) { animation-delay: 360ms; }

@keyframes arrowCascade {
  0%        { opacity: 0;    transform: rotate(45deg) translate(-2px, -2px); }
  40%       { opacity: 0.95; }
  60%       { opacity: 0.95; }
  100%      { opacity: 0;    transform: rotate(45deg) translate(3px, 3px); }
}

/* ══════════════════════════════════════════
   DATE REVEAL — WIPE THE MIRROR
══════════════════════════════════════════ */
.date-section {
  scroll-snap-align: start;
  position: relative;
  min-height: 100dvh;
  background: #eee5d2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vh, 32px);
  padding: max(40px, env(safe-area-inset-top, 40px)) 16px
           max(56px, env(safe-area-inset-bottom, 56px));
}

.date-bg {
  position: absolute;
  inset: 0;
  background: url('assets/date/date_bg.webp') center center / cover no-repeat;
  z-index: 0;
}
.date-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255,250,238,0.18) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255,250,238,0.10) 0%, transparent 30%, rgba(225,210,180,0.10) 100%);
  pointer-events: none;
}

/* ── Heading ── */
.date-heading {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 92vw;
  margin-top: clamp(28px, 6vh, 64px);

  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.1s ease-out, transform 1.1s ease-out;
}
.date-section.in .date-heading {
  opacity: 1;
  transform: translateY(0);
}

.dh-title {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(22px, 6vw, 32px);
  letter-spacing: 0.015em;
  line-height: 1.2;
  color: #1c3551;
}

.dh-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
.dh-line {
  width: clamp(34px, 8vw, 56px);
  height: 0.5px;
  background: linear-gradient(90deg, transparent, #2b6a78, transparent);
  opacity: 0.7;
}
.dh-diamond {
  width: 5px;
  height: 5px;
  background: #2b6a78;
  transform: rotate(45deg);
  opacity: 0.85;
  box-shadow: 0 0 6px rgba(43,106,120,0.35);
}

.dh-sub {
  margin-top: 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 4vw, 19px);
  letter-spacing: 0.03em;
  color: #7a4b48;
  opacity: 0.92;
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.date-stage {
  position: relative;
  z-index: 2;
  height: min(54svh, 440px);
  aspect-ratio: 1122 / 1402;   /* matches frame.webp (new peacock frame) */
  max-width: 82vw;
  touch-action: pan-y;
  margin-top: clamp(8px, 2vh, 18px);
  transform-origin: 50% 0%;
  will-change: transform;

  opacity: 0;
  transform: translateY(-22px) scale(0.94) rotate(-1.4deg);
  transition:
    opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s,
    transform 1.4s cubic-bezier(0.34, 1.38, 0.5, 1) 0.45s;
}

/* Soft floor shadow — gives the mirror real object presence */
.date-stage::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 72%;
  height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 60% 100% at 50% 0%,
    rgba(28,40,70,0.28) 0%,
    rgba(28,40,70,0.10) 45%,
    transparent 75%);
  filter: blur(6px);
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
}

/* Subtle rope-cast shadow on the wall above the frame */
.date-stage::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 36px;
  background: linear-gradient(180deg,
    rgba(28,40,70,0.0) 0%,
    rgba(28,40,70,0.18) 60%,
    rgba(28,40,70,0.32) 100%);
  filter: blur(2.5px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}
.date-section.in .date-stage {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
  animation: frameSway 7.5s ease-in-out 2.2s infinite;
}
.date-section.in .date-stage.wiping {
  animation-play-state: paused;
}

/* Gentle pendulum sway — hangs from rope, drifts very subtly */
@keyframes frameSway {
  0%   { transform: translateY(0) rotate(-1.1deg); }
  50%  { transform: translateY(0) rotate( 1.1deg); }
  100% { transform: translateY(0) rotate(-1.1deg); }
}

.date-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter:
    drop-shadow(0 24px 38px rgba(20,35,65,0.30))
    drop-shadow(0 10px 18px rgba(20,35,65,0.18))
    drop-shadow(0 2px 4px rgba(20,35,65,0.12));
  z-index: 3;
}

/* Oval opening — positioned inside frame.webp's inner aperture (peacock frame).
   Insets sit slightly proud of the painted aperture so the mist overflows under
   the gold rim (which masks the edge); date stays centred in the opening. */
.date-oval {
  position: absolute;
  top: 18.5%;
  bottom: 9%;
  left: 22.5%;
  right: 22.5%;
  border-radius: 50% / 50%;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 90% at 50% 45%, #fbf3df 0%, #efe2c4 65%, #e3d2aa 100%);
  box-shadow:
    inset 0 6px 18px rgba(60,45,20,0.10),
    inset 0 -6px 14px rgba(60,45,20,0.08);
  z-index: 2;
}

/* Subtle glass reflection — diagonal specular highlight, never glittery */
.date-oval::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg,
      rgba(255,250,235,0.28) 0%,
      rgba(255,250,235,0.08) 22%,
      transparent 42%,
      transparent 70%,
      rgba(255,250,235,0.04) 100%);
  z-index: 6;
  mix-blend-mode: screen;
}

.date-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  pointer-events: none;
  padding: 0 8%;
}

.date-day {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(72px, 19vw, 116px);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 0.95;
  color: #1c4663;
  text-shadow:
    0 1px 0  rgba(255,250,235,0.65),
    0 2px 6px rgba(20,35,65,0.12),
    0 12px 20px rgba(20,35,65,0.08);
}
.date-month {
  display: block;
  margin-top: 16px;
  font-family: var(--font-u);
  font-weight: 400;
  font-size: clamp(11px, 2.8vw, 14px);
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: #9a4a3a;
  padding-left: 0.48em;
  text-shadow: 0 1px 0 rgba(255,250,235,0.5);
}
.date-year {
  display: block;
  margin-top: 12px;
  font-family: 'Playfair Display', 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(13px, 3.2vw, 16px);
  letter-spacing: 0.36em;
  color: #a67852;
  padding-left: 0.36em;
  text-shadow: 0 1px 0 rgba(255,250,235,0.5);
}

/* Mist / wipe layer */
.date-mist {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 1.4s ease-out;
  z-index: 4;
}
.date-mist:active { cursor: grabbing; }

.date-oval.revealed .date-mist {
  opacity: 0;
  pointer-events: none;
}

/* Droplet particle layer — tiny watercolor flecks lifting off the mirror */
.date-droplets {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
}

/* "Gently scratch" hint — sits on the fogged mirror, clipped to the oval so
   it can never overflow the frame. Above the mist, fades out on reveal. */
.date-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78%;
  max-width: 78%;
  margin: 0;
  text-align: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14px, 3.6vw, 18px);
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #9a4a3a;
  text-shadow:
    0 1px 0 rgba(255,250,235,0.7),
    0 2px 8px rgba(255,250,235,0.55);
  pointer-events: none;
  z-index: 6;
  animation: dateHintPulse 2.4s ease-in-out 0.6s infinite;
}
@keyframes dateHintPulse {
  0%, 100% { opacity: 0.78; }
  50%      { opacity: 1; }
}
.date-oval.revealed .date-hint {
  opacity: 0;
  transition: opacity 0.6s ease-out;
  animation: none;
}

/* Soft ivory glow that follows the finger while wiping */
.date-wipe-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 110px;
  margin: -55px 0 0 -55px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  background: radial-gradient(circle,
    rgba(255,248,225,0.55) 0%,
    rgba(255,243,210,0.22) 38%,
    transparent 72%);
  mix-blend-mode: screen;
  filter: blur(3px);
  transition: opacity 0.45s ease;
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform, opacity;
}
.date-wipe-glow.active { opacity: 1; }

/* Reflection should sit above droplets too */
.date-oval::before { z-index: 7; }

/* Subtle glow once revealed */
.date-oval.revealed::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 50% at 50% 50%,
              rgba(255,243,210,0.22) 0%, transparent 70%);
  animation: dateGlow 6s ease-in-out 0.4s infinite;
}
@keyframes dateGlow {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.85; }
}


/* Petal shower canvas — sits in front of the whole scene */
.date-petals {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

/* ── Enter the Celebration — premium pill button ── */
.date-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(4px, 1.5vh, 14px);
  padding: 13px 28px 14px;
  background:
    linear-gradient(180deg,
      rgba(255,250,235,0.55) 0%,
      rgba(255,247,225,0.30) 100%);
  color: #1c3551;
  border: 1px solid rgba(28,53,81,0.42);
  border-radius: 999px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(15px, 3.8vw, 19px);
  letter-spacing: 0.05em;
  white-space: nowrap;
  cursor: pointer;
  z-index: 5;

  box-shadow:
    0 6px 18px rgba(20,35,65,0.10),
    inset 0 1px 0 rgba(255,250,235,0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition:
    opacity 1.1s ease-out,
    transform 1.1s ease-out,
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    letter-spacing 0.35s ease;
}

/* Inner hairline ring — engraved-card feel */
.date-cta::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 0.5px solid rgba(28,53,81,0.18);
  border-radius: 999px;
  pointer-events: none;
}

.date-cta.in {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: ctaBreath 5.5s ease-in-out 1.4s infinite;
}
@keyframes ctaBreath {
  0%, 100% { box-shadow: 0 6px 18px rgba(20,35,65,0.10),
                         inset 0 1px 0 rgba(255,250,235,0.65); }
  50%      { box-shadow: 0 8px 26px rgba(20,35,65,0.16),
                         0 0 22px rgba(43,106,120,0.10),
                         inset 0 1px 0 rgba(255,250,235,0.7); }
}

.date-cta:hover,
.date-cta:focus-visible {
  background:
    linear-gradient(180deg,
      rgba(255,250,235,0.85) 0%,
      rgba(255,243,210,0.55) 100%);
  border-color: rgba(28,53,81,0.7);
  letter-spacing: 0.07em;
  outline: none;
}
.date-cta:active { transform: translateY(0) scale(0.985); }

.dc-label { display: inline-block; }

.dc-ornament {
  display: inline-block;
  width: clamp(18px, 5vw, 26px);
  height: 0.5px;
  background: linear-gradient(90deg, transparent, currentColor 80%);
  opacity: 0.55;
}
.dc-ornament:last-child {
  background: linear-gradient(90deg, currentColor 20%, transparent);
}

/* ══════════════════════════════════════════
   DESKTOP ADJUSTMENTS
══════════════════════════════════════════ */
@media (min-width: 768px) {
  .cn-line { font-size: clamp(92px, 11vw, 150px); letter-spacing: 0; }
  .cn-amp  { font-size: clamp(42px, 4.6vw, 62px); }
  .venue-name { font-size: clamp(13px, 1.2vw, 16px); }
  .venue-name-sub { font-size: clamp(12px, 1.05vw, 14px); }
}

/* On very wide screens the 9:16 video may letterbox — keep peacock visible */
@media (min-aspect-ratio: 16/9) {
  #hero-video {
    object-position: center 15%;
  }
}

/* ══════════════════════════════════════════
   INVITE SECTION
══════════════════════════════════════════ */
.invite-section {
  scroll-snap-align: start;
  position: relative;
  min-height: 100dvh;
  background: #f4e7d3;
  display: none;                 /* hidden until "Enter the Celebration" is tapped */
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: max(40px, env(safe-area-inset-top, 40px)) 16px
           max(48px, env(safe-area-inset-bottom, 48px));
}
body.celebrate-unlocked .invite-section { display: flex; }

.invite-bg {
  position: absolute;
  inset: 0;
  background: url('assets/invite/invite_bg.webp') center center / cover no-repeat;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.8s ease-out;
}
.invite-section.in .invite-bg { opacity: 1; }

/* Softening wash so the card's content stays readable */
.invite-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 60% at 50% 50%, rgba(255,250,238,0.30) 0%, transparent 65%),
    linear-gradient(180deg, rgba(255,250,238,0.16) 0%, transparent 30% 70%, rgba(245,225,205,0.18) 100%);
}

/* ── Card frame — natural aspect, no stretch ── */
.invite-card {
  position: relative;
  z-index: 2;
  width: min(92vw, 420px);
  filter: drop-shadow(0 28px 48px rgba(70,55,40,0.22))
          drop-shadow(0 8px 16px rgba(70,55,40,0.12));

  opacity: 0;
  transform: translateY(36px) scale(0.97);
  transition:
    opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s,
    transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}
.invite-section.in .invite-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.invite-card-frame {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Inner safe area — sits BELOW the Ganesha + hanging lamps, ABOVE the lotus base */
.invite-card-content {
  position: absolute;
  top: 15%;
  bottom: 11%;
  left: 11%;
  right: 11%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.5vh, 13px);
  text-align: center;
  color: #5a4332;
}

/* ── Blessing + elders line at the top ── */
.ic-blessing {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(15.75px, 4.05vw, 19.5px);   /* +50% */
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: #2b6a78;
}
.ic-elders {
  display: inline-block;
  margin-top: 2px;
  font-family: 'Cormorant', 'Cormorant Garamond', Georgia, serif;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #3a2a1f;
}

/* ── Couple — each name above its parents ── */
.ic-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ic-name {
  font-family: var(--font-s);
  font-weight: 400;
  font-size: clamp(40px, 10.5vw, 62px);
  letter-spacing: 0;
  line-height: 1.02;
  color: #1c3551;
  text-shadow:
    0 1px 0 rgba(255,250,235,0.55),
    0 2px 14px rgba(60,40,30,0.10);
}
/* Parents on one line; grandparents wrap onto two balanced lines. Both kept
   well inside the arch so nothing collides with the frame. */
.ic-parent,
.ic-grand {
  font-family: 'Cormorant', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #3a2a1f;
}
.ic-parent {
  max-width: 100%;
  white-space: nowrap;
  line-height: 1.4;
  font-size: clamp(11.5px, 3.2vw, 15px);
}
.ic-grand  {
  max-width: 36ch;                 /* holds ~34 chars/line → two even lines */
  text-wrap: balance;              /* split into two even lines */
  line-height: 1.34;
  font-size: clamp(11px, 3vw, 14px);
  color: #3f2d1e;
  margin-top: 3px;
}

/* ── "weds" connector between the two names ── */
.ic-weds {
  position: relative;
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19.5px, 5.1vw, 24px);        /* +50% */
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: #9a4a3a;
}
/* hairline flourishes that draw outward on reveal */
.ic-weds::before,
.ic-weds::after {
  content: "";
  position: absolute;
  top: 56%;
  width: clamp(22px, 9vw, 50px);
  height: 1px;
  transform: scaleX(0);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.ic-weds::before {
  right: 100%; margin-right: 12px;
  transform-origin: right center;
  background: linear-gradient(270deg, transparent, #c79a6a);
}
.ic-weds::after {
  left: 100%; margin-left: 12px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, #c79a6a);
}

/* ── Ganesha shlok — sits just below the idol, above the invite line ── */
.ic-shlok {
  margin: 0 auto;
  max-width: 92%;
  font-family: 'Tiro Devanagari Sanskrit', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(11.5px, 3.1vw, 14.5px);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: #8a3d2a;
}

/* ── Italic lead invite line at the top ── */
.ic-invite {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13.5px, 3.5vw, 16.5px);
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: #6e4f44;
}
/* Cap the lead line's width so its ends stay clear of the arch's narrow top
   (wraps to two tidy centered lines rather than reaching the frame edges). */
.ic-invite-lead { max-width: 76%; }

/* ══ Staggered reveal — lift + blur-clear, with the script names drawing
      in (scale + deeper blur) and the parents trailing a beat behind ══ */
.ic-reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
  transition: opacity 1.1s ease-out,
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.1s ease-out;
}
.invite-section.in .ic-reveal { opacity: 1; transform: translateY(0); filter: blur(0); }
.invite-section.in .ic-shlok       { transition-delay: 0.3s; }
.invite-section.in .ic-invite-lead { transition-delay: 0.55s; }
.invite-section.in .ic-pair-bride  { transition-delay: 1.05s; }
.invite-section.in .ic-weds        { transition-delay: 1.5s; }
.invite-section.in .ic-pair-groom  { transition-delay: 1.95s; }

/* Names: scale up + clear from blur (the pair container carries the lift) */
.ic-name {
  transform: scale(0.9);
  filter: blur(8px);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.2s ease-out;
}
.invite-section.in .ic-name { transform: scale(1); filter: blur(0); }
.invite-section.in .ic-pair-bride .ic-name { transition-delay: 1.05s; }
.invite-section.in .ic-pair-groom .ic-name { transition-delay: 1.95s; }

/* Parents: settle a beat after their name */
.ic-parent,
.ic-grand {
  transform: translateY(8px);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.invite-section.in .ic-pair-bride .ic-parent,
.invite-section.in .ic-pair-bride .ic-grand { transform: none; transition-delay: 1.4s; }
.invite-section.in .ic-pair-groom .ic-parent,
.invite-section.in .ic-pair-groom .ic-grand { transform: none; transition-delay: 2.3s; }

/* "weds" hairlines draw outward just after the word lands */
.invite-section.in .ic-weds::before,
.invite-section.in .ic-weds::after { transform: scaleX(1); transition-delay: 1.75s; }

/* Gentle ivory breath on the script names — soft shimmer, never glittery */
.invite-section.in .ic-name {
  animation: icNameBreath 7s ease-in-out 4s infinite;
}
@keyframes icNameBreath {
  0%, 100% {
    filter:
      drop-shadow(0 0 0 rgba(255,240,210,0))
      drop-shadow(0 0 12px rgba(255,240,210,0.05));
  }
  50% {
    filter:
      drop-shadow(0 0 18px rgba(255,240,210,0.30))
      drop-shadow(0 0 36px rgba(255,240,210,0.12));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ic-reveal,
  .ic-name,
  .ic-parent,
  .ic-grand {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .invite-section.in .ic-name { animation: none !important; }
  .ic-weds::before, .ic-weds::after { transform: none !important; }
}

/* Slightly more breathing room on larger screens */
@media (min-width: 768px) {
  .invite-card  { width: min(48vw, 440px); }
  .ic-name      { font-size: clamp(52px, 5.2vw, 74px); }
  .ic-blessing  { font-size: clamp(18px, 1.65vw, 21px); }   /* +50% */
  .ic-parent    { font-size: clamp(13px, 1.5vw, 16px); }
  .ic-grand     { font-size: clamp(12px, 1.35vw, 15px); }
  .ic-invite    { font-size: clamp(14px, 1.35vw, 17px); }
  .ic-weds      { font-size: clamp(22.5px, 2.1vw, 27px); }  /* +50% */
}

/* ══════════════════════════════════════════
   FLOATING CONTROLS — music toggle + section navigation
   Ornate gold medallions (assets/others/). Fade in once the music
   starts (body.music-ready). Modelled on template11's fab-cluster.
══════════════════════════════════════════ */
.fab-cluster {
  position: fixed;
  right: max(14px, env(safe-area-inset-right, 14px));
  bottom: max(14px, env(safe-area-inset-bottom, 14px));
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
body.music-ready .fab-cluster { opacity: 1; transform: none; pointer-events: auto; }

/* Self-contained circular art — no chrome behind it */
.fab {
  width: 58px; height: 58px; flex: none;
  background: none; border: none; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 4px 13px rgba(20,30,60,0.40))
          drop-shadow(0 0 9px rgba(196,152,90,0.20));
  transition: filter 0.3s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
}
.fab:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 6px 20px rgba(20,30,60,0.5))
          drop-shadow(0 0 22px rgba(196,152,90,0.46));
}
.fab-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}

/* Music — dimmed when muted; full brightness + gold glow + slow spin while playing */
.fab-music { opacity: 0.55; }
.fab-music:not(.muted) {
  opacity: 1;
  filter: drop-shadow(0 4px 13px rgba(20,30,60,0.40))
          drop-shadow(0 0 18px rgba(196,152,90,0.5));
}
.fab-music:hover { opacity: 0.85; }
.fab-music:not(.muted):hover { opacity: 1; }
.fab-music:not(.muted) .fab-img {
  transform-origin: center;
  animation: fabMusicSpin 11s linear infinite;
}
@keyframes fabMusicSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Nav arrow rotates to signal the open panel */
.fab-nav .fab-img { transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.fab-cluster.nav-open .fab-nav .fab-img { transform: rotate(135deg); }

/* ── Navigation panel — ornate gold-framed card ── */
.nav-panel {
  position: absolute; right: 2px; bottom: calc(100% + 12px);
  min-width: 238px; padding: 16px 0 14px;
  overflow: hidden;
  background:
    radial-gradient(130% 78% at 50% 0%,  rgba(196,152,90,0.20), transparent 60%),
    radial-gradient(120% 120% at 50% 100%, rgba(28,53,81,0.06), transparent 58%),
    linear-gradient(180deg, #fffef9 0%, #f4ead4 100%);
  border: 1px solid rgba(168,129,63,0.62);
  border-radius: 6px;
  box-shadow: 0 22px 50px rgba(30,40,70,0.36), 0 2px 0 rgba(255,255,255,0.55) inset;
  opacity: 0; transform: translateY(14px) scale(0.94); transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.34s cubic-bezier(0.16,1,0.3,1), transform 0.34s cubic-bezier(0.16,1,0.3,1);
}
.fab-cluster.nav-open .nav-panel { opacity: 1; transform: none; pointer-events: auto; }
/* Gold gradient bar along the very top */
.nav-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #d8b46a 20%, #f4dda0 50%, #d8b46a 80%, transparent);
}
/* Inset hairline gold frame (the "double border") */
.nav-panel::after {
  content: ""; position: absolute; inset: 5px;
  border: 1px solid rgba(168,129,63,0.30); border-radius: 3px; pointer-events: none;
}
.nav-panel-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 4px 22px 13px; }
.nav-panel-eyebrow {
  font-family: var(--font-u, 'Jost', sans-serif); font-size: 0.66rem;
  letter-spacing: 0.44em; text-transform: uppercase; color: #a9823f; padding-left: 0.44em;
}
/* Tapering gold line with a raised centre diamond */
.nav-panel-rule {
  position: relative; width: 104px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168,129,63,0.72) 28%, rgba(168,129,63,0.72) 72%, transparent);
}
.nav-panel-rule::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  background: linear-gradient(135deg, #ecd08a, #b98a3c);
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px #fffdf7, 0 0 6px rgba(216,169,87,0.55);
}
.nav-link {
  position: relative; display: block; padding: 10px 24px 10px 40px;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.14rem;
  font-weight: 500; letter-spacing: 0.03em;
  color: #16305c; text-decoration: none;
  transition: color 0.22s ease, background 0.22s ease, padding 0.28s cubic-bezier(0.16,1,0.3,1);
  opacity: 0; transform: translateX(16px);
}
/* Hairline separators between links */
.nav-link + .nav-link { box-shadow: inset 0 1px 0 rgba(168,129,63,0.15); }
.fab-cluster.nav-open .nav-link { animation: navLinkIn 0.42s cubic-bezier(0.16,1,0.3,1) forwards; }
.fab-cluster.nav-open .nav-link:nth-of-type(1) { animation-delay: 0.05s; }
.fab-cluster.nav-open .nav-link:nth-of-type(2) { animation-delay: 0.10s; }
.fab-cluster.nav-open .nav-link:nth-of-type(3) { animation-delay: 0.15s; }
.fab-cluster.nav-open .nav-link:nth-of-type(4) { animation-delay: 0.20s; }
.fab-cluster.nav-open .nav-link:nth-of-type(5) { animation-delay: 0.25s; }
.fab-cluster.nav-open .nav-link:nth-of-type(6) { animation-delay: 0.30s; }
.fab-cluster.nav-open .nav-link:nth-of-type(7) { animation-delay: 0.35s; }
.fab-cluster.nav-open .nav-link:nth-of-type(8) { animation-delay: 0.40s; }
@keyframes navLinkIn { to { opacity: 1; transform: none; } }
/* Permanent gold diamond marker — brightens + grows on hover */
.nav-link::before {
  content: ""; position: absolute; left: 22px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  background: linear-gradient(135deg, #ecd08a, #b98a3c);
  transform: rotate(45deg) scale(0.72); opacity: 0.5;
  box-shadow: 0 0 0 1px rgba(255,253,247,0.7);
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), opacity 0.24s ease, box-shadow 0.28s ease;
}
.nav-link:hover, .nav-link:focus-visible {
  color: #9a6b2c;
  background: linear-gradient(90deg, rgba(196,152,90,0.20), rgba(196,152,90,0.02) 88%);
  padding-left: 46px;
}
.nav-link:hover::before, .nav-link:focus-visible::before {
  transform: rotate(45deg) scale(1); opacity: 1; box-shadow: 0 0 7px rgba(216,169,87,0.8);
}
.nav-link-label { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .fab-music:not(.muted) .fab-img { animation: none; }
  .nav-link { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════
   EVENTS — layered scene cards (compact list)
   One section, a centred header, and a column of portrait cards.
   Each card stacks three full-canvas (941×1672) registered webp layers
   (bg / hanging / fg) inside an .ev-stage, with text overlaid in the
   upper area. Reveals card-by-card on scroll (.ev-card.is-revealed).
══════════════════════════════════════════ */
.events-screen {
  position: relative;
  display: none;                  /* revealed with the celebration, like the old scenes */
  padding: clamp(54px, 9vw, 96px) 16px clamp(58px, 9vw, 100px);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(196,152,90,0.10), transparent 60%),
    linear-gradient(180deg, var(--warm-white) 0%, var(--ivory) 100%);
  overflow: hidden;
}
body.celebrate-unlocked .events-screen { display: block; }

/* ── Header ── */
.events-head {
  text-align: center;
  margin: clamp(8px, 3vw, 28px) auto clamp(34px, 6vw, 56px);
  max-width: 640px;
}
.events-kicker {
  margin: 0 0 10px;
  font-family: var(--font-u);
  font-size: clamp(12px, 3.1vw, 15px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #b07a4f;
}
.events-title { /* section title — flowing script (softer than Playfair) */
  margin: 0;
  font-family: 'Great Vibes', 'Pinyon Script', cursive;
  font-weight: 400;
  font-size: clamp(38px, 10vw, 62px);
  letter-spacing: 0;
  color: #6c2600;
  line-height: 1.14;
}
.events-title .events-amp {
  font-family: inherit;
  font-weight: 400;
  color: #c4985a;
  font-size: 1em;
  letter-spacing: 0;
}
.events-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.events-divider span {
  display: block;
  width: clamp(40px, 14vw, 80px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #c4985a, transparent);
}
.events-divider i {
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: #c4985a;
  box-shadow: 0 0 0 3px rgba(196,152,90,0.18);
}

/* ── List + card entrance ── */
.events-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 7vw, 72px);
}
/* One unified card — the scene art (top) and the designer panel (bottom)
   share a single outer frame, so the dress code reads as part of the event. */
.ev-card {
  width: 100%;
  max-width: 440px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(196,152,90,0.5);
  box-shadow:
    0 22px 50px -18px rgba(60,30,18,0.45),
    inset 0 0 0 1px rgba(255,247,234,0.28);
  background: #f4e8d1;             /* = designer panel base (fills any sub-pixel seam) */
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 900ms var(--silk-ease), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ev-card.is-revealed { opacity: 1; transform: translateY(0); }

/* ── Stage: portrait frame holding the three layers.
   No outer border/radius now — the card owns the frame; only the inner
   vignette stays for depth on the art. ── */
.ev-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 941 / 1672;       /* matches the source layers exactly → no crop, perfect registration */
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,247,234,0.30),
    inset 0 0 70px rgba(95,71,51,0.10);
  background: var(--ev-base, #110a08);
}

.ev-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.ev-bg { z-index: 0; }
.ev-hanging {
  z-index: 2;
  transform-origin: 50% 0%;
  animation: evSway 5.2s ease-in-out infinite;
}
.ev-fg {
  z-index: 3;
  /* Still — animation lives only on .ev-hanging */
}

@keyframes evSway {
  0%, 100% { transform: rotate(-1.9deg); }
  50%      { transform: rotate(1.9deg); }
}
/* Mehndi lanterns — soft breeze drift instead of the rigid seesaw tilt.
   Tiny translate + <1° rotation, slow, so the far lanterns barely move. */
.ev-mehndi .ev-hanging {
  transform-origin: 50% 0%;
  animation: evSwaySoft 6.4s ease-in-out infinite;
}
@keyframes evSwaySoft {
  0%, 100% { transform: translateX(-4px) rotate(-0.9deg); }
  50%      { transform: translateX(4px)  rotate(0.9deg); }
}
/* Engagement lanterns hang on long crystal strands — a true pendulum swing:
   pure rotation from the attachment line (no sliding), slow, with a sine ease
   that lingers at each end like real momentum. The lower the strand, the more
   it travels; the tops barely move — reads gentle and natural. */
.ev-engagement .ev-hanging {
  transform-origin: 50% 0%;
  animation: evSwayEngagement 9s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
@keyframes evSwayEngagement {
  0%, 100% { transform: rotate(-0.7deg); }
  50%      { transform: rotate(0.7deg); }
}
/* Cocktail disco balls + chandeliers — barely-there gentle sway. */
.ev-cocktail .ev-hanging {
  transform-origin: 50% 0%;
  animation: evSwayCocktail 8.5s ease-in-out infinite;
}
@keyframes evSwayCocktail {
  0%, 100% { transform: rotate(-0.45deg); }
  50%      { transform: rotate(0.45deg); }
}

/* Twinkling glints across the disco-ball cluster — light catching the mirrored
   surfaces. Static overlay; the sway is tiny so glints stay on the balls. */
.ev-cocktail-sparkles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.ev-cocktail-sparkles i {
  position: absolute;
  width: var(--s, 10px);
  height: var(--s, 10px);
  margin: calc(var(--s, 10px) / -2) 0 0 calc(var(--s, 10px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255,252,240,0.95) 0%,
              rgba(255,224,150,0.60) 34%,
              rgba(255,220,140,0)    70%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.35);
  animation: cocktailGlint var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes cocktailGlint {
  0%, 100% { opacity: 0;    transform: scale(0.35) rotate(0deg); }
  45%      { opacity: 0.95; }
  50%      { opacity: 1;    transform: scale(1) rotate(60deg); }
  55%      { opacity: 0.9; }
}
/* Haldi marigold garlands — gentle sway on the long strands, tips drifting
   softly while the tops stay pinned. Pure rotation, slow, sine ease. */
.ev-haldi .ev-hanging {
  transform-origin: 50% 0%;
  animation: evSwayHaldi 8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
@keyframes evSwayHaldi {
  0%, 100% { transform: rotate(-0.5deg); }
  50%      { transform: rotate(0.5deg); }
}
/* Wedding crystal chandeliers — the softest sway of all; barely a shimmer of
   movement. Pure rotation from the top, very slow, sine ease. */
.ev-wedding .ev-hanging {
  transform-origin: 50% 0%;
  animation: evSwayWedding 9.5s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
@keyframes evSwayWedding {
  0%, 100% { transform: rotate(-0.45deg); }
  50%      { transform: rotate(0.45deg); }
}
@keyframes evFloat {
  0%, 100% { transform: translateY(0)     scale(1); }
  50%      { transform: translateY(-8px)  scale(1.004); }
}

/* ── Per-event layer placement ──
   Each layer keeps height:100%; a `top` offset shifts the artwork and the
   over-extension is clipped by the stage's overflow:hidden. fg offsets are
   derived from each PNG's measured content-top baseline (see commit notes). */
.ev-mehndi    .ev-hanging { top: -10%; }
.ev-mehndi    .ev-fg      { top: 0; }        /* new fg is bottom-anchored → registers at inset:0 */

.ev-engagement .ev-hanging { top: -10%; }
/* Engagement fg removed per request — see index.html */

.ev-cocktail  .ev-hanging { top: -15%; }
.ev-cocktail  .ev-fg      { top: 9.5%; }    /* content top 63.5% → 73% */

.ev-haldi     .ev-hanging { top: -10%; }
/* Haldi fg (brass lamp) removed per request — see index.html */

.ev-wedding   .ev-hanging { top: -10%; }
/* Wedding fg removed — the new bg already includes the aisle lanterns/candles */

/* ── Text block — sits in the plain upper area of each scene ── */
.ev-info {
  position: absolute;
  top: clamp(16px, 5%, 40px);
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  text-align: center;
  z-index: 5;
  pointer-events: none;
  color: var(--ev-ink, #f7e9d0);
}

/* soft veil behind the text so it stays legible over the scene —
   dark veil under light text, light veil under dark text */
.ev-info::before {
  content: "";
  position: absolute;
  inset: -26px -14% -25px;
  z-index: -1;
  pointer-events: none;
}
.ev-info--light::before {
  background: radial-gradient(115% 100% at 50% 38%, rgba(10,5,2,0.58), rgba(10,5,2,0) 55%);
}
.ev-info--ink::before {
  background: radial-gradient(115% 100% at 50% 38%, rgba(255,250,244,0.66), rgba(255,250,244,0) 72%);
}

.ev-name {
  margin: 0;
  font-family: var(--font-s);
  font-weight: 400;
  font-size: clamp(34px, 9.5vw, 46px);
  line-height: 1.04;
  color: var(--ev-ink, #f7e9d0);
}
.ev-theme {
  margin: 4px 0 0;
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(15px, 4vw, 20px);
  letter-spacing: 0.02em;
  color: var(--ev-theme, #ffc06a);
}
.ev-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0;
  color: var(--ev-accent, #e7bd72);
}
.ev-rule span {
  display: block;
  width: clamp(26px, 9vw, 46px);
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.ev-rule i {
  width: 6px; height: 6px;
  transform: rotate(45deg);
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.ev-when {
  margin: 0;
  font-family: var(--font-u);
  font-weight: 500;
  font-size: clamp(11px, 3vw, 14px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ev-accent, #e7bd72);
}
.ev-when sup { font-size: 0.62em; letter-spacing: 0; }
.ev-venue {
  margin: 6px 0 0;
  font-family: var(--font-u);
  font-weight: 500;
  font-size: clamp(10px, 2.6vw, 12px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ev-sub, #e8cba0);
}
/* location pin sits inline before the venue name, tinted to match the text */
.ev-venue-pin {
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.34em;
  vertical-align: -0.16em;
  fill: currentColor;        /* = the venue text colour (var(--ev-sub)) */
}
/* ── Designer area — a separate parchment panel BELOW each event scene.
   Holds the dress code, colour-option swatches and the styling note (moved
   out of the image so they read cleanly, independent of the art). ── */
.ev-designer {
  position: relative;
  padding: clamp(20px, 5.5vw, 30px) clamp(14px, 4vw, 22px) clamp(18px, 5vw, 26px);
  background: linear-gradient(180deg, #fbf4e6 0%, #f4e8d1 100%);
  border-top: 1px solid rgba(196,152,90,0.42);   /* hairline seam within the one card */
  text-align: center;
}

/* Dress code — now in-flow inside the panel (dark text on parchment) */
.ev-dresscode {
  margin: 0;
  text-align: center;
}
.ev-dresscode dt {
  margin: 0 0 4px;
  font-family: var(--font-u);
  font-weight: 500;
  font-size: clamp(9px, 2.4vw, 11px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #a9823f;
}
.ev-dc-value {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(16px, 4.4vw, 20px);
  letter-spacing: 0.01em;
  line-height: 1.22;
  color: #4a2c1e;
}

/* Colour options — a row of small colour disks */
.ev-colors { margin-top: clamp(12px, 3vw, 18px); }
.ev-colors-label {
  margin: 0;
  font-family: var(--font-u);
  font-weight: 500;
  font-size: clamp(9px, 2.4vw, 11px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #a9823f;
}
.ev-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(9px, 2.6vw, 14px);
  margin: clamp(9px, 2vw, 12px) 0 0;
  padding: 0;
  list-style: none;
}
.ev-sw {
  display: block;
  width: clamp(26px, 7.4vw, 34px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sw, #ccc);
  border: 2px solid #fffaf0;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.06),
    0 3px 7px rgba(60,30,18,0.24);
}
/* Metallic disks for the cocktail palette */
.ev-sw--gold   { background: radial-gradient(circle at 34% 30%, #f6e4ac, #c9a24a 56%, #9c7a2f); }
.ev-sw--silver { background: radial-gradient(circle at 34% 30%, #ffffff, #d0d1d3 56%, #9aa0a6); }

/* Named swatches (metallics) — disk with a caption beneath */
.ev-swatches--named { gap: clamp(16px, 6vw, 26px); }
.ev-sw-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ev-sw-name {
  font-family: var(--font-u);
  font-weight: 500;
  font-size: clamp(8px, 2.2vw, 10px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a5637;
}

/* Styling note — italic line closing the panel */
.ev-dc-note {
  margin: clamp(12px, 3vw, 16px) 0 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(13px, 3.4vw, 15px);
  line-height: 1.34;
  color: #7a5a44;
}

/* On the dark scenes (light text) add a soft shadow for extra legibility */
.ev-info--light .ev-name,
.ev-info--light .ev-theme,
.ev-info--light .ev-when,
.ev-info--light .ev-venue {
  text-shadow: 0 1px 14px rgba(0,0,0,0.6), 0 2px 30px rgba(0,0,0,0.4);
}

/* ── Per-scene palettes (drive the --ev-* text colours) ── */
.ev-mehndi    { --ev-base: #1a0c06; --ev-ink: #f8ead2; --ev-accent: #ecc079; --ev-theme: #ffc471; --ev-sub: #eccea2; }
.ev-engagement{ --ev-base: #f3e6da; --ev-ink: #f7e7dc; --ev-accent: #e6bca6; --ev-theme: #f1c6ad; --ev-sub: #eed3c6; }
.ev-cocktail  { --ev-base: #14040a; --ev-ink: #f4e3bd; --ev-accent: #e7c069; --ev-theme: #f0c462; --ev-sub: #e6cd9c; }
.ev-haldi     { --ev-base: #ece4cf; --ev-ink: #f6eecf; --ev-accent: #e8c878; --ev-theme: #f2d98c; --ev-sub: #ecdcae; }
.ev-wedding   { --ev-base: #0c0e1a; --ev-ink: #efdcae; --ev-accent: #d8b56a; --ev-theme: #ecd09a; --ev-sub: #e4cea0; }

/* Engagement runs on a bright pastel scene — the date & venue sit below the
   dark reveal veil, so the default light text is invisible there. Switch them
   to a deep on-theme rose with a light halo so they read on the bright art. */
.ev-engagement .ev-when {
  color: #7a2f3f;
  text-shadow: 0 1px 3px rgba(255,252,248,0.9), 0 0 10px rgba(255,250,246,0.55);
}
.ev-engagement .ev-venue {
  color: #8a3d4c;
  text-shadow: 0 1px 3px rgba(255,252,248,0.9), 0 0 10px rgba(255,250,246,0.55);
}

/* ── Couple illustration — bottom-anchored, sized by height so it reads large
   and prominent while the open area above the heads stays the text zone
   (modelled on the mrunal-jay-wedding cards). Transparent-bg figures float
   gently, pivoting at the feet so the tilt reads as a soft sway.
   --ev-ch  : couple height as a % of the stage (per-event, figures vary)
   --cdx    : horizontal nudge for figures not centred in their canvas ── */
/* Centered via a full-width flex box (NOT the element's own width) so the
   figure never drifts right when the lazy couple image's width is unknown at
   layout time — the old `left:50% + translateX(-50%)` relied on shrink-to-fit
   width and shifted right on iOS Chrome until the image resolved. */
.ev-couple {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ev-ch, 60%);
  display: flex;
  justify-content: center;
  transform-origin: 50% 100%;
  z-index: 4;                       /* above the scene (fg z3), below the text (info z5) */
  pointer-events: none;
  filter: drop-shadow(0 12px 16px rgba(20,12,6,0.30));
  /* Still — animation lives only on .ev-hanging */
}
.ev-couple img {
  display: block;
  height: 100%;
  width: auto;
  transform: translateX(var(--cdx, 0%));   /* per-event nudge — % of the image's own width */
  user-select: none;
  -webkit-user-drag: none;
}
/* Only the gentle sway/float lives here now — horizontal centering is handled
   by the flex box above, so no -50% offset is needed. */
@keyframes evCoupleFloat {
  0%   { transform: translateX(-5px) translateY(0)     rotate(-0.9deg); }
  50%  { transform: translateX(5px)  translateY(-18px) rotate(0.9deg); }
  100% { transform: translateX(-5px) translateY(0)     rotate(-0.9deg); }
}

/* Per-event sizing — standing couples sit tall; the seated Haldi pair is
   shorter/wider so it takes a smaller height to stay in proportion. */
/* --cdx recentres figures that aren't centred within their own canvas
   (measured from each PNG's opaque-pixel column span). */
.ev-mehndi     .ev-couple { --ev-ch: 60%; --cdx: 2.5%; }
.ev-engagement .ev-couple { --ev-ch: 62%; --cdx: 4%; }
.ev-cocktail   .ev-couple { --ev-ch: 60%; --cdx: -6.5%; }
.ev-haldi      .ev-couple { --ev-ch: 48%; }
.ev-wedding    .ev-couple { --ev-ch: 60%; --cdx: -8%; bottom: -3%; }   /* nudged slightly lower */

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

/* ══════════════════════════════════════════
   MEET THE COUPLE  (after the event scenes)
   Lightweight one-shot reveals — no scroll
   scrubbing, no sticky pins. Each element
   animates in once and STAYS visible.
══════════════════════════════════════════ */
.meet {
  --m-ink:      #34261d;   /* strong, readable on cream */
  --m-ink-soft: #5b4c40;
  --m-gold:     #a9823f;
  --m-gold-deep:#8a6d3b;
  --m-rose:     #b46f5e;
  --m-shadow:   rgba(58,42,30,0.28);

  position: relative;
  display: none;                       /* revealed with the celebration */
  background: #f4e7d3;                  /* matches the invite section's cream */
  color: var(--m-ink);
  font-family: var(--font-d);
  line-height: 1.5;
  overflow: hidden;
  padding-bottom: clamp(40px, 8vh, 90px);
}
body.celebrate-unlocked .meet { display: block; }

/* Soft, pure-CSS depth — gentle light at the top, warmth pooling at the base */
.meet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 50% at 50% 0%,   rgba(255,250,240,0.55), transparent 46%),
    radial-gradient(130% 55% at 50% 100%, rgba(120,90,55,0.10),  transparent 56%);
}

.meet-inner { position: relative; z-index: 5; }

/* ── Heading ── */
.meet-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(54px, 11vh, 104px) 22px clamp(26px, 5vh, 46px);
}
.meet-title {
  font-family: 'Great Vibes', 'Pinyon Script', cursive;
  font-weight: 400;
  font-size: clamp(46px, 13vw, 82px);
  line-height: 1.06;
  letter-spacing: 0;
  color: var(--m-ink);
}

/* ── Each person — image and text side by side ── */
.meet-person {
  display: flex;
  flex-direction: row;          /* image left, text right */
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4.5vw, 26px);
  padding: clamp(18px, 4.5vh, 44px) 16px;
}
.meet-person--alt {
  flex-direction: row-reverse;  /* image right, text left */
}
.meet-photo {
  width: min(44vw, 210px);
  flex-shrink: 0;
  perspective: 900px;            /* enables the pointer-tilt 3D on .meet-photo-tilt */
}

/* Tilt wrapper — receives the pointer parallax (JS sets --tx / --ty / --tz).
   Kept separate from the reveal transform (on .meet-photo) and the ambient
   float (on the img) so the three never fight each other. */
.meet-photo-tilt,
.meet-finale-photo .meet-photo-tilt {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--ty, 0deg))
    rotateY(var(--tx, 0deg))
    translateZ(var(--tz, 0px));
  transition: transform 320ms cubic-bezier(0.22, 0.7, 0.2, 1);
}

.meet-photo img,
.meet-finale-photo img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 18px 28px var(--m-shadow));
}

/* Warm light that pools behind each figure — blooms on reveal, then breathes */
.meet-photo-glow {
  position: absolute;
  left: 50%; top: 54%;
  width: 116%; aspect-ratio: 1;
  z-index: 1;
  transform: translate(-50%, -50%) scale(0.4);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,150,90,0.55) 0%, rgba(201,150,90,0.16) 38%, transparent 70%);
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
}
.meet-photo-glow--finale {
  width: 92%;
  background: radial-gradient(circle, rgba(180,111,94,0.5) 0%, rgba(201,150,90,0.20) 40%, transparent 72%);
}

/* ── Living portraits — gentle bob + warm glow breath on all three images ── */
.meet-photo img,
.meet-finale-photo img {
  animation: meetFloat 6.5s ease-in-out infinite,
             meetGlow  5s   ease-in-out infinite;
}
.meet-person--alt .meet-photo img { animation-delay: -2.4s; }
.meet-finale-photo img            { animation-delay: -1.3s; }

@keyframes meetFloat {
  0%, 100% { transform: translateY(0)     rotate(-0.6deg); }
  50%      { transform: translateY(-11px) rotate(0.6deg); }
}
@keyframes meetGlow {
  0%, 100% {
    filter: drop-shadow(0 16px 24px rgba(58,42,30,0.26))
            drop-shadow(0 0 6px rgba(201,150,90,0));
  }
  50% {
    filter: drop-shadow(0 22px 30px rgba(58,42,30,0.30))
            drop-shadow(0 0 20px rgba(201,150,90,0.50));
  }
}

/* ── Sparkle burst — fires once when the finale photo reveals ── */
.meet-burst {
  position: absolute;
  left: 50%; top: 46%;
  width: 0; height: 0;
  z-index: 3;
  pointer-events: none;
}
.meet-burst i {
  position: absolute;
  left: 0; top: 0;
  width: 9px; height: 9px;
  margin: -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d8 0%, #e7c069 55%, rgba(231,192,105,0) 72%);
  opacity: 0;
}

.meet-caption {
  flex: 1;
  min-width: 0;
  max-width: 22ch;
  text-align: center;
}
.meet-person--alt .meet-caption { text-align: center; }

.meet-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(26px, 8vw, 44px);
  letter-spacing: 0.5px;
  margin-bottom: 0.08em;
  color: var(--m-ink);
}
.meet-line {
  font-family: var(--font-d);
  font-style: italic;
  font-weight: 500;
  color: var(--m-gold-deep);
  font-size: clamp(20px, 5.2vw, 28px);
  line-height: 1.25;
  letter-spacing: 0.2px;
  margin-bottom: 0.45em;
}
.meet-desc {
  font-family: var(--font-u);
  font-weight: 300;
  font-style: normal;
  color: var(--m-ink-soft);
  font-size: clamp(14px, 3.6vw, 17px);
  line-height: 1.6;
  letter-spacing: 0.3px;
}

/* ── "Meets" connector ── */
.meet-meets {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vh, 40px) 0;
}
.meet-meets span {
  position: relative;
  font-family: var(--font-s);
  color: var(--m-rose);
  font-size: clamp(38px, 13vw, 64px);
}
.meet-meets span::before,
.meet-meets span::after {
  content: "";
  position: absolute;
  top: 56%;
  width: clamp(26px, 11vw, 64px);
  height: 1px;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.22, 0.7, 0.2, 1) 0.32s;
}
.meet-meets span::before {
  right: 100%; margin-right: 16px;
  transform-origin: right center;
  background: linear-gradient(270deg, transparent, var(--m-gold));
}
.meet-meets span::after  {
  left: 100%;  margin-left: 16px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, var(--m-gold));
}

/* ── Closing image — the two of them together ── */
.meet-finale {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(28px, 6vh, 56px) 20px clamp(16px, 4vh, 36px);
}
.meet-finale-photo {
  width: min(86vw, 420px);
  perspective: 1100px;           /* enables the pointer-tilt 3D on .meet-photo-tilt */
}
.meet-finale-photo img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 18px 28px var(--m-shadow));
}
.meet-finale-line {
  margin-top: clamp(16px, 3vh, 26px);
  font-family: var(--font-s);
  color: var(--m-rose);
  font-size: clamp(26px, 7.5vw, 38px);
  line-height: 1.2;
}

/* ══════════════════════════════════════════
   CINEMATIC REVEAL CHOREOGRAPHY
   Gated on .js-anim so content is always visible if JS never runs.
   The IntersectionObserver adds .in once (permanent) per .reveal element.
   Springy ease for the photos + connector, silky ease for text.
══════════════════════════════════════════ */
.meet.js-anim .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease, transform 1s cubic-bezier(0.22, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.meet.js-anim .reveal.in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ── Title: curtain wipe upward + soft rise ── */
.meet.js-anim .meet-title.reveal {
  transform: translateY(34px) scale(0.97);
  clip-path: inset(0 0 110% 0);
  transition: opacity 1.1s ease, transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              clip-path 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.meet.js-anim .meet-title.reveal.in {
  transform: none;
  /* Generous negative insets so the Great Vibes swashes (which reach above the
     cap-line and past the side edges) are never clipped once revealed. */
  clip-path: inset(-45% -24% -18% -24%);
}

/* ── Title ornament: diamond pops, hairlines draw outward ── */
.meet-title-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(12px, 2.4vh, 20px);
}
.meet-title-orn span {
  display: block;
  width: clamp(34px, 11vw, 70px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--m-gold));
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.22, 0.7, 0.2, 1) 0.2s;
}
.meet-title-orn span:first-child { transform-origin: right center; background: linear-gradient(270deg, transparent, var(--m-gold)); }
.meet-title-orn span:last-child  { transform-origin: left center; }
.meet-title-orn i {
  width: 7px; height: 7px;
  transform: rotate(45deg) scale(0);
  background: var(--m-gold);
  box-shadow: 0 0 8px rgba(169,130,63,0.6);
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s;
}
.meet.js-anim .meet-title-orn.reveal { opacity: 0; transform: none; transition: opacity 0.6s ease; }
.meet.js-anim .meet-title-orn.reveal.in { opacity: 1; transform: none; }
.meet.js-anim .meet-title-orn.reveal.in span { transform: scaleX(1); }
.meet.js-anim .meet-title-orn.reveal.in i    { transform: rotate(45deg) scale(1); }

/* ── Portraits: each flies in from its own side with a springy overshoot ── */
.meet.js-anim .meet-person:not(.meet-person--alt) .meet-photo.reveal {
  transform: translateX(-70px) rotate(-5deg) scale(0.85);
}
.meet.js-anim .meet-person--alt .meet-photo.reveal {
  transform: translateX(70px) rotate(5deg) scale(0.85);
}
.meet.js-anim .meet-finale-photo.reveal {
  transform: translateY(56px) scale(0.82);
}
.meet.js-anim .meet-photo.reveal,
.meet.js-anim .meet-finale-photo.reveal {
  transition: opacity 0.9s ease, transform 1.15s cubic-bezier(0.34, 1.36, 0.5, 1);
}
/* settle — specificity matches the directional :not() rules above */
.meet.js-anim .meet-person:not(.meet-person--alt) .meet-photo.reveal.in,
.meet.js-anim .meet-person--alt .meet-photo.reveal.in,
.meet.js-anim .meet-finale-photo.reveal.in { transform: none; }

/* the glow blooms as the photo lands, then settles into a slow breath */
.meet.js-anim .meet-photo.reveal.in .meet-photo-glow,
.meet.js-anim .meet-finale-photo.reveal.in .meet-photo-glow {
  animation: meetGlowBloom 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards,
             meetGlowBreath 6s ease-in-out 1.75s infinite;
}
@keyframes meetGlowBloom {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.4); }
  55%  { opacity: 0.95; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0.7;  transform: translate(-50%, -50%) scale(1); }
}
@keyframes meetGlowBreath {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.97); }
  50%      { opacity: 0.8;  transform: translate(-50%, -50%) scale(1.04); }
}

/* ── Captions: slide in from the opposite side, then stagger the lines ── */
.meet.js-anim .meet-person:not(.meet-person--alt) .meet-caption.reveal { transform: translateX(46px); transition-delay: 0.12s; }
.meet.js-anim .meet-person--alt .meet-caption.reveal { transform: translateX(-46px); transition-delay: 0.12s; }
/* settle — specificity matches the directional :not() rules above */
.meet.js-anim .meet-person:not(.meet-person--alt) .meet-caption.reveal.in,
.meet.js-anim .meet-person--alt .meet-caption.reveal.in { transform: none; }

.meet.js-anim .meet-caption .meet-name,
.meet.js-anim .meet-caption .meet-line,
.meet.js-anim .meet-caption .meet-desc {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.meet.js-anim .meet-caption .meet-line { filter: blur(5px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22,0.7,0.2,1), filter 0.9s ease; }
.meet.js-anim .meet-caption.in .meet-name { opacity: 1; transform: none; transition-delay: 0.18s; }
.meet.js-anim .meet-caption.in .meet-line { opacity: 1; transform: none; filter: blur(0); transition-delay: 0.36s; }
.meet.js-anim .meet-caption.in .meet-desc { opacity: 1; transform: none; transition-delay: 0.54s; }

/* ── "Meets": springy pop, hairlines draw outward ── */
.meet.js-anim .meet-meets.reveal { opacity: 0; transform: none; transition: opacity 0.6s ease; }
.meet.js-anim .meet-meets.reveal span {
  display: inline-block;
  transform: scale(0.3) rotate(-14deg);
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.meet.js-anim .meet-meets.reveal.in { opacity: 1; transform: none; }
.meet.js-anim .meet-meets.reveal.in span { transform: none; opacity: 1; }
.meet.js-anim .meet-meets.reveal.in span::before,
.meet.js-anim .meet-meets.reveal.in span::after { transform: scaleX(1); }

/* ── Finale sparkle burst — fly outward + twinkle, once ── */
.meet.js-anim .meet-finale-photo.reveal.in .meet-burst i {
  animation: meetSpark 1.1s ease-out var(--dl, 0s) 1 both;
}
@keyframes meetSpark {
  0%   { opacity: 0;   transform: rotate(var(--a, 0deg)) translateX(0) scale(0.2); }
  35%  { opacity: 1; }
  100% { opacity: 0;   transform: rotate(var(--a, 0deg)) translateX(var(--dist, 130px)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .meet.js-anim .reveal,
  .meet.js-anim .meet-caption .meet-name,
  .meet.js-anim .meet-caption .meet-line,
  .meet.js-anim .meet-caption .meet-desc {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }
  .meet-title-orn span, .meet-title-orn i,
  .meet-meets span::before, .meet-meets span::after { transform: none !important; }
  .meet-photo img,
  .meet-finale-photo img,
  .meet-photo-glow,
  .meet-burst i { animation: none !important; }
  .meet-photo-glow { opacity: 0.55 !important; transform: translate(-50%, -50%) scale(1) !important; }
}

/* ── Desktop: same side-by-side, simply larger ── */
@media (min-width: 768px) {
  .meet-person {
    gap: clamp(28px, 5vw, 64px);
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(32px, 6vh, 64px) 24px;
  }
  .meet-photo { width: min(34vw, 300px); }
  .meet-caption { max-width: 26ch; }
  .meet-name { font-size: clamp(40px, 4.4vw, 56px); }
  .meet-line { font-size: clamp(24px, 2.4vw, 30px); }
  .meet-desc { font-size: clamp(16px, 1.5vw, 18px); }
}

/* ══════════════════════════════════════════
   LOVE & BLESSINGS  (after Meet the Couple)
   Venue backdrop + hanging trees & fairy-lights
   with pointer parallax + marigold petal shower.
══════════════════════════════════════════ */
.blessings-screen {
  --bl-gold:      #a9823f;
  --bl-gold-soft: #c19247;
  --bl-deep:      #8a3a2e;   /* warm maroon heading, on-theme */
  --bl-ink:       #3f3326;   /* readable names */
  --bl-rose:      #b46f5e;

  position: relative;
  display: none;                       /* revealed with the celebration */
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #f6ecd8 0%, #f4e7d3 50%, #ead9bf 100%);
  color: var(--bl-gold);
  font-family: var(--font-d);
}
body.celebrate-unlocked .blessings-screen { display: block; }

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

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

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

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

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

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

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

/* ── content block — single family group, generously sized ── */
.blessings-content {
  position: absolute;
  z-index: 4;
  top: clamp(104px, 17vh, 184px);
  left: 50%;
  width: min(90vw, 440px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-shadow: 0 1px 10px rgba(255, 252, 244, 0.5);
}

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

.blessings-kicker {
  margin: 0 0 8px;
  color: var(--bl-gold);
  font-family: var(--font-u);
  font-size: clamp(0.62rem, 2.6vw, 0.74rem);
  font-weight: 500;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
}

.blessings-heading {
  margin: 0;
  color: var(--bl-deep);
  font-family: 'Great Vibes', 'Pinyon Script', cursive;
  font-size: clamp(2.9rem, 12vw, 4.2rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0;
}
.blessings-amp { color: var(--bl-gold); }
.blessings-screen.is-visible .blessings-heading { animation: blHeadingGlow 4.6s ease-in-out 1.4s infinite; }

.blessings-divider {
  position: relative;
  width: clamp(86px, 26vw, 140px);
  height: 1px;
  margin: clamp(14px, 2.4vh, 22px) auto clamp(20px, 3.2vh, 30px);
  background: linear-gradient(90deg, transparent, rgba(169, 130, 63, 0.75), transparent);
}
.blessings-divider::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  background: var(--bl-gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

.blessings-group { width: 100%; }
.blessings-relation {
  margin: 0 0 10px;
  color: var(--bl-rose);
  font-family: var(--font-u);
  font-size: clamp(0.72rem, 3vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
}
.blessings-names {
  margin: 0 auto;
  max-width: 24em;
  color: var(--bl-ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.08rem, 4.6vw, 1.36rem);
  font-weight: 600;
  line-height: 1.85;
  text-shadow: 0 1px 6px rgba(255, 250, 240, 0.55);
}
.blessings-names .bl-sep {
  margin: 0 0.45em;
  color: var(--bl-gold);
  font-weight: 400;
  opacity: 0.72;
}

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

/* ── decor float + glow keyframes ── */
@keyframes blDecorFloatLeft {
  0%, 100% { rotate: -1deg; translate: 0 0; }
  50%      { rotate: 1deg;  translate: 1.5px 2px; }
}
@keyframes blDecorFloatRight {
  0%, 100% { rotate: 1deg;  translate: 0 0; }
  50%      { rotate: -1deg; translate: -1.5px 2px; }
}
@keyframes blChandelierGlow {
  0%, 100% { opacity: 0.45; transform: scale(0.97) translateX(-1.5px); }
  48%      { opacity: 0.8;  transform: scale(1.06) translateX(1.5px); }
}
@keyframes blHeadingGlow {
  0%, 100% { text-shadow: 0 1px 10px rgba(255, 252, 244, 0.5); }
  50%      { text-shadow: 0 1px 12px rgba(255, 252, 244, 0.66), 0 0 22px rgba(169, 130, 63, 0.42); }
}
@keyframes blSeriesGlow {
  0%   { filter: drop-shadow(0 0 6px rgba(255, 220, 137, 0.30)) brightness(1);    opacity: 0.9; }
  7%   { filter: drop-shadow(0 0 22px rgba(255, 226, 150, 0.80)) brightness(1.55); opacity: 1; }
  13%  { filter: drop-shadow(0 0 8px rgba(255, 220, 137, 0.34)) brightness(1.04); opacity: 0.92; }
  37%  { filter: drop-shadow(0 0 26px rgba(255, 230, 162, 0.85)) brightness(1.62); opacity: 1; }
  43%  { filter: drop-shadow(0 0 9px rgba(255, 220, 137, 0.34)) brightness(1.05); opacity: 0.92; }
  69%  { filter: drop-shadow(0 0 28px rgba(255, 232, 168, 0.9)) brightness(1.66);  opacity: 1; }
  76%  { filter: drop-shadow(0 0 8px rgba(255, 220, 137, 0.3)) brightness(1.02);  opacity: 0.9; }
  100% { filter: drop-shadow(0 0 6px rgba(255, 220, 137, 0.30)) brightness(1);    opacity: 0.9; }
}

@media (max-height: 760px) {
  .blessings-content { top: clamp(92px, 14vh, 150px); width: min(92vw, 410px); }
  .blessings-heading { font-size: clamp(2.9rem, 12vw, 4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .blessings-decor,
  .blessings-top-left,
  .blessings-top-right,
  .blessings-top-center { animation: none !important; }
  .blessings-top-left::after,
  .blessings-top-right::after { animation: none !important; }
  .blessings-petals { display: none; }
}

/* ══════════════════════════════════════════
   VENUE / MAP  (after Love & Blessings)
   Warm cream wash — its bottom (#e6d2b0) is the
   countdown section's top, so the seam is seamless.
══════════════════════════════════════════ */
.venue-section {
  --venue-deep: #5a4632;
  --venue-soft: #8a6a4a;
  --venue-gold: #a9823f;
  --venue-gold-warm: #b8924a;
  --venue-parallax-x: 0px;
  --venue-parallax-y: 0px;

  position: relative;
  display: none;                       /* revealed with the celebration */
  width: 100%;
  min-height: min(100svh, 760px);
  overflow: hidden;
  /* Decorative parchment frame fills the section; cover crops the overflow
     (small top/bottom trim, the side florals + gold rule stay). */
  background:
    url('assets/maps/map_Section.webp') center center / cover no-repeat,
    linear-gradient(180deg, #ead9bf 0%, #e6d2b0 100%);
  color: var(--venue-soft);
  font-family: var(--font-d);
}
body.celebrate-unlocked .venue-section { display: block; }

.venue-section::before,
.venue-paper-texture,
.venue-route-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.venue-route-layer { z-index: 2; overflow: hidden; }
.venue-route {
  position: absolute;
  top: clamp(300px, 45vh, 412px);
  left: 50%;
  width: clamp(320px, 104vw, 520px);
  height: auto;
  opacity: 0;
  transform: translateX(-52%) rotate(-5deg) scaleX(0);
  transform-origin: 0 50%;
  filter: drop-shadow(0 4px 8px rgba(169, 130, 63, 0.10));
  transition: opacity 0.9s ease 180ms, transform 1.7s cubic-bezier(0.16, 1, 0.3, 1) 180ms;
}
.venue-section.is-visible .venue-route {
  opacity: 0.6;
  transform: translateX(-52%) rotate(-5deg) scaleX(1);
}
.venue-route-track {
  position: absolute;
  top: clamp(300px, 45vh, 412px);
  left: 50%;
  width: clamp(320px, 104vw, 520px);
  height: auto;
  transform: translateX(-52%) rotate(-5deg);
  transform-origin: 0 50%;
  opacity: 0;
  overflow: visible;
  transition: opacity 0.9s ease 700ms;
}
.venue-section.is-visible .venue-route-track { opacity: 1; }
.venue-route-dot { filter: drop-shadow(0 0 10px rgba(169, 130, 63, 0.6)); }

.venue-section::before {
  content: '';
  z-index: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(169, 130, 63, 0.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 30%, rgba(138, 90, 50, 0.06) 0 1px, transparent 1.5px),
    radial-gradient(circle at 46% 76%, rgba(169, 130, 63, 0.06) 0 1px, transparent 1.5px);
  background-size: 24px 24px, 31px 31px, 36px 36px;
  opacity: 0.48;
}
.venue-paper-texture {
  z-index: 1;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 28%, rgba(169, 130, 63, 0.03) 54%, transparent 78%),
    repeating-linear-gradient(86deg, rgba(150, 120, 90, 0.02) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.venue-section.is-visible .venue-paper-texture { opacity: 1; }

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

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

.venue-label {
  margin: 0 0 clamp(6px, 1vh, 10px);
  color: var(--venue-gold);
  font-family: var(--font-u);
  font-size: clamp(12px, 3.2vw, 15px);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.55);
}

.venue-card {
  width: min(100%, 340px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(4px, 1.4vh, 12px) 8px 0;
}
.venue-pin-wrap {
  position: relative;
  width: clamp(96px, 30vw, 146px);
  height: clamp(96px, 30vw, 146px);
  margin: 0 auto clamp(8px, 1.6vh, 14px);
}
.venue-pin {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(142, 95, 40, 0.18));
  opacity: 0;
  transform: translateY(-22px) scale(0.88);
}
.venue-section.is-visible .venue-pin {
  animation: venuePinDrop 1.05s cubic-bezier(0.18, 0.86, 0.28, 1.12) 640ms forwards;
}
.venue-pin-pulse {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 52%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169, 130, 63, 0.22), rgba(169, 130, 63, 0.06) 50%, transparent 72%);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
}
.venue-section.is-visible .venue-pin-pulse {
  animation: venuePinPulse 2.8s ease-out 1.2s infinite;
}

/* Concentric ripple rings radiating from the pin — a premium location-ping /
   water ripple. Continuous, staggered so a new ring blooms as the last fades. */
.venue-pin-ripples {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 44%;                 /* centered on the pin's round head */
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.venue-pin-ripples span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  border: 1.5px solid rgba(169, 130, 63, 0.45);
  background: radial-gradient(circle, rgba(169, 130, 63, 0.10), transparent 62%);
  transform: translate(-50%, -50%) scale(0.42);
  opacity: 0;
}
.venue-section.is-visible .venue-pin-ripples span {
  animation: venuePinRipple 4.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
.venue-section.is-visible .venue-pin-ripples span:nth-child(2) { animation-delay: 1.05s; }
.venue-section.is-visible .venue-pin-ripples span:nth-child(3) { animation-delay: 2.1s; }
.venue-section.is-visible .venue-pin-ripples span:nth-child(4) { animation-delay: 3.15s; }
.venue-card h3 {
  margin: 0 0 clamp(7px, 1.2vh, 11px);
  color: var(--venue-deep);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(19px, 5.4vw, 28px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.venue-card p {
  margin: 0 auto clamp(15px, 2.7vh, 22px);
  max-width: 26em;
  color: var(--venue-soft);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(15px, 4.2vw, 19px);
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: 0.035em;
}
.venue-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin-top: clamp(8px, 1.6vh, 14px);
  padding: 4px 8px;
  border: none;
  background: none;
  color: var(--venue-gold);
  font-family: var(--font-u);
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease;
}
.venue-button::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 1px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(169, 130, 63, 0.9), transparent);
  transform: scaleX(0.5);
  opacity: 0.7;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.venue-button:hover, .venue-button:focus-visible { color: var(--venue-gold-warm); }
.venue-button:hover::after, .venue-button:focus-visible::after { transform: scaleX(1); opacity: 1; }
.venue-button:focus-visible { outline: 2px solid rgba(169, 130, 63, 0.42); outline-offset: 3px; border-radius: 4px; }
.venue-button-arrow { display: inline-block; transition: transform 0.25s ease; }
.venue-button:hover .venue-button-arrow, .venue-button:focus-visible .venue-button-arrow { transform: translateX(3px); }
.venue-tap-note {
  display: block;
  margin-top: clamp(8px, 1.5vh, 12px);
  color: rgba(138, 106, 74, 0.78);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(11px, 3vw, 13px);
  letter-spacing: 0.08em;
}

.venue-illustration {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(6px, 1.2vh, 16px));
  width: clamp(244px, 74vw, 360px);
  height: auto;
  opacity: 0;
  transform:
    translate3d(calc(-50% + var(--venue-parallax-x, 0px)), calc(46px + var(--venue-parallax-y, 0px)), 0)
    scale(0.94);
  filter: drop-shadow(0 16px 24px rgba(120, 80, 50, 0.16));
  transition: opacity 1.35s ease 820ms, transform 1.75s cubic-bezier(0.16, 1, 0.3, 1) 820ms;
  /* Static — no continuous float; parallax vars are ignored (see .is-visible) */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.venue-section.is-visible .venue-illustration {
  opacity: 0.97;
  /* Fixed final position — no parallax vars, so the illustration stays static */
  transform: translate3d(-50%, 0, 0) scale(1);
}
@keyframes venuePinDrop {
  0%   { opacity: 0; transform: translateY(-24px) scale(0.88); }
  64%  { opacity: 1; transform: translateY(4px) scale(1.04); }
  82%  { opacity: 1; transform: translateY(-2px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes venuePinPulse {
  0%   { opacity: 0.44; transform: translate(-50%, -50%) scale(0.58); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.75); }
}
@keyframes venuePinRipple {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.42); border-width: 2px; }
  10%  { opacity: 0.75; }
  70%  { opacity: 0.14; }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.85); border-width: 0.5px; }
}
@keyframes venueIllustrationFloat {
  /* translate-only bob — composited, and the drop-shadow never re-renders
     (rotate/scale removed to stop the per-frame filter repaint that shook it) */
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}
@media (max-height: 740px) {
  .venue-content { top: clamp(58px, 8vh, 78px); width: min(88vw, 346px); }
  .venue-card h3 { font-size: clamp(18px, 5vw, 24px); }
  .venue-card p { margin-bottom: 12px; }
  .venue-illustration { width: clamp(216px, 64vw, 300px); bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); }
}

/* ══════════════════════════════════════════
   COUNTDOWN + FOOTER  (page end)
   Top (#e6d2b0) matches the map section's bottom.
══════════════════════════════════════════ */
.countdown-section {
  --cd-rose: #8a3a2e;
  --cd-deep: #4a3a2a;
  --cd-soft: #8a6a4a;
  --cd-gold: #a9823f;

  position: relative;
  display: none;                       /* revealed with the celebration */
  width: 100%;
  min-height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  /* Same parchment backdrop as the map section */
  background:
    url('assets/maps/map_Section.webp') center center / cover no-repeat,
    linear-gradient(180deg, #ead9bf 0%, #e6d2b0 100%);
  color: var(--cd-soft);
  font-family: var(--font-d);
}
body.celebrate-unlocked .countdown-section { display: block; }

.countdown-section::before,
.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(169, 130, 63, 0.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 30%, rgba(138, 90, 50, 0.07) 0 1px, transparent 1.5px),
    radial-gradient(circle at 46% 76%, rgba(138, 58, 46, 0.06) 0 1px, transparent 1.5px);
  background-size: 24px 24px, 31px 31px, 36px 36px;
  opacity: 0.5;
}
.countdown-bg {
  z-index: 1;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 28%, rgba(169, 130, 63, 0.04) 54%, transparent 78%),
    repeating-linear-gradient(86deg, rgba(150, 120, 80, 0.02) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.countdown-section.is-visible .countdown-bg { opacity: 1; }
.countdown-particles { z-index: 2; overflow: hidden; }
.countdown-particles span {
  position: absolute;
  width: var(--dust-size, 5px);
  height: var(--dust-size, 5px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 179, 0.96), rgba(169, 130, 63, 0.5) 55%, transparent 74%);
  box-shadow: 0 0 10px rgba(169, 130, 63, 0.4);
  opacity: 0;
  animation: countdownDust var(--dust-duration, 9s) ease-in-out var(--dust-delay, 0s) infinite;
}
.countdown-particles span:nth-child(1) { --dust-size: 5px; --dust-duration: 8.5s; --dust-delay: -1s; left: 13%; top: 24%; }
.countdown-particles span:nth-child(2) { --dust-size: 4px; --dust-duration: 10s;  --dust-delay: -5s; left: 78%; top: 18%; }
.countdown-particles span:nth-child(3) { --dust-size: 6px; --dust-duration: 11s;  --dust-delay: -3s; left: 86%; top: 55%; }
.countdown-particles span:nth-child(4) { --dust-size: 4px; --dust-duration: 9.5s; --dust-delay: -7s; left: 20%; top: 66%; }
.countdown-particles span:nth-child(5) { --dust-size: 5px; --dust-duration: 12s;  --dust-delay: -2s; left: 62%; top: 78%; }
.countdown-particles span:nth-child(6) { --dust-size: 3px; --dust-duration: 8s;   --dust-delay: -4s; left: 42%; top: 13%; }

.countdown-content {
  position: relative;
  z-index: 4;
  min-height: 100dvh;
  min-height: 100svh;
  width: min(90vw, 380px);
  margin: 0 auto;
  padding:
    calc(env(safe-area-inset-top, 0px) + clamp(52px, 7.2vh, 80px))
    0
    calc(env(safe-area-inset-bottom, 0px) + clamp(20px, 3.4vh, 34px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: 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(--cd-gold);
  font-family: var(--font-u);
  font-size: clamp(12px, 3.4vw, 15px);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
}
.countdown-eyebrow span.cd-space { width: 0.6em; }
.countdown-eyebrow span {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(3px);
  transition:
    opacity 0.62s ease calc(var(--countdown-delay, 0ms) + var(--letter-delay, 0ms)),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--countdown-delay, 0ms) + var(--letter-delay, 0ms)),
    filter 0.62s ease calc(var(--countdown-delay, 0ms) + var(--letter-delay, 0ms));
}
.countdown-section.is-visible .countdown-eyebrow span { opacity: 1; transform: translateY(0); filter: blur(0); }
.countdown-names {
  position: relative;
  margin: 0;
  color: var(--cd-rose);
  font-family: var(--font-s);
  font-size: clamp(54px, 15vw, 78px);
  line-height: 0.96;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 16px rgba(255, 255, 255, 0.6);
  clip-path: inset(0 100% 0 0);
}
.countdown-names::before {
  content: '';
  position: absolute;
  inset: -28% -18%;
  z-index: -1;
  background: radial-gradient(ellipse, rgba(169, 130, 63, 0.22), transparent 70%);
  animation: countdownNameGlow 4.8s ease-in-out infinite;
}
.countdown-section.is-visible .countdown-names {
  animation: countdownInkReveal 1.55s cubic-bezier(0.16, 1, 0.3, 1) 460ms forwards;
}
.countdown-divider {
  width: clamp(86px, 24vw, 126px);
  height: clamp(18px, 3vh, 24px);
  margin: clamp(12px, 2vh, 18px) auto clamp(14px, 2.4vh, 22px);
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(169, 130, 63, 0.64) 0 2.4px, transparent 2.9px),
    radial-gradient(circle at 43% 50%, rgba(169, 130, 63, 0.36) 0 1.5px, transparent 1.9px),
    radial-gradient(circle at 57% 50%, rgba(169, 130, 63, 0.36) 0 1.5px, transparent 1.9px);
}
.countdown-divider::before,
.countdown-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(169, 130, 63, 0.66));
  transition: width 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--countdown-delay, 0ms);
}
.countdown-divider::before { right: 50%; }
.countdown-divider::after  { left: 50%; transform: scaleX(-1); }
.countdown-section.is-visible .countdown-divider::before,
.countdown-section.is-visible .countdown-divider::after { width: 44%; }
.countdown-grid {
  width: min(94vw, 480px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(5px, 1.8vw, 12px);
  margin-bottom: clamp(18px, 3vh, 26px);
}
.countdown-card {
  position: relative;
  aspect-ratio: 0.75;
  display: grid;
  place-items: center;
  isolation: isolate;
  filter: drop-shadow(0 12px 18px rgba(150, 90, 40, 0.14));
  transform-origin: center;
}
.countdown-card-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.94;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.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(--cd-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(--cd-gold);
  font-family: var(--font-u);
  font-size: clamp(8.5px, 2.3vw, 11px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Pulse/thump on tick removed — numbers update without motion */
.wedding-footer {
  margin-top: clamp(14px, 2.4vh, 24px);
  padding-top: clamp(4px, 1vh, 10px);
  width: 100%;
  color: var(--cd-soft);
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* P&C monogram crest — closing sign-off above the names, brought to life with
   a gentle float, a breathing gold glow, a light-sweep that follows the logo's
   exact shape (CSS mask), and a soft sparkle twinkle.
   Reveal lives on the wrapper; motion lives on the stage/img/overlays so the
   transforms never fight. */
.footer-logo-wrap { width: 100%; text-align: center; }
.footer-logo-stage {
  position: relative;
  display: inline-block;
  width: clamp(161px, 45vw, 240px);
  margin-bottom: clamp(8px, 1.6vh, 14px);
}
.footer-logo {
  display: block;
  width: 100%;
  height: auto;
  /* Static — no float/glow/flash/sparkle; gentle resting shadow only */
  filter: drop-shadow(0 6px 14px rgba(60,40,20,0.22)) drop-shadow(0 0 5px rgba(206,166,84,0.20));
}
/* Flash (light-sweep) and sparkle removed — logo stays still */
.footer-logo-shine,
.footer-logo-sparkle { display: none; }
@keyframes footerLogoFloat {
  0%, 100% { transform: translateY(0)    rotate(-0.5deg); }
  50%      { transform: translateY(-6px) rotate( 0.5deg); }
}
@keyframes footerLogoGlow {
  0%, 100% { filter: drop-shadow(0 6px 14px rgba(60,40,20,0.22)) drop-shadow(0 0 5px  rgba(206,166,84,0.20)); }
  50%      { filter: drop-shadow(0 8px 18px rgba(60,40,20,0.26)) drop-shadow(0 0 16px rgba(214,178,96,0.60)); }
}

/* Light-sweep — a diagonal highlight masked to the logo's silhouette so it
   glints across the gold/teal metal rather than over a rectangle. */
.footer-logo-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 38%,
    rgba(255,252,238,0.55) 47%,
    rgba(255,255,255,0.92) 50%,
    rgba(255,252,238,0.55) 53%,
    rgba(255,255,255,0) 62%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  -webkit-mask: url('assets/logo/logo.webp') center / 100% 100% no-repeat;
          mask: url('assets/logo/logo.webp') center / 100% 100% no-repeat;
  animation: footerLogoShine 5.2s ease-in-out infinite;
}
@keyframes footerLogoShine {
  0%   { background-position: 160% 0; }
  22%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }   /* hold, then sweep again next loop */
}

/* Sparkle — a tiny four-point twinkle that pops near the gold 'C' curve. */
.footer-logo-sparkle {
  position: absolute;
  top: 30%;
  right: 16%;
  width: 16%;
  aspect-ratio: 1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(255,250,232,0.95), rgba(255,250,232,0) 70%),
    conic-gradient(from 0deg,
      rgba(255,251,235,0) 0deg, rgba(255,251,235,0.9) 12deg, rgba(255,251,235,0) 24deg,
      rgba(255,251,235,0) 86deg, rgba(255,251,235,0.9) 98deg, rgba(255,251,235,0) 110deg,
      rgba(255,251,235,0) 176deg, rgba(255,251,235,0.9) 188deg, rgba(255,251,235,0) 200deg,
      rgba(255,251,235,0) 266deg, rgba(255,251,235,0.9) 278deg, rgba(255,251,235,0) 290deg);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.4);
  animation: footerLogoSparkle 5.2s ease-in-out infinite 1.1s;
}
@keyframes footerLogoSparkle {
  0%, 12%   { opacity: 0; transform: scale(0.4) rotate(0deg); }
  18%       { opacity: 1; transform: scale(1)   rotate(35deg); }
  28%, 100% { opacity: 0; transform: scale(0.4) rotate(60deg); }
}

@media (prefers-reduced-motion: reduce) {
  .footer-logo-stage,
  .footer-logo,
  .footer-logo-shine,
  .footer-logo-sparkle { animation: none; }
  .footer-logo-sparkle { display: none; }
}
.wedding-footer p { margin: 0; }

/* ══════════════════════════════════════════
   DESKTOP / TABLET FRAME
   The whole site is designed mobile-first for a narrow portrait phone.
   On wider screens, instead of stretching, we lock the entire experience
   to a centered 440px phone-width column with plain dark gutters on the
   left and right. Everything below this breakpoint stays exactly as the
   mobile design intended.
══════════════════════════════════════════ */
#device-frame { width: 100%; }

@media (min-width: 600px) {
  /* Dark gutters either side of the column */
  html, body { background: var(--dark); }

  /* The phone-width column — centered; body remains the scroll container */
  #device-frame {
    width: 480px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
  }

  /* ── Fixed elements: re-pin to the column, not the viewport ──
     position:fixed resolves against the viewport regardless of the wrapper,
     so these two must be recentred onto the 440px column explicitly. */

  /* Rope-pull intro overlay (was inset:0 → full viewport) */
  #intro {
    left: 50%;
    right: auto;
    width: 480px;
    margin-left: -240px;   /* centre without a transform (children rely on it) */
  }

  /* Floating controls — bottom-right of the column, not the screen.
     Column's right edge sits at (50vw + 240px); keep the 14px inset inside it. */
  .fab-cluster {
    right: calc(50vw - 240px + 14px);
  }
}
.footer-names {
  color: var(--cd-rose);
  font-family: var(--font-s);
  font-size: clamp(34px, 9.5vw, 50px);
  line-height: 1.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(--cd-deep);
  font-family: var(--font-u);
  text-transform: uppercase;
  white-space: nowrap;
}
.footer-date sup {
  font-size: 0.6em;
  vertical-align: super;
  letter-spacing: 0;
}
.footer-venue { color: var(--cd-soft); }
.footer-credit {
  margin-top: clamp(13px, 2.1vh, 18px) !important;
  color: rgba(138, 106, 74, 0.82);
  font-size: clamp(11px, 3vw, 13px);
  letter-spacing: 0.08em;
}
.footer-credit a {
  position: relative;
  color: var(--cd-gold);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.footer-credit a:hover, .footer-credit a:focus-visible {
  color: #c08a3a;
  text-shadow: 0 0 12px rgba(201, 150, 90, 0.3);
}
@keyframes countdownInkReveal { to { clip-path: inset(0 0 0 0); } }
@keyframes countdownNameGlow {
  /* opacity-only breath — no transform/scale repaint on the blurred glow */
  0%, 100% { opacity: 0.5; }
  48%      { opacity: 0.85; }
}
@keyframes countdownCardPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 12px 18px rgba(150, 90, 40, 0.14)); }
  44%      { transform: scale(1.025); filter: drop-shadow(0 13px 20px rgba(150, 90, 40, 0.16)) drop-shadow(0 0 14px rgba(169, 130, 63, 0.2)); }
}
@keyframes countdownDust {
  0%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.74); }
  24%      { opacity: 0.72; }
  55%      { opacity: 0.46; transform: translate3d(12px, -18px, 0) scale(1); }
  82%      { opacity: 0.62; transform: translate3d(-8px, -34px, 0) scale(0.9); }
}
@media (min-width: 640px) {
  .countdown-grid { width: min(88vw, 560px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-height: 740px) {
  .countdown-content {
    padding-top: calc(env(safe-area-inset-top, 0px) + 34px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  }
  .countdown-names { font-size: clamp(46px, 13vw, 62px); }
  .countdown-divider { margin-top: 8px; margin-bottom: 10px; }
  .countdown-grid { width: min(94vw, 440px); gap: 6px; margin-bottom: 12px; }
  .countdown-number { font-size: clamp(27px, 8vw, 40px); }
  .footer-names { font-size: clamp(30px, 8vw, 42px); }
  .footer-credit { margin-top: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .venue-nav-icon,
  .venue-pin,
  .venue-pin-pulse,
  .venue-illustration,
  .countdown-particles span,
  .countdown-names::before { animation: none !important; }
  .venue-pin-ripples { display: none; }
}

/* ── Unified script type (Tangerine) ──────────────────────────────────────
   Every bride/groom name + decorative script heading uses the same face.
   .meet-name was Playfair (the odd one out) — pull it into the script family
   too. Tangerine renders lighter than Great Vibes, so use the 700 cut for
   presence. Placed last so it overrides each element's own weight. */
.cn-line,
.ic-name,
.meet-name,
.footer-names,
.countdown-names,
.ev-name,
.meet-finale-line,
.meet-meets span {
  font-family: var(--font-s);
  font-weight: 700;
}