/* ==========================================================================
   Components — one block per screen of the invitation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Envelope overlay (screen A · intro)
   -------------------------------------------------------------------------- */
.envelope {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-2xl);
  background-color: var(--color-surface-soft);
  transition:
    opacity var(--duration-fade) ease,
    visibility var(--duration-fade);
}

.envelope.is-open {
  opacity: 0;
  visibility: hidden;
}

.envelope__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 252px;
  height: 172px;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-warm);
  box-shadow: var(--shadow-envelope);
}

.envelope__flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 84px solid var(--color-envelope-flap);
  border-right: 126px solid transparent;
  border-left: 126px solid transparent;
  transform-origin: top center;
  transition: transform var(--duration-reveal) var(--ease-rise);
}

.envelope.is-open .envelope__flap {
  transform: rotateX(-180deg);
}

/* Both initials, not just hers. The letters sit in one inline flow so their
   baselines line up on their own — flex `align-items: baseline` would align
   the group against the tallest glyph and ride up out of the circle. */
.envelope__seal {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-top: 49px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-script);
  /* A circle is narrower than its diameter at the text's band: with a 62px
     seal only ~56px is usable, so the monogram is sized to sit inside that
     rather than to the full width. */
  font-size: 1.2rem;
  line-height: 1;
}

.envelope__seal-mark {
  line-height: 1;
  white-space: nowrap;
}

/* Smaller and tucked in, so "K&M" reads as a monogram rather than as three
   letters of equal weight. */
.envelope__seal-amp {
  margin: 0 0.04em;
  font-size: 0.62em;
  opacity: 0.85;
}

.envelope__button {
  padding: var(--space-sm) var(--space-xl);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  animation: pulse var(--duration-pulse) ease-in-out infinite;
}

/* ------------------------------------------------:window-inactive--------------------------
   01 · Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  justify-content: space-around;
  min-height: 75vh;
  gap: var(--space-lg);
  padding-top: 5.2rem;
  padding-bottom: 5.2rem;
}

.hero__names {
  --art-color: var(--color-primary);
  --art-ratio: var(--ratio-names);
  --art-width: 88%;
}

.hero__date {
  --art-color: var(--color-secondary);
  --art-ratio: var(--ratio-date);
  --art-width: 52%;
}

.hero__script {
  --art-color: var(--color-primary);
  --art-ratio: var(--ratio-script);
  --art-width: 74%;
}

.hero__temple {
  --art-color: var(--color-primary);
  --art-ratio: var(--ratio-temple);
  --art-width: 94%;
}

.hero__place {
  --art-color: var(--color-primary);
  --art-ratio: var(--ratio-place);
  --art-width: 38%;
}

.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-accent);
  font-size: 0.5625rem;
  letter-spacing: var(--tracking-wide);
}

.scroll-cue::after {
  content: "";
  width: 1px;
  height: 24px;
  background-color: currentColor;
}

/* --------------------------------------------------------------------------
   02 · Countdown
   -------------------------------------------------------------------------- */
.countdown {
  gap: var(--space-lg);
  padding-block: 3.25rem var(--space-2xl);
}

.countdown__lead {
  color: var(--color-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  text-align: center;
}

.countdown__units {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  width: 48px;
  padding-top: 2rem;
  min-height: 102px;
}

.countdown__value {
  color: var(--color-primary);
  font-size: 1.4375rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.countdown__label {
  color: var(--color-secondary);
  font-size: var(--text-sm);
}

/* The days sit inside the flower badge, so that unit overrides the defaults. */
.countdown__unit--days {
  width: auto;
  padding-top: 0;
}

.countdown__badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 77px;
}

.countdown__flower {
  --art-color: var(--color-primary);
  position: absolute;
  inset: 0;
}

.countdown__unit--days .countdown__value {
  position: relative;
  color: var(--color-on-primary);
  font-size: 1.625rem;
  font-weight: var(--weight-bold);
}

.countdown__unit--days .countdown__label {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/* --------------------------------------------------------------------------
   03 · Photos
   -------------------------------------------------------------------------- */
.photos {
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md) var(--space-3xl);
}

.photos__stack {
  position: relative;
  width: 100%;
  height: 200px;
}

.polaroid {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 158px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
  border: 6px solid var(--color-paper);
  border-radius: var(--radius-xs);
  background-color: rgb(255 255 255 / 0.6);
  box-shadow: var(--shadow-polaroid);
  color: var(--color-primary-50);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
}

/* The photos are 3:4 and so is the frame, so `cover` crops almost nothing —
   it is here to absorb the rounding rather than to reframe the shot. */
.polaroid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.polaroid--left {
  left: 5%;
  z-index: 1;
  transform: rotate(-7deg);
}

.polaroid--right {
  right: 5%;
  z-index: 1;
  transform: rotate(7deg);
}

.polaroid--center {
  top: 20px;
  left: 50%;
  z-index: 2;
  margin-left: -59px;
  transform: rotate(-1deg);
}

/* --------------------------------------------------------------------------
   03b · Photo lightbox
   -------------------------------------------------------------------------- */
/* The dialog is the full viewport; the scrim is painted on ::backdrop so the
   top layer handles stacking and nothing here needs a z-index. */
.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: var(--space-lg);
  border: 0;
  background-color: transparent;
  overscroll-behavior: contain;
}

.lightbox::backdrop {
  background-color: var(--color-scrim);
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-sm);
  object-fit: contain;
  /* Set from JS while a swipe is in progress. */
  transform: translate(var(--drag-x, 0), var(--drag-y, 0));
  opacity: var(--drag-opacity, 1);
  touch-action: none;
}

/* Snapping back after a swipe that did not pass the threshold. */
.lightbox__img.is-settling {
  transition:
    transform var(--duration-fast) var(--ease-rise),
    opacity var(--duration-fast) ease;
}

.lightbox__close {
  position: absolute;
  /* The photo carries a transform, which paints it in the positioned layer;
     without a z-index it would cover this button, which follows it in the
     stacking order. */
  z-index: 1;
  top: var(--space-md);
  right: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   04 · Itinerary — flip cards
   -------------------------------------------------------------------------- */
.itinerary {
  gap: var(--space-lg);
}

.itinerary__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  perspective: 1400px;
}

.art-itinerary {
  position: relative;
  width: 100%;
  height: 400px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform var(--duration-flip) var(--ease-flip);

}


.event-card {
  position: relative;
  width: 100%;
  height: 224px;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform var(--duration-flip) var(--ease-flip);
}

.art-itinerary[aria-expanded="true"] {
  transform: rotateY(180deg);
}

/* Only rendered while a card is open — see itinerary.js. The UA rule for
   [hidden] is repeated here because the button carries an explicit display. */
.itinerary__reset {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.itinerary__reset[hidden] {
  display: none;
}

.event-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.event-card__face--front {
  transform: rotateY(0deg) translateZ(1px);
}

.event-card__face--back {
  transform: rotateY(180deg) translateZ(1px);
}

.event-card__station {
  color: var(--color-accent);
  font-family: var(--font-script);
  font-size: var(--text-script-md);
  line-height: 1.05;
}

.event-card__name {
  color: var(--color-secondary);
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.event-card__time {
  color: var(--color-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.event-card__venue {
  color: var(--color-ink);
  font-size: 0.75rem;
}

.event-card__address {
  color: var(--color-ink-70);
  font-size: 0.625rem;
  line-height: var(--leading-normal);
}

/* --------------------------------------------------------------------------
   05 · Dress code
   -------------------------------------------------------------------------- */
.dress {
  gap: var(--space-2xs);
}

.dress__columns {
  display: flex;
  width: 100%;
}

.dress__column {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xs);
}

.dress__column+.dress__column {
  border-left: 2px solid var(--color-accent);
}

.dress__icon {
  --art-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
}

.dress__icon .art {
  width: 56px;
}

.dress__label {
  color: var(--color-accent);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

/* --------------------------------------------------------------------------
   06 · Recommendations / lodging
   -------------------------------------------------------------------------- */
.lodging {
  gap: var(--space-xs);
}

.lodging__illustration {
  --art-color: var(--color-secondary);
  --art-ratio: var(--ratio-hotel);
  --art-width: 90%;
}

.lodging__name {
  margin-top: var(--space-xs);
  color: var(--color-primary);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  text-align: center;
}

.lodging__address {
  color: var(--color-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  text-align: center;
}

.lodging__banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  width: 106%;
  aspect-ratio: var(--ratio-banner);
  margin-top: var(--space-md);
  padding-inline: 12%;
  text-align: center;
}

.lodging__banner-art {
  --art-color: var(--color-surface-warm);
  position: absolute;
  inset: 0;
}

.lodging__banner-title {
  position: relative;
  color: var(--color-primary);
  font-size: 1.3rem;
  font-weight: var(--weight-bold);
}

.lodging__banner-text {
  position: relative;
  color: var(--color-primary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.lodging__banner-note {
  position: relative;
  margin-top: var(--space-2xs);
  color: var(--color-secondary);
  font-size: var(--text-sm);
  font-weight: bold;
  line-height: var(--leading-normal);
}

/* --------------------------------------------------------------------------
   07 · Gift registry
   -------------------------------------------------------------------------- */
.gifts {
  gap: var(--space-xl);
}

.gifts__list {
  display: flex;
  gap: var(--space-xl);
}

.gift {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  transition: transform var(--duration-fast) var(--ease-flip);
}

.gift:active {
  transform: rotate(4deg);
}

.gift__art {
  --art-color: var(--color-secondary);
  position: relative;
  inset: 0;
}

.gift__label {
  position: relative;
  color: var(--color-secondary);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   08 · Share photos
   -------------------------------------------------------------------------- */
.share {
  gap: var(--space-lg);
  padding-block: 3.25rem var(--space-3xl);
}

.share__art {
  --art-color: var(--color-primary);
  --art-ratio: var(--ratio-share);
  --art-width: 86%;
}

.share__title {
  color: var(--color-secondary);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-align: center;
}

/* The heading itself is the link. It keeps the heading's colour rather than
   the document link colour, so the underline is what says "tap me" — without
   it a heading that navigates is invisible as a control. */
.share__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-secondary-40, currentColor);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}

.share__link:hover,
.share__link:focus-visible {
  color: inherit;
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   09 · Closing
   -------------------------------------------------------------------------- */
.closing {
  gap: var(--space-md);
  padding-block: 3.75rem 4.25rem;
}

.closing__art {
  --art-color: var(--color-on-primary);
  --art-ratio: var(--ratio-closing);
  --art-width: 74%;
}

/* --------------------------------------------------------------------------
   Shared inline link style
   -------------------------------------------------------------------------- */
.link-underline {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-primary-40);
  color: var(--color-primary);
  font-size: var(--text-sm);
}

.bold {
  font-weight: bold;
}

.link-primary {
  color: var(--color-primary);
  font-size: var(--text-sm);
}

.link-secondary-alt {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent);
}

.link-secondary {
  border-bottom-color: var(--color-accent);
  color: var(--color-secondary);
}

.event-card__more {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-secondary-40);
  color: var(--color-secondary-80);
  font-size: var(--text-xs);
}

.event-card__map {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-primary-40);
  color: var(--color-primary);
  font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   Wireframe annotations
   -------------------------------------------------------------------------- */
.wf-note {
  width: 100%;
  margin-top: var(--space-sm);
  padding: 0.625rem var(--space-sm);
  border: 1px dashed var(--color-primary-30);
  border-radius: var(--radius-md);
  background-color: rgb(255 255 255 / 0.5);
  color: var(--color-ink-80);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
}

.section--closing .wf-note {
  border-color: var(--color-cream-40);
  background-color: var(--color-cream-12);
  color: var(--color-cream-90);
}