/* ════════════════════════════════════════
   Alex & Samira Wedding — style.css
   ════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --gold:        #c9a84c;
  --gold-light:  #e8d5a3;
  --gold-dim:    rgba(201,168,76,0.2);
  --blush:       #f2d6d6;
  --rose:        #c97b84;
  --deep:        #2c1810;
  --cream:       #fdf6ee;
  --petal:       #f9ece8;
  --text-muted:  #7a5555;
  --shadow-soft: 0 20px 60px rgba(44,24,16,0.1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Jost', sans-serif;
  background: var(--cream);
  color: var(--deep);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { cursor: pointer; }

/* ── Utility ── */
.text-center { text-align: center; }


/* ════════════════════════
   PETALS
   ════════════════════════ */
.petal-container {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.petal {
  position: absolute;
  top: -40px;
  opacity: 0;
  animation: petalFall linear infinite;
  will-change: transform;
  user-select: none;
}
@keyframes petalFall {
  0%   { opacity: 0;   transform: translateY(0)     rotate(0deg)   scale(.8); }
  8%   { opacity: .65; }
  88%  { opacity: .4;  }
  100% { opacity: 0;   transform: translateY(108vh) rotate(720deg) scale(1.1); }
}


/* ════════════════════════
   TOAST
   ════════════════════════ */
#toast {
  position: fixed;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--deep);
  color: var(--gold-light);
  padding: .75rem 2rem;
  border-radius: 50px;
  border: 1px solid var(--gold-dim);
  font-size: .82rem; letter-spacing: 1px;
  opacity: 0;
  transition: opacity .35s, transform .35s;
  z-index: 9998;
  pointer-events: none;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ════════════════════════
   LIGHTBOX
   ════════════════════════ */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(20, 10, 5, 0.95);
  backdrop-filter: blur(12px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}
.lightbox.open {
  opacity: 1;
  pointer-events: all;
}
.lightbox-inner {
  max-width: 90vw;
  max-height: 90vh;
  text-align: center;
  transform: scale(.92);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.lightbox.open .lightbox-inner {
  transform: scale(1);
}
.lightbox-inner img {
  max-width: 88vw;
  max-height: 78vh;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  margin: 0 auto;
}
.lightbox-caption {
  margin-top: 1rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  color: var(--gold-light);
  font-style: italic;
}
.lightbox-counter {
  margin-top: .4rem;
  font-size: .7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
.lightbox-close {
  position: absolute; top: 1.5rem; right: 1.8rem;
  background: none; border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.6);
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 1rem;
  transition: all .25s;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.lightbox-nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7);
  width: 50px; height: 50px;
  border-radius: 50%;
  font-size: 1.8rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s;
}
.lightbox-nav:hover {
  background: rgba(201,168,76,.15);
  border-color: var(--gold);
  color: var(--gold);
}
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }


/* ════════════════════════
   NAVBAR
   ════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 1000;
  height: 64px;
  padding: 0 2rem;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(253,246,238,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gold-dim);
  transition: box-shadow .3s;
}
nav.scrolled { box-shadow: 0 2px 30px rgba(44,24,16,.08); }

.nav-logo {
  font-family: 'Great Vibes', cursive;
  font-size: 1.75rem;
  color: var(--gold);
  letter-spacing: 1px;
  user-select: none;
}

.nav-links { display: flex; gap: 2.5rem; }
.nav-links a {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: .8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--deep);
  text-decoration: none;
  position: relative;
  transition: color .3s;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .3s;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a:hover::after { width: 100%; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--deep);
  border-radius: 2px;
  transition: all .3s;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed; top: 64px; left: 0; width: 100%;
  background: var(--cream);
  border-bottom: 1px solid var(--gold-dim);
  z-index: 999;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(44,24,16,.06);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 1rem 2rem;
  font-size: .8rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--deep); text-decoration: none;
  border-bottom: 1px solid rgba(201,168,76,.1);
  transition: background .2s, color .2s;
}
.mobile-menu a:hover { background: var(--petal); color: var(--gold); }


/* ════════════════════════
   HERO
   ════════════════════════ */
#home {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #1a0a0a 0%, #2c1810 40%, #4a2020 70%, #2c1810 100%);
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(65px); opacity: .32;
  animation: orbDrift ease-in-out infinite alternate;
  will-change: transform;
}
.orb1 { width: 500px; height: 500px; background: radial-gradient(circle, #c9a84c, transparent); top: -100px; right: -100px; animation-duration: 8s; }
.orb2 { width: 420px; height: 420px; background: radial-gradient(circle, #c97b84, transparent); bottom: -80px; left: -80px; animation-duration: 11s; animation-delay: -3s; }
.orb3 { width: 300px; height: 300px; background: radial-gradient(circle, #e8d5a3, transparent); top: 40%; left: 30%; animation-duration: 9s; animation-delay: -5s; }
@keyframes orbDrift {
  from { transform: translate(0, 0)    scale(1); }
  to   { transform: translate(40px, 30px) scale(1.1); }
}

.hero-content {
  position: relative; z-index: 10;
  padding: 0 1.5rem;
  animation: fadeUp 1.4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow {
  font-size: .72rem; letter-spacing: 5px; text-transform: uppercase;
  color: var(--gold-light); font-weight: 300;
  margin-bottom: 1rem;
  animation: fadeUp 1.4s .2s cubic-bezier(.22,1,.36,1) both;
}
.hero-names {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(4rem, 14vw, 9rem);
  color: #fff; line-height: 1;
  text-shadow: 0 0 80px rgba(201,168,76,.4);
  animation: fadeUp 1.4s .4s cubic-bezier(.22,1,.36,1) both;
}
.hero-ampersand {
  color: var(--gold);
  display: inline-block;
  animation: goldPulse 3s ease-in-out infinite;
}
@keyframes goldPulse {
  0%,100% { transform: scale(1);    text-shadow: 0 0 30px rgba(201,168,76,.3); }
  50%      { transform: scale(1.06); text-shadow: 0 0 80px rgba(201,168,76,.7); }
}

.hero-divider {
  display: flex; align-items: center; gap: 1rem;
  justify-content: center; margin: 1.5rem 0;
  animation: fadeUp 1.4s .6s cubic-bezier(.22,1,.36,1) both;
}
.hero-divider::before, .hero-divider::after {
  content: ''; flex: 1; max-width: 100px; height: 1px;
}
.hero-divider::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.hero-divider::after  { background: linear-gradient(90deg, var(--gold), transparent); }
.hero-divider-icon { color: var(--gold); font-size: 1rem; }

.hero-subtitle {
  font-size: clamp(1rem, 3vw, 1.3rem);
  color: rgba(255,255,255,.72);
  font-weight: 200; letter-spacing: 3px; text-transform: uppercase;
  animation: fadeUp 1.4s .7s cubic-bezier(.22,1,.36,1) both;
}
.hero-verse {
  margin-top: .8rem;
  font-family: 'Amiri', serif;
  font-style: italic; font-size: .98rem;
  color: var(--gold-light); opacity: .88;
  animation: fadeUp 1.4s .9s cubic-bezier(.22,1,.36,1) both;
}

/* Countdown */
#countdown {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  margin-top: 2.5rem;
  animation: fadeUp 1.4s 1.1s cubic-bezier(.22,1,.36,1) both;
}
.countdown-unit {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(201,168,76,.3);
  border-radius: 14px;
  padding: .85rem 1.3rem;
  min-width: 76px;
  backdrop-filter: blur(8px);
  transition: border-color .3s, background .3s;
}
.countdown-unit:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,.1);
}
.countdown-num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.3rem; font-weight: 300;
  color: #fff; line-height: 1;
}
.countdown-label {
  display: block;
  font-size: .58rem; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold-light); margin-top: 5px;
}
.countdown-done {
  font-family: 'Great Vibes', cursive;
  font-size: 2.5rem; color: var(--gold);
}

/* Scroll hint */
.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,.38);
  font-size: .62rem; letter-spacing: 3px; text-transform: uppercase;
  animation: fadeUp 1.4s 1.5s both, scrollBounce 2.2s 3s ease-in-out infinite;
  cursor: pointer; z-index: 10;
  user-select: none;
}
.scroll-arrow {
  width: 18px; height: 18px;
  border-right: 1px solid rgba(255,255,255,.38);
  border-bottom: 1px solid rgba(255,255,255,.38);
  transform: rotate(45deg);
}
@keyframes scrollBounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(9px); }
}


/* ════════════════════════
   SECTION SHARED
   ════════════════════════ */
section { padding: 6rem 1.5rem; }

.section-label {
  font-size: .68rem; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold); margin-bottom: .6rem;
  display: block;
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-weight: 300; color: var(--deep); line-height: 1.1;
}
.section-divider {
  width: 56px; height: 1px;
  background: var(--gold);
  margin: 1.5rem auto;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .32s; }


/* ════════════════════════
   STORY
   ════════════════════════ */
#story { background: var(--petal); }
.story-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.story-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.22rem; font-weight: 300; line-height: 1.95;
  color: var(--text-muted); font-style: italic;
}
.story-hearts {
  font-size: 1.8rem; margin: 1.2rem 0;
  display: block;
  animation: goldPulse 3s ease-in-out infinite;
}


/* ════════════════════════
   TIMELINE
   ════════════════════════ */
#timeline { background: var(--cream); }
.timeline-wrap {
  max-width: 620px; margin: 3rem auto 0;
  position: relative;
}
.timeline-line {
  position: absolute; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--gold-light) 20%, var(--gold-light) 80%, transparent);
}
.timeline-item {
  display: flex; gap: 2rem;
  margin-bottom: 2.8rem;
  align-items: flex-start;
  position: relative;
}
.timeline-item:nth-child(even) { flex-direction: row-reverse; }

.timeline-dot {
  position: absolute; left: 50%; top: .35rem;
  transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 4px rgba(201,168,76,.2);
  z-index: 1;
  transition: box-shadow .3s;
}
.timeline-item:hover .timeline-dot {
  box-shadow: 0 0 0 7px rgba(201,168,76,.15);
}

.timeline-content {
  flex: 1; text-align: right;
  padding-right: calc(50% + 1.5rem);
}
.timeline-item:nth-child(even) .timeline-content {
  text-align: left; padding-right: 0;
  padding-left: calc(50% + 1.5rem);
}
.timeline-year {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem; font-weight: 600; color: var(--gold);
}
.timeline-event {
  font-size: .88rem; color: var(--text-muted); font-weight: 300;
  margin-top: .25rem; line-height: 1.5;
}


/* ════════════════════════
   GALLERY
   ════════════════════════ */
#gallery {
  background: var(--deep);
  padding-bottom: 7rem;
}
#gallery .section-title { color: var(--gold-light); }
#gallery .section-label { color: var(--gold); }
.gallery-subtitle {
  color: rgba(255,255,255,.45);
  font-size: .88rem; font-style: italic; margin-top: -.5rem;
}

/* Filter buttons */
.gallery-filters {
  display: flex; gap: .75rem; flex-wrap: wrap;
  justify-content: center;
  margin: 2rem 0 2.5rem;
}
.filter-btn {
  background: transparent;
  border: 1px solid rgba(201,168,76,.3);
  color: rgba(255,255,255,.5);
  padding: .5rem 1.4rem;
  border-radius: 50px;
  font-family: 'Jost', sans-serif;
  font-size: .75rem; letter-spacing: 2px; text-transform: uppercase;
  transition: all .28s;
}
.filter-btn:hover,
.filter-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--deep);
  box-shadow: 0 0 20px rgba(201,168,76,.25);
}

/* Masonry grid */
.gallery-grid {
  max-width: 1100px; margin: 0 auto;
  columns: 3 260px;
  column-gap: 16px;
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 16px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .4s;
}
.gallery-item.hidden {
  display: none;
}
.gallery-item:hover { transform: translateY(-4px); }

.gallery-img-wrap {
  position: relative; overflow: hidden;
  border-radius: 14px;
}
.gallery-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.gallery-item:hover .gallery-img-wrap img {
  transform: scale(1.07);
}

/* Tall/wide variants */
.gallery-item--tall .gallery-img-wrap { aspect-ratio: 3/4; }
.gallery-item--wide .gallery-img-wrap { aspect-ratio: 16/7; }
.gallery-item:not(.gallery-item--tall):not(.gallery-item--wide) .gallery-img-wrap {
  aspect-ratio: 4/3;
}

/* Hover overlay */
.gallery-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,8,5,.75) 0%, transparent 55%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding: 1.2rem;
  opacity: 0;
  transition: opacity .35s;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }

.gallery-zoom {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.7);
  font-size: 1.5rem;
  opacity: 0;
  transition: all .35s;
}
.gallery-item:hover .gallery-zoom {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.gallery-caption-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem; font-style: italic;
  color: var(--gold-light);
  transform: translateY(6px);
  transition: transform .35s;
}
.gallery-item:hover .gallery-caption-text {
  transform: translateY(0);
}

/* Shimmer loading state */
.gallery-item.loading .gallery-img-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  z-index: 1; border-radius: 14px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ════════════════════════
   SCHEDULE
   ════════════════════════ */
#schedule { background: var(--deep); }
#schedule .section-title { color: var(--gold-light); }
#schedule .section-label { color: var(--gold); }

.schedule-card {
  max-width: 800px; margin: 3rem auto 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,168,76,.2);
  border-radius: 22px;
  overflow: hidden;
}
.schedule-header {
  background: linear-gradient(135deg, rgba(201,168,76,.13), rgba(201,120,132,.09));
  padding: 2.5rem; text-align: center;
  border-bottom: 1px solid rgba(201,168,76,.12);
}
.schedule-date {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: #fff; font-weight: 300;
}
.schedule-time {
  color: var(--gold); margin-top: .5rem;
  letter-spacing: 3px; font-size: .78rem; text-transform: uppercase;
}
.schedule-venue {
  color: rgba(255,255,255,.55); margin-top: .5rem; font-size: .9rem;
}
.schedule-actions {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: center; padding: 2rem;
}

/* Buttons */
.btn-gold {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.8rem;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: .75rem; letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none; border-radius: 50px;
  transition: all .3s; font-family: 'Jost';
}
.btn-gold:hover {
  background: var(--gold); color: var(--deep);
  box-shadow: 0 0 28px rgba(201,168,76,.3);
}
.btn-gold-fill { background: var(--gold); color: var(--deep); }
.btn-gold-fill:hover {
  background: var(--gold-light);
  box-shadow: 0 0 32px rgba(201,168,76,.45);
}

.schedule-map { padding: 0 2rem 2rem; }
.schedule-map iframe {
  width: 100%; height: 280px;
  border: none; border-radius: 14px;
  filter: grayscale(25%) sepia(8%);
}


/* ════════════════════════
   GUESTBOOK
   ════════════════════════ */
#guestbook { background: var(--petal); }
.guestbook-inner { max-width: 650px; margin: 2.5rem auto 0; }
.guestbook-iframe {
  width: 100%; height: 620px;
  border: none; border-radius: 18px;
  box-shadow: var(--shadow-soft);
}


/* ════════════════════════
   FOOTER
   ════════════════════════ */
footer {
  background: var(--deep);
  padding: 3.5rem 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(201,168,76,.15);
}
.footer-names {
  font-family: 'Great Vibes', cursive;
  font-size: 3.2rem; color: var(--gold);
  display: block; margin-bottom: .4rem;
}
.footer-sub {
  color: rgba(255,255,255,.35);
  font-size: .72rem; letter-spacing: 3px; text-transform: uppercase;
}
.footer-hearts {
  margin: 1rem 0 .25rem;
  font-size: 1.1rem;
  animation: goldPulse 3s ease-in-out infinite;
}
.footer-credit {
  margin-top: 1.5rem;
  color: rgba(255,255,255,.2); font-size: .72rem;
}


/* ════════════════════════
   RESPONSIVE
   ════════════════════════ */
@media (max-width: 768px) {
  .nav-links   { display: none; }
  .hamburger   { display: flex; }

  /* Timeline mobile */
  .timeline-line { left: 18px; }
  .timeline-item,
  .timeline-item:nth-child(even) { flex-direction: column; padding-left: 46px; }
  .timeline-dot  { left: 18px; }
  .timeline-content,
  .timeline-item:nth-child(even) .timeline-content {
    text-align: left; padding-left: 0; padding-right: 0;
  }

  /* Countdown */
  .countdown-unit { min-width: 60px; padding: .6rem .9rem; }
  .countdown-num  { font-size: 1.8rem; }

  /* Gallery */
  .gallery-grid { columns: 2 160px; }

  /* Lightbox nav */
  .lightbox-prev { left: .5rem; }
  .lightbox-next { right: .5rem; }
}

@media (max-width: 480px) {
  .hero-names { font-size: 3.2rem; }
  section { padding: 4rem 1rem; }
  .gallery-grid { columns: 1; }
  .schedule-actions { flex-direction: column; align-items: center; }
}