/* =====================================================================
   SOUTH INDIAN PREMIUM WEDDING INVITATION
   style.css — Complete Theme System
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES — DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────── */
:root {
  /* Core palette */
  --ivory:        #FFF8E8;
  --cream:        #F5EDD6;
  --warm-gold:    #C79A32;
  --bright-gold:  #E8B84B;
  --muted-gold:   #9A7420;
  --deep-maroon:  #761F2B;
  --temple-red:   #9E2635;
  --leaf-green:   #315E3B;
  --dark-green:   #173D2B;
  --warm-brown:   #5A3825;
  --deep-brown:   #2C1A0E;
  --turmeric:     #F5A623;
  --marigold:     #F5C842;
  --sangeet-jewel: #4A1545;

  /* Typography */
  --font-display:  'Cormorant Garamond', 'Georgia', serif;
  --font-title:    'Cinzel', 'Georgia', serif;
  --font-script:   'Great Vibes', cursive;
  --font-serif:    'Marcellus', 'Georgia', serif;
  --font-body:     'Poppins', sans-serif;

  /* Layout */
  --stage-w: 430px;
  --slide-transition: 760ms cubic-bezier(0.22, 1, 0.36, 1);
  --bg-transition: 800ms ease;
  --overlay-transition: 700ms ease;

  /* Active slide theme (updated by JS) */
  --page-bg:      #2C1A0E;
  --page-accent:  #C79A32;
  --page-text:    #FFF8E8;
}

/* ─────────────────────────────────────────────────────────────────────
   2. RESET & BASE
   ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--deep-brown);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  color: var(--ivory);
}

button, input, select, textarea {
  font-family: inherit;
  border: none;
  outline: none;
  background: none;
}

a { color: inherit; text-decoration: none; }

/* ─────────────────────────────────────────────────────────────────────
   3. STAGE — MOBILE-FIRST CONTAINER
   ───────────────────────────────────────────────────────────────────── */
#stage {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: var(--stage-w);
  margin: 0 auto;
  overflow: hidden;
  background: #2C1A0E;
  background-color: #2C1A0E;
  transition: background-color 800ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Safe area for iPhones */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Desktop: centered mobile card */
@media (min-width: 640px) {
  body {
    background:
      radial-gradient(ellipse at 20% 50%, rgba(199,154,50,0.08) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 50%, rgba(118,31,43,0.08) 0%, transparent 60%),
      #0E0A04;
  }
  #stage {
    position: fixed;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: 100vh;
    box-shadow:
      0 0 0 1px rgba(199,154,50,0.3),
      0 0 80px rgba(199,154,50,0.12),
      0 30px 80px rgba(0,0,0,0.6);
  }
}

/* ─────────────────────────────────────────────────────────────────────
   4. LOADER — TEMPLE DOOR VIDEO
   ───────────────────────────────────────────────────────────────────── */
#loader {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: var(--deep-brown);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition:
    opacity 0.9s ease,
    transform 0.9s ease,
    filter 0.9s ease;
}

#loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

#loader.leave {
  opacity: 0;
  transform: scale(1.08);
  filter: blur(14px) saturate(1.2) brightness(1.15);
  pointer-events: none;
}

#loader.hidden {
  display: none;
}

#doorVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Veil: fades in on load to avoid flash */
#loaderVeil {
  position: absolute;
  inset: 0;
  background: var(--deep-brown);
  transition: opacity 0.8s ease;
  pointer-events: none;
  z-index: 5;
}

#loaderVeil.transparent {
  opacity: 0;
}

/* Tap-to-open overlay (mobile autoplay fallback) */
#loaderTapOverlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 15%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

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

.tap-glow {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199,154,50,0.25) 0%, transparent 70%);
  animation: tapPulse 2s ease-in-out infinite;
  bottom: calc(15% + 60px);
}

.tap-icon {
  font-size: 2.4rem;
  animation: floatDiya 3s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(199,154,50,0.8));
}

.tap-text {
  margin-top: 12px;
  color: var(--ivory);
  font-family: var(--font-serif);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-align: center;
  opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────────────────
   5. SLIDES CONTAINER & INDIVIDUAL SLIDES
   ───────────────────────────────────────────────────────────────────── */
#slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Start hidden below */
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform var(--slide-transition),
    opacity var(--slide-transition),
    filter 760ms ease;
  will-change: transform, opacity;
}

/* Direction-aware exits (JS applies THE class that matches the gesture) */
.slide.out-top {
  transform: translateY(-100%) scale(0.96);
  opacity: 0;
  filter: blur(5px) brightness(1.15);
}

.slide.out-bottom {
  transform: translateY(100%) scale(0.96);
  opacity: 0;
  filter: blur(5px) brightness(1.15);
}

/* Direction-aware entry start positions (pre-positioned before .active).
   IMPORTANT: the exit/entry classes are declared BEFORE .slide.active so that
   once .active is added, the incoming slide's final state always wins. */
.slide.in-top {
  transform: translateY(-100%);
  opacity: 0;
}

.slide.in-bottom {
  transform: translateY(100%);
  opacity: 0;
}

.slide.active {
  transform: translateY(0) scale(1);
  opacity: 1;
  filter: none;
}

/* Suppress transitions while JS pre-positions an incoming slide */
.slide.no-anim {
  transition: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   6. SHARED BACKGROUND CROSSFADE LAYERS
   Outgoing & incoming backgrounds overlap and blend on navigation
   ───────────────────────────────────────────────────────────────────── */
#bgLayers {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.bg-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 620ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
  /* Parallax hooks (updated by JS) */
  --px: 0px;
  --py: 0px;
  --burn: 1.08;
}

.bg-layer.active { opacity: 1; }

.bg-layer.no-anim {
  transition: none !important;
}

.bg-layer-media,
.bg-layer-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

/* Slow cinematic drift for static-image backgrounds */
.bg-layer.active .bg-layer-img {
  transform: scale(var(--burn)) translate(var(--px), var(--py));
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Theme tint overlay that crossfades with the layers */
.bg-layer-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ── Theme-specific overlays ── */
.theme-welcome-overlay {
  background: linear-gradient(
    180deg,
    rgba(44,26,14,0.55) 0%,
    rgba(44,26,14,0.25) 40%,
    rgba(44,26,14,0.65) 100%
  );
}
.theme-story-overlay {
  background: linear-gradient(
    180deg,
    rgba(23,61,43,0.6) 0%,
    rgba(23,61,43,0.3) 50%,
    rgba(44,26,14,0.65) 100%
  );
}
.theme-savedate-overlay {
  background: linear-gradient(
    180deg,
    rgba(118,31,43,0.5) 0%,
    rgba(44,26,14,0.35) 50%,
    rgba(118,31,43,0.6) 100%
  );
}
.theme-haldi-overlay {
  background: linear-gradient(
    180deg,
    rgba(90,56,37,0.35) 0%,
    rgba(44,26,14,0.5) 45%,
    rgba(44,26,14,0.78) 100%
  );
}
.theme-sangeet-overlay {
  background: linear-gradient(
    180deg,
    rgba(74,21,69,0.55) 0%,
    rgba(44,26,14,0.5) 50%,
    rgba(0,0,0,0.72) 100%
  );
}
.theme-wedding-overlay {
  background: linear-gradient(
    180deg,
    rgba(118,31,43,0.35) 0%,
    rgba(44,26,14,0.55) 50%,
    rgba(0,0,0,0.7) 100%
  );
}
.theme-venue-overlay {
  background: linear-gradient(
    180deg,
    rgba(23,61,43,0.6) 0%,
    rgba(44,26,14,0.55) 100%
  );
}
.theme-rsvp-overlay {
  background: linear-gradient(
    180deg,
    rgba(118,31,43,0.55) 0%,
    rgba(44,26,14,0.5) 100%
  );
}
.theme-closing-overlay {
  background: linear-gradient(
    180deg,
    rgba(23,61,43,0.7) 0%,
    rgba(44,26,14,0.62) 100%
  );
}
.theme-gallery-overlay {
  /* Soft ivory/cream South Indian backdrop with kolaam-dot grille */
  background-color: #F5EDD6;
  background-image:
    radial-gradient(circle at 16% 14%, rgba(199,154,50,0.14) 0%, transparent 46%),
    radial-gradient(circle at 84% 88%, rgba(118,31,43,0.12) 0%, transparent 46%),
    radial-gradient(circle at 86% 10%, rgba(49,94,59,0.10) 0%, transparent 42%),
    radial-gradient(circle at 8% 82%, rgba(49,94,59,0.10) 0%, transparent 42%),
    radial-gradient(circle, rgba(199,154,50,0.16) 1px, transparent 1.5px);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    24px 24px;
  box-shadow: inset 0 0 90px rgba(90,56,20,0.28);
  opacity: 0.96;
}

/* ─────────────────────────────────────────────────────────────────────
   7. SLIDE CONTENT WRAPPER
   ───────────────────────────────────────────────────────────────────── */
.slide-content {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px 80px;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  text-align: center;
}

.slide-content::-webkit-scrollbar { display: none; }

/* iOS momentum scrolling inside slides */
@supports (-webkit-overflow-scrolling: touch) {
  .slide-content {
    -webkit-overflow-scrolling: touch;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   8. COMMON ORNAMENTAL ELEMENTS
   ───────────────────────────────────────────────────────────────────── */
.kolam-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--warm-gold), transparent);
}

.ornament-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeUp 1s 0.3s forwards;
}

.diya-icon {
  font-size: 1.4rem;
  animation: floatDiya 3s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(199,154,50,0.7));
}

.ornament-bottom { margin-top: 16px; }

.kolam-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  opacity: 0;
  animation: fadeUp 1s 0.8s forwards;
}

.kolam-dots::before {
  content: '✦ ✦ ✦ ✦ ✦';
  color: var(--warm-gold);
  letter-spacing: 4px;
  font-size: 0.6rem;
}

/* Section header */
.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeDown 0.8s 0.2s forwards;
}

.header-vine {
  font-size: 1.4rem;
  color: var(--warm-gold);
  opacity: 0.8;
}

.header-vine.flip { transform: scaleX(-1); }

.section-title {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  font-weight: 500;
  color: var(--ivory);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.8),
    0 2px 12px rgba(0,0,0,0.55),
    0 0 24px rgba(0,0,0,0.3);
}

/* ─────────────────────────────────────────────────────────────────────
   9. WELCOME SLIDE
   ───────────────────────────────────────────────────────────────────── */
.invite-salutation {
  font-family: var(--font-serif);
  font-size: clamp(0.75rem, 3vw, 0.9rem);
  color: rgba(255,248,232,0.9);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeUp 0.8s 0.5s forwards;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

.names-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
}

.groom-name,
.bride-name {
  font-family: var(--font-script);
  font-size: clamp(3rem, 14vw, 4.5rem);
  font-weight: 400;
  color: var(--ivory);
  text-shadow:
    0 2px 20px rgba(199,154,50,0.6),
    0 0 60px rgba(199,154,50,0.2);
  line-height: 1;
  opacity: 0;
  animation: fadeUp 0.8s forwards;
}

.groom-name { animation-delay: 0.6s; }
.bride-name { animation-delay: 0.9s; }

.ampersand-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
  opacity: 0;
  animation: fadeUp 0.8s 0.75s forwards;
}

.script-amp {
  font-family: var(--font-script);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  color: var(--warm-gold);
  display: inline-block;
}

.thoranam-left,
.thoranam-right {
  font-size: 1.2rem;
  opacity: 0.7;
}

.invite-subline {
  font-family: var(--font-serif);
  font-size: clamp(0.75rem, 3vw, 0.88rem);
  color: rgba(255,248,232,0.85);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  opacity: 0;
  animation: fadeUp 0.8s 1.1s forwards;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

.invite-grand {
  font-family: var(--font-title);
  font-size: clamp(0.85rem, 3.5vw, 1.1rem);
  color: var(--warm-gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeUp 0.8s 1.2s forwards;
}

.scroll-hint-wrap {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  animation: fadeUp 0.8s 1.6s forwards;
}

.scroll-hint-text {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  color: rgba(255,248,232,0.6);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.scroll-arrow {
  color: var(--warm-gold);
  font-size: 1.2rem;
  animation: bounce 2s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────
   10. OUR STORY SLIDE
   ───────────────────────────────────────────────────────────────────── */
.story-timeline {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  opacity: 0;
  animation: fadeUp 0.8s 0.4s forwards;
}

.story-moment {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 0;
  position: relative;
}

.story-moment::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(199,154,50,0.4), transparent);
  transform: translateX(-50%);
  z-index: 0;
}

.story-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--warm-gold);
  border: 2px solid var(--ivory);
  box-shadow: 0 0 8px rgba(199,154,50,0.6);
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.story-year {
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--warm-gold);
  letter-spacing: 0.15em;
  margin-bottom: 6px;
}

.story-text {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 3.5vw, 1.05rem);
  color: rgba(255,248,232,0.94);
  line-height: 1.65;
  font-style: italic;
  max-width: 280px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.75);
}

.story-divider {
  font-size: 1.1rem;
  opacity: 0.7;
  padding: 4px 0;
}

.story-quote {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 3.5vw, 1.15rem);
  color: rgba(255,248,232,0.9);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fadeUp 0.8s 0.7s forwards;
  text-shadow: 0 1px 6px rgba(0,0,0,0.75);
}

.quote-mark {
  font-size: 2rem;
  color: var(--warm-gold);
  line-height: 1;
  font-style: normal;
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────────
   11. SAVE THE DATE / SCRATCH CARD
   ───────────────────────────────────────────────────────────────────── */
.scratch-instruction {
  font-family: var(--font-serif);
  font-size: clamp(0.78rem, 3vw, 0.9rem);
  color: rgba(255,248,232,0.8);
  letter-spacing: 0.06em;
  margin-bottom: 20px;
  max-width: 260px;
  line-height: 1.55;
  opacity: 0;
  animation: fadeUp 0.8s 0.3s forwards;
}

.scratch-card-wrap {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(199,154,50,0.4),
    0 8px 40px rgba(0,0,0,0.4),
    0 0 60px rgba(199,154,50,0.1);
  cursor: crosshair;
  opacity: 0;
  animation: fadeUp 0.8s 0.5s forwards;
  flex-shrink: 0;
}

/* Revealed content */
.scratch-reveal {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    #2C1A0E 0%,
    #3D2215 30%,
    #1A0E06 60%,
    #2C1A0E 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  /* Kolam border texture */
  border: 1px solid rgba(199,154,50,0.35);
}

.scratch-reveal::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(199,154,50,0.2);
  border-radius: 10px;
  pointer-events: none;
}

.reveal-diya {
  font-size: 1.6rem;
  filter: drop-shadow(0 0 8px rgba(199,154,50,0.8));
  animation: floatDiya 3s ease-in-out infinite;
}

.reveal-date {
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 7vw, 2rem);
  color: var(--warm-gold);
  text-shadow: 0 0 20px rgba(199,154,50,0.5);
  line-height: 1.1;
}

.reveal-time {
  font-family: var(--font-title);
  font-size: clamp(0.65rem, 2.5vw, 0.78rem);
  color: rgba(255,248,232,0.85);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reveal-quote {
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 2.8vw, 0.84rem);
  color: rgba(255,248,232,0.65);
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  max-width: 220px;
  margin-top: 4px;
}

.reveal-kolam {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--warm-gold), transparent);
  margin-top: 4px;
}

/* Scratch canvas */
#scratchCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  border-radius: 16px;
}

/* Scratch hint label */
.scratch-hint {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  font-family: var(--font-serif);
  font-size: 0.78rem;
  color: rgba(44,26,14,0.9);
  letter-spacing: 0.12em;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 5;
}

.scratch-hint.hidden { opacity: 0; }

/* Save date action buttons */
.savedate-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.savedate-actions.revealed { opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────
   11b. GARLAND FRAME — GOLDEN FLORAL WRAP FOR THE SCRATCH CARD
   ───────────────────────────────────────────────────────────────────── */
.garland-frame {
  position: relative;
  width: 100%;
  max-width: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  animation: fadeUp 0.9s 0.4s forwards;
  flex-shrink: 0;
}

.garland-frame .scratch-card-wrap {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  animation: none;
  opacity: 1;
  /* The garland frame owns the entrance motion */
}

.garland-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 14px 22px rgba(44,26,14,0.28));
  user-select: none;
}

/* ─────────────────────────────────────────────────────────────────────
   11c. OUR MOMENTS — "BUTTERFLY STACK" GALLERY
   ───────────────────────────────────────────────────────────────────── */
.gallery-hint {
  font-family: var(--font-serif);
  font-size: clamp(0.72rem, 2.6vw, 0.84rem);
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--muted-gold);
  margin-bottom: 18px;
  opacity: 0;
  animation: fadeUp 0.8s 0.3s forwards;
}

.gallery-stage {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: min(52vh, 440px);
  min-height: 280px;
  opacity: 0;
  animation: fadeUp 1s 0.45s forwards;
}

.gallery-photo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76%;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    translate(var(--tx, 0px), var(--ty, 0px))
    rotate(var(--rot, 0deg))
    scale(var(--sc, 1));
  opacity: var(--op, 0);
  transition:
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 620ms ease;
  will-change: transform, opacity;
}

.gallery-photo.is-active {
  pointer-events: auto;
  cursor: pointer;
}

.gallery-photo.reset {
  transition: none !important;
}

.gallery-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  background: #EBD9AC;
}

/* Ivory photographic mount behind each print */
.gallery-photo::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 22px;
  background: linear-gradient(160deg, #FFFDF4, #F0E3C0);
  box-shadow:
    0 2px 4px rgba(90,56,20,0.25),
    inset 0 0 0 1px rgba(199,154,50,0.4);
  z-index: -1;
}

/* Soft floating shadow cast by the printed photograph */
.gallery-photo::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 26px;
  box-shadow:
    0 16px 38px rgba(70,40,10,0.30),
    0 4px 12px rgba(70,40,10,0.16);
  z-index: -2;
}

/* The active print lifts up + away when tapped, then is tucked back under */
.gallery-photo.is-leaving {
  --rot: 12deg;
  --tx: 12px;
  --ty: -48px;
  --sc: 1.05;
  --op: 0;
  transition:
    transform 520ms cubic-bezier(0.45, 0, 1, 1),
    opacity 520ms ease-in;
}

.gallery-counter {
  font-family: var(--font-title);
  font-size: clamp(0.8rem, 3vw, 0.92rem);
  letter-spacing: 0.24em;
  color: var(--muted-gold);
  margin-top: 20px;
  opacity: 0;
  animation: fadeUp 0.8s 0.55s forwards;
}

/* Gallery text is set on a LIGHT ivory backdrop — use deep inks */
.slide[data-theme="gallery"] .section-title {
  color: var(--deep-maroon);
  text-shadow:
    0 1px 2px rgba(255,255,255,0.65),
    0 0 18px rgba(199,154,50,0.35);
}

.slide[data-theme="gallery"] .header-vine {
  color: #8A6A2A;
}

/* ─────────────────────────────────────────────────────────────────────
   12. EVENT SLIDES (HALDI, SANGEET, WEDDING)
   ───────────────────────────────────────────────────────────────────── */
.event-badge {
  font-family: var(--font-title);
  font-size: clamp(0.6rem, 2.5vw, 0.72rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 20px;
  margin-bottom: 14px;
  opacity: 0;
  animation: fadeDown 0.8s 0.2s forwards;
}

.haldi-badge {
  background: rgba(245,166,35,0.2);
  border: 1px solid rgba(245,166,35,0.5);
  color: var(--marigold);
}

.sangeet-badge {
  background: rgba(199,154,50,0.2);
  border: 1px solid rgba(199,154,50,0.5);
  color: var(--warm-gold);
}

.wedding-badge {
  background: rgba(118,31,43,0.3);
  border: 1px solid rgba(199,154,50,0.5);
  color: var(--ivory);
}

.event-card {
  background: rgba(23,12,5,0.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 20px;
  border: 1px solid rgba(199,154,50,0.35);
  padding: 22px 24px;
  width: 100%;
  max-width: 340px;
  box-shadow:
    0 8px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.08);
  opacity: 0;
  animation: fadeUp 0.9s 0.35s forwards;
}

.event-icon-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}

.event-icon { font-size: 1.4rem; }

.event-title-text {
  font-family: var(--font-script);
  font-size: clamp(1.8rem, 7vw, 2.2rem);
  color: var(--ivory);
  text-shadow:
    0 2px 4px rgba(0,0,0,0.8),
    0 2px 12px rgba(0,0,0,0.5);
}

.event-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.event-detail-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid rgba(199,154,50,0.1);
  padding-bottom: 7px;
}

.detail-label {
  font-family: var(--font-title);
  font-size: 0.62rem;
  color: var(--warm-gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  min-width: 76px;
  text-align: left;
  flex-shrink: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

.detail-value {
  font-family: var(--font-serif);
  font-size: clamp(0.82rem, 3vw, 0.94rem);
  color: var(--ivory);
  text-align: left;
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

.event-description {
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 3vw, 0.9rem);
  color: rgba(255,248,232,0.88);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 14px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

.event-dress-code {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.dress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

.dress-label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: rgba(255,248,232,0.9);
  letter-spacing: 0.05em;
  margin-left: 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* ─────────────────────────────────────────────────────────────────────
   13. VENUE SLIDE
   ───────────────────────────────────────────────────────────────────── */
.venue-card {
  background: rgba(23,12,5,0.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 20px;
  border: 1px solid rgba(199,154,50,0.35);
  padding: 22px 24px;
  width: 100%;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
  opacity: 0;
  animation: fadeUp 0.9s 0.35s forwards;
}

.venue-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 8px rgba(199,154,50,0.5));
}

.venue-name {
  font-family: var(--font-title);
  font-size: clamp(1rem, 4vw, 1.2rem);
  color: var(--ivory);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0,0,0,0.75);
}

.venue-address {
  font-family: var(--font-serif);
  font-size: clamp(0.8rem, 3vw, 0.9rem);
  color: rgba(255,248,232,0.88);
  line-height: 1.5;
  margin-bottom: 16px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.75);
}

.venue-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199,154,50,0.4), transparent);
  margin-bottom: 16px;
}

.venue-details-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.venue-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.vd-icon { font-size: 1rem; }

.vd-text {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(255,248,232,0.92);
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

.btn-directions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.venue-map-placeholder {
  width: 100%;
  max-width: 340px;
  height: 100px;
  border-radius: 12px;
  border: 1px solid rgba(199,154,50,0.2);
  background: rgba(0,0,0,0.2);
  margin-top: 12px;
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  animation: fadeUp 0.9s 0.55s forwards;
  transition: border-color 0.3s;
}

.venue-map-placeholder:hover {
  border-color: rgba(199,154,50,0.5);
}

.map-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.map-pin { font-size: 1.8rem; }

.map-label {
  font-family: var(--font-serif);
  font-size: 0.72rem;
  color: rgba(255,248,232,0.55);
  letter-spacing: 0.1em;
}

/* ─────────────────────────────────────────────────────────────────────
   14. RSVP SLIDE
   ───────────────────────────────────────────────────────────────────── */
.rsvp-subline {
  font-family: var(--font-serif);
  font-size: clamp(0.8rem, 3vw, 0.9rem);
  color: rgba(255,248,232,0.98);
  margin-bottom: 18px;
  padding: 8px 14px;
  background: rgba(118,31,43,0.4);
  border: 1px solid rgba(199,154,50,0.4);
  border-radius: 30px;
  line-height: 1.55;
  max-width: 320px;
  opacity: 0;
  animation: fadeUp 0.8s 0.3s forwards;
  text-shadow: 0 1px 6px rgba(0,0,0,0.75);
}

.rsvp-subline strong {
  color: var(--warm-gold);
  font-weight: 600;
}

.rsvp-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 100%;
  max-width: 360px;
  padding: 20px 16px 22px;
  background: linear-gradient(180deg, rgba(255,248,232,0.12), rgba(255,248,232,0.05));
  border: 1px solid rgba(199,154,50,0.45);
  border-radius: 18px;
  box-shadow:
    0 12px 30px rgba(44,26,14,0.5),
    inset 0 0 0 1px rgba(255,248,232,0.05);
  opacity: 0;
  animation: fadeUp 0.8s 0.45s forwards;
}

.rsvp-form::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 56%;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, var(--warm-gold), transparent);
}

.form-group {
  position: relative;
}

.form-input {
  width: 100%;
  background: rgba(255,248,232,0.14);
  border: 1px solid rgba(199,154,50,0.55);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 0.84rem;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  appearance: none;
  -webkit-appearance: none;
}

.form-input::placeholder { color: rgba(255,248,232,0.6); }

.form-input:focus {
  border-color: rgba(199,154,50,0.95);
  background: rgba(255,248,232,0.19);
  box-shadow: 0 0 0 3px rgba(199,154,50,0.18);
  outline: none;
}

.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C79A32' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.form-select option {
  background: #2C1A0E;
  color: var(--ivory);
}

.form-textarea {
  resize: none;
  height: 64px;
}

.form-label {
  position: absolute;
  top: -8px;
  left: 12px;
  font-family: var(--font-title);
  font-size: 0.6rem;
  color: var(--warm-gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.form-input:not(:placeholder-shown) + .form-label,
.form-input:focus + .form-label {
  opacity: 1;
}

.btn-temple.btn-rsvp {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
  padding: 13px 20px;
  background: linear-gradient(135deg, #E3B84E, #C79A32);
  border: none;
  color: #2C1A0E;
  font-weight: 700;
  box-shadow:
    0 10px 24px rgba(61,18,32,0.45),
    0 0 18px rgba(199,154,50,0.35);
}

.btn-temple.btn-rsvp:hover,
.btn-temple.btn-rsvp:focus {
  background: linear-gradient(135deg, #EDC45C, #D9A83F);
  border: none;
  color: #2C1A0E;
  box-shadow: 0 0 26px rgba(199,154,50,0.55);
}

.rsvp-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: fadeUp 0.8s forwards;
}

.rsvp-success[hidden] { display: none; }

.success-icon { font-size: 2.4rem; }

.rsvp-success h3 {
  font-family: var(--font-title);
  font-size: 1.4rem;
  color: var(--warm-gold);
  letter-spacing: 0.1em;
}

.rsvp-success p {
  font-family: var(--font-serif);
  color: rgba(255,248,232,0.8);
  font-size: 0.9rem;
}

/* ─────────────────────────────────────────────────────────────────────
   15. CLOSING SLIDE
   ───────────────────────────────────────────────────────────────────── */
.closing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 320px;
  margin: auto 0;
  opacity: 0;
  animation: fadeUp 1s 0.3s forwards;
}

.closing-diya {
  font-size: 2.4rem;
  filter: drop-shadow(0 0 16px rgba(199,154,50,0.8));
  animation: floatDiya 3s ease-in-out infinite;
}

.closing-title {
  font-family: var(--font-title);
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  color: var(--ivory);
  letter-spacing: 0.1em;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.closing-names {
  font-family: var(--font-script);
  font-size: clamp(2rem, 9vw, 2.8rem);
  color: var(--warm-gold);
  display: flex;
  align-items: center;
  gap: 16px;
  text-shadow: 0 0 20px rgba(199,154,50,0.4);
}

.closing-families {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.family-line {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 3vw, 0.88rem);
  color: rgba(255,248,232,0.85);
  font-style: italic;
  text-shadow: 0 1px 5px rgba(0,0,0,0.7);
}

.closing-divider {
  display: flex;
  gap: 8px;
  color: var(--warm-gold);
  opacity: 0.6;
  font-size: 0.7rem;
  letter-spacing: 6px;
}

.closing-verse {
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 3.2vw, 0.95rem);
  color: rgba(255,248,232,0.9);
  font-style: italic;
  line-height: 1.8;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0,0,0,0.75);
}

.closing-share-row {
  margin-top: 8px;
}

.closing-kolam {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199,154,50,0.5), transparent);
  margin-top: 8px;
}

/* ── Closing countdown ── */
.closing-countdown {
  width: 100%;
  max-width: 320px;
  margin-top: 6px;
}

.countdown-label {
  font-family: var(--font-serif);
  font-size: 0.72rem;
  color: rgba(255,248,232,0.9);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.75);
}

.countdown-grid {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.cd-unit {
  flex: 1;
  max-width: 76px;
  background: rgba(23,12,5,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(199,154,50,0.35);
  border-radius: 14px;
  padding: 12px 4px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}

.cd-num {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 6vw, 1.8rem);
  color: var(--bright-gold);
  text-shadow: 0 0 16px rgba(199,154,50,0.5);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
}

.cd-unit-label {
  font-family: var(--font-body);
  font-size: 0.55rem;
  color: rgba(255,248,232,0.75);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────
   16. BUTTONS — TEMPLE STYLE
   ───────────────────────────────────────────────────────────────────── */
.btn-temple {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 30px;
  border: 1px solid rgba(199,154,50,0.5);
  background: rgba(199,154,50,0.12);
  color: var(--ivory);
  font-family: var(--font-title);
  font-size: clamp(0.65rem, 2.5vw, 0.75rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-temple:hover,
.btn-temple:focus {
  background: rgba(199,154,50,0.25);
  border-color: rgba(199,154,50,0.8);
  box-shadow: 0 0 20px rgba(199,154,50,0.2);
  transform: translateY(-1px);
}

.btn-temple:active {
  transform: translateY(0);
}

.btn-icon { font-size: 1rem; }

/* ─────────────────────────────────────────────────────────────────────
   17. PROGRESS DOTS
   ───────────────────────────────────────────────────────────────────── */
#progress {
  position: fixed;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 7px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

#progress.visible { opacity: 1; }

.prog-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,248,232,0.35);
  transition: all 0.4s ease;
  cursor: pointer;
}

.prog-dot.active {
  background: var(--warm-gold);
  box-shadow: 0 0 6px rgba(199,154,50,0.8);
  height: 14px;
  border-radius: 3px;
}

/* ─────────────────────────────────────────────────────────────────────
   18. MUSIC TOGGLE
   ───────────────────────────────────────────────────────────────────── */
#musicToggle {
  position: fixed;
  top: max(16px, env(safe-area-inset-top, 16px));
  right: 16px;
  z-index: 60;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(44,26,14,0.6);
  border: 1px solid rgba(199,154,50,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
}

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

#musicToggle.visible:not(.muted) {
  animation: musicGlow 1.6s ease-in-out infinite;
}

#musicToggle:hover {
  background: rgba(199,154,50,0.2);
  border-color: rgba(199,154,50,0.6);
}

@keyframes musicGlow {
  0%, 100% {
    box-shadow: 0 0 4px rgba(199,154,50,0.25),
                0 0 12px rgba(199,154,50,0.3);
  }
  50% {
    box-shadow: 0 0 10px rgba(199,154,50,0.6),
                0 0 26px rgba(199,154,50,0.85);
  }
}

.music-icon {
  color: var(--warm-gold);
  font-size: 1rem;
  line-height: 1;
  transition: opacity 0.3s;
}

#musicToggle.muted .music-icon::after { content: '̶'; }

/* ─────────────────────────────────────────────────────────────────────
   19. NAV ZONES (TAP AREAS)
   ───────────────────────────────────────────────────────────────────── */
.nav-zone {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 48px;
  height: 60%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.nav-zone.visible { opacity: 1; }

.nav-zone.left { left: 0; }
.nav-zone.right { right: 0; }

.nav-zone::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid rgba(199,154,50,0.4);
  border-top: 1.5px solid rgba(199,154,50,0.4);
  transition: border-color 0.3s;
}

.nav-zone.left::after {
  transform: rotate(-135deg);
  margin-left: 14px;
}

.nav-zone.right::after {
  transform: rotate(45deg);
  margin-right: 14px;
}

.nav-zone:hover::after {
  border-color: rgba(199,154,50,0.8);
}

/* ─────────────────────────────────────────────────────────────────────
   20. SWIPE HINT
   ───────────────────────────────────────────────────────────────────── */
#swipeHint {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

#swipeHint.visible { opacity: 1; }

#swipeHint .chev {
  color: var(--warm-gold);
  font-size: 1.1rem;
  animation: bounce 2s ease-in-out infinite;
}

#swipeHint span:last-child {
  font-family: var(--font-serif);
  font-size: 0.65rem;
  color: rgba(255,248,232,0.6);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────
   21. TRANSITION GLOW — GOLDEN SWEEP BETWEEN SLIDES
   ───────────────────────────────────────────────────────────────────── */
#transitionGlow {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

#transitionGlow.play {
  animation: glowFade 760ms ease forwards;
}

#transitionGlow::before {
  content: '';
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -60%;
  width: 45%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(199,154,50,0.12) 30%,
    rgba(255,248,232,0.28) 50%,
    rgba(199,154,50,0.12) 70%,
    transparent 100%
  );
  transform: skewX(-22deg);
}

#transitionGlow.play::before {
  animation: glowSweep 760ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes glowFade {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes glowSweep {
  0%   { left: -60%; }
  100% { left: 130%; }
}

/* ─────────────────────────────────────────────────────────────────────
   22. TOAST NOTIFICATION
   ───────────────────────────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: max(80px, calc(env(safe-area-inset-bottom) + 60px));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(44,26,14,0.9);
  border: 1px solid rgba(199,154,50,0.35);
  color: var(--ivory);
  font-family: var(--font-serif);
  font-size: 0.8rem;
  padding: 10px 20px;
  border-radius: 24px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s ease;
  z-index: 200;
  backdrop-filter: blur(12px);
  white-space: nowrap;
  max-width: calc(100% - 40px);
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─────────────────────────────────────────────────────────────────────
   22. FLOATING PETAL EFFECTS
   ───────────────────────────────────────────────────────────────────── */
.petal-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.petal {
  position: absolute;
  top: -20px;
  font-size: 1rem;
  opacity: 0;
  animation: petalFall linear infinite;
  will-change: transform, opacity;
}

/* ─────────────────────────────────────────────────────────────────────
   23. KEYFRAME ANIMATIONS
   ───────────────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes floatDiya {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-6px) rotate(2deg); }
}

@keyframes tapPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%       { transform: scale(1.3); opacity: 0.2; }
}

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

@keyframes petalFall {
  0%   { opacity: 0; transform: translateY(-10px) rotate(0deg) translateX(0); }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(110vh) rotate(720deg) translateX(40px); }
}

@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes subtleGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(199,154,50,0.15); }
  50%       { box-shadow: 0 0 40px rgba(199,154,50,0.3); }
}

/* ─────────────────────────────────────────────────────────────────────
   24. SLIDE ENTRY ANIMATIONS — RESET ON INACTIVE
   ───────────────────────────────────────────────────────────────────── */
/* Slides that are not active or mid-transition should have content invisible */
.slide:not(.active):not(.prev):not(.in-top):not(.in-bottom):not(.out-top):not(.out-bottom) .slide-content > * {
  animation: none !important;
  opacity: 0 !important;
  transition: none !important;
}

/* For elements that need to persist after reveal */
.slide.active .savedate-actions.revealed {
  opacity: 1 !important;
  animation: none !important;
}

.slide.active .rsvp-success:not([hidden]) {
  animation: fadeUp 0.8s forwards;
}

/* ─────────────────────────────────────────────────────────────────────
   25. SCRATCH CANVAS — GOLD SURFACE RENDERED IN JS
   ───────────────────────────────────────────────────────────────────── */
/* Canvas gold shimmer effect is rendered via JS drawImage gradient */

/* ─────────────────────────────────────────────────────────────────────
   26. SLIDE-SPECIFIC ACCENT COLORS (for JS theme system)
   ───────────────────────────────────────────────────────────────────── */

/* Theme class applied to #stage by JS */
#stage.theme-welcome  { --page-bg: #2C1A0E; --page-accent: #C79A32; }
#stage.theme-story    { --page-bg: #173D2B; --page-accent: #9A7420; }
#stage.theme-savedate { --page-bg: #3D1220; --page-accent: #C79A32; }
#stage.theme-haldi    { --page-bg: #5A3825; --page-accent: #F5A623; }
#stage.theme-sangeet  { --page-bg: #2A0D1C; --page-accent: #C79A32; }
#stage.theme-wedding  { --page-bg: #2C1A0E; --page-accent: #C79A32; }
#stage.theme-venue    { --page-bg: #173D2B; --page-accent: #C79A32; }
#stage.theme-rsvp     { --page-bg: #3D1220; --page-accent: #C79A32; }
#stage.theme-closing  { --page-bg: #0E2416; --page-accent: #C79A32; }
#stage.theme-gallery  { --page-bg: #EADFC2; --page-accent: #9A6B20; }

/* ─────────────────────────────────────────────────────────────────────
   27. RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────────────────────────────── */

/* Small phones */
@media (max-height: 700px) {
  .slide-content { padding: 50px 20px 65px; }
  .names-block { gap: 2px; }
  .groom-name, .bride-name { font-size: clamp(2.4rem, 11vw, 3.5rem); }
  .story-timeline { gap: 0; }
  .story-moment { padding: 10px 0; }
  .event-card { padding: 16px 18px; }
  .scratch-card-wrap { height: 170px; }
}

/* Larger phones */
@media (min-height: 900px) {
  .scratch-card-wrap { height: 220px; }
  .rsvp-form { gap: 14px; }
}

/* Landscape orientation */
@media (orientation: landscape) and (max-height: 500px) {
  .slide-content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 44px 24px 60px;
    overflow-y: auto;
  }
  .names-block { align-items: flex-start; }
}

/* Prevent iOS automatic zoom-into-input on focus (font-size must be >= 16px) */
@media (max-width: 640px) {
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px;
  }
}