/* ================================================================
   EVENTO STORIES — LUXURY EVENT WEBSITE TEMPLATE
   style.css — Main Stylesheet
   
   Structure:
   1.  CSS Variables (Colors, Typography, Spacing, Transitions)
   2.  Reset & Base Styles
   3.  Typography Utilities
   4.  Layout Utilities
   5.  Buttons
   6.  Page Loader
   7.  Navigation
   8.  Hero Section
   9.  Countdown Section
   10. Couple Section
   11. Events Section
   12. Timeline Section
   13. Gallery Section
   14. Location Section
   15. RSVP Section
   16. Footer
   17. Scroll Reveal Animations
   18. Responsive Breakpoints
================================================================ */


/* ================================================================
   1. CSS VARIABLES
   Centralised design tokens — edit here to retheme the entire site
================================================================ */

:root {

  /* ---- COLOR PALETTE ---- */
  /* Warm ivory base, champagne gold accents, deep charcoal text */
  --color-bg:          #0d0b0a;          /* Deep near-black background */
  --color-surface:     #141210;          /* Slightly lighter surface */
  --color-surface-2:   #1c1915;          /* Card / elevated surface */
  --color-border:      rgba(212, 180, 131, 0.15); /* Subtle gold border */

  --color-gold:        #d4b483;          /* Primary champagne gold */
  --color-gold-light:  #e8d0a0;          /* Light gold for text */
  --color-gold-dark:   #a8884a;          /* Darker gold for depth */
  --color-rose:        #c9896a;          /* Warm rose accent */

  --color-text:        #f0ece6;          /* Primary cream text */
  --color-text-muted:  #9a9087;          /* Secondary muted text */
  --color-text-dim:    #6a635b;          /* Tertiary dim text */

  /* Gradient tokens */
  --gradient-gold:     linear-gradient(135deg, #d4b483 0%, #c9896a 50%, #d4b483 100%);
  --gradient-hero:     linear-gradient(180deg, rgba(13,11,10,0) 0%, rgba(13,11,10,0.5) 60%, rgba(13,11,10,0.95) 100%);
  --gradient-glass:    rgba(20, 18, 16, 0.6);

  /* ---- TYPOGRAPHY ---- */
  --font-display:      'Cormorant Garamond', Georgia, serif;  /* Headlines & hero */
  --font-accent:       'Tenor Sans', serif;                    /* Subheadings, labels */
  --font-body:         'DM Sans', sans-serif;                  /* Body copy */

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */
  --text-7xl:   4.5rem;     /* 72px */
  --text-8xl:   6rem;       /* 96px */
  --text-9xl:   8rem;       /* 128px */

  /* ---- SPACING ---- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ---- TRANSITIONS ---- */
  --ease-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-luxury:   cubic-bezier(0.77, 0, 0.18, 1);

  --duration-fast:    200ms;
  --duration-normal:  400ms;
  --duration-slow:    700ms;
  --duration-xslow:   1200ms;

  /* ---- RADII ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ---- SHADOWS ---- */
  --shadow-gold:  0 0 40px rgba(212, 180, 131, 0.12);
  --shadow-card:  0 8px 40px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 16px 60px rgba(0, 0, 0, 0.6);

  /* ---- LAYOUT ---- */
  --container-max: 1200px;
  --section-py: var(--space-24);
}


/* ================================================================
   2. RESET & BASE STYLES
   Normalise browsers and set sensible defaults
================================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

/* Body locked during loader */
body.is-loading {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

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

ul {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

::selection {
  background: var(--color-gold);
  color: var(--color-bg);
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-gold-dark); border-radius: var(--radius-full); }


/* ================================================================
   3. TYPOGRAPHY UTILITIES
   Reusable text styles used across all sections
================================================================ */

/* Section eyebrow — small uppercase label above headings */
.section-eyebrow {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
  display: block;
}

/* Section title — main heading for each section */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
  font-weight: 300;
  line-height: 1.1;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}

/* Section subtitle — descriptor below heading */
.section-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  font-weight: 300;
  max-width: 560px;
  margin: 0 auto;
}


/* ================================================================
   4. LAYOUT UTILITIES
   Shared layout helpers used across sections
================================================================ */

/* Centered section wrapper */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

/* Standard section spacing */
.section {
  padding: var(--section-py) 0;
  position: relative;
}

/* Centered header block for each section */
.section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

/* Thin decorative horizontal rule */
.ornament-line {
  display: block;
  width: 80px;
  height: 1px;
  background: var(--gradient-gold);
  margin: 0 auto var(--space-6);
}


/* ================================================================
   5. BUTTONS
   Primary and ghost CTAs
================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-10);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  transition: all var(--duration-normal) var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

/* Ghost button — transparent with gold border (for dark/hero backgrounds) */
.btn--ghost {
  border: 1px solid rgba(212, 180, 131, 0.5);
  color: var(--color-gold-light);
  background: rgba(0,0,0,0.15);
  /* backdrop-filter removed — causes parent layer compositing blur */
}

.btn--ghost:hover {
  border-color: var(--color-gold);
  background: rgba(212, 180, 131, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(212, 180, 131, 0.2);
}

/* Primary button — gold fill for RSVP CTA */
.btn--primary {
  background: var(--gradient-gold);
  color: var(--color-bg);
  font-weight: 500;
  border: none;
  padding: var(--space-5) var(--space-12);
}

.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(212, 180, 131, 0.4);
  filter: brightness(1.08);
}

.btn--primary:active {
  transform: translateY(-1px);
}


/* ================================================================
   6. PAGE LOADER
   Full-screen cinematic intro that plays once on page load
================================================================ */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s var(--ease-luxury), visibility 0.8s;
}

/* Loader hidden state after animation completes */
.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

/* Spinning ring decoration */
.loader__ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  border-top-color: var(--color-gold);
  animation: loaderSpin 1.2s linear infinite;
}

@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}

.loader__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.loader__tagline {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.loader__names {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 300;
  color: var(--color-text);
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-luxury) 0.4s forwards;
}

/* Progress bar at bottom of loader */
.loader__progress {
  width: 200px;
  height: 1px;
  background: var(--color-border);
  overflow: hidden;
  border-radius: var(--radius-full);
}

.loader__bar {
  height: 100%;
  background: var(--gradient-gold);
  width: 0%;
  animation: loaderProgress 2s var(--ease-luxury) forwards;
}

@keyframes loaderProgress {
  0%   { width: 0%; }
  60%  { width: 75%; }
  100% { width: 100%; }
}


/* ================================================================
   7. NAVIGATION
   Transparent at top, glassmorphism when scrolled
================================================================ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-10);
  transition: all var(--duration-slow) var(--ease-smooth);
}

/* Scrolled state — blur glass effect applied via JS */
.navbar.is-scrolled {
  background: rgba(13, 11, 10, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: var(--space-4) var(--space-10);
  border-bottom: 1px solid var(--color-border);
}

/* Brand / logo text */
.navbar__brand {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-style: italic;
  color: var(--color-gold);
  letter-spacing: 0.05em;
  font-weight: 400;
}

/* Desktop nav links */
.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav-link {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-smooth);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-gold);
  transition: width var(--duration-normal) var(--ease-smooth);
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--color-gold-light);
}

.nav-link:hover::after,
.nav-link.is-active::after {
  width: 100%;
}

/* RSVP CTA in navbar */
.nav-link--cta {
  border: 1px solid rgba(212, 180, 131, 0.4);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  color: var(--color-gold-light);
}

.nav-link--cta:hover {
  background: rgba(212, 180, 131, 0.1);
  border-color: var(--color-gold);
}

.nav-link--cta::after { display: none; }

/* Hamburger menu button (mobile only) */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
}

.navbar__hamburger span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-gold-light);
  transition: all var(--duration-normal) var(--ease-smooth);
}

/* Hamburger open state */
.navbar__hamburger.is-open span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}
.navbar__hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: translateX(-8px);
}
.navbar__hamburger.is-open span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}

/* Mobile full-screen navigation overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: all var(--duration-slow) var(--ease-luxury);
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-nav__close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-8);
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  transition: color var(--duration-fast);
}

.mobile-nav__close:hover { color: var(--color-gold); }

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.mobile-nav-link {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 300;
  color: var(--color-text-muted);
  transition: color var(--duration-normal);
  font-style: italic;
}

.mobile-nav-link:hover { color: var(--color-gold-light); }

.mobile-nav__footer {
  position: absolute;
  bottom: var(--space-8);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  color: var(--color-text-dim);
  text-transform: uppercase;
}


/* ================================================================
   8. HERO SECTION
   Full-screen cinematic opening with parallax background
================================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow:hidden removed — caused GPU compositing blur on hero__bg */
}

/* Hero background — cinematic dark SVG (inline base64, no external file needed)
   Replace background-image with url('assets/images/hero-bg.jpg') once you add a real photo.
   z-index 0 = bottom layer. Overlay (z:1) and content (z:3) sit above it. */
.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-image: url('../assets/images/hero-bg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #2a1608;
  /* NO filter, NO transform, NO scale — these all cause blur */
}

/* is-loaded class kept for JS compatibility but does nothing visual */
.hero__bg.is-loaded {
  background-position: center center;
}

/* Dark overlay — sits above the bg image (z-index 1), below content (z-index 2)
   Gradient: light at top, fades to near-black at bottom */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Darkens the photo — adjust rgba alpha to taste.
     0.5 at top = image visible but moody. 0.85 at bottom = text readable. */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45)  0%,
    rgba(0, 0, 0, 0.35)  40%,
    rgba(0, 0, 0, 0.55)  70%,
    rgba(0, 0, 0, 0.82)  100%
  );
}

/* Hero content — sits above all background layers */
.hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 var(--space-6);
  max-width: 900px;
}

/* Eyebrow tagline */
.hero__tagline {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-6);
  animation-delay: 0.2s;
}

/* Giant couple names */
.hero__names {
  font-family: var(--font-display);
  font-size: clamp(var(--text-5xl), 10vw, var(--text-9xl));
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  animation-delay: 0.4s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.hero__name {
  display: block;
}

.hero__ampersand {
  display: block;
  font-style: italic;
  color: var(--color-gold);
  font-size: 0.6em;
  line-height: 1;
  margin: -0.1em 0;
}

/* Subheading / descriptor */
.hero__subheading {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  font-weight: 300;
  margin-bottom: var(--space-2);
  animation-delay: 0.6s;
}

/* Wedding date display */
.hero__date {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-style: italic;
  color: var(--color-gold-light);
  margin-bottom: var(--space-10);
  animation-delay: 0.7s;
}

.hero__cta {
  animation-delay: 0.9s;
}

/* Scroll indicator at bottom */
.hero__scroll {
  position: absolute;
  bottom: var(--space-10);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  animation: heroScrollBounce 2s ease-in-out infinite;
}

.hero__scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--color-gold));
}

.hero__scroll-text {
  font-family: var(--font-accent);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

@keyframes heroScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* Hero floating particles canvas */
.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

/* Individual particle style */
.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat linear infinite;
}

@keyframes particleFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0); }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-100vh) scale(1); }
}


/* ================================================================
   9. COUNTDOWN SECTION
   Animated numbers counting down to the event
================================================================ */

.countdown {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Four-column grid of countdown units */
.countdown__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* Individual time unit (Days, Hours, etc.) */
.countdown__item {
  text-align: center;
  min-width: 120px;
}

/* Large number display */
.countdown__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(var(--text-6xl), 8vw, var(--text-9xl));
  font-weight: 300;
  line-height: 1;
  color: var(--color-gold-light);
  letter-spacing: -0.02em;
  /* Number flip animation applied by JS */
  transition: transform 0.3s var(--ease-bounce), opacity 0.3s;
}

.countdown__num.is-updating {
  transform: translateY(-10px);
  opacity: 0;
}

/* Label below number */
.countdown__label {
  display: block;
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-top: var(--space-2);
}

/* Separator dot between units */
.countdown__sep {
  font-size: var(--text-4xl);
  color: var(--color-text-dim);
  align-self: flex-start;
  padding-top: var(--space-3);
}


/* ================================================================
   10. COUPLE SECTION
   Two portrait cards with a romantic divider
================================================================ */

.couple {
  background: var(--color-bg);
}

/* Side-by-side layout with center divider */
.couple__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-12);
  align-items: center;
}

/* Portrait card */
.couple__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
}

/* Circular image container */
.couple__img-wrap {
  width: 220px;
  height: 280px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  position: relative;
  /* Warm gold glow around portrait */
  box-shadow: 0 0 0 6px rgba(212, 180, 131, 0.05), var(--shadow-card);
  transition: box-shadow var(--duration-slow);
}

.couple__img-wrap:hover {
  box-shadow: 0 0 0 6px rgba(212, 180, 131, 0.1), var(--shadow-hover);
}

/* Image inside the wrapper — set via JS background-image */
.couple__img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: var(--color-surface-2);
  /* Gentle warm overlay on image */
  transition: transform var(--duration-slow) var(--ease-smooth);
}

.couple__img-wrap:hover .couple__img {
  transform: scale(1.05);
}

/* Groom / Bride label */
.couple__role {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Name */
.couple__name {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  font-style: italic;
  color: var(--color-text);
}

/* Quote */
.couple__quote {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  font-weight: 300;
  line-height: 1.8;
  max-width: 320px;
  font-style: italic;
}

/* Center divider with heart icon */
.couple__divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.couple__divider-line {
  width: 1px;
  height: 100px;
  background: linear-gradient(to bottom, transparent, var(--color-border), transparent);
}

.couple__divider-icon {
  font-size: var(--text-xl);
  color: var(--color-gold);
}


/* ================================================================
   11. EVENTS SECTION
   Celebration event cards
================================================================ */

.events {
  background: var(--color-surface);
}

/* Responsive card grid */
.events__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

/* Individual event card with glass effect */
.event-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  text-align: center;
  transition: transform var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth),
              border-color var(--duration-normal);
  position: relative;
  overflow: hidden;
}

/* Subtle gold shine on hover */
.event-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: var(--gradient-gold);
  transition: left var(--duration-slow) var(--ease-luxury);
}

.event-card:hover::before {
  left: 0;
}

.event-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(212, 180, 131, 0.3);
}

/* Icon at top of card */
.event-card__icon {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
  display: block;
}

/* Event title */
.event-card__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  font-style: italic;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.event-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Each detail row within event card */
.event-card__detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.event-card__detail:last-child {
  border-bottom: none;
}

.event-card__detail-label {
  font-family: var(--font-accent);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.event-card__detail-value {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* ================================================================
   12. TIMELINE SECTION
   Alternating left/right story cards with centered spine
================================================================ */

.timeline {
  background: var(--color-bg);
}

/* Timeline track — the vertical spine down the centre */
.timeline__track {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

/* Vertical connecting line */
.timeline__track::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--color-border) 10%, var(--color-border) 90%, transparent);
  transform: translateX(-50%);
}

/* Individual timeline entry */
.timeline-item {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 0;
  margin-bottom: var(--space-16);
  position: relative;
  align-items: start;
}

/* Alternating: even items have content on right, image on left */
.timeline-item:nth-child(odd)  .timeline-item__content { grid-column: 1; grid-row: 1; text-align: right; padding-right: var(--space-10); }
.timeline-item:nth-child(odd)  .timeline-item__img-wrap { grid-column: 3; grid-row: 1; padding-left: var(--space-10); }
.timeline-item:nth-child(even) .timeline-item__content { grid-column: 3; grid-row: 1; text-align: left; padding-left: var(--space-10); }
.timeline-item:nth-child(even) .timeline-item__img-wrap { grid-column: 1; grid-row: 1; padding-right: var(--space-10); }

/* Centre node (circle on the spine) */
.timeline-item__node {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-4);
  z-index: 1;
}

.timeline-item__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-gold);
  border: 3px solid var(--color-bg);
  box-shadow: 0 0 0 1px var(--color-gold);
  transition: transform var(--duration-normal) var(--ease-bounce);
}

.timeline-item:hover .timeline-item__dot {
  transform: scale(1.5);
}

/* Text content area */
.timeline-item__content {
  padding-top: var(--space-2);
}

.timeline-item__date {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

.timeline-item__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  font-style: italic;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.timeline-item__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}

/* Image in timeline */
.timeline-item__img-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.timeline-item__img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform var(--duration-slow) var(--ease-smooth);
}

.timeline-item__img-wrap:hover .timeline-item__img {
  transform: scale(1.06);
}


/* ================================================================
   13. GALLERY SECTION
   Masonry-style grid with hover zoom
================================================================ */

.gallery {
  background: var(--color-surface);
}

/* CSS Grid masonry-like layout */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: var(--space-3);
}

/* Individual gallery item */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  cursor: pointer;
  background: var(--color-surface-2);
}

/* Span modifiers for varied grid heights */
.gallery-item--tall   { grid-row: span 2; }
.gallery-item--wide   { grid-column: span 2; }
.gallery-item--normal { grid-row: span 1; }

/* Image inside gallery item */
.gallery-item__img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform var(--duration-slow) var(--ease-smooth);
}

.gallery-item:hover .gallery-item__img {
  transform: scale(1.08);
}

/* Hover overlay with caption */
.gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,11,10,0.7) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--duration-normal);
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
}

.gallery-item:hover .gallery-item__overlay {
  opacity: 1;
}

.gallery-item__caption {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ================================================================
   14. LOCATION SECTION
   Venue info + embedded Google Maps
================================================================ */

.location {
  background: var(--color-bg);
}

.location__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

/* Left column: venue details */
.location__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.location__detail-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.location__icon {
  font-size: var(--text-xl);
  flex-shrink: 0;
  margin-top: 2px;
}

.location__detail-item strong {
  display: block;
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-1);
}

.location__detail-item p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* Right column: map iframe container */
.location__map-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  height: 400px;
}

.location__map {
  width: 100%;
  height: 100%;
  background: var(--color-surface-2);
}

/* Map iframe itself */
.location__map iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: grayscale(0.5) brightness(0.7);
}


/* ================================================================
   15. RSVP SECTION
   Invitation form with luxury card
================================================================ */

.rsvp {
  position: relative;
  background: var(--color-surface);
}

/* Subtle background texture overlay */
.rsvp__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,180,131,0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* Main card container */
.rsvp__card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-gold);
}

/* Italic intro message */
.rsvp__message {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-10);
  line-height: 1.7;
}

/* Two-column field rows */
.rsvp__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

/* Single field */
.rsvp__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.rsvp__field--full {
  grid-column: span 2;
  margin-bottom: var(--space-5);
}

.rsvp__label {
  font-family: var(--font-accent);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Input / select / textarea shared styles */
.rsvp__input {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 300;
  transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
  width: 100%;
  appearance: none;
}

.rsvp__input::placeholder {
  color: var(--color-text-dim);
}

.rsvp__input:focus {
  outline: none;
  border-color: rgba(212, 180, 131, 0.5);
  box-shadow: 0 0 0 3px rgba(212, 180, 131, 0.08);
}

.rsvp__textarea {
  resize: vertical;
  min-height: 100px;
}

.rsvp__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='%23d4b483' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: var(--space-10);
}

/* Select options need dark bg for readability */
.rsvp__select option {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.rsvp__submit-wrap {
  text-align: center;
  margin-top: var(--space-8);
}

/* Success confirmation message */
.rsvp__success {
  text-align: center;
  padding: var(--space-12) 0;
  animation: fadeInUp 0.6s var(--ease-luxury) forwards;
}

.rsvp__success-icon {
  font-size: var(--text-6xl);
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.rsvp__success h3 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 300;
  font-style: italic;
  margin-bottom: var(--space-3);
}

.rsvp__success p {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}


/* ================================================================
   16. FOOTER
   Elegant closing section
================================================================ */

.footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: var(--space-20) 0 var(--space-12);
}

.footer__inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--space-8);
}

.footer__top {
  margin-bottom: var(--space-8);
}

/* Decorative ornament above footer names */
.footer__divider-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.ornament-line {
  width: 60px;
  height: 1px;
  background: var(--gradient-gold);
  display: block;
}

.ornament-diamond {
  color: var(--color-gold);
  font-size: var(--text-lg);
}

/* Footer couple name */
.footer__names {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-7xl));
  font-weight: 300;
  font-style: italic;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.1;
}

/* Date in footer */
.footer__date {
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  letter-spacing: 0.4em;
  color: var(--color-gold);
}

.footer__message {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-6);
}

.footer__hashtag {
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  color: var(--color-gold);
  margin-bottom: var(--space-8);
}

.footer__credits {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  letter-spacing: 0.2em;
}


/* ================================================================
   17. SCROLL REVEAL ANIMATIONS
   Classes toggled by IntersectionObserver in main.js
================================================================ */

/* Base state — hidden, ready to animate */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-luxury),
              transform var(--duration-slow) var(--ease-luxury);
}

.reveal-up    { transform: translateY(40px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }

/* Visible state — triggered when element enters viewport */
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: translate(0);
}

/* Stagger children animations */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-luxury), transform 0.6s var(--ease-luxury);
}

.reveal-stagger.is-visible > *:nth-child(1) { opacity:1; transform:none; transition-delay: 0s; }
.reveal-stagger.is-visible > *:nth-child(2) { opacity:1; transform:none; transition-delay: 0.1s; }
.reveal-stagger.is-visible > *:nth-child(3) { opacity:1; transform:none; transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(4) { opacity:1; transform:none; transition-delay: 0.3s; }
.reveal-stagger.is-visible > *:nth-child(5) { opacity:1; transform:none; transition-delay: 0.4s; }

/* Reusable fade-in up keyframe (for loader names, success message, etc.) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Shake animation for invalid form inputs */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}


/* ================================================================
   18. RESPONSIVE BREAKPOINTS
   Mobile-first responsive adjustments
================================================================ */

/* ---- Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {

  /* Show hamburger, hide desktop links */
  .navbar__links {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }

  /* Couple grid becomes single column */
  .couple__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .couple__divider {
    flex-direction: row;
    width: 100%;
  }

  .couple__divider-line {
    width: 100%;
    height: 1px;
  }

  /* Location stacks vertically */
  .location__grid {
    grid-template-columns: 1fr;
  }

  /* Gallery goes to 2 columns */
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Timeline goes to single column */
  .timeline__track::before { left: 20px; }

  .timeline-item {
    grid-template-columns: 40px 1fr;
    gap: 0;
  }

  .timeline-item__node {
    grid-column: 1;
    grid-row: 1;
    padding-top: 0;
    align-items: flex-start;
  }

  .timeline-item:nth-child(odd)  .timeline-item__content,
  .timeline-item:nth-child(even) .timeline-item__content {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    padding-left: var(--space-6);
    padding-right: 0;
  }

  .timeline-item:nth-child(odd)  .timeline-item__img-wrap,
  .timeline-item:nth-child(even) .timeline-item__img-wrap {
    grid-column: 2;
    grid-row: 2;
    padding: var(--space-4) 0 0 var(--space-6);
  }
}

/* ---- Mobile (≤ 640px) ---- */
@media (max-width: 640px) {

  :root {
    --section-py: var(--space-16);
  }

  .container {
    padding: 0 var(--space-5);
  }

  /* Navbar tighter on mobile */
  .navbar {
    padding: var(--space-4) var(--space-5);
  }

  .navbar.is-scrolled {
    padding: var(--space-3) var(--space-5);
  }

  /* Hero typography scales down gracefully */
  .hero__content {
    padding: 0 var(--space-5);
  }

  /* Countdown separators hidden on mobile */
  .countdown__sep { display: none; }
  .countdown__grid { gap: var(--space-4); }
  .countdown__item { min-width: 70px; }

  /* RSVP card padding reduced */
  .rsvp__card {
    padding: var(--space-8) var(--space-5);
  }

  /* RSVP form goes to single column */
  .rsvp__form-row {
    grid-template-columns: 1fr;
  }

  .rsvp__field--full {
    grid-column: span 1;
  }

  /* Gallery single column on very small screens */
  .gallery__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }

  .gallery-item--tall,
  .gallery-item--wide {
    grid-row: span 1;
    grid-column: span 1;
  }

  /* Events go single column */
  .events__grid {
    grid-template-columns: 1fr;
  }

  /* Timeline slightly tighter */
  .timeline-item {
    margin-bottom: var(--space-10);
  }
}