:root {
  /* Core surfaces */
  --invitation-cream: #f7f2e9;
  --invitation-paper: #fffcf5;
  --invitation-ivory: #fffcf6;

  /* Text */
  --invitation-ink: #241f28;
  --invitation-muted: #8a7f76;

  /* Accents: muted lavender + deep plum/violet */
  --invitation-lavender: #a48fc4;
  --invitation-lavender-soft: #dcd0e8;
  --invitation-plum: #5c4d73;
  --invitation-plum-deep: #453a5c;

  /* Legacy alias kept for the not-found page, same color role as --invitation-plum */
  --invitation-burgundy: #5c4d73;

  /* Shadows: soft, warm neutral (not cool gray) */
  --invitation-shadow: rgba(58, 46, 38, 0.16);
  --invitation-shadow-strong: rgba(50, 40, 34, 0.24);
  --invitation-shadow-soft: rgba(58, 46, 38, 0.09);

  --invitation-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --invitation-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Opt out of browser auto darkening so the ivory invitation scene keeps
   designed contrast under system Dark theme (Samsung Internet). */
:root, html, body {
  color-scheme: only light;
}

@media (prefers-color-scheme: dark) {
  :root, html, body {
    color-scheme: only light !important;
  }
}

html {
  scroll-behavior: smooth;
}

html:has(body.invitation-shell) {
  height: 100%;
}

body.invitation-shell {
  margin: 0;
  min-height: 100%;
  /* Measured header is ~65px at desktop; the old 5.75rem (~92px) made
     .home-hero's min-height undershoot the viewport by ~27px, so the next
     section heading peeked under the quick-action row at 100% zoom. */
  --invitation-header-offset: 4.25rem;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.9), transparent 24rem),
    radial-gradient(circle at 88% 14%, rgba(164, 143, 196, 0.16), transparent 22rem),
    radial-gradient(circle at 50% 96%, rgba(92, 77, 115, 0.07), transparent 26rem),
    linear-gradient(150deg, #fbf7ef 0%, #f1e9db 100%);
  color: var(--invitation-ink);
  font-family: var(--font-app, "Cinzel", "Cormorant Garamond", Georgia, "Times New Roman", serif);
  forced-color-adjust: none;
}

.invitation-page .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The personal invitation intro (greeting + 3D invitation) is a full-screen
   ritual: the site header/nav must not be visible until the guest has
   entered the homepage on the other side of the transition. */
body.invitation-personal header {
  display: none;
}

/* With the header hidden there is no header height to reserve; !important
   guards against the mobile header-offset override below, which otherwise
   wins the cascade at narrow widths and would leave a phantom gap. */
body.invitation-personal {
  --invitation-header-offset: 0px !important;
}

/* Composited warm brighten during exit. Opacity avoids repainting the
   multi-layer body gradient throughout the transition. */
body.invitation-personal .invitation-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: rgba(255, 253, 248, 0.72);
  opacity: 0;
  transition: opacity 650ms var(--invitation-ease);
}

body.invitation-personal.is-entering-home .invitation-page::after {
  opacity: 0.42;
}

body.invitation-shell main {
  padding-bottom: 0 !important;
}

/* Minimal, more polished header on the invitation-scene pages only */
body.invitation-shell .site-navbar {
  /* No backdrop-filter: the navbar is static (nothing scrolls behind it),
     so the blur had no visible effect but still cost a compositing layer. */
  background: rgba(255, 252, 246, 0.82);
  border-bottom-color: rgba(164, 143, 196, 0.16);
}

body.invitation-shell .site-brand-mark {
  letter-spacing: 0.03em;
}

body.invitation-shell .site-brand-date {
  color: var(--invitation-lavender);
  opacity: 0.9;
  letter-spacing: 0.07em;
}

.invitation-page {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  padding: 0 1rem clamp(1.5rem, 4vh, 3rem);
  forced-color-adjust: none;
}

.invitation-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 46rem 34rem at 50% 40%, rgba(255, 255, 255, 0.45), transparent 68%);
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    repeating-linear-gradient(0deg, rgba(95, 90, 86, 0.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 30% 20%, rgba(164, 143, 196, 0.05), transparent 18rem);
  mix-blend-mode: multiply;
  forced-color-adjust: none;
}

/* ── Premium editorial homepage hero ── */

/* The base body background above is percentage-positioned relative to the
   full scrollable page height, which is fine for short pages but on the
   tall single-page homepage it means each section scrolls through a
   different, unrelated slice of that gradient — the below-hero sections
   visibly drift from the hero's bright ivory tone into a cooler/tanner
   band lower down. Pin the ambient gradients to the viewport instead (so
   they read the same regardless of scroll position) and bring the base
   tone in line with the hero overlay's ivory (#fffcf6) rather than the
   tanner #f1e9db used elsewhere, so hero and below-hero sections feel like
   one continuous surface. */
body.home-shell {
  /* Exact measured header height so the hero fills the first viewport
     at 100% zoom without the next section peeking underneath. */
  --invitation-header-offset: 65px;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.8), transparent 34rem),
    radial-gradient(circle at 88% 12%, rgba(164, 143, 196, 0.1), transparent 30rem),
    linear-gradient(180deg, #fffcf6 0%, #fbf6ec 100%);
}

@media (min-width: 768px) {
  /* Desktop previously used background-attachment: fixed to pin the
     ambient gradients to the viewport, but fixed-attachment backgrounds
     force the browser to repaint them on every scroll frame (a classic
     desktop scroll-jank source). A fixed-position pseudo-element renders
     the exact same viewport-pinned gradients on its own composited layer
     instead, so scrolling stays paint-free. */
  body.home-shell {
    background: #fbf6ec;
  }

  body.home-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.8), transparent 34rem),
      radial-gradient(circle at 88% 12%, rgba(164, 143, 196, 0.1), transparent 30rem),
      linear-gradient(180deg, #fffcf6 0%, #fbf6ec 100%);
  }
}

body.home-shell .invitation-page {
  padding: 0;
  overflow-x: hidden;
  overflow-y: visible;
}

body.home-shell .invitation-page::before,
body.home-shell .paper-grain {
  display: none;
}

.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Fill exactly the remaining viewport under the header. The previous
     max(680px, …) floor could still leave a shortfall when the header
     offset was overestimated, and is unnecessary once the offset is
     accurate — the flex column + quick-action row define the bottom. */
  min-height: calc(100svh - var(--invitation-header-offset));
  animation: homeHeroEnter 750ms var(--invitation-ease) both;
  forced-color-adjust: none;
}

@keyframes homeHeroEnter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Homepage-only: trim the header's default bottom margin so the hero feels
   connected to the header instead of floating below a blank band.
   Bootstrap's .mb-3 utility ships as `margin-bottom: 1rem !important`, so a
   plain override here is silently ignored by the cascade — this is the
   exact 16px ivory strip that was still showing under the navbar. */
body.home-shell .site-navbar.mb-3 {
  margin-bottom: 0 !important;
}

/* Large, immersive right-side visual: the invitation photo behaves as the
   hero's atmosphere/background, not a separate thumbnail or card. */
.home-hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Optimized WebP variant of wedding-bg-img.png (same 1672x941 crop,
     ~140KB vs ~2.4MB). The old infinite homeHeroFloat animation kept a
     full-viewport layer composited and animating forever; the static
     scale matches the animation's resting frame so the composition is
     unchanged while the page stays idle-cheap. */
  background-image: url("/images/wedding-bg-desktop.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 68% 42%;
  transform: scale(1.02);
}

/* Arabic locale: localized invitation still-life, slightly zoomed out so
   more of the lavender scene remains visible beside the card. */
body.culture-ar .home-hero-visual {
  background-image: url("/images/wedding-bg-ar.png");
  inset: -6%;
  background-position: 40% 42%;
  transform: none;
}

.home-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    92deg,
    var(--invitation-ivory) 0%,
    rgba(255, 252, 246, 0.97) 30%,
    rgba(255, 252, 246, 0.72) 40%,
    rgba(255, 252, 246, 0.34) 49%,
    rgba(255, 252, 246, 0.08) 57%,
    transparent 66%
  );
}

/* RTL: keep the ivory wash on the text side (inline-start) so the Arabic
   invitation card on the opposite side stays readable. */
body.culture-ar .home-hero-overlay {
  background: linear-gradient(
    268deg,
    var(--invitation-ivory) 0%,
    rgba(255, 252, 246, 0.97) 28%,
    rgba(255, 252, 246, 0.7) 38%,
    rgba(255, 252, 246, 0.28) 48%,
    rgba(255, 252, 246, 0.06) 56%,
    transparent 64%
  );
}

.home-hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: clamp(1.75rem, 4.5vh, 2.75rem);
}

.home-hero-content {
  max-width: 40rem;
}

/* Shared horizontal padding for homepage containers. Keep Bootstrap's
   centered max-width behavior — do NOT left-anchor containers with
   margin-inline: 0 auto (that left a huge empty right gutter). */
.home-hero-inner > .container-xl,
.home-section-inner,
.home-quick-actions-wrap {
  --home-edge-pad: clamp(1.25rem, 3.5vw, 2.5rem);
  padding-inline: var(--home-edge-pad);
}

@media (min-width: 992px) {
  /* Bring hero content close under the header (small, intentional gap only).
     Hero editorial text stays left within its container; lower sections
     remain centered page containers. */
  .home-hero-inner {
    align-items: flex-start;
    padding-top: clamp(0.4rem, 1.25vh, 1rem);
    padding-bottom: clamp(2.5rem, 6vh, 4rem);
  }

  .home-hero-content {
    margin-top: 0;
  }

  .home-countdown-box strong {
    font-size: 2.1rem;
  }
}

/* Wide desktop only: shift the hero editorial column left as one block.
   Does not apply to quick-actions or lower sections. */
@media (min-width: 1200px) {
  .home-hero-content {
    margin-left: -3.75rem;
  }
}

.home-eyebrow {
  position: relative;
  display: inline-block;
  margin-bottom: 1.1rem;
  padding-left: 1.9rem;
  color: var(--invitation-plum);
  font-family: var(--font-app-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.home-eyebrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.35rem;
  height: 1px;
  background: var(--invitation-lavender);
}

.home-title {
  margin: 0 0 1.35rem;
  color: var(--invitation-ink);
  font-family: var(--font-brand, "Plebeya Swash", Georgia, serif);
  font-size: clamp(2.9rem, 6.4vw, 4.75rem);
  font-weight: 400;
  line-height: 1.12;
}

.home-title-name {
  display: block;
}

.home-title-divider {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.55em 0 0.5em;
}

.home-title-divider::before,
.home-title-divider::after {
  content: "";
  display: block;
  height: 1px;
  width: 2.5rem;
  background: linear-gradient(90deg, var(--invitation-lavender-soft), transparent);
}

.home-title-divider::after {
  background: linear-gradient(90deg, transparent, var(--invitation-lavender-soft));
}

.home-title-divider svg {
  flex-shrink: 0;
  color: var(--invitation-lavender);
}

/* Mobile-only invitation frame; desktop keeps the right-side atmosphere layer. */
.home-hero-mobile-frame {
  display: none;
  margin: 0 0 1.35rem;
  padding: 0;
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(255, 252, 246, 0.88);
  box-shadow:
    0 0.65rem 1.5rem rgba(50, 40, 34, 0.1),
    0 0 0 1px rgba(164, 143, 196, 0.16);
  aspect-ratio: 1100 / 619;
}

.home-hero-mobile-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 42%;
  transform: scale(0.94);
  transform-origin: center center;
}

.home-date {
  margin: 0 0 0.55rem;
  color: var(--invitation-plum-deep);
  font-family: var(--font-app-heading);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.home-venue {
  margin: 0 0 1.5rem;
  color: var(--invitation-muted);
  font-family: var(--font-app-heading);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  line-height: 1.65;
}

.home-venue strong {
  display: block;
  color: var(--invitation-ink);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home-venue span {
  display: block;
  text-transform: uppercase;
}

.home-copy {
  max-width: 34ch;
  margin: 0 0 1.9rem;
  color: var(--invitation-ink);
  font-size: 1.05rem;
  line-height: 1.7;
}

.home-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.35rem;
  border-radius: 999px;
  padding: 0 2.15rem;
  font-family: var(--font-app-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  /* box-shadow/filter deliberately excluded: animating them repaints every
     frame. Hover shadow/brightness changes still apply, just instantly. */
  transition:
    transform 220ms var(--invitation-ease-out),
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease;
}

.home-btn-primary {
  border: 1px solid rgba(255, 253, 248, 0.22);
  background: linear-gradient(150deg, var(--invitation-plum) 0%, var(--invitation-plum-deep) 100%);
  box-shadow: 0 1rem 2rem rgba(60, 50, 75, 0.3), inset 0 0 0 1px rgba(255, 253, 248, 0.12);
  color: var(--invitation-ivory);
}

.home-btn-primary:hover,
.home-btn-primary:focus-visible {
  filter: brightness(1.07);
  box-shadow: 0 1.2rem 2.3rem rgba(60, 50, 75, 0.34), inset 0 0 0 1px rgba(255, 253, 248, 0.14);
  color: var(--invitation-ivory);
  transform: translateY(-2px);
}

.home-btn-primary:active {
  transform: translateY(0) scale(0.98);
  filter: brightness(1);
}

.home-btn-secondary {
  border: 1.5px solid var(--invitation-lavender);
  background: rgba(164, 143, 196, 0.07);
  box-shadow: 0 0.5rem 1.1rem var(--invitation-shadow-soft);
  color: var(--invitation-plum-deep);
}

.home-btn-secondary:hover,
.home-btn-secondary:focus-visible {
  border-color: var(--invitation-plum);
  background: rgba(164, 143, 196, 0.16);
  color: var(--invitation-plum-deep);
  transform: translateY(-2px);
}

.home-btn-secondary:active {
  transform: translateY(0) scale(0.98);
}

.home-btn:focus-visible {
  outline: 2px solid var(--invitation-lavender);
  outline-offset: 3px;
}

.home-countdown {
  display: flex;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(164, 143, 196, 0.22);
}

.home-countdown-box {
  padding-right: 1.5rem;
  margin-right: 1.5rem;
  border-right: 1px solid rgba(164, 143, 196, 0.22);
  text-align: left;
}

.home-countdown-box:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: none;
}

.home-countdown-box strong {
  display: block;
  color: var(--invitation-plum-deep);
  font-family: var(--font-brand, "Plebeya Swash", Georgia, serif);
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  font-weight: 400;
  line-height: 1.15;
}

.home-countdown-box span {
  display: block;
  margin-top: 0.2rem;
  color: var(--invitation-muted);
  font-family: var(--font-app-heading);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-countdown-complete {
  margin: 0.75rem 0 0;
  color: var(--invitation-plum-deep);
  font-weight: 600;
}

.home-quick-actions-wrap {
  position: relative;
  z-index: 3;
  /* No negative margin: keeps the hero bottom boundary stable across
     browser zoom levels and avoids the next section peeking underneath. */
  margin-top: 0;
  padding-top: 0.35rem;
  padding-bottom: 1.35rem;
  box-sizing: border-box;
  max-width: 100%;
}

.home-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

.home-quick-action {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 0.65rem;
  padding: 1rem 1.05rem;
  border-radius: 1.1rem;
  /* 94%-opaque ivory: the backdrop blur behind it was imperceptible but
     forced four extra blur layers over the hero image. */
  background: rgba(255, 252, 246, 0.94);
  box-shadow: 0 1.1rem 2.4rem rgba(50, 40, 34, 0.16), 0 0 0 1px rgba(164, 143, 196, 0.18);
  color: var(--invitation-ink);
  text-decoration: none;
  overflow: hidden;
  /* Animate only compositor-friendly transform + cheap background-color;
     the hover box-shadow change applies instantly instead of repainting
     the shadow for 220ms. */
  transition: transform 220ms var(--invitation-ease-out), background-color 220ms ease;
}

.home-quick-action:hover,
.home-quick-action:focus-visible {
  background: rgba(255, 252, 246, 1);
  box-shadow: 0 1.3rem 2.6rem rgba(50, 40, 34, 0.16), 0 0 0 1px rgba(164, 143, 196, 0.28);
  transform: translateY(-3px);
}

.home-quick-action:focus-visible {
  outline: 2px solid var(--invitation-lavender);
  outline-offset: 2px;
}

.home-quick-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(164, 143, 196, 0.14);
  color: var(--invitation-plum);
}

.home-quick-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.home-quick-text strong {
  font-family: var(--font-app-heading);
  font-size: 0.82rem;
  font-weight: 700;
}

.home-quick-text span {
  color: var(--invitation-muted);
  font-size: 0.72rem;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .home-hero-overlay {
    background: linear-gradient(
      92deg,
      var(--invitation-ivory) 0%,
      rgba(255, 252, 246, 0.97) 34%,
      rgba(255, 252, 246, 0.78) 46%,
      rgba(255, 252, 246, 0.4) 56%,
      rgba(255, 252, 246, 0.1) 66%,
      transparent 76%
    );
  }

  body.culture-ar .home-hero-overlay {
    background: linear-gradient(
      268deg,
      var(--invitation-ivory) 0%,
      rgba(255, 252, 246, 0.97) 32%,
      rgba(255, 252, 246, 0.75) 44%,
      rgba(255, 252, 246, 0.32) 54%,
      rgba(255, 252, 246, 0.08) 64%,
      transparent 74%
    );
  }
}

@media (max-width: 767px) {
  .home-hero {
    min-height: 0;
    overflow: visible;
  }

  /* Desktop atmosphere layer is replaced by the framed mobile image below. */
  .home-hero-visual,
  .home-hero-overlay {
    display: none;
  }

  .home-hero-mobile-frame {
    display: block;
  }

  .home-hero-inner {
    padding-top: clamp(0.85rem, 2.5vh, 1.25rem);
    padding-bottom: clamp(1.75rem, 6vh, 2.5rem);
  }

  .home-hero-content {
    max-width: none;
    margin-top: 0;
    margin-left: 0;
  }

  .home-title {
    font-size: clamp(2.15rem, 10vw, 3rem);
  }

  .home-copy {
    max-width: none;
  }

  .home-quick-actions-wrap {
    margin-top: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.85rem;
  }

  .home-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-quick-action {
    background: rgba(255, 252, 246, 1);
  }

  .home-section {
    padding-block: 1.1rem;
  }

  .home-section-head {
    margin-bottom: 0.85rem;
  }
}

@media (max-width: 480px) {
  .home-countdown-box {
    padding-right: 0.9rem;
    margin-right: 0.9rem;
    margin-bottom: 0.6rem;
  }
}

/* ── Homepage single-page sections (Davet Detayları / Konum / Galeri) ── */

.home-section {
  position: relative;
  padding-block: 1.5rem;
  border-top: 0;
  background: transparent;
}

.home-section-head {
  max-width: 38rem;
  margin-bottom: 1rem;
}

.home-section-title {
  margin: 0 0 0.4rem;
  color: var(--invitation-ink);
  font-family: var(--font-brand, "Plebeya Swash", Georgia, serif);
  font-size: clamp(1.85rem, 3.2vw, 2.45rem);
  font-weight: 400;
  line-height: 1.15;
}

.home-section-copy {
  margin: 0;
  max-width: 44ch;
  color: var(--invitation-muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* Düğün Detayları — two-column premium stationery spread:
   left ivory details card + right plum RSVP card, balanced heights. */
.home-section-details {
  padding-block: 1.35rem 1.1rem;
}

.home-details-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(1.1rem, 2.8vw, 1.85rem);
  min-width: 0;
}

.home-details-stationery {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* visible so the calendar dropdown can escape the card edge;
     decorative PNGs already fade via CSS masks. */
  overflow: visible;
  padding: clamp(1.35rem, 2.8vw, 1.9rem) clamp(1.25rem, 2.6vw, 1.85rem) 1.5rem;
  border-radius: 1.05rem;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.97) 0%, rgba(251, 246, 236, 0.94) 100%);
  box-shadow:
    0 0.65rem 1.7rem rgba(58, 46, 38, 0.07),
    0 0 0 1px rgba(164, 143, 196, 0.14);
}

/* Corner/edge decorations: anchored flush to the card corners and faded
   toward the content with a soft mask, so they read as printed stationery
   ornaments rather than pasted images. Always behind the text (z-index 0)
   and clipped by the card's overflow. */
.home-details-corner-accent {
  position: absolute;
  z-index: 0;
  top: -0.2rem;
  right: -0.2rem;
  width: 5.25rem;
  height: auto;
  opacity: 0.32;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: radial-gradient(circle at top right, #000 45%, transparent 95%);
  mask-image: radial-gradient(circle at top right, #000 45%, transparent 95%);
}

.home-details-sprig {
  position: absolute;
  z-index: 0;
  left: -0.5rem;
  bottom: -0.55rem;
  width: 4.5rem;
  height: auto;
  opacity: 0.38;
  pointer-events: none;
  user-select: none;
  transform: rotate(-10deg);
  -webkit-mask-image: radial-gradient(circle at bottom left, #000 50%, transparent 96%);
  mask-image: radial-gradient(circle at bottom left, #000 50%, transparent 96%);
}

.home-details-seal {
  position: relative;
  z-index: 1;
  display: block;
  width: 2.85rem;
  height: auto;
  margin: 0.95rem auto 0;
  opacity: 0.85;
  filter: drop-shadow(0 2px 4px rgba(58, 46, 38, 0.18));
  pointer-events: none;
  user-select: none;
}

/* ── Add to Calendar (homepage details card) ── */
.home-details-calendar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: 1.05rem;
}

.home-calendar {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.home-calendar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.45rem;
  border: 1.5px solid var(--invitation-lavender);
  border-radius: 999px;
  background: rgba(164, 143, 196, 0.08);
  box-shadow: 0 0.4rem 0.9rem var(--invitation-shadow-soft);
  color: var(--invitation-plum-deep);
  cursor: pointer;
  font-family: var(--font-app-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  transition:
    transform 220ms var(--invitation-ease-out),
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease;
}

.home-calendar-toggle:hover,
.home-calendar-toggle:focus-visible {
  border-color: var(--invitation-plum);
  background: rgba(164, 143, 196, 0.16);
  color: var(--invitation-plum-deep);
  transform: translateY(-2px);
}

.home-calendar-toggle:focus-visible {
  outline: 2px solid var(--invitation-lavender);
  outline-offset: 3px;
}

.home-calendar-toggle:active {
  transform: translateY(0) scale(0.98);
}

.home-calendar-toggle svg {
  flex-shrink: 0;
  opacity: 0.9;
}

.home-calendar-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 50%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: min(18.5rem, 86vw);
  padding: 0.4rem;
  border-radius: 0.85rem;
  background: rgba(255, 252, 246, 0.98);
  box-shadow:
    0 0.85rem 1.8rem rgba(50, 40, 34, 0.14),
    0 0 0 1px rgba(164, 143, 196, 0.2);
  transform: translateX(-50%);
}

/* Author display:flex must not override the HTML hidden attribute. */
.home-calendar-panel[hidden] {
  display: none !important;
}

.home-calendar-option {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: 0.55rem;
  color: var(--invitation-ink);
  font-family: var(--font-app-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.35;
  text-decoration: none;
  text-align: center;
  transition: background-color 180ms ease, color 180ms ease;
}

.home-calendar-option:hover,
.home-calendar-option:focus-visible {
  background: rgba(164, 143, 196, 0.14);
  color: var(--invitation-plum-deep);
}

.home-calendar-option:focus-visible {
  outline: 2px solid var(--invitation-lavender);
  outline-offset: 1px;
}

.home-details-stationery::before {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(164, 143, 196, 0.16);
  pointer-events: none;
}

.home-details-stationery-head {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 1.15rem;
}

.home-details-title {
  margin: 0;
  color: var(--invitation-plum-deep);
  font-family: var(--font-app-heading);
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-transform: uppercase;
}

.home-details-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0.75rem auto 0.7rem;
  max-width: 14rem;
}

.home-details-rule-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(164, 143, 196, 0.55), transparent);
}

.home-details-rule-heart {
  flex-shrink: 0;
  color: var(--invitation-lavender);
  opacity: 0.92;
}

.home-details-intro {
  margin: 0 auto;
  max-width: 34ch;
  color: var(--invitation-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.home-details-timeline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-details-item {
  display: grid;
  grid-template-columns: 2.15rem minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: 0.72rem 0.15rem;
  border-bottom: 1px solid rgba(164, 143, 196, 0.14);
}

.home-details-item:last-child {
  border-bottom: 0;
}

.home-details-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  color: var(--invitation-plum);
  opacity: 0.88;
}

.home-details-text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.home-details-text strong {
  color: var(--invitation-ink);
  font-family: var(--font-app-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.home-details-text span {
  color: var(--invitation-muted);
  font-family: var(--font-app-heading);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Inline RSVP / LCV card — dark plum stationery, right column ──
   The card itself lives in the shared _RsvpForm partial; these wrappers
   host it on the homepage grid and on the standalone /lcv page. */
.home-rsvp-slot {
  display: flex;
  min-width: 0;
  scroll-margin-top: calc(var(--invitation-header-offset, 4.25rem) + 1rem);
}

.home-rsvp-slot .home-rsvp-card {
  flex: 1 1 auto;
}

.rsvp-standalone {
  display: flex;
  width: min(100%, 30rem);
  margin-inline: auto;
}

.rsvp-standalone .home-rsvp-card {
  flex: 1 1 auto;
}

.home-rsvp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: clamp(1.35rem, 2.8vw, 1.9rem) clamp(1.25rem, 2.6vw, 1.85rem) clamp(1.5rem, 2.8vw, 1.85rem);
  border-radius: 1.05rem;
  background:
    radial-gradient(circle at 14% 0%, rgba(220, 208, 232, 0.14), transparent 60%),
    linear-gradient(165deg, var(--invitation-plum) 0%, var(--invitation-plum-deep) 100%);
  background-image:
    url("/images/textures/plum-paper-texture.webp"),
    radial-gradient(circle at 14% 0%, rgba(220, 208, 232, 0.14), transparent 60%),
    linear-gradient(165deg, var(--invitation-plum) 0%, var(--invitation-plum-deep) 100%);
  background-size: cover, auto, auto;
  background-blend-mode: overlay, normal, normal;
  box-shadow:
    0 0.9rem 2.1rem rgba(40, 32, 52, 0.28),
    0 0 0 1px rgba(255, 253, 248, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--invitation-ivory);
  forced-color-adjust: none;
}

.home-rsvp-card::before {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 253, 248, 0.16);
  pointer-events: none;
}

.home-rsvp-corner {
  position: absolute;
  z-index: 0;
  right: -0.25rem;
  bottom: -0.25rem;
  width: 7rem;
  height: auto;
  opacity: 0.28;
  mix-blend-mode: luminosity;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: radial-gradient(circle at bottom right, #000 40%, transparent 92%);
  mask-image: radial-gradient(circle at bottom right, #000 40%, transparent 92%);
  forced-color-adjust: none;
}

.home-rsvp-head {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 1.1rem;
}

.home-rsvp-title {
  margin: 0;
  color: var(--invitation-ivory);
  font-family: var(--font-app-heading);
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-transform: uppercase;
}

.home-rsvp-rule .home-details-rule-line {
  background: linear-gradient(90deg, transparent, rgba(220, 208, 232, 0.5), transparent);
}

.home-rsvp-rule .home-details-rule-heart {
  color: var(--invitation-lavender-soft);
}

.home-rsvp-copy {
  margin: 0.7rem auto 0;
  max-width: 30ch;
  color: rgba(255, 252, 246, 0.78);
  font-size: 0.86rem;
  line-height: 1.55;
}

.home-rsvp-form {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.35rem;
  flex: 1;
}

.home-rsvp-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.home-rsvp-field label {
  color: rgba(255, 252, 246, 0.72);
  font-family: var(--font-app-heading);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-rsvp-input,
.home-rsvp-select {
  width: 100%;
  min-height: 2.85rem;
  padding: 0 1rem;
  border: 1px solid rgba(255, 253, 248, 0.22);
  border-radius: 0.65rem;
  background: rgba(255, 253, 248, 0.08);
  color: var(--invitation-ivory);
  font-family: var(--font-app, "Cinzel", "Cormorant Garamond", Georgia, serif);
  font-size: 0.92rem;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.home-rsvp-input::placeholder {
  color: rgba(255, 252, 246, 0.45);
}

.home-rsvp-input[readonly] {
  background: rgba(255, 253, 248, 0.05);
  color: rgba(255, 252, 246, 0.85);
  cursor: default;
}

.home-rsvp-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e7ddf0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}

.home-rsvp-select option {
  color: var(--invitation-ink);
}

.home-rsvp-input:focus-visible,
.home-rsvp-select:focus-visible {
  outline: none;
  border-color: rgba(220, 208, 232, 0.75);
  background: rgba(255, 253, 248, 0.13);
}

.home-rsvp-hint {
  margin: -0.15rem 0 0;
  color: rgba(255, 252, 246, 0.62);
  font-size: 0.78rem;
  line-height: 1.5;
}

.home-rsvp-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: auto;
  min-height: 3.1rem;
  border: 1px solid rgba(255, 253, 248, 0.24);
  border-radius: 999px;
  background: linear-gradient(150deg, rgba(255, 253, 248, 0.16) 0%, rgba(255, 253, 248, 0.06) 100%);
  color: var(--invitation-ivory);
  cursor: pointer;
  font-family: var(--font-app-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 220ms var(--invitation-ease-out), background-color 220ms ease;
}

.home-rsvp-submit svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.home-rsvp-submit:hover,
.home-rsvp-submit:focus-visible {
  background: linear-gradient(150deg, rgba(255, 253, 248, 0.24) 0%, rgba(255, 253, 248, 0.1) 100%);
  transform: translateY(-2px);
}

.home-rsvp-submit:focus-visible {
  outline: 2px solid var(--invitation-lavender-soft);
  outline-offset: 3px;
}

.home-rsvp-submit:active {
  transform: translateY(0) scale(0.98);
}

.home-rsvp-submit:disabled,
.home-rsvp-submit.is-loading {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

/* Secondary in-card action ("update my response") on the success state. */
.home-rsvp-submit--ghost {
  min-height: 2.7rem;
  border-color: rgba(255, 253, 248, 0.18);
  background: transparent;
  font-size: 0.72rem;
}

/* Validation + error messaging inside the plum card: soft rose so it is
   clearly an error but does not clash with the stationery palette. */
.home-rsvp-alert {
  margin: 0;
  padding: 0.6rem 0.85rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(236, 189, 189, 0.4);
  background: rgba(150, 90, 90, 0.22);
  color: #f2d7d7;
  font-size: 0.82rem;
  line-height: 1.5;
}

.home-rsvp-field-error {
  color: #efc9c9;
  font-size: 0.76rem;
  line-height: 1.4;
}

/* Success state after an inline submit — rendered in place of the form. */
.home-rsvp-success {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  justify-content: center;
  padding-block: 0.75rem 0.35rem;
  text-align: center;
}

.home-rsvp-success-name {
  margin: 0;
  color: var(--invitation-ivory);
  font-size: clamp(1.5rem, 3vw, 1.95rem);
}

.home-rsvp-success-msg {
  margin: 0;
  max-width: 30ch;
  color: rgba(255, 252, 246, 0.82);
  font-size: 0.9rem;
  line-height: 1.6;
}

.home-rsvp-success .home-rsvp-submit--ghost {
  margin-top: 0.6rem;
}

/* Focusable heading for post-swap focus management — no visible ring. */
.home-rsvp-title:focus {
  outline: none;
}

/* Konum — wide centered venue + map composition (~35% / 65%). */
.home-section-map {
  padding-block: 1.15rem 1.4rem;
}

.home-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr);
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  min-width: 0;
  width: 100%;
}

.home-map-copyblock {
  min-width: 0;
  text-align: left;
}

.home-map-copyblock .home-section-title {
  margin-bottom: 0.85rem;
}

.home-map-venue {
  display: block;
  color: var(--invitation-ink);
  font-family: var(--font-app-heading);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  font-weight: 700;
  line-height: 1.3;
}

.home-map-place {
  margin: 0.3rem 0 0;
  color: var(--invitation-muted);
  font-family: var(--font-app-heading);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-map-copy {
  margin: 0.85rem 0 0;
  max-width: 36ch;
  color: var(--invitation-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.home-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.15rem;
}

.home-map-frame {
  position: relative;
  width: 100%;
  min-width: 0;
  height: clamp(22rem, 32vw, 28rem);
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(255, 252, 246, 0.9);
  box-shadow:
    0 0.65rem 1.6rem rgba(58, 46, 38, 0.08),
    0 0 0 1px rgba(164, 143, 196, 0.16);
}

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

/* Galeri — wide upload-invitation teaser */
.home-gallery-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.15rem, 2.4vw, 1.6rem);
  border-radius: 1.15rem;
  background: rgba(255, 252, 246, 0.9);
  box-shadow: 0 0.55rem 1.6rem rgba(50, 40, 34, 0.06), 0 0 0 1px rgba(164, 143, 196, 0.13);
  text-align: left;
  min-width: 0;
  width: 100%;
}

.home-gallery-head {
  margin-bottom: 0;
}

/* Desktop: left = heading/copy/CTAs, right = approved previews (or soft invite). */
.home-gallery-panel--photos,
.home-gallery-panel--invite {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  align-items: center;
  gap: clamp(1.1rem, 2.8vw, 2.4rem);
}

.home-gallery-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
}

.home-gallery-rail .home-section-title {
  margin-bottom: 0;
}

.home-gallery-rail .home-section-copy {
  max-width: 36ch;
  margin-bottom: 0;
}

.home-gallery-support {
  margin: 0;
  max-width: 38ch;
  font-family: var(--font-app-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(90, 72, 98, 0.78);
}

.home-gallery-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.75rem;
  margin-top: 0.55rem;
}

.home-gallery-actions .home-btn {
  min-height: 2.85rem;
  padding: 0 1.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

@media (max-width: 991px) {
  /* Mobile: title/copy → CTAs → photos (or invite accent). */
  .home-gallery-panel--photos,
  .home-gallery-panel--invite {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
}

.home-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: start;
  gap: 1.1rem;
  margin: 0.15rem 0 0.35rem;
  padding-top: 0.35rem;
}

/* Fewer curated photos: give each polaroid a comfortable size instead of
   leaving empty grid tracks trailing to the right. */
.home-gallery-grid[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
  max-width: 18rem;
}

.home-gallery-grid[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-gallery-grid[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-gallery-item {
  margin: 0;
  padding: 0.55rem 0.55rem 1.1rem;
  border-radius: 0.3rem;
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 0.6rem 1.3rem rgba(50, 40, 34, 0.13), 0 0 0 1px rgba(164, 143, 196, 0.14);
  transition: transform 220ms var(--invitation-ease-out);
}

.home-gallery-item--tilt0 {
  transform: rotate(-2.25deg);
}

.home-gallery-item--tilt1 {
  transform: rotate(2.25deg);
}

.home-gallery-item:hover {
  transform: translateY(-0.3rem) rotate(0deg) scale(1.02);
  box-shadow: 0 1rem 1.9rem rgba(50, 40, 34, 0.18), 0 0 0 1px rgba(164, 143, 196, 0.2);
}

.home-gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.1rem;
}

/* Empty-state accent — soft stationery panel, not a large blank void. */
.home-gallery-teaser {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7.5rem;
  overflow: hidden;
  padding: 1.25rem 1rem;
  border-radius: 0.95rem;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(164, 143, 196, 0.14), transparent 55%),
    rgba(164, 143, 196, 0.05);
  box-shadow: inset 0 0 0 1px rgba(164, 143, 196, 0.14);
}

.home-gallery-teaser-sprig {
  position: relative;
  z-index: 0;
  width: 3.4rem;
  height: auto;
  max-height: 6rem;
  transform: rotate(-6deg);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

@media (min-width: 601px) and (max-width: 991px) {
  .home-details-compose {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }

  .home-map-layout {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    gap: 1rem;
  }

  .home-map-frame {
    height: clamp(18rem, 38vw, 24rem);
  }
}

@media (max-width: 600px) {
  .home-details-compose {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .home-details-stationery,
  .home-rsvp-card {
    padding: 1.2rem 1.05rem 1.35rem;
  }

  .home-details-sprig {
    width: 4rem;
  }
}

@media (max-width: 767px) {
  .home-gallery-grid,
  .home-gallery-grid[data-count="2"],
  .home-gallery-grid[data-count="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 0.75rem;
  }

  .home-gallery-grid[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-gallery-item--tilt0,
  .home-gallery-item--tilt1 {
    transform: none;
  }

  .home-map-layout {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .home-map-frame {
    justify-self: stretch;
    width: 100%;
    max-width: none;
    height: 18rem;
    aspect-ratio: auto;
  }

  .home-map-actions {
    width: 100%;
  }

  .home-map-actions .home-btn {
    flex: 1 1 auto;
    text-align: center;
  }

  .home-gallery-teaser {
    min-height: 5.5rem;
    padding: 1rem;
  }

  .home-gallery-actions {
    width: 100%;
  }

  .home-gallery-actions .home-btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* ── Invitation scene (closed-only, selectable) ── */

.invitation-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 4.5vh, 2.75rem);
  min-height: calc(100svh - var(--invitation-header-offset));
  padding-block: clamp(1.25rem, 4svh, 2.5rem);
  perspective: 1700px;
}

.invitation-float {
  opacity: 1;
  transition: transform 650ms var(--invitation-ease-out), opacity 700ms var(--invitation-ease);
  animation: invitationIdleFloat 6.5s ease-in-out infinite;
  will-change: transform, opacity;
}

.invitation-stage.is-selected .invitation-float {
  animation: none;
  transform: translateY(-4px);
}

/* Exit ritual: soft fade/lift before navigating to the homepage. */
.invitation-stage.is-leaving .invitation-float {
  opacity: 0;
  transform: translateY(-1.25rem) scale(1.01);
}

.invitation-scene {
  position: relative;
  width: min(82vw, 21rem);
  transform-style: preserve-3d;
  /* Rotation is driven entirely by JS (rAF lerp) via the custom properties
     below; no CSS transition here so pointer-tracking stays crisp instead
     of fighting a second, competing easing curve. */
  transform: translate3d(0, 0, 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  backface-visibility: hidden;
  user-select: none;
  forced-color-adjust: none;
}

.invitation-scene.is-tilting,
.invitation-stage.is-selected .invitation-scene,
.invitation-stage.is-leaving .invitation-scene {
  will-change: transform;
}

.invitation-stage.is-selected .invitation-scene {
  transform: none;
}

.invitation-card {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(0.4rem, 1.3vw, 0.6rem);
  background: var(--invitation-paper);
  /* Soft natural paper shadow only — no separate oval floor layer. */
  box-shadow:
    0 0.55rem 1.35rem rgba(58, 46, 38, 0.12),
    0 0 0 1px rgba(92, 77, 115, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  /* No hover transform here — scene owns 3D tilt; competing transforms cause jitter. */
  transform: none;
  transition: box-shadow 320ms var(--invitation-ease-out);
  forced-color-adjust: none;
}

.invitation-stage.is-selected .invitation-card {
  box-shadow:
    0 0.7rem 1.6rem rgba(58, 46, 38, 0.14),
    0 0 0 1px rgba(92, 77, 115, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.invitation-card-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: inherit;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  forced-color-adjust: none;
}

/* Transparent, accessible hit target over the full kuşak / band.
   Geometry stays fixed on hover — no transform, scale, or translate —
   so hover never fights the card tilt and cannot jitter the artwork text. */
.invitation-select {
  position: absolute;
  top: 46.5%;
  left: 50%;
  z-index: 6;
  width: min(92%, 22rem);
  height: clamp(3.4rem, 12.5vw, 5rem);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  transform: translate(-50%, -50%);
}

.invitation-select::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  transition: background-color 180ms ease;
  pointer-events: none;
}

.invitation-select:hover::before,
.invitation-select:focus-visible::before {
  background-color: rgba(255, 255, 255, 0.06);
}

.invitation-select:focus-visible {
  outline: 2px solid var(--invitation-lavender);
  outline-offset: 4px;
}

.invitation-stage.is-selected .invitation-select,
.invitation-stage.is-leaving .invitation-select {
  cursor: default;
  pointer-events: none;
}

.invitation-click-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  max-width: min(18rem, 86vw);
  color: #8b7472;
  font-family: var(--font-app-heading, "Cinzel", Georgia, serif);
  font-size: clamp(0.9rem, 2.5vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-align: center;
  opacity: 0.82;
  transition: opacity 420ms var(--invitation-ease), transform 420ms var(--invitation-ease);
}

.invitation-click-hint-heart {
  display: block;
  color: rgba(116, 21, 55, 0.45);
  font-size: 0.62rem;
  line-height: 1;
}

.invitation-stage.is-selected .invitation-click-hint,
.invitation-stage.is-leaving .invitation-click-hint {
  opacity: 0;
  transform: translateY(0.35rem);
  pointer-events: none;
}

@keyframes invitationIdleFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@media (min-width: 480px) {
  .invitation-scene {
    width: min(68vw, 23rem);
  }
}

@media (min-width: 720px) {
  .invitation-page {
    padding-inline: 2rem;
  }

  .invitation-scene {
    width: min(34vw, 25rem);
  }
}

@media (min-width: 1200px) {
  .invitation-scene {
    width: min(26vw, 27rem);
  }
}

@media (max-width: 480px) {
  body.invitation-shell {
    --invitation-header-offset: 6.25rem;
  }

  .invitation-stage {
    gap: clamp(1.15rem, 3.5vh, 1.65rem);
    padding-block: clamp(1rem, 3svh, 1.75rem);
  }

  .invitation-scene {
    width: min(80vw, 19.5rem);
  }

  .invitation-float {
    animation: none;
    will-change: auto;
  }

  .invitation-select {
    top: 46%;
    width: min(94%, 18rem);
    height: clamp(3.1rem, 12vw, 4.35rem);
  }

  .invitation-select:hover::before,
  .invitation-select:focus-visible::before {
    background-color: transparent;
  }
}

@media (hover: none), (pointer: coarse) {
  .invitation-float {
    animation: none;
    will-change: auto;
  }

  .invitation-select:hover::before,
  .invitation-select:focus-visible::before {
    background-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .invitation-float {
    animation: none;
  }

  .invitation-stage.is-selected .invitation-float {
    transform: translateY(-2px);
  }

  .invitation-scene {
    transform: none !important;
  }

  .invitation-stage.is-selected .invitation-card {
    transform: none;
  }
}

/* Personalized guest greeting */
body.invitation-personal .guest-greeting {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.92), transparent 22rem),
    radial-gradient(circle at 82% 18%, rgba(164, 143, 196, 0.15), transparent 18rem),
    linear-gradient(160deg, var(--invitation-ivory) 0%, var(--invitation-cream) 100%);
  opacity: 1;
  visibility: visible;
  animation: inviteIntroFadeIn 0.75s var(--invitation-ease-out) both;
  transition: opacity 500ms ease, visibility 500ms ease;
}

body.invitation-personal .guest-greeting-text {
  margin: 0;
  max-width: 22ch;
  color: var(--invitation-lavender);
  font-family: var(--font-app-heading);
  font-size: clamp(1.05rem, 3.8vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-align: center;
  text-transform: none;
  text-wrap: balance;
}

body.invitation-personal .guest-greeting-text .guest-name-display {
  margin-top: 0.4rem;
  font-size: clamp(1.85rem, 7vw, 2.75rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

body.invitation-personal .guest-greeting.is-dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}

/* Couple + parents ceremonial intro (after greeting, before card) */
body.invitation-personal .invite-couple-intro {
  position: fixed;
  inset: 0;
  z-index: 29;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 4vh, 2rem) 1.5rem;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.9), transparent 22rem),
    radial-gradient(circle at 84% 20%, rgba(164, 143, 196, 0.14), transparent 18rem),
    linear-gradient(160deg, var(--invitation-ivory) 0%, var(--invitation-cream) 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 500ms ease, visibility 500ms ease;
}

body.invitation-personal .invite-couple-intro.is-visible {
  opacity: 1;
  visibility: visible;
}

body.invitation-personal .invite-couple-intro.is-dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* One compact, centered composition — columns sized to content, not stretched
   across the viewport (which previously pushed the names far apart). */
body.invitation-personal .opening-couple-family {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: center;
  column-gap: clamp(5rem, 7vw, 7rem);
  row-gap: 0;
  width: max-content;
  max-width: min(100%, 62rem);
  margin-inline: auto;
  opacity: 0;
  transform: translateY(0.45rem);
  transition: opacity 500ms var(--invitation-ease-out), transform 500ms var(--invitation-ease-out);
}

body.invitation-personal .invite-couple-intro.is-visible .opening-couple-family {
  opacity: 1;
  transform: translateY(0);
}

body.invitation-personal .invite-couple-intro.is-dismissed .opening-couple-family {
  opacity: 0;
  transform: translateY(-0.25rem);
}

body.invitation-personal .opening-family-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

body.invitation-personal .opening-couple-name {
  margin: 0;
  padding-bottom: 0.18em;
  color: var(--invitation-ink);
  font-family: var(--font-brand, "Plebeya Swash", Georgia, serif);
  font-size: clamp(2.4rem, 4.8vw, 3.55rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.01em;
}

body.invitation-personal .opening-parent-names {
  margin: 1.35rem 0 0;
  color: var(--invitation-plum);
  font-family: var(--font-guest-name, "EB Garamond", Georgia, serif);
  font-size: clamp(1.2rem, 1.6vw, 1.55rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.35;
  white-space: nowrap;
}

body.invitation-personal .opening-couple-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-top: -0.35em;
  color: var(--invitation-lavender);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1;
  opacity: 0.78;
  user-select: none;
}

@media (max-width: 720px) {
  body.invitation-personal .opening-couple-family {
    grid-template-columns: 1fr;
    justify-items: center;
    width: min(100%, 22rem);
    max-width: 100%;
    row-gap: 1.15rem;
    column-gap: 0;
  }

  body.invitation-personal .opening-couple-divider {
    margin-top: 0;
    font-size: 1rem;
  }

  body.invitation-personal .opening-couple-name {
    font-size: clamp(2.15rem, 10vw, 2.85rem);
  }

  body.invitation-personal .opening-parent-names {
    margin-top: 1.1rem;
    font-size: clamp(1.05rem, 4.2vw, 1.25rem);
  }
}

@media (max-width: 380px) {
  body.invitation-personal .opening-parent-names {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    max-width: 16rem;
  }
}

@keyframes inviteIntroFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

body.invitation-personal .invitation-stage.guest-greeting-pending {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.75rem);
}

body.invitation-personal .invitation-stage.guest-greeting-ready {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 600ms var(--invitation-ease-out), transform 600ms var(--invitation-ease-out), visibility 600ms;
}

@media (prefers-reduced-motion: reduce) {
  body.invitation-personal .guest-greeting {
    animation: none;
    transition-duration: 50ms;
  }

  body.invitation-personal .invite-couple-intro,
  body.invitation-personal .opening-couple-family {
    transition-duration: 50ms;
  }

  body.invitation-personal .invite-couple-intro.is-visible .opening-couple-family,
  body.invitation-personal .invite-couple-intro.is-dismissed .opening-couple-family {
    transform: none;
  }

  body.invitation-personal .invitation-stage.guest-greeting-ready {
    transition-duration: 50ms;
  }
}

/* Standalone "return home" link used on the not-found page */
.continue-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 253, 248, 0.28);
  border-radius: 999px;
  padding: 0.86rem 1.95rem;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.14), transparent 48%),
    linear-gradient(135deg, var(--invitation-plum) 0%, var(--invitation-plum-deep) 100%);
  box-shadow:
    0 0.8rem 1.6rem rgba(42, 34, 56, 0.2),
    inset 0 0 0 1px rgba(255, 252, 246, 0.12);
  color: var(--invitation-ivory);
  cursor: pointer;
  font-family: var(--font-app, "Cinzel", "Cormorant Garamond", Georgia, serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    box-shadow 240ms ease,
    filter 240ms ease,
    transform 240ms ease;
}

.continue-button:hover,
.continue-button:focus-visible {
  filter: brightness(1.05);
  box-shadow:
    0 1rem 1.9rem rgba(92, 77, 115, 0.24),
    inset 0 0 0 1px rgba(255, 252, 246, 0.14);
  color: var(--invitation-ivory);
  transform: translateY(-1px);
}

.continue-button:focus-visible {
  outline: 2px solid var(--invitation-lavender);
  outline-offset: 4px;
}

.invitation-not-found {
  min-height: calc(100vh - 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem 3rem;
}

.invitation-not-found-card {
  width: min(100%, 34rem);
  padding: 2.5rem 1.75rem;
  border-radius: 1rem;
  background: rgba(255, 247, 231, 0.92);
  box-shadow: 0 1.25rem 2.5rem rgba(28, 26, 31, 0.12);
  text-align: center;
}

.invitation-not-found-title {
  margin: 0 0 0.85rem;
  color: var(--invitation-burgundy);
  font-family: "Plebeya", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(1.65rem, 5vw, 2.15rem);
  font-weight: 400;
}

.invitation-not-found-text {
  margin: 0 0 1.5rem;
  color: var(--invitation-ink);
  line-height: 1.65;
}