/* ============================================================
   Wedding Invite — mobile-first styles
   ============================================================ */
:root {
  --maroon: #5a0f14;
  --maroon-deep: #2a0a0a;
  --gold: #c9973f;
  --gold-light: #e6c98a;
  --cream: #f6ead6;
  --ink: #4a2c17;
  --fade-couple: 1400ms;
  --fade-text: 1200ms;
}

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

html {
  /* Desktop may settle near a section; touch devices opt out below because
     browser-chrome viewport changes make native snapping feel jumpy. */
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}

html, body {
  background: var(--maroon-deep);
  font-family: "Cormorant Garamond", Georgia, serif;
  -webkit-text-size-adjust: 100%;
}

/* Scroll locked while the curtain intro is playing */
body.no-scroll {
  height: 100svh;
  overflow: hidden;
}

/* ============ STAGE 1: intro ============ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--maroon-deep) url("assets/curtains-closed.jpg") center / cover no-repeat;
  transition: opacity 900ms ease;
}
.intro.intro--done {
  opacity: 0;
  pointer-events: none;
}

.curtain-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- CSS fallback curtains --- */
.css-curtains {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.css-curtains[hidden] { display: none; }
.curtain-panel {
  position: absolute;
  top: 0;
  height: 100%;
  width: 62%;
  object-fit: cover;
  will-change: transform;
}
.curtain-panel--left  { left: 0;  object-position: left center; }
.curtain-panel--right { right: 0; object-position: right center; }
.css-curtains.open .curtain-panel--left  { animation: slide-left  2600ms cubic-bezier(.65,.05,.35,1) forwards; }
.css-curtains.open .curtain-panel--right { animation: slide-right 2600ms cubic-bezier(.65,.05,.35,1) forwards; }
@keyframes slide-left  { to { transform: translateX(-108%); } }
@keyframes slide-right { to { transform: translateX(108%); } }

/* --- tap to open --- */
.tap-open {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  color: var(--gold-light);
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tap-open[hidden] { display: none; }
.tap-open__ring {
  width: 74px;
  height: 74px;
  border: 2px solid var(--gold-light);
  border-radius: 50%;
  position: relative;
  animation: pulse 2s ease-out infinite;
}
.tap-open__ring::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-35%, -50%);
  border-left: 18px solid var(--gold-light);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(230, 201, 138, 0.45); }
  100% { box-shadow: 0 0 0 22px rgba(230, 201, 138, 0); }
}
.tap-open__label {
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}

/* --- skip --- */
.skip-intro {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(230, 201, 138, 0.55);
  color: var(--gold-light);
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-tap-highlight-color: transparent;
}

/* ============ SCREEN 1: invitation hero ============ */
.invite {
  position: relative;
  height: 100svh;
  overflow: hidden;
  scroll-snap-align: start;
  visibility: hidden;
}
.invite.invite--visible { visibility: visible; }

/* Same frame + scaling rules as .curtain-video so the
   video -> image handoff keeps an identical scale. */
.invite__bg,
.invite__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.invite__bg img {
  object-fit: cover;
  object-position: center;
  background: var(--maroon-deep);
}

.invite__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* text + couple anchored together at the bottom */
  padding: 0 8vw;
  text-align: center;
}

/* --- text block: fixed gap just above the couple, same motion as it --- */
.invite__text {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--fade-text) ease, transform var(--fade-text) ease;
  margin-bottom: 1.25svh; /* fixed distance above the couple */
  color: var(--ink);
  max-width: 26rem;
}
.invite__text.shown {
  opacity: 1;
  transform: translateY(0);
}

.bismillah-img {
  display: block;
  line-height: 0;
  margin-bottom: 0; /* block is bottom-anchored: less space below = calligraphy sits lower */
  transform: translateY(0.7svh);
}

/* Tight spacing around the divider under the calligraphy */
.invite__text .divider { margin: 0.1rem auto; }
.bismillah-img img {
  width: min(52vw, 14.5rem); /* slightly narrower so it breathes above the invitation copy */
  height: auto;
  filter: drop-shadow(0 1px 4px rgba(90, 15, 20, 0.18));
}

.families {
  font-size: clamp(0.82rem, 3.2vw, 1rem);
  line-height: 1.65;
  letter-spacing: 0.08em;
  font-style: italic;
  color: #6b4a2a;
  margin: 0.1rem 0 1.15rem; /* tight under the calligraphy, clear gap before the names */
}

.names {
  font-family: "Tangerine", "Cormorant Garamond", cursive;
  font-weight: 700;
  color: var(--maroon);
  font-size: clamp(2rem, 8vw, 2.9rem); /* Tangerine is compact; renders visually smaller */
  line-height: 1.02;
  margin: 0.3rem 0 0.15rem;
  display: flex;
  flex-direction: column; /* full names stack: groom / & / bride */
  align-items: center;
}
.names__amp {
  color: var(--gold);
  font-size: 0.6em;
  line-height: 1.3;
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--gold);
  font-size: 0.72rem;
  margin: 0.3rem auto;
  width: 58%;
}
.divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 45%, var(--gold) 55%, transparent);
  opacity: 0.75;
}
.divider--flourish { font-size: 0.85rem; }

/* --- couple: bottom ~42% of the screen --- */
.couple {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition: opacity var(--fade-couple) ease, transform var(--fade-couple) ease;
  line-height: 0;
}
.couple.shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.couple img {
  height: 43svh;
  max-width: 88vw;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(42, 10, 10, 0.35));
}

/* --- falling rose petals (foreground) --- */
.petals {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.petal {
  position: absolute;
  top: -6vh;
  width: 14px;
  height: 11px;
  background: radial-gradient(ellipse at 30% 30%, #8e2430, #5a0f14 70%);
  border-radius: 62% 38% 58% 42% / 55% 60% 40% 45%;
  opacity: 0;
  animation: petal-fall linear infinite;
}
.petal:nth-child(1) { left: 8%;  animation-duration: 11s;   animation-delay: 0s;    --s: 0.85; }
.petal:nth-child(2) { left: 22%; animation-duration: 14s;   animation-delay: 3.2s;  --s: 0.7; }
.petal:nth-child(3) { left: 34%; animation-duration: 12s;   animation-delay: 7.1s;  --s: 1; }
.petal:nth-child(4) { left: 47%; animation-duration: 15s;   animation-delay: 1.6s;  --s: 0.6; }
.petal:nth-child(5) { left: 58%; animation-duration: 11.5s; animation-delay: 5.4s;  --s: 0.9; }
.petal:nth-child(6) { left: 69%; animation-duration: 13s;   animation-delay: 9s;    --s: 0.75; }
.petal:nth-child(7) { left: 79%; animation-duration: 12.5s; animation-delay: 2.4s;  --s: 1.05; }
.petal:nth-child(8) { left: 88%; animation-duration: 14.5s; animation-delay: 6.3s;  --s: 0.65; }
.petal:nth-child(9) { left: 15%; animation-duration: 13.5s; animation-delay: 10.2s; --s: 0.8; }
@keyframes petal-fall {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(var(--s, 1)); }
  6%   { opacity: 0.9; }
  25%  { transform: translate(3vw, 27vh) rotate(160deg) scale(var(--s, 1)); }
  50%  { transform: translate(-2.5vw, 54vh) rotate(300deg) scale(var(--s, 1)); }
  75%  { transform: translate(3.5vw, 80vh) rotate(480deg) scale(var(--s, 1)); }
  94%  { opacity: 0.85; }
  100% { opacity: 0; transform: translate(-1vw, 108vh) rotate(620deg) scale(var(--s, 1)); }
}

/* --- scroll-down hint --- */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 4;
  opacity: 0;
  transition: opacity 900ms ease;
}
.scroll-hint.shown { opacity: 1; }
.scroll-hint__chevron {
  display: block;
  width: 18px;
  height: 18px;
  border-right: 2px solid var(--gold-light);
  border-bottom: 2px solid var(--gold-light);
  transform: rotate(45deg);
  filter: drop-shadow(0 1px 3px rgba(42, 10, 10, 0.6));
  animation: hint-bob 2s ease-in-out infinite;
}
@keyframes hint-bob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(4px, 4px); }
}

/* ============ SCREEN 2: The Invitation ============ */
/* Top border decorations: rose garland + hanging lanterns, echoing page 1 */
.invitation__decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.decor-garland {
  position: absolute;
  top: -7vw; /* tucked up so only the lower sprays reach into the page */
  left: 0;
  right: 0;
  line-height: 0;
}
.decor-garland img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(42, 10, 10, 0.22));
}
.decor-lantern {
  position: absolute;
  top: 0;
  line-height: 0;
}
.decor-lantern img {
  width: clamp(84px, 24vw, 140px);
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(42, 10, 10, 0.3));
}
.decor-lantern--left { left: 3vw; }
.decor-lantern--right { right: 3vw; }
.decor-lantern--right img { transform: scaleX(-1); }

.invitation {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: max(10svh, 17vw) 9vw 7svh; /* top clears the garland border */
  text-align: center;
  color: var(--ink);
}
.invitation .divider { width: 42%; max-width: 11rem; }

/* Hosts: groom's parents | together with | bride's parents */
.hosts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vw;
  width: 100%;
  color: var(--ink);
}
.hosts__side { flex: 1; min-width: 0; }
.hosts__names {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(0.95rem, 3.8vw, 1.25rem);
  color: var(--maroon);
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hosts__names-amp {
  color: var(--gold);
  font-size: 0.85em;
  line-height: 1.15;
}
.hosts__label {
  font-size: clamp(0.6rem, 2.4vw, 0.72rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.35rem;
}
.hosts__joiner {
  flex: none;
  font-style: italic;
  font-size: clamp(0.8rem, 3.2vw, 0.95rem);
  color: #6b4a2a;
  line-height: 1.4;
}
.request {
  max-width: 22rem;
  font-style: italic;
  font-size: clamp(0.9rem, 3.6vw, 1.1rem);
  line-height: 1.7;
  color: #6b4a2a;
}
.hosts__couple {
  font-family: "Tangerine", "Cormorant Garamond", cursive;
  font-weight: 700;
  font-size: clamp(1.9rem, 8vw, 2.7rem);
  color: var(--maroon);
  display: flex;
  flex-direction: column; /* groom / & / bride, each on its own line */
  align-items: center;
  line-height: 1.05;
}
.hosts__amp { color: var(--gold); font-size: 0.65em; }

/* --- bottom tagline: ∞ Two families ♥ one beautiful beginning --- */
.tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45em;
  margin-top: 0.2rem;
  font-style: italic;
  font-size: clamp(0.85rem, 3.4vw, 1.05rem);
  color: #6b4a2a;
}
.tagline__icon {
  color: var(--maroon);
  font-style: normal;
  font-size: 1.25em;
  line-height: 1;
  transform: translateY(1px);
}
.tagline__text + .tagline__icon { margin-left: 0.35em; }

/* ============ SCREEN 3: Save the Date ============ */
.section {
  position: relative;
  min-height: 100svh;
  scroll-snap-align: start;
  overflow: hidden;
  background: var(--cream);
}
.section__bg,
.section__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.section__bg img {
  object-fit: cover;
  object-position: center;
}
.section__title {
  font-family: "Tangerine", "Cormorant Garamond", cursive;
  font-weight: 700;
  color: var(--maroon);
  font-size: clamp(2.4rem, 10vw, 3.4rem);
  margin-bottom: 0.2rem;
}
.section--invitation .section__title { transform: translateY(-2.5svh); } /* title rides higher */
.section--savedate .section__title { margin-top: 5svh; } /* title and calendar sit a little lower */
.section--rsvp .section__title { margin-top: 10svh; } /* title sits lower */

.savedate {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 9svh 7vw 7svh;
  text-align: center;
  color: var(--ink);
  transform: translateY(1.75svh);
}

/* --- Quran quote --- */
.quote {
  max-width: 20.9rem; /* 19rem + 10% */
  color: #6b4a2a;
}
.quote p {
  font-size: clamp(0.86rem, 3.4vw, 1.05rem);
  line-height: 1.7;
  font-style: italic;
}
.quote p::before { content: "\201C"; color: var(--gold); }
.quote p::after  { content: "\201D"; color: var(--gold); }
.quote cite {
  display: block;
  margin-top: 0.4rem;
  font-style: normal;
  font-size: clamp(0.72rem, 2.9vw, 0.85rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --- calendar --- */
.calendar-card {
  width: min(88vw, 22rem);
  background: rgba(252, 246, 233, 0.82);
  border: 1px solid rgba(201, 151, 63, 0.5);
  border-radius: 14px;
  padding: 0.9rem 0.9rem 0.7rem;
  box-shadow: 0 10px 28px rgba(42, 10, 10, 0.18);
  backdrop-filter: blur(3px);
}
.calendar-card__month {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 4.2vw, 1.3rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 0.55rem;
}
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.calendar__dow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold);
  padding: 0.25rem 0;
}
.calendar__day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.8rem, 3.2vw, 0.95rem);
  color: var(--ink);
  border-radius: 50%;
}
.calendar__day--event {
  background: var(--maroon);
  color: var(--cream);
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(252, 246, 233, 0.9), 0 0 0 4px var(--gold);
  animation: day-glow 2.6s ease-in-out infinite;
}
@keyframes day-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(252,246,233,.9), 0 0 0 4px var(--gold); }
  50%      { box-shadow: 0 0 0 2px rgba(252,246,233,.9), 0 0 0 4px var(--gold), 0 0 14px 2px rgba(201,151,63,.55); }
}

/* --- legend --- */
.legend {
  list-style: none;
  margin-top: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
}
.legend li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: clamp(0.78rem, 3.1vw, 0.92rem);
  color: #5f3a1e;
}
.legend__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--maroon);
  box-shadow: 0 0 0 1.5px var(--gold);
  transform: translateY(-1px);
}
.legend__name { font-weight: 600; color: var(--maroon); }

/* --- countdown (cream card so it reads over the busy background) --- */
.countdown {
  background: rgba(252, 246, 233, 0.82);
  border: 1px solid rgba(201, 151, 63, 0.5);
  border-radius: 14px;
  padding: 0.8rem 0.9rem 0.9rem;
  box-shadow: 0 10px 28px rgba(42, 10, 10, 0.18);
  backdrop-filter: blur(3px);
  transform: translateY(1.25svh);
}
.countdown__label {
  font-size: clamp(0.78rem, 3.1vw, 0.95rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--maroon);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(88vw, 22rem);
}
.countdown__cell {
  background: var(--maroon);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 0.55rem 0.2rem 0.45rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 6px 16px rgba(42, 10, 10, 0.25);
}
.countdown__num {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 6vw, 1.8rem);
  line-height: 1;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}
.countdown__unit {
  margin-top: 0.25rem;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.85;
}
.countdown--done .countdown__grid { display: none; }
.countdown--done .countdown__label {
  font-size: clamp(1rem, 4.4vw, 1.3rem);
  color: var(--maroon);
  text-transform: none;
  letter-spacing: 0.06em;
}

/* ============ SCREEN 4: Celebration Details ============ */
/* Tall section (height = tiles x 100svh via --tile-count) with a sticky
   stable-height stage: browser address-bar changes cannot shift its progress. */
.section--events {
  height: calc(var(--tile-count, 3) * 100svh);
  background: none;
  /* sticky children don't stick inside an overflow:hidden ancestor */
  overflow: visible;
  /* This is a multi-screen stage, not a single snap destination. */
  scroll-snap-align: none;
}
.events-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.events__decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.decor-garland--bottom {
  position: absolute;
  bottom: -7vw;
  top: auto;
  left: 0;
  right: 0;
  line-height: 0;
}
.decor-garland--bottom img {
  width: 100%;
  height: auto;
  transform: scaleY(-1); /* garland mirrored to bloom upward from the bottom */
  filter: drop-shadow(0 -4px 10px rgba(42, 10, 10, 0.22));
}

.events {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* group anchors toward the bottom */
  gap: 0.6rem;
  padding: 7svh 7vw 10svh;
  text-align: center;
  color: var(--ink);
}
.events .divider { width: 40%; max-width: 10rem; }

/* Header pinned at a fixed offset relative to the background view,
   independent of window height */
.events__header {
  position: absolute;
  top: 18svh;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

/* --- stage: tiles stack here, one visible at a time --- */
.tile-stage {
  position: relative;
  /* tile keeps the frame artwork's 2:3 aspect; cap width so it fits 56svh */
  width: min(88vw, 24rem, 37.3svh);
  height: 56svh;
  margin-top: 0.4rem;
}

/* --- designer tile: generated arch frame artwork --- */
.tile {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  aspect-ratio: 2 / 3; /* matches the frame image (840x1260) */
  /* padding %s are width-based (h = 1.5w): top 66%w keeps clear space
     under the medallion, bottom 33%w = 22% of height */
  padding: 66% 16% 33%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* content anchors to the tile bottom */
  filter: drop-shadow(0 14px 30px rgba(42, 10, 10, 0.42));
  text-align: left;
  /* hidden by default; JS activates one at a time */
  opacity: 0;
  transform: translateY(calc(-50% + 44px)) scale(0.96);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(.22,.8,.3,1);
  pointer-events: none;
}
/* ornate gold arch frame artwork (includes its own parchment fill) */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/tile-frame.png") center / 100% 100% no-repeat;
  z-index: 1;
  pointer-events: none;
}
@supports (background: image-set(url("a.webp") type("image/webp"))) {
  .tile::after {
    background-image: image-set(
      url("assets/tile-frame.webp") type("image/webp"),
      url("assets/tile-frame.png") type("image/png")
    );
  }
}
.tile > * { position: relative; z-index: 2; }
.tile--active {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}
.tile--passed {
  transform: translateY(calc(-50% - 44px)) scale(0.96);
}

/* medallion artwork hanging at the arch peak */
.tile__medallion {
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translate(-50%, 15%); /* dropped by 15% of its own size */
  width: clamp(6rem, 40%, 8.5rem);
  line-height: 0;
  filter: drop-shadow(0 5px 11px rgba(42, 10, 10, 0.4));
}
.tile__medallion img { width: 100%; height: auto; }
/* text fallback when no medallion image is configured */
.tile__medallion--text {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #e6c98a, var(--gold) 62%, #8a5f1e);
  color: var(--maroon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(42, 10, 10, 0.35), inset 0 1px 2px rgba(255,255,255,.5);
}
.tile__name {
  font-family: "Tangerine", "Cormorant Garamond", cursive;
  font-weight: 700;
  font-size: clamp(1.75rem, 7.6vw, 2.3rem);
  line-height: 1.02;
  color: var(--maroon);
  text-align: center;
  margin: 0 0 0.15rem;
}
.tile__flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--gold);
  font-size: 0.72rem;
  margin-bottom: 0.7rem;
}
.tile__flourish::before,
.tile__flourish::after {
  content: "";
  width: 3rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.tile__flourish::after {
  background: linear-gradient(270deg, transparent, var(--gold));
}
.tile__row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.3rem 0;
  border-bottom: 1px dashed rgba(201, 151, 63, 0.3);
}
.tile__row:last-of-type { border-bottom: none; }
.tile__label {
  flex: none;
  width: 3.8rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.tile__value {
  font-size: clamp(0.98rem, 4vw, 1.12rem);
  color: var(--ink);
  font-weight: 600; /* heaviest loaded Cormorant weight */
}
.tile__note {
  margin: 0.5rem 0 0;
  font-size: clamp(0.86rem, 3.4vw, 0.98rem);
  font-style: italic;
  line-height: 1.5;
  color: #6b4a2a;
}
.tile__note--link {
  display: block;
  color: #6b4a2a;
  text-decoration: underline dotted rgba(201, 151, 63, 0.8);
  text-underline-offset: 3px;
}
.tile__map {
  display: block;
  width: fit-content;
  margin: 0.7rem auto 0;
  padding: 0.42rem 1.1rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--maroon);
  color: var(--gold-light);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.tile__map:active { opacity: 0.85; }

/* --- progress dots --- */
.tile-dots {
  display: flex;
  gap: 9px;
  margin-top: 0.3rem;
}
.tile-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: transparent;
  transition: background 300ms ease, transform 300ms ease;
}
.tile-dots span.active {
  background: var(--gold);
  transform: scale(1.25);
}

/* ============ SCREEN 5: RSVP ============ */
.rsvp {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 8svh 8vw;
  text-align: center;
  color: var(--ink);
}
.rsvp .divider { width: 40%; max-width: 10rem; }
.rsvp__intro {
  max-width: 88vw;
  font-style: italic;
  font-size: clamp(1.05rem, 4.5vw, 1.3rem);
  line-height: 1.55;
  color: #6b4a2a;
}
.rsvp__deadline {
  font-size: clamp(0.82rem, 3.2vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--maroon);
  margin-top: 0.15rem;
}
.rsvp__deadline[hidden] { display: none; }

/* --- envelope + wax seal --- */
.rsvp-envelope {
  line-height: 0;
  margin: 0.2rem 0 0.1rem;
}
.rsvp-envelope img {
  width: min(46vw, 13rem);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(42, 10, 10, 0.3));
  transform: rotate(-2.5deg);
}
.rsvp-seal {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%);
  width: clamp(3.4rem, 17vw, 4.4rem);
  line-height: 0;
  filter: drop-shadow(0 5px 10px rgba(42, 10, 10, 0.4));
  z-index: 1;
}
.rsvp-seal img { width: 100%; height: auto; }

/* --- form card --- */
.rsvp-party {
  text-align: center;
  font-size: clamp(0.82rem, 3.3vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--maroon);
  background: rgba(201, 151, 63, 0.14);
  border: 1px dashed rgba(201, 151, 63, 0.5);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
}
.rsvp-card {
  position: relative; /* anchors the wax seal */
  width: min(88vw, 23rem);
  background: rgba(252, 246, 233, 0.5); /* semi-transparent over the parchment bg */
  border: 1px solid rgba(201, 151, 63, 0.55);
  border-radius: 14px;
  padding: 2.5rem 1.1rem 1rem; /* top makes room for the seal */
  box-shadow: 0 10px 28px rgba(42, 10, 10, 0.2);
  backdrop-filter: blur(3px);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
  margin-top: 1.6rem; /* room for the seal's overhang above the card */
}
.rsvp-attend { display: flex; gap: 0.5rem; }
.rsvp-attend__opt { flex: 1; justify-content: flex-start; }
.rsvp-attend__opt input { accent-color: var(--maroon); }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.field__label em {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.04em;
  color: #a58a5c;
}
.rsvp-card input,
.rsvp-card textarea {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid rgba(201, 151, 63, 0.45);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  outline: none;
  width: 100%;
}
.rsvp-card input:focus,
.rsvp-card textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 151, 63, 0.18);
}
.rsvp-card textarea { resize: vertical; }

/* --- event checkboxes --- */
.rsvp-events { display: flex; flex-direction: column; gap: 0.35rem; }
.rsvp-event {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0.45rem 0.6rem;
  background: rgba(255, 253, 248, 0.75);
  border: 1px solid rgba(201, 151, 63, 0.35);
  border-radius: 8px;
}
.rsvp-event input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--maroon);
  flex: none;
}

/* --- submit --- */
.rsvp-submit {
  margin-top: 0.2rem;
  padding: 0.65rem 1rem;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: linear-gradient(180deg, #7a1e22, var(--maroon));
  border: 1px solid var(--gold);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(42, 10, 10, 0.3);
}
.rsvp-submit:active { transform: translateY(1px); }
.rsvp-submit:disabled { opacity: 0.6; cursor: default; }

.rsvp-status {
  min-height: 1.2em;
  font-size: clamp(1rem, 4vw, 1.15rem);
  font-weight: 600;
  font-style: italic;
  text-align: center;
  margin-top: 0.1rem;
}
.rsvp-status--ok { color: #3e6b3a; }
.rsvp-status--err { color: #8a1f1f; }

/* --- hotel booking link --- */
.rsvp-hotel {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.75rem;
  padding: 0.55rem 1.2rem;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  background: rgba(252, 246, 233, 0.9);
  color: var(--maroon);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(42, 10, 10, 0.2);
  backdrop-filter: blur(3px);
}
.rsvp-hotel[hidden] { display: none; }
.rsvp-hotel:active { transform: translateY(1px); }

/* ============ Finale ============ */
/* Full-bleed composed artwork page */
.section--finale {
  background: #2a0a0a;
}

/* ============ Footer ============ */
.footer {
  background: linear-gradient(180deg, #3a0d10, var(--maroon-deep));
  border-top: 1px solid rgba(201, 151, 63, 0.4);
  padding: 1.3rem 5vw calc(1.3rem + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4vw;
}
.footer__half {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.footer__half--left { align-items: flex-start; text-align: left; }
.footer__half--right { align-items: flex-end; text-align: right; }
.footer__help {
  font-size: clamp(0.72rem, 2.9vw, 0.85rem);
  font-style: italic;
  color: var(--gold-light);
  opacity: 0.9;
}
.footer__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(201, 151, 63, 0.12);
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.footer__whatsapp[hidden] { display: none; }
.footer__whatsapp:active { transform: translateY(1px); }
.footer__names {
  font-family: "Tangerine", "Cormorant Garamond", cursive;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--gold);
  opacity: 0.85;
}
.footer__copy {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--gold-light);
  opacity: 0.55;
  margin-top: -0.2rem;
}

.tap-open--loading {
  opacity: 0.6;
  pointer-events: none;
}
.tap-open--loading .tap-open__ring {
  animation-duration: 1s; /* faster pulse reads as "working" */
}

/* ============ larger screens ============ */
@media (min-width: 700px) {
  .invite__text { margin-bottom: 1.5svh; }
  .couple img { height: 45svh; max-width: 60vw; }
}

/* Mobile browsers resize `dvh` as their address bar appears or collapses.
   Let phone guests scroll freely: it avoids a section snapping backward when
   that browser UI changes height, while the fixed event stage stays smooth. */
@media (hover: none) and (pointer: coarse) {
  html {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }

  .section { scroll-snap-align: none; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro, .invite__text, .couple, .tile { transition-duration: 1ms; }
  .css-curtains.open .curtain-panel--left,
  .css-curtains.open .curtain-panel--right { animation-duration: 1ms; }
  .tap-open__ring { animation: none; }
  .petal { animation: none; opacity: 0; }
  .scroll-hint__chevron { animation: none; }
}