/* ================================================================
   RESET & VARIABLES
   ================================================================ */
:root {
  --gold: #C9962C;
  --gold-l: #E8B84B;
  --gold-pale: #f0d078;
  --saffron: #FF9B1A;
  --amber: #FF6B00;
  --ivory: #FDF6E3;
  --ivory-d: #F5E6C3;
  --brown-deep: #0D0704;
  --brown-mid: #1A0D05;
  --brown-warm: #2C1810;
  --fh: 'Cinzel', Georgia, serif;
  --fb: 'Cormorant Garamond', Georgia, serif;
  --fu: 'Poppins', Arial, sans-serif;
  --ease-luxury: cubic-bezier(.22,.61,.36,1);
  --ease-slow: cubic-bezier(.16,1,.3,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --transition-page: 700ms;
  --transition-reveal: 800ms;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  height: 100dvh;
  overflow: hidden;
  overflow-x: hidden;
  background: var(--brown-deep);
  color: var(--ivory);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  font-family: var(--fb);
}

/* ================================================================
   LOADER
   ================================================================ */
#loader {
  position: fixed; inset: 0;
  background: var(--brown-deep);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity 1s var(--ease-luxury);
}
#loader.fade-out { opacity: 0; pointer-events: none; }
.loader-diya {
  font-size: 52px; margin-bottom: 16px;
  animation: loaderPulse 1.8s ease-in-out infinite;
}
.loader-mantra {
  font-family: var(--fh); font-size: 11px;
  letter-spacing: .3em; color: rgba(201,150,44,.65);
  margin-bottom: 10px;
}
.loader-text {
  font-family: var(--fb); font-style: italic;
  font-size: 15px; color: rgba(245,230,195,.45);
  animation: loaderFade 2.5s ease-in-out infinite;
}
@keyframes loaderPulse {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 10px var(--gold)); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 28px var(--gold)); }
}
@keyframes loaderFade {
  0%,100% { opacity: .35; }
  50% { opacity: .75; }
}

/* ================================================================
   MUSIC BUTTON
   ================================================================ */
.music-btn {
  position: fixed; top: 16px; right: 16px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(13,7,4,.82);
  border: 1px solid rgba(201,150,44,.4);
  color: var(--gold); font-size: 18px;
  cursor: pointer; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: all .35s var(--ease-luxury);
  outline: none; opacity: 0;
  animation: fadeInUI 0.6s 1.2s forwards, btnBreath 2.8s ease-in-out 1.7s infinite;
}
.music-btn::after {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(232,184,75,.4);
  animation: btnHalo 2.6s ease-out infinite;
  pointer-events: none;
}
.music-btn:hover {
  background: rgba(201,150,44,.12);
  box-shadow: 0 0 14px rgba(201,150,44,.25);
}
.music-btn.hidden { display: none; }
.music-btn.playing {
  border-color: rgba(232,184,75,.7);
  box-shadow: 0 0 18px rgba(201,150,44,.55);
}
@keyframes fadeInUI { to { opacity: 1; } }
@keyframes btnBreath {
  0%,100% { box-shadow: 0 0 10px rgba(232,184,75,.3); }
  50% { box-shadow: 0 0 22px rgba(232,184,75,.55); }
}
@keyframes btnHalo {
  0% { transform: scale(.86); opacity: .9; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ================================================================
   NAVIGATION DOTS
   ================================================================ */
.nav-dots {
  position: fixed; right: 12px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
  z-index: 500;
  opacity: 0;
  animation: fadeInUI 0.6s 1.5s forwards;
}
.nav-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(201,150,44,.12);
  border: 1px solid rgba(201,150,44,.3);
  cursor: pointer;
  transition: all .4s var(--ease-luxury);
  padding: 0; outline: none; appearance: none;
}
.nav-dot.active {
  background: var(--gold);
  border-color: var(--gold-l);
  transform: scale(1.45);
  box-shadow: 0 0 10px rgba(201,150,44,.5);
}
.nav-dot:hover:not(.active) {
  background: rgba(201,150,44,.25);
  border-color: rgba(201,150,44,.5);
}

/* ================================================================
   ARTWORK SYSTEM
   ================================================================ */
.artwork-layer {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.artwork-bg {
  position: absolute; inset: -8%;
  width: 116%; height: 116%;
  object-fit: cover;
  filter: blur(40px) brightness(.3) saturate(1.1);
  transform: scale(1.1);
}
.artwork-main {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: .55;
}
.artwork-vignette {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at center, rgba(13,7,4,.55) 10%, rgba(13,7,4,.92) 100%);
  pointer-events: none;
}

/* ================================================================
   PAGE SYSTEM
   ================================================================ */
.pages-container {
  position: fixed; inset: 0;
  overflow: hidden;
}
.page {
  position: absolute; inset: 0;
  height: 100vh; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  opacity: 0;
  transform: scale(1.035);
  filter: blur(4px);
  pointer-events: none;
  transition:
    opacity var(--transition-page) var(--ease-luxury),
    transform var(--transition-page) var(--ease-luxury),
    filter var(--transition-page) var(--ease-luxury);
}
.page::-webkit-scrollbar { display: none; }
.page.active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  pointer-events: auto;
  z-index: 2;
}
.page.exit {
  opacity: 0;
  transform: scale(.985);
  filter: blur(3px);
  pointer-events: none;
  z-index: 1;
}
.page-content {
  position: relative; z-index: 3;
  width: calc(100% - 32px); max-width: 460px;
  padding: 24px 16px;
  text-align: center;
  margin: 0 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  background: rgba(13,7,4,.55);
  border-radius: 6px;
  border: 1px solid rgba(201,150,44,.08);
  overflow: hidden;
  word-break: break-word;
}

/* ================================================================
   CONTENT REVEAL SYSTEM
   ================================================================ */
.reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--transition-reveal) var(--ease-luxury),
    transform var(--transition-reveal) var(--ease-luxury);
}
.page.active .reveal-item { opacity: 1; transform: translateY(0); }
.page.active .reveal-item:nth-child(1) { transition-delay: 80ms; }
.page.active .reveal-item:nth-child(2) { transition-delay: 180ms; }
.page.active .reveal-item:nth-child(3) { transition-delay: 280ms; }
.page.active .reveal-item:nth-child(4) { transition-delay: 350ms; }
.page.active .reveal-item:nth-child(5) { transition-delay: 420ms; }
.page.active .reveal-item:nth-child(6) { transition-delay: 480ms; }
.page.active .reveal-item:nth-child(7) { transition-delay: 540ms; }
.page.active .reveal-item:nth-child(8) { transition-delay: 580ms; }
.page.active .reveal-item:nth-child(9) { transition-delay: 620ms; }
.page.active .reveal-item:nth-child(10) { transition-delay: 660ms; }

.reveal-scale {
  opacity: 0;
  transform: scale(.92);
  transition:
    opacity 900ms var(--ease-luxury),
    transform 900ms var(--ease-luxury);
}
.page.active .reveal-scale { opacity: 1; transform: scale(1); }

.reveal-line {
  transform: scaleX(0);
  transition: transform 700ms var(--ease-slow);
}
.page.active .reveal-line { transform: scaleX(1); }

/* ================================================================
   DECORATIVE ELEMENTS
   ================================================================ */
.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 14px 0;
}
.orn-line {
  flex: 1; max-width: 60px; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold));
}
.ornament .orn-line:last-child {
  background: linear-gradient(to left, transparent, var(--gold));
}
.orn-icon { font-size: 14px; flex-shrink: 0; }

/* ================================================================
   PAGE 1 — TEMPLE DOOR
   ================================================================ */
.page-1 { background: #060301; }
.temple-scene {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.video-frame {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.door-video {
  width: 100%; height: 100%;
  object-fit: cover;
}
@media (min-aspect-ratio: 3/4) {
  .door-video {
    max-width: 65vw; max-height: 92vh;
    width: auto; height: 100%;
    object-fit: contain;
    border-radius: 4px;
  }
}
.video-glow {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(6,3,1,.65) 100%);
  pointer-events: none;
}
.page-1-particles {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
}
.temple-overlay {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding-bottom: max(60px, calc(env(safe-area-inset-bottom, 0px) + 48px));
  padding-left: 24px; padding-right: 24px;
  text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 1.8s var(--ease-luxury);
}
.temple-overlay.visible {
  opacity: 1; pointer-events: auto; cursor: pointer;
}
.temple-mantra {
  font-family: var(--fh); font-size: clamp(11px, 2.8vw, 16px);
  color: var(--gold-l); letter-spacing: .12em;
  margin-bottom: 12px;
  text-shadow: 0 0 20px var(--amber);
  opacity: 0; transform: translateY(15px);
  transition: all 1s var(--ease-luxury);
}
.temple-overlay.visible .temple-mantra {
  opacity: 1; transform: translateY(0);
  transition-delay: .2s;
}
.temple-title {
  font-family: var(--fh); font-size: clamp(26px, 7.5vw, 56px);
  font-weight: 700; color: var(--gold-l);
  text-shadow: 0 0 30px var(--amber), 0 0 60px rgba(201,150,44,.35), 0 2px 8px rgba(0,0,0,.9);
  margin-bottom: 36px; letter-spacing: .04em;
  opacity: 0; transform: translateY(20px);
  transition: all 1.2s var(--ease-luxury);
}
.temple-overlay.visible .temple-title {
  opacity: 1; transform: translateY(0);
  transition-delay: .5s;
}
.swipe-hint {
  font-family: var(--fu); font-size: 13px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-l);
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  opacity: 0; transform: translateY(10px);
  transition: all 1s var(--ease-luxury);
}
.swipe-hint span {
  animation: swipeGlow 2.4s ease-in-out infinite;
}
@keyframes swipeGlow {
  0%,100% {
    text-shadow: 0 0 8px rgba(232,184,75,.4), 0 2px 5px rgba(0,0,0,.85);
  }
  50% {
    text-shadow: 0 0 22px rgba(232,184,75,.95), 0 0 44px rgba(255,154,20,.5), 0 2px 5px rgba(0,0,0,.85);
  }
}
.temple-overlay.visible .swipe-hint {
  opacity: 1; transform: translateY(0);
  transition-delay: 1s;
}
.swipe-hint::before {
  content: ''; display: block;
  width: 1px; height: 30px;
  background: linear-gradient(to bottom, transparent, rgba(232,184,75,.5));
  animation: swipePulse 2.2s ease-in-out infinite;
}
@keyframes swipePulse {
  0%,100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(-6px); opacity: 1; }
}
.skip-btn {
  position: absolute; bottom: 14px; right: 14px; z-index: 5;
  font-family: var(--fu); font-size: 10px; font-weight: 300;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(232,184,75,.3); cursor: pointer;
  padding: 8px; opacity: 0;
  transition: opacity .5s, color .3s;
  border: none; background: none;
}
.skip-btn:hover { color: rgba(232,184,75,.6); }

/* ================================================================
   PAGE 2 — INVITATION CARD
   ================================================================ */
.invitation-card {
  position: relative;
  background: linear-gradient(145deg, rgba(253,246,227,.1), rgba(245,230,195,.04));
  border: 1px solid rgba(201,150,44,.3);
  border-radius: 2px;
  padding: clamp(26px, 6vw, 42px) clamp(22px, 5vw, 38px);
  max-width: 480px; width: calc(100% - 36px);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 0 50px rgba(201,150,44,.08),
    0 0 100px rgba(255,107,0,.04),
    inset 0 0 40px rgba(201,150,44,.02);
  text-align: center;
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  overflow-y: auto; scrollbar-width: none;
}
.invitation-card::-webkit-scrollbar { display: none; }
.card-corner {
  position: absolute; width: 28px; height: 28px;
  border-color: rgba(201,150,44,.4); border-style: solid;
  border-width: 0; pointer-events: none;
}
.card-corner-tl { top: 10px; left: 10px; border-top-width: 1px; border-left-width: 1px; }
.card-corner-tr { top: 10px; right: 10px; border-top-width: 1px; border-right-width: 1px; }
.card-corner-bl { bottom: 10px; left: 10px; border-bottom-width: 1px; border-left-width: 1px; }
.card-corner-br { bottom: 10px; right: 10px; border-bottom-width: 1px; border-right-width: 1px; }
.card-mantra {
  font-family: var(--fh); font-size: clamp(10px, 2.5vw, 13px);
  color: var(--gold); letter-spacing: .12em; margin-bottom: 12px;
}
.card-heading {
  font-family: var(--fb); font-style: italic;
  font-size: clamp(20px, 5.5vw, 30px);
  color: var(--ivory); line-height: 1.15;
  margin: 8px 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.card-to {
  font-family: var(--fb); font-size: clamp(12px, 2.8vw, 15px);
  color: rgba(245,230,195,.65); letter-spacing: .08em;
  margin: 4px 0 6px;
}
.card-event {
  font-family: var(--fh); font-size: clamp(15px, 4vw, 22px);
  font-weight: 700; color: var(--gold-l);
  letter-spacing: .04em; line-height: 1.3;
  margin: 8px 0;
}
.card-date {
  font-family: var(--fh); font-size: clamp(32px, 10vw, 56px);
  font-weight: 900; color: var(--gold-l);
  text-shadow: 0 0 24px rgba(232,184,75,.45);
  line-height: 1.1; margin: 10px 0;
}
.card-date sup { font-size: .4em; vertical-align: super; }
.card-desc {
  font-family: var(--fb); font-style: italic;
  font-size: clamp(13px, 3.2vw, 16px);
  color: rgba(245,230,195,.78); line-height: 1.7;
  margin-top: 6px;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}

/* ================================================================
   PAGE 3 — HERITAGE / SCRATCH
   ================================================================ */
.scratch-wrap {
  position: relative; width: 100%; max-width: 320px;
  margin: 0 auto; border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 20px rgba(201,150,44,.1);
}
.scratch-card {
  background: linear-gradient(135deg, #1e0f04, #2a1406, #1e0f04);
  border: 2px solid var(--gold); border-radius: 6px;
  padding: 30px 18px 26px; text-align: center;
  min-height: 175px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  transition: box-shadow .6s var(--ease-luxury);
}
.scratch-card.revealed {
  box-shadow: 0 0 40px rgba(232,184,75,.35);
  animation: revealGlow 2.2s ease-in-out infinite;
}
@keyframes revealGlow {
  0%,100% { box-shadow: 0 0 18px rgba(232,184,75,.2); }
  50% { box-shadow: 0 0 48px rgba(232,184,75,.45); }
}
.scratch-card.revealed .scratch-year {
  animation: yearPop .9s var(--ease-bounce);
}
@keyframes yearPop {
  0% { transform: scale(.55); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.scratch-card.revealed .ornament {
  animation: fadeLine 1s var(--ease-luxury);
}
@keyframes fadeLine {
  0% { opacity: 0; transform: scaleX(.5); }
  100% { opacity: 1; transform: scaleX(1); }
}
.scratch-card.revealed .scratch-text {
  animation: textReveal 1.1s var(--ease-luxury);
}
@keyframes textReveal {
  0% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.scratch-year {
  font-family: var(--fh); font-size: clamp(30px, 9vw, 48px);
  font-weight: 900; color: var(--gold-l);
  text-shadow: 0 0 18px rgba(232,184,75,.5);
  line-height: 1;
}
.scratch-text {
  font-family: var(--fb); font-style: italic;
  font-size: clamp(12px, 3.2vw, 15px);
  color: var(--ivory-d); line-height: 1.6;
}
#scratchCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: crosshair; border-radius: 6px;
  touch-action: none;
}
.scratch-hint {
  font-family: var(--fu); font-size: 10px; font-weight: 300;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(232,184,75,.42); margin-top: 12px;
  transition: opacity .5s;
}

/* ================================================================
   PAGE 4 — TIMELINE
   ================================================================ */
.section-eyebrow {
  font-family: var(--fu); font-size: 9px;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 6px;
}
.section-title {
  font-family: var(--fh); font-size: clamp(16px, 4.5vw, 24px);
  font-weight: 700; color: var(--gold-l);
  letter-spacing: .04em; margin-bottom: 4px;
}
.timeline {
  position: relative; width: 100%; max-width: 420px;
  margin: 0 auto; padding: 0 8px;
}
.timeline-line {
  display: none;
}
.timeline-day { margin-bottom: 6px; }
.timeline-day + .timeline-day { margin-top: 22px; }
.timeline-date {
  font-family: var(--fh); font-size: clamp(15px, 4vw, 20px);
  font-weight: 700; color: var(--gold-l);
  text-align: center; margin-bottom: 12px;
  position: relative;
}
.timeline-date sup { font-size: .55em; vertical-align: super; }
.timeline-events { display: flex; flex-direction: column; gap: 7px; }
.timeline-event {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 12px;
  background: rgba(201,150,44,.04);
  border: 1px solid rgba(201,150,44,.08);
  border-radius: 3px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 550ms var(--ease-luxury), transform 550ms var(--ease-luxury);
}
.page.active .timeline-event { opacity: 1; transform: translateY(0); }
.page.active .timeline-event:nth-child(1) { transition-delay: 350ms; }
.page.active .timeline-event:nth-child(2) { transition-delay: 430ms; }
.page.active .timeline-event:nth-child(3) { transition-delay: 510ms; }
.page.active .timeline-event:nth-child(4) { transition-delay: 590ms; }
.timeline-dot {
  display: none;
}
.timeline-info { text-align: center; }
.timeline-time {
  font-family: var(--fu); font-size: clamp(10px, 2.2vw, 12px);
  font-weight: 500; color: var(--gold);
  display: block; margin-bottom: 1px;
}
.timeline-label {
  font-family: var(--fb); font-size: clamp(12px, 3vw, 15px);
  color: var(--ivory-d); display: block;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}

/* ================================================================
   PAGE 5 — DEVOTIONAL (reused on countdown)
   ================================================================ */
.devotional-content { position: relative; }
.devotional-glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw; height: 50vw;
  max-width: 320px; max-height: 320px;
  background: radial-gradient(circle, rgba(255,205,92,.18) 0%, rgba(255,154,20,.08) 35%, transparent 70%);
  filter: blur(12px);
  animation: divineGlow 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes divineGlow {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .65; }
  50% { transform: translate(-50%,-50%) scale(1.18); opacity: 1; }
}
.arch-deco {
  width: 100%; max-width: 280px; height: 3px;
  border-radius: 2px; margin: 16px auto;
  background: linear-gradient(to right, transparent, var(--gold), var(--saffron), var(--gold), transparent);
  opacity: .5;
}
.devotional-mantra {
  font-family: var(--fh); font-size: clamp(11px, 2.8vw, 15px);
  color: var(--gold); letter-spacing: .12em; margin-bottom: 18px;
}
.devotional-title {
  font-family: var(--fh); font-size: clamp(28px, 9vw, 56px);
  font-weight: 900; color: var(--gold-l);
  text-shadow: 0 0 30px var(--amber), 0 0 60px rgba(201,150,44,.35);
  letter-spacing: .03em; line-height: 1.15;
  margin: 0 0 16px;
}
.devotional-sub {
  font-family: var(--fb); font-style: italic;
  font-size: clamp(13px, 3.2vw, 18px);
  color: rgba(245,230,195,.7); line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}

/* ================================================================
   PAGE 5 — DIRECTIONS
   ================================================================ */
.dir-icon {
  font-size: 46px; margin-bottom: 12px;
  filter: drop-shadow(0 0 12px var(--gold));
}
.dir-title {
  font-family: var(--fh); font-size: clamp(30px, 9vw, 50px);
  font-weight: 700; color: var(--gold-l);
  margin-bottom: 6px; letter-spacing: .04em;
}
.dir-sub {
  font-family: var(--fb); font-style: italic;
  font-size: clamp(14px, 3.5vw, 18px);
  color: var(--ivory-d); margin-bottom: 14px;
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
.dir-address {
  font-family: var(--fu); font-size: clamp(10px, 2.4vw, 13px);
  color: rgba(245,230,195,.6); line-height: 1.6;
  margin-bottom: 18px;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  padding: 10px 14px;
  background: rgba(201,150,44,.06);
  border: 1px solid rgba(201,150,44,.12);
  border-radius: 4px;
  max-width: 340px;
}
.maps-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  color: var(--brown-mid); font-family: var(--fh);
  font-size: clamp(14px, 3.5vw, 17px); font-weight: 700;
  letter-spacing: .07em; padding: 16px 32px;
  border-radius: 3px; text-decoration: none;
  border: none; cursor: pointer;
  transition: all .35s var(--ease-luxury);
  box-shadow: 0 4px 22px rgba(201,150,44,.3);
}
.maps-btn:hover, .maps-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(201,150,44,.5);
  outline: none;
}
.maps-btn:active { transform: translateY(0); }
.dir-note {
  font-family: var(--fu); font-size: 10px;
  color: rgba(245,230,195,.3); margin-top: 18px;
  letter-spacing: .08em;
}
.tap-hint {
  font-family: var(--fh); font-size: clamp(12px, 3vw, 15px);
  font-weight: 600; color: var(--gold-l);
  letter-spacing: .18em; margin-top: 18px;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  text-shadow: 0 0 10px rgba(232,184,75,.45);
  animation: hintBounce 1.6s ease-in-out infinite;
}
.tap-arrow {
  font-size: 17px; line-height: 1;
  animation: hintArrow 1.6s ease-in-out infinite;
}
@keyframes hintBounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@keyframes hintArrow {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ================================================================
   PAGE 6 — COUNTDOWN
   ================================================================ */
.cd-pre {
  font-family: var(--fb); font-style: italic;
  font-size: clamp(14px, 3.2vw, 17px);
  color: rgba(245,230,195,.6); margin-bottom: 6px;
}
.cd-title {
  font-family: var(--fh); font-size: clamp(19px, 5.5vw, 30px);
  font-weight: 700; color: var(--gold-l);
  margin-bottom: 18px; letter-spacing: .04em;
}
.cd-grid {
  display: flex; justify-content: center;
  align-items: flex-start;
  gap: clamp(6px, 2.5vw, 16px);
  margin-bottom: 20px;
}
.cd-unit { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cd-ring {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: clamp(58px, 15vw, 92px);
  height: clamp(58px, 15vw, 92px);
}
.cd-ring::before {
  content: ''; position: absolute; inset: -5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,150,44,.12) 0%, transparent 70%);
  animation: ringPulse 3.5s ease-in-out infinite;
}
.cd-ring::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(201,150,44,.18);
}
@keyframes ringPulse {
  0%,100% { transform: scale(1); opacity: .5; }
  50% { transform: scale(1.12); opacity: .9; }
}
.cd-digits {
  position: relative; z-index: 1;
  font-family: var(--fh); font-size: clamp(28px, 9vw, 52px);
  font-weight: 900; color: var(--gold-l);
  text-shadow: 0 0 16px rgba(232,184,75,.35);
  line-height: 1;
  transition: transform 220ms var(--ease-luxury);
}
.cd-digits.tick { transform: scale(1.08); }
.cd-label {
  font-family: var(--fu); font-size: clamp(8px, 1.8vw, 10px);
  font-weight: 400; letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(201,150,44,.65);
}
.cd-sep {
  font-family: var(--fh); font-size: clamp(22px, 7vw, 44px);
  color: rgba(201,150,44,.25); line-height: 1.1;
  padding-top: 4px;
}
.cd-complete {
  font-family: var(--fh); font-size: clamp(22px, 7vw, 40px);
  font-weight: 900; color: var(--gold-l);
  text-shadow: 0 0 24px var(--amber);
  display: none; padding: 18px 0;
  line-height: 1.3;
  animation: completeGlow 2.5s ease-in-out infinite;
}
@keyframes completeGlow {
  0%,100% { text-shadow: 0 0 24px var(--amber); }
  50% { text-shadow: 0 0 40px var(--amber), 0 0 80px rgba(201,150,44,.3); }
}

/* ================================================================
   PARTICLE / PETAL CANVASES
   ================================================================ */
.fx-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 100;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-height: 640px) {
  .card-date { font-size: clamp(28px, 8vw, 44px); }
  .cd-digits { font-size: clamp(24px, 7vw, 42px); }
  .cd-ring { width: clamp(48px, 12vw, 74px); height: clamp(48px, 12vw, 74px); }
  .page-content { padding: 20px 16px; }
  .invitation-card { padding: 16px 14px; }
}
@media (min-width: 900px) {
  .page-content { max-width: 600px; padding: 40px 36px; }
  .nav-dots { right: 28px; }
  .music-btn { top: 20px; right: 20px; }
}
@supports (padding: env(safe-area-inset-top)) {
  .page { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .nav-dots { top: calc(50% + env(safe-area-inset-top) / 4); }
  .music-btn { top: calc(16px + env(safe-area-inset-top)); }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 200ms !important;
  }
  .page {
    filter: none !important;
    transform: none !important;
  }
  .page.active { transform: none !important; }
  .reveal-item, .reveal-scale { transform: none !important; }
}