/* ═══════════════════════════════════════════
   Assiya & Máté — Wedding Invitation
   ═══════════════════════════════════════════ */

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

/* ── ENVELOPE INTRO ──────────────────────── */

.envelope {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  transition: opacity .6s ease;
  pointer-events: auto;
}

.envelope.opened {
  pointer-events: none;
  opacity: 0;
}

/* back panel (visible behind flap) */
.envelope__back {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, #e8ddd0 0%, #d9cebf 100%);
  z-index: 1;
}

/* front panel (bottom of envelope) */
.envelope__front {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(175deg, #f0e9dd 0%, #e6dcd0 100%);
  clip-path: polygon(0 35%, 50% 58%, 100% 35%, 100% 100%, 0 100%);
  transform-origin: bottom center;
  transition: transform .9s .15s cubic-bezier(.4, 0, .2, 1), opacity .5s .6s ease;
}

.envelope.opening .envelope__front {
  transform: translateY(100%) rotateX(-30deg);
  opacity: 0;
}

/* back panel slides down too */
.envelope__back {
  transition: transform .9s .15s cubic-bezier(.4, 0, .2, 1), opacity .5s .6s ease;
}

.envelope.opening .envelope__back {
  transform: translateY(100%);
  opacity: 0;
}

/* triangular flap */
.envelope__flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 58%;
  z-index: 4;
  background: linear-gradient(180deg, #ece4d6 0%, #e2d8c9 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  backface-visibility: hidden;
  transition: transform 1s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

.envelope.opening .envelope__flap {
  transform: rotateX(-160deg) translateY(-2px);
}

/* wax seal */
.envelope__seal {
  position: relative;
  z-index: 5;
  width: 140px;
  height: 140px;
  cursor: pointer;
  margin-top: 2%;
  transition: transform .3s ease, opacity .6s ease;
  animation: sealPulse 2.5s ease-in-out infinite;
}

.envelope__seal:hover {
  transform: scale(1.08);
}

.envelope.opening .envelope__seal {
  animation: none;
  opacity: 0;
  transform: scale(.7);
}

.seal-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.12));
}

.seal-text-curved {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  fill: var(--gold);
}

.seal-text-main {
  font-family: 'Great Vibes', cursive;
  font-size: 38px;
  fill: var(--gold);
}

.seal-text-open {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .25em;
}

/* body lock while envelope is visible */
body.envelope-locked {
  overflow: hidden;
}

@keyframes sealPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* ── LANGUAGE SELECTOR ───────────────────── */

.lang-selector {
  position: fixed;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 1000;
  display: flex;
  gap: .35rem;
  background: rgba(250,247,242,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(184,154,106,.2);
  border-radius: 2px;
  padding: .35rem;
}

.lang-btn {
  padding: .35rem .65rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 1px;
  cursor: pointer;
  transition: color .25s, background .25s, border-color .25s;
}

.lang-btn:hover {
  color: var(--gold);
}

.lang-btn.active {
  color: #fff;
  background: var(--gold);
  border-color: var(--gold);
}

:root {
  --cream:  #faf7f2;
  --warm:   #f0e9dd;
  --gold:   #b89a6a;
  --dark:   #2c2824;
  --muted:  #7a6f65;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--cream);
  color: var(--dark);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  line-height: 1.8;
}

.calendar-trigger:hover {
  cursor: pointer;
}

/* ── HERO ───────────────────────────────── */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(184,154,106,.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(184,154,106,.10) 0%, transparent 70%);
  pointer-events: none;
}

.hero-eyebrow {
  font-size: .65rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2.5rem;
  animation: fadeUp .9s ease both;
}

.hero-tagline {
  font-size: .65rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 2.5rem;
  animation: fadeUp .9s .3s ease both;
}

.hero-names {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.5rem, 10vw, 7.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: .02em;
  animation: fadeUp .9s .15s ease both;
}

.hero-names em {
  font-style: italic;
  color: var(--gold);
}

.ornament {
  display: block;
  width: 120px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  margin: 2.5rem auto;
  animation: fadeUp .9s .3s ease both;
}

.hero-date {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3.2rem;
  animation: fadeUp .9s .45s ease both;
}

.scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  animation: fadeIn 1.2s 1s ease both;
}

.scroll-hint span:first-child {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2s 1.5s ease-in-out infinite;
}

.scroll-hint span:last-child {
  width: auto;
  height: auto;
  background: none;
  animation: none;
}

/* ── SECTION WRAPPER ─────────────────────── */

.section {
  padding: 7rem 2rem;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.section--narrow {
  padding: 5rem 2rem 2rem;
}

.section-label {
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.section-body {
  font-size: .85rem;
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto;
}

/* ── DIVIDER ─────────────────────────────── */

.divider {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 2rem;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--warm);
}

.divider-mark {
  font-size: 1rem;
  color: var(--gold);
  line-height: 1;
}

/* ── DETAILS GRID ────────────────────────── */

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 3rem 2rem;
  max-width: 680px;
  margin: 4rem auto 0;
  padding: 0 2rem;
  text-align: center;
}

@media (min-width: 900px) {
  .details-grid .detail-item:nth-child(4) {
    grid-column: 2;
  }
}

.detail-item__label {
  font-size: .6rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .6rem;
}

.detail-item__value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.4;
}

.detail-item__sub {
  font-size: .72rem;
  color: var(--muted);
  margin-top: .25rem;
}

.detail-item__hint {
  font-size: .64rem;
  color: color-mix(in srgb, var(--muted) 76%, white 24%);
  margin-top: .35rem;
  letter-spacing: .04em;
}

.venue-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold);
  cursor: pointer;
}

/* ── PASTEL PALETTE DIVIDER ─────────────── */

.pastel-divider {
  max-width: 760px;
  margin: 3.8rem auto 0;
  padding: 0 2rem;
  text-align: center;
}

.pastel-divider__label {
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}

.pastel-divider__note {
  margin-top: 1.25rem;
  font-size: .68rem;
  color: var(--muted);
  letter-spacing: .08em;
}

.pastel-swatches {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .7rem;
  padding: .45rem .25rem;
}

.pastel-drop {
  width: clamp(44px, 7.1vw, 58px);
  aspect-ratio: 1;
  clip-path: polygon(var(--drop-shape));
  opacity: .88;
  filter: saturate(.86);
  background:
    radial-gradient(46% 44% at 30% 28%, rgba(255,255,255,.56) 0%, rgba(255,255,255,0) 72%),
    radial-gradient(34% 30% at 74% 68%, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 72%),
    radial-gradient(58% 52% at 50% 52%, color-mix(in srgb, var(--drop-base) 72%, #ffffff 28%) 0%, var(--drop-base) 68%, transparent 100%);
  box-shadow:
    0 11px 22px color-mix(in srgb, var(--drop-base) 40%, transparent 60%);
  transform: rotate(var(--drop-rot)) scale(var(--drop-scale));
  position: relative;
  isolation: isolate;
  animation: watercolorFloat var(--drop-speed) ease-in-out infinite;
}

.pastel-drop::before,
.pastel-drop::after {
  content: '';
  position: absolute;
  pointer-events: none;
  clip-path: polygon(var(--drop-bleed-shape));
}

.pastel-drop::before {
  inset: -10px;
  background:
    radial-gradient(74% 68% at 50% 52%, color-mix(in srgb, var(--drop-base) 68%, #ffffff 32%) 0%, transparent 78%),
    radial-gradient(36% 30% at 28% 24%, color-mix(in srgb, var(--drop-base) 78%, #ffffff 22%) 0%, transparent 82%);
  opacity: .3;
  filter: blur(5px);
  z-index: -1;
}

.pastel-drop::after {
  content: none;
}

.pastel-drop--1  { --drop-base: #f1c6d3; --drop-rot: -8deg; --drop-speed: 9.6s; --drop-scale: .98; --drop-shape: 7% 28%, 16% 10%, 34% 4%, 54% 8%, 73% 4%, 89% 18%, 95% 37%, 92% 57%, 96% 75%, 82% 90%, 60% 96%, 40% 92%, 21% 96%, 8% 79%, 4% 57%, 10% 40%; --drop-bleed-shape: 4% 30%, 14% 6%, 35% 2%, 57% 7%, 78% 2%, 95% 18%, 98% 40%, 93% 58%, 98% 79%, 84% 96%, 58% 99%, 38% 94%, 17% 98%, 3% 81%, 1% 56%, 7% 38%; }
.pastel-drop--2  { --drop-base: #ffe2d3; --drop-rot: 5deg;  --drop-speed: 10.4s; --drop-scale: 1.02; --drop-shape: 9% 24%, 24% 9%, 46% 3%, 64% 10%, 82% 7%, 94% 24%, 96% 43%, 89% 61%, 95% 81%, 78% 92%, 57% 97%, 36% 92%, 16% 95%, 5% 76%, 3% 54%, 6% 38%; --drop-bleed-shape: 5% 24%, 21% 5%, 47% 1%, 68% 8%, 86% 5%, 99% 24%, 99% 46%, 92% 63%, 98% 84%, 79% 96%, 56% 99%, 33% 94%, 12% 98%, 1% 77%, 0 52%, 3% 34%; }
.pastel-drop--3  { --drop-base: #c3b0ea; --drop-rot: -4deg; --drop-speed: 9.2s; --drop-scale: .99; --drop-shape: 6% 30%, 17% 12%, 36% 5%, 55% 9%, 76% 5%, 91% 21%, 95% 39%, 92% 55%, 97% 74%, 83% 90%, 63% 95%, 43% 93%, 21% 95%, 9% 80%, 4% 61%, 8% 44%; --drop-bleed-shape: 3% 32%, 15% 8%, 35% 2%, 56% 7%, 79% 3%, 96% 21%, 99% 41%, 96% 57%, 99% 77%, 84% 96%, 62% 99%, 40% 96%, 18% 99%, 6% 82%, 1% 62%, 4% 42%; }
.pastel-drop--4  { --drop-base: #98d8cf; --drop-rot: 7deg;  --drop-speed: 10.8s; --drop-scale: 1.04; --drop-shape: 8% 27%, 20% 9%, 39% 4%, 57% 8%, 74% 6%, 90% 18%, 96% 35%, 91% 54%, 95% 73%, 85% 89%, 67% 96%, 47% 92%, 28% 96%, 11% 85%, 5% 66%, 6% 45%; --drop-bleed-shape: 5% 27%, 18% 6%, 39% 1%, 58% 6%, 76% 4%, 93% 17%, 99% 35%, 94% 54%, 98% 76%, 86% 94%, 67% 99%, 45% 95%, 25% 99%, 8% 86%, 1% 66%, 2% 42%; }
.pastel-drop--5  { --drop-base: #bfdcdb; --drop-rot: -6deg; --drop-speed: 8.8s; --drop-scale: .97; --drop-shape: 6% 25%, 18% 10%, 38% 6%, 57% 9%, 78% 4%, 93% 20%, 95% 38%, 90% 56%, 96% 78%, 81% 92%, 58% 97%, 37% 92%, 19% 95%, 7% 79%, 4% 59%, 7% 39%; --drop-bleed-shape: 2% 25%, 15% 6%, 37% 2%, 58% 6%, 80% 2%, 97% 20%, 99% 39%, 93% 57%, 99% 81%, 82% 97%, 57% 99%, 34% 95%, 15% 99%, 3% 81%, 0 59%, 3% 36%; }
.pastel-drop--6  { --drop-base: #fdf393; --drop-rot: 9deg;  --drop-speed: 9.7s; --drop-scale: 1.01; --drop-shape: 7% 27%, 21% 11%, 41% 4%, 59% 9%, 77% 6%, 92% 23%, 96% 41%, 89% 60%, 94% 79%, 79% 92%, 58% 97%, 39% 92%, 19% 95%, 8% 77%, 5% 56%, 7% 37%; --drop-bleed-shape: 4% 27%, 18% 7%, 41% 1%, 62% 7%, 80% 3%, 95% 22%, 99% 42%, 93% 61%, 98% 82%, 81% 97%, 57% 99%, 37% 95%, 16% 99%, 4% 78%, 1% 56%, 3% 34%; }
.pastel-drop--7  { --drop-base: #d7c9bf; --drop-rot: -9deg; --drop-speed: 11.1s; --drop-scale: .96; --drop-shape: 9% 30%, 22% 12%, 40% 6%, 60% 8%, 79% 6%, 92% 20%, 95% 38%, 91% 57%, 95% 76%, 81% 90%, 61% 95%, 40% 92%, 20% 96%, 8% 81%, 4% 62%, 8% 43%; --drop-bleed-shape: 6% 32%, 20% 8%, 40% 2%, 62% 6%, 81% 3%, 95% 20%, 98% 39%, 95% 58%, 98% 79%, 82% 95%, 60% 99%, 37% 95%, 16% 99%, 4% 82%, 1% 62%, 5% 41%; }
.pastel-drop--8  { --drop-base: #c9d6ce; --drop-rot: 4deg;  --drop-speed: 10.2s; --drop-scale: 1.03; --drop-shape: 6% 24%, 17% 10%, 35% 5%, 55% 8%, 75% 4%, 92% 18%, 96% 35%, 92% 53%, 97% 74%, 83% 91%, 63% 97%, 43% 93%, 23% 95%, 9% 83%, 4% 64%, 6% 43%; --drop-bleed-shape: 2% 24%, 14% 6%, 34% 1%, 57% 6%, 78% 1%, 96% 17%, 99% 35%, 96% 54%, 99% 77%, 84% 96%, 63% 99%, 40% 95%, 20% 99%, 4% 84%, 0 65%, 2% 40%; }
.pastel-drop--9  { --drop-base: #dfd2c4; --drop-rot: -3deg; --drop-speed: 8.9s; --drop-scale: .98; --drop-shape: 8% 26%, 20% 10%, 38% 5%, 58% 8%, 79% 5%, 93% 21%, 95% 39%, 90% 57%, 95% 76%, 80% 91%, 59% 97%, 39% 93%, 19% 95%, 7% 80%, 4% 60%, 7% 41%; --drop-bleed-shape: 5% 26%, 18% 6%, 38% 2%, 59% 6%, 82% 2%, 96% 20%, 99% 40%, 94% 58%, 98% 79%, 80% 96%, 58% 99%, 37% 95%, 16% 99%, 3% 81%, 0 60%, 4% 38%; }
.pastel-drop--10 { --drop-base: #d8ccd8; --drop-rot: 8deg;  --drop-speed: 10.6s; --drop-scale: 1.02; --drop-shape: 7% 29%, 18% 11%, 36% 5%, 56% 8%, 77% 6%, 91% 20%, 96% 37%, 92% 55%, 97% 74%, 84% 90%, 64% 96%, 44% 92%, 22% 95%, 9% 82%, 4% 63%, 8% 44%; --drop-bleed-shape: 3% 31%, 15% 7%, 34% 2%, 57% 6%, 80% 2%, 95% 20%, 99% 38%, 95% 56%, 99% 78%, 85% 95%, 64% 99%, 42% 95%, 18% 99%, 5% 84%, 1% 64%, 4% 42%; }

@keyframes watercolorFloat {
  0%, 100% {
    transform: rotate(var(--drop-rot)) scale(var(--drop-scale)) translateY(0);
  }
  50% {
    transform: rotate(calc(var(--drop-rot) * -1)) scale(calc(var(--drop-scale) * 1.02)) translateY(-2px);
  }
}

/* ── TIMELINE ────────────────────────────── */

.timeline {
  max-width: 420px;
  margin: 3rem auto 0;
  padding: 0 2rem;
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--warm);
  transform: translateX(-50%);
}

.timeline-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.timeline-item:nth-child(odd) .tl-text { text-align: right; }
.timeline-item:nth-child(even) .tl-text { text-align: left; grid-column: 3; }
.timeline-item:nth-child(even) .tl-dot  { grid-column: 2; grid-row: 1; }
.timeline-item:nth-child(even) .tl-empty { display: none; }

.tl-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: .45rem;
  flex-shrink: 0;
}

.tl-empty { display: block; }

.tl-time {
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .2rem;
}

.tl-event {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
}

.tl-note {
  font-size: .72rem;
  color: var(--muted);
}

.timeline-end {
  position: relative;
  text-align: center;
  margin: .25rem 0 0;
}

.timeline-end::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 10px;
  bottom: 0;
  width: 3px;
  background: var(--cream);
  transform: translateX(-50%);
}

.timeline-end .tl-dot {
  position: relative;
  z-index: 1;
  margin: 0 auto .55rem;
}

.timeline-end__text {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0 .6rem;
  background: var(--cream);
}

.timeline-end .tl-note {
  margin-top: .15rem;
}

/* ── LOCATION ────────────────────────────── */

.location-wrapper {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 2rem;
}

.map-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--warm);
  border-radius: 2px;
  overflow: hidden;
  background: var(--warm);
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.nav-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 2rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 1px;
  transition: opacity .25s, transform .2s;
  cursor: pointer;
}

.nav-btn:hover {
  opacity: .85;
  transform: translateY(-1px);
}

.nav-btn--google {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}

.nav-btn--waze {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}

.nav-btn--apple {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}

.nav-btn--onedrive {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}

.nav-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── MUSIC / PLAYLIST ────────────────────── */

.playlist-wrapper {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 2rem;
}

.playlist-card {
  background: var(--warm);
  border: 1px solid rgba(184,154,106,.2);
  border-radius: 2px;
  padding: 2.5rem;
  text-align: center;
}

.playlist-card .section-body {
  margin-bottom: 2rem;
}

.playlist-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 2px;
  max-height: 400px;
}

.playlist-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: opacity .25s;
}

.playlist-link:hover { opacity: .7; }

.playlist-link svg {
  width: 14px;
  height: 14px;
}

/* ── GALLERY / PAGED ALBUM ────────────────── */

.gallery-wrapper {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 2rem;
}

.gallery-card {
  background: var(--warm);
  border: 1px solid rgba(184,154,106,.2);
  border-radius: 2px;
  padding: 2rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}

.gallery-item {
  display: none;
}

.gallery-item.active {
  display: block;
}

.gallery-item.active {
  cursor: pointer;
}

.gallery-img-placeholder {
  aspect-ratio: 1;
  background: rgba(184,154,106,.08);
  border: 1px solid rgba(184,154,106,.15);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--muted);
  overflow: hidden;
}

.gallery-img-placeholder svg {
  width: 32px;
  height: 32px;
  opacity: .4;
}

.gallery-img-placeholder span {
  font-size: .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .5;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1;
  border-radius: 2px;
  display: block;
  transition: transform .35s ease, opacity .35s ease;
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.03);
  opacity: .92;
}

.gallery-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.gallery-paging {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.gallery-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  cursor: pointer;
  transition: background .25s, color .25s, opacity .25s;
}

.gallery-btn:hover {
  background: var(--gold);
  color: #fff;
}

.gallery-btn:disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}

.gallery-btn svg {
  width: 16px;
  height: 16px;
}

.gallery-page-info {
  font-size: .65rem;
  letter-spacing: .15em;
  color: var(--muted);
}

.gallery-lightbox-open {
  overflow: hidden;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(22, 19, 16, .92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}

.gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.gallery-lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.gallery-lightbox__stage {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  touch-action: pan-y;
}

.gallery-lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
}

.gallery-lightbox__figure img {
  width: 100%;
  max-width: 900px;
  max-height: calc(100vh - 10rem);
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

.gallery-lightbox__meta {
  color: rgba(255,255,255,.82);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.gallery-lightbox__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, opacity .25s ease;
}

.gallery-lightbox__nav:hover,
.gallery-lightbox__close:hover {
  background: rgba(255,255,255,.14);
}

.gallery-lightbox__nav:disabled {
  opacity: .28;
  cursor: default;
}

.gallery-lightbox__nav svg {
  width: 20px;
  height: 20px;
}

/* ── PHOTO ALBUM ─────────────────────────── */

/* ── PHOTO ALBUM ─────────────────────────── */

.album-wrapper {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 2rem;
}

.album-card {
  background: var(--warm);
  border: 1px solid rgba(184,154,106,.2);
  border-radius: 2px;
  padding: 3.5rem 2.5rem;
  text-align: center;
}

.album-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.5rem;
  color: var(--gold);
}

.album-card .section-body {
  margin-bottom: 2rem;
}

.album-share-buttons {
  margin-top: .25rem;
}

.album-share-buttons .nav-btn--google,
.album-share-buttons .nav-btn--apple,
.album-share-buttons .nav-btn--onedrive {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}

.album-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 2.8rem;
  background: var(--gold);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .25em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 1px;
  transition: opacity .25s, transform .2s;
}

.album-btn:hover {
  opacity: .85;
  transform: translateY(-1px);
}

.album-btn svg {
  width: 14px;
  height: 14px;
}

.album-note {
  font-size: .68rem;
  color: var(--muted);
  margin-top: 1.2rem;
}

.album-multilang {
  margin-top: 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.album-multilang__text {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
  max-width: 340px;
}

.album-multilang__divider {
  color: var(--gold);
  opacity: .5;
  font-size: .9rem;
  line-height: 1;
}

/* ── RSVP ────────────────────────────────── */

.rsvp-card {
  background: var(--warm);
  border: 1px solid rgba(184,154,106,.2);
  border-radius: 2px;
  padding: 3.5rem 2rem;
  max-width: 500px;
  margin: 0 auto;
}

.rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 2rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  text-align: left;
}

.form-group label {
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.form-group input,
.form-group select {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(184,154,106,.4);
  padding: .6rem 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: .82rem;
  color: var(--dark);
  outline: none;
  transition: border-color .25s;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
}

.form-group input::placeholder { color: var(--muted); }

.form-group input:focus,
.form-group select:focus {
  border-color: var(--gold);
}

.btn {
  display: inline-block;
  margin-top: .8rem;
  padding: .9rem 2.8rem;
  background: var(--gold);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .25em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: opacity .25s, transform .2s;
  border-radius: 1px;
  align-self: center;
}

.btn:hover { opacity: .85; transform: translateY(-1px); }

/* ── HONEYMOON FUND ─────────────────────── */

.gift-wrapper {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 2rem;
}

.gift-card {
  background: var(--warm);
  border: 1px solid rgba(184,154,106,.2);
  border-radius: 2px;
  padding: 2.3rem 2rem;
  text-align: center;
}

.gift-btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 2.2rem;
  background: var(--gold);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 1px;
  transition: opacity .25s, transform .2s;
}

.gift-btn:hover {
  opacity: .87;
  transform: translateY(-1px);
}

.gift-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.gift-payment-note {
  margin-top: .95rem;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .58;
}

.gift-qr {
  display: block;
  margin: 1.6rem auto 0;
  width: 160px;
  height: 160px;
  border-radius: 12px;
  object-fit: contain;
}

/* ── FOOTER ──────────────────────────────── */

footer {
  padding: 4rem 2rem;
  text-align: center;
}

.footer-names {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--gold);
  margin-bottom: .5rem;
}

.footer-note {
  font-size: .65rem;
  letter-spacing: .15em;
  color: var(--muted);
}

/* ── RSVP SNACKBAR ───────────────────────── */

.rsvp-snackbar {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%) translateY(18px);
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .8rem .7rem 1rem;
  width: min(92vw, 560px);
  background: rgba(44,40,36,.58);
  color: #fff;
  border: 1px solid rgba(184,154,106,.35);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
  z-index: 1200;
}

.rsvp-snackbar.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  animation: snackbarBlink 2.4s ease-in-out infinite;
}

.rsvp-snackbar__text {
  font-size: .67rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  flex: 1;
}

.rsvp-snackbar__action {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .45rem .75rem;
  cursor: pointer;
}

.rsvp-snackbar__close {
  border: none;
  background: transparent;
  color: rgba(255,255,255,.75);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .1rem;
}

.rsvp-snackbar__close:hover,
.rsvp-snackbar__action:hover {
  opacity: .85;
}

/* ── ANIMATIONS ──────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scrollPulse {
  0%, 100% { opacity: .4; transform: scaleY(1); }
  50%       { opacity: 1;  transform: scaleY(1.15); }
}

@keyframes snackbarBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .86; }
}

/* ── REVEAL ON SCROLL ────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── RESPONSIVE ──────────────────────────── */

@media (max-width: 520px) {
  .form-row { grid-template-columns: 1fr; }

  .pastel-divider {
    margin-top: 3rem;
    padding: 0 1.25rem;
  }

  .pastel-swatches {
    flex-wrap: wrap;
    gap: .6rem;
    max-width: 320px;
    margin: 0 auto;
  }

  .pastel-drop {
    width: clamp(40px, 12vw, 48px);
  }

  .timeline { padding-left: 1.5rem; }
  .timeline::before { left: 4.5px; transform: none; }
  .timeline-item { grid-template-columns: 9px 1fr; gap: 0 1rem; }
  .timeline-item .tl-dot,
  .timeline-item:nth-child(even) .tl-dot  { grid-column: 1; grid-row: 1; justify-self: center; }
  .timeline-item .tl-text,
  .timeline-item:nth-child(odd) .tl-text,
  .timeline-item:nth-child(even) .tl-text { grid-column: 2; grid-row: 1; text-align: left !important; }
  .timeline-item .tl-empty,
  .timeline-item:nth-child(even) .tl-empty { display: none; }

  .timeline-end {
    text-align: left;
    margin-left: 0;
  }

  .timeline-end::before {
    left: 4.5px;
    transform: none;
  }

  .timeline-end .tl-dot {
    margin: 0 0 .55rem;
  }

  .timeline-end__text {
    display: block;
    margin-left: calc(9px + 1rem);
    padding: 0;
    background: transparent;
  }

  .nav-buttons { flex-direction: column; align-items: center; }
  .album-share-buttons .nav-btn {
    width: 100%;
    justify-content: center;
  }

  .map-container { aspect-ratio: 4 / 3; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }

  .gallery-lightbox {
    padding: 1rem;
  }

  .gallery-lightbox__stage {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .gallery-lightbox__figure img {
    max-height: calc(100vh - 8rem);
  }

  .gallery-lightbox__nav {
    position: absolute;
    bottom: 1.25rem;
    z-index: 1;
  }

  .gallery-lightbox__nav--prev {
    left: 1rem;
  }

  .gallery-lightbox__nav--next {
    right: 1rem;
  }

  .gift-btn {
    width: 100%;
    justify-content: center;
  }

  .rsvp-snackbar {
    bottom: .8rem;
    padding: .65rem .7rem;
  }

  .rsvp-snackbar__text {
    font-size: .6rem;
    letter-spacing: .1em;
  }
}