/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --clr-cream:       #FAF7F2;
  --clr-ivory:       #F5F0E8;
  --clr-gold:        #C8A96E;
  --clr-gold-light:  #DCC9A0;
  --clr-gold-dark:   #9A7B4F;
  --clr-charcoal:    #2C2C2C;
  --clr-dark:        #1A1A1A;
  --clr-text:        #3D3D3D;
  --clr-text-light:  #8A8478;
  --clr-white:       #FFFFFF;
  --ff-serif:   'Cormorant Garamond', 'Georgia', serif;
  --ff-script:  'Great Vibes', cursive;
  --ff-sans:    'Outfit', 'Helvetica Neue', sans-serif;
  --section-py: clamp(4rem, 8vw, 7rem);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; font-size: 16px; }

body {
  font-family: var(--ff-serif);
  color: var(--clr-text);
  background-color: var(--clr-cream);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='10' fill='none' stroke='%23C8A96E' stroke-width='2.2'/%3E%3Ccircle cx='16' cy='8' r='3.5' fill='none' stroke='%23C8A96E' stroke-width='1.5'/%3E%3Ccircle cx='16' cy='8' r='1.2' fill='%23C8A96E'/%3E%3C/svg%3E") 16 16, auto;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='6' stitchTiles='stitch' seed='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.02 0.06' numOctaves='3' seed='8'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 512px 512px, 400px 400px;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   PARTICLES, PROGRESS BAR, SIDE NAV
   ============================================================ */
#particles {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 10000; pointer-events: none;
}

#progress-bar {
  position: fixed; top: 0; left: 0; width: 0%; height: 2px;
  background: linear-gradient(90deg, var(--clr-gold-dark), var(--clr-gold), var(--clr-gold-light));
  z-index: 10001; pointer-events: none;
}

#side-nav {
  position: fixed; right: clamp(16px, 2vw, 28px); top: 50%;
  transform: translateY(-50%); z-index: 10002;
  display: flex; flex-direction: column; gap: 18px;
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
#side-nav.visible { opacity: 1; pointer-events: auto; }

.nav-dot {
  position: relative; width: 10px; height: 10px; border-radius: 50%;
  background: rgba(200,169,110,0.25); border: 1px solid rgba(200,169,110,0.4);
  cursor: pointer; transition: all 0.4s ease;
}
.nav-dot::before {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid transparent; transition: border-color 0.4s ease;
}
.nav-dot.active { background: var(--clr-gold); transform: scale(1.3); }
.nav-dot.active::before { border-color: rgba(200,169,110,0.4); }
.nav-dot span {
  position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%) translateX(5px); white-space: nowrap;
  font-family: var(--ff-sans); font-size: 0.68rem; font-weight: 300;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--clr-gold);
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-dot:hover span { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--clr-dark); display: flex;
  align-items: center; justify-content: center;
}
.preloader-inner { text-align: center; }
.preloader-script {
  font-family: var(--ff-script); font-size: clamp(2.2rem,5vw,4rem);
  color: var(--clr-gold); display: block; margin-bottom: 1.5rem; opacity: 0;
}
.preloader-line {
  width: 120px; height: 1px; background: var(--clr-gold);
  margin: 0 auto; transform-origin: left; transform: scaleX(0);
}
.preloader-text {
  font-family: var(--ff-sans); font-weight: 200; font-size: 0.72rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--clr-gold-light); margin-top: 1.2rem; opacity: 0;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
#hero { position: relative; width: 100%; height: 100vh; }

.hero-video-wrap {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden;
}
.hero-video-wrap canvas { width: 100%; height: 100%; object-fit: cover; }

.hero-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.55); pointer-events: none; z-index: 1; opacity: 1;
}

.hero-content {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; z-index: 2;
  pointer-events: none; padding: 2rem;
}

.hero-content::before {
  content: ''; position: absolute; inset: clamp(20px,3vw,44px);
  border: 1px solid rgba(255,255,255,0.3); pointer-events: none;
}
.hero-content::after {
  content: ''; position: absolute; inset: clamp(26px,3.5vw,52px);
  border: 1px solid rgba(255,255,255,0.15); pointer-events: none;
}

.corner-ornament {
  position: absolute; font-size: clamp(0.9rem,1.5vw,1.3rem);
  color: rgba(255,255,255,0.5); z-index: 3; line-height: 1; pointer-events: none;
}
.corner-ornament.top-left     { top: clamp(14px,2.7vw,38px); left: clamp(14px,2.7vw,38px); }
.corner-ornament.top-right    { top: clamp(14px,2.7vw,38px); right: clamp(14px,2.7vw,38px); }
.corner-ornament.bottom-left  { bottom: clamp(14px,2.7vw,38px); left: clamp(14px,2.7vw,38px); }
.corner-ornament.bottom-right { bottom: clamp(14px,2.7vw,38px); right: clamp(14px,2.7vw,38px); }

.hero-tagline {
  font-family: var(--ff-sans); font-weight: 300;
  font-size: clamp(0.75rem,1.5vw,1rem); letter-spacing: 0.35em;
  text-transform: uppercase; color: #E8D5B5; margin-bottom: 1rem; opacity: 0;
}
.hero-names {
  display: flex; align-items: baseline;
  gap: clamp(0.8rem,2vw,2rem); flex-wrap: wrap; justify-content: center;
}
.name-first, .name-second {
  font-family: 'Pinyon Script', var(--ff-script); font-weight: 400;
  font-size: clamp(2.8rem,7vw,6rem); color: #FAFAFA;
  line-height: 1.1; opacity: 0;
}
.ampersand {
  font-family: var(--ff-serif); font-weight: 300; font-style: italic;
  font-size: clamp(2rem,5vw,4.5rem); color: #E8D5B5; opacity: 0;
}
.hero-subtitle {
  font-family: var(--ff-serif); font-weight: 300; font-style: italic;
  font-size: clamp(0.9rem,2vw,1.35rem); color: #E8D5B5;
  margin-top: 1.5rem; opacity: 0;
}
.hero-date-badge {
  font-family: var(--ff-sans); font-weight: 200;
  font-size: clamp(0.72rem,1.2vw,0.88rem); letter-spacing: 0.45em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
  margin-top: 1.8rem; padding: 0.5rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.15); opacity: 0;
}
.scroll-indicator {
  position: absolute; bottom: 2.5rem; display: flex;
  flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0;
}
.scroll-indicator span {
  font-family: var(--ff-sans); font-weight: 300; font-size: 0.7rem;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--clr-gold-light);
}
.scroll-line {
  width: 1px; height: 40px; background: var(--clr-gold);
  transform-origin: top; animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50%      { transform: scaleY(0.4); opacity: 0.3; }
}

/* ============================================================
   COMMON SECTION STYLES
   ============================================================ */
.section {
  position: relative; z-index: 3;
  padding: var(--section-py) 2rem; background: var(--clr-cream);
}
.section-dark { background: var(--clr-dark); color: var(--clr-ivory); }

.container { max-width: 960px; margin: 0 auto; text-align: center; }

.section-label {
  font-family: var(--ff-sans); font-weight: 300; font-size: 0.75rem;
  letter-spacing: 0.4em; text-transform: uppercase; color: var(--clr-gold);
  margin-bottom: 0.75rem; opacity: 0; transform: translateY(15px);
}
.section-label.light { color: var(--clr-gold-light); }

.section-heading {
  font-family: var(--ff-serif); font-weight: 400;
  font-size: clamp(1.8rem,4vw,3rem); letter-spacing: 0.04em;
  margin-bottom: 0.5rem; opacity: 0;
}

.divider {
  width: 60px; height: 1px; background: var(--clr-gold);
  margin: 1.5rem auto 2rem; transform: scaleX(0);
}
.divider.light { background: var(--clr-gold-light); }

.ornament {
  font-size: 1.4rem; color: var(--clr-gold-light); opacity: 0.5; margin-bottom: 1rem;
}
.bottom-ornament { margin-top: 2.5rem; margin-bottom: 0; }

/* Split-text animation spans */
[data-split] .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}

/* ============================================================
   DATE & COUNTDOWN (merged section)
   ============================================================ */
.date-display { margin-bottom: 0.5rem; }

.date-day {
  font-family: var(--ff-sans); font-weight: 200;
  font-size: clamp(1rem,2vw,1.3rem); letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--clr-text-light);
  margin-bottom: 0.3rem; opacity: 0; transform: translateY(20px);
}
.date-number {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(5rem,12vw,10rem); line-height: 1;
  margin: 0; opacity: 0; transform: translateY(20px);
  background: linear-gradient(135deg, var(--clr-gold-dark), var(--clr-gold), var(--clr-gold-light), var(--clr-gold));
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.date-month {
  font-family: var(--ff-serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.4rem,3vw,2.2rem); letter-spacing: 0.08em;
  color: var(--clr-charcoal); margin-bottom: 0.5rem;
  opacity: 0; transform: translateY(20px);
}
.venue-address {
  font-family: var(--ff-sans); font-weight: 300; font-size: 0.88rem;
  line-height: 1.8; color: var(--clr-text-light);
  margin-bottom: 2.5rem; opacity: 0; transform: translateY(20px);
}

/* Countdown strip */
.countdown-strip {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(1rem,3vw,2rem); flex-wrap: wrap;
  padding: 1.5rem 2rem;
  border-top: 1px solid rgba(200,169,110,0.15);
  border-bottom: 1px solid rgba(200,169,110,0.15);
  margin-top: 0.5rem;
}
.countdown-unit {
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(20px);
}
.countdown-number {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(1.8rem,4vw,2.6rem); color: var(--clr-gold);
  line-height: 1; letter-spacing: 0.04em;
}
.countdown-sep {
  font-size: 1.4rem; color: var(--clr-gold-light); opacity: 0.4;
  margin-top: -0.8rem;
}
.countdown-label {
  font-family: var(--ff-sans); font-weight: 300; font-size: 0.65rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--clr-text-light); margin-top: 0.3rem;
}

/* ============================================================
   CELEBRATION & VENUE (merged section)
   ============================================================ */

/* Two-column card grid */
.details-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2rem; margin-bottom: 2.5rem; text-align: center;
}

.detail-card {
  padding: 2.5rem 2rem;
  border: 1px solid rgba(200,169,110,0.2);
  border-radius: 2px; position: relative; overflow: hidden;
  opacity: 0;
}
.detail-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(200,169,110,0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* Slide-in directions */
[data-anim="card-left"]  { transform: translateX(-40px); }
[data-anim="card-right"] { transform: translateX(40px); }

.detail-card-icon {
  width: 52px; height: 52px; margin: 0 auto 1.2rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(200,169,110,0.25); border-radius: 50%;
  color: var(--clr-gold);
}
.detail-card-title {
  font-family: var(--ff-sans); font-weight: 300; font-size: 0.72rem;
  letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--clr-gold-light); margin-bottom: 0.8rem;
}
.detail-card-main {
  font-family: var(--ff-serif); font-weight: 400;
  font-size: clamp(1.1rem,2.5vw,1.5rem); letter-spacing: 0.03em;
  color: var(--clr-ivory); margin-bottom: 0.4rem;
}
.detail-card-sub {
  font-family: var(--ff-sans); font-weight: 300; font-size: 0.82rem;
  letter-spacing: 0.15em; color: var(--clr-gold-light);
}
.detail-card-note {
  font-family: var(--ff-serif); font-weight: 300; font-style: italic;
  font-size: 0.88rem; color: var(--clr-text-light); margin-top: 0.8rem;
  opacity: 0.7;
}

/* Map */
.map-wrap {
  margin: 0 auto 2rem; max-width: 100%; border-radius: 2px;
  overflow: hidden; opacity: 0; transform: translateY(30px);
  position: relative; border: 1px solid rgba(200,169,110,0.15);
}
.map-wrap iframe { display: block; width: 100%; height: 320px; }

/* Venue action buttons */
.venue-actions {
  display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap;
  opacity: 0; transform: translateY(20px);
}
.btn-venue {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 2rem; font-family: var(--ff-sans);
  font-weight: 300; font-size: 0.75rem; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--clr-gold);
  border: 1px solid rgba(200,169,110,0.35); border-radius: 2px;
  text-decoration: none;
  transition: background 0.4s ease, color 0.4s ease, transform 0.3s ease, border-color 0.4s ease;
}
.btn-venue svg { flex-shrink: 0; opacity: 0.7; transition: opacity 0.3s ease; }
.btn-venue:hover {
  background: var(--clr-gold); color: var(--clr-dark);
  border-color: var(--clr-gold); transform: translateY(-2px);
}
.btn-venue:hover svg { opacity: 1; }

/* ============================================================
   FOOTER (with RSVP merged)
   ============================================================ */
#footer {
  position: relative; z-index: 3;
  background: var(--clr-charcoal); padding: 0; text-align: center;
}

.footer-rsvp {
  padding: clamp(3.5rem,7vw,6rem) 2rem clamp(2.5rem,5vw,4rem);
}
.footer-rsvp-heading {
  font-family: var(--ff-serif); font-weight: 400;
  font-size: clamp(1.8rem,4vw,3rem); letter-spacing: 0.04em;
  color: var(--clr-ivory); margin-bottom: 1rem; opacity: 0;
}
.footer-rsvp-text {
  font-family: var(--ff-serif); font-weight: 300; font-style: italic;
  font-size: clamp(0.95rem,1.8vw,1.2rem); color: var(--clr-text-light);
  line-height: 1.9; margin-bottom: 2rem;
  opacity: 0; transform: translateY(15px);
}
.footer-rsvp-actions {
  opacity: 0; transform: translateY(15px);
}
.btn-rsvp {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 1rem 3rem; font-family: var(--ff-sans);
  font-weight: 300; font-size: 0.82rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--clr-cream);
  background: var(--clr-gold); border: 1px solid var(--clr-gold);
  border-radius: 2px; text-decoration: none;
  transition: background 0.4s ease, color 0.4s ease, transform 0.3s ease, box-shadow 0.4s ease;
}
.btn-rsvp svg { flex-shrink: 0; }
.btn-rsvp:hover {
  background: transparent; color: var(--clr-gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(200,169,110,0.15);
}

.footer-divider {
  width: 40px; height: 1px; background: var(--clr-gold);
  margin: 0 auto; opacity: 0.3;
}

.footer-closing { padding: 2.5rem 2rem 0; }
.footer-monogram {
  font-family: var(--ff-script); font-size: clamp(2rem,4vw,3.2rem);
  color: var(--clr-gold); margin-bottom: 0.4rem;
}
.footer-date {
  font-family: var(--ff-sans); font-weight: 200; font-size: 0.78rem;
  letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--clr-gold-light); margin-bottom: 0.8rem;
}
.footer-quote {
  font-family: var(--ff-serif); font-style: italic; font-weight: 300;
  font-size: 1.05rem; color: var(--clr-text-light); margin-bottom: 1.5rem;
}
.footer-line {
  width: 40px; height: 1px; background: var(--clr-gold);
  margin: 0 auto 1.2rem; opacity: 0.5;
}
.footer-copy {
  font-family: var(--ff-sans); font-weight: 200; font-size: 0.7rem;
  letter-spacing: 0.2em; color: rgba(255,255,255,0.3);
  padding-bottom: 2.5rem;
}

/* Magnetic button transform (set via JS) */
.magnetic { transition: transform 0.3s cubic-bezier(0.23,1,0.32,1); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  .hero-names { flex-direction: column; gap: 0.2rem; }
  .details-grid { grid-template-columns: 1fr; }
  .countdown-strip { gap: 0.8rem; }
  .countdown-sep { display: none; }
  .venue-actions { flex-direction: column; align-items: center; }
  #side-nav { display: none; }
  [data-anim="card-left"], [data-anim="card-right"] {
    transform: translateY(30px) translateX(0) !important;
  }
}