/*
 * Invitation page.
 * The invitation image keeps its exact aspect ratio (1412 x 2508).
 * The transparent CTA overlay is positioned in % of the image card, so it
 * stays perfectly aligned as the image scales on any screen.
 */

.invite-body {
  background: #18271d;
  color: #f2ead9;
}

.invite-stage {
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  padding: 14px;
}

.invite-card {
  --invite-ratio: 0.563;
  position: relative;
  margin: auto;
  /* Fit within the viewport height on large screens; fit screen width on mobile */
  width: min(100%, calc((100dvh - 28px) * var(--invite-ratio)));
  animation: invite-fade 0.9s ease both;
}

.invite-card img {
  width: 100%;
  height: auto;
  background: #18271d;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6);
}

/* Transparent clickable overlay on the invitation button.
 * Button geometry (measured in the artwork): center x 51%, center y 82%.
 * The overlay is slightly larger than the visible button for a comfortable
 * tap target while staying visually invisible. */
.invite-cta {
  position: absolute;
  left: 29%;
  top: 77.5%;
  width: 42%;
  height: 9%;
  display: block;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@keyframes invite-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Gentle exit transition before navigating to the RSVP page */
@media (prefers-reduced-motion: no-preference) {
  .invite-body.leaving .invite-card {
    transition: opacity 0.18s ease, transform 0.18s ease;
    opacity: 0;
    transform: scale(0.985);
  }
}