/* ================================================================
   STYLES.CSS
   Page-level styles for the wedding invitation.
   All colour values reference design-system.css tokens.
================================================================ */

/* ── Reflow Sans — Hero display family ── */
@font-face {
  font-family: "Reflow Sans";
  src: url("../assets/fonts/ReflowSans-Thin.ttf") format("truetype");
  font-style: normal;
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "Reflow Sans";
  src: url("../assets/fonts/ReflowSans-ExtraLight.ttf") format("truetype");
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: "Reflow Sans";
  src: url("../assets/fonts/ReflowSans-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Reflow Sans";
  src: url("../assets/fonts/ReflowSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Reflow Sans";
  src: url("../assets/fonts/ReflowSans-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Reflow Sans";
  src: url("../assets/fonts/ReflowSans-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Reflow Sans";
  src: url("../assets/fonts/ReflowSans-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Reflow Sans";
  src: url("../assets/fonts/ReflowSans-ExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
}

/* ── Base ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  overflow-x: hidden;
}

/* ScrollSmoother transforms only the story layer. Fixed atmosphere,
   cover and audio controls remain outside these wrappers. */
#smooth-wrapper {
  width: 100%;
  overflow: hidden;
}

#smooth-content {
  width: 100%;
  overflow: visible;
}

html.motion-enhanced {
  scroll-behavior: auto !important;
}

.motion-enhanced .reveal {
  transition: none;
}

/* ── Typography helper ── */
.font-display {
  font-family: var(--font-display);
}

/* ── Section label (overrides .label for non-form use) ── */
.section-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-gold);
  /* was hsl(var(--accent)) — 3.18:1 FAIL → now 5.83:1 PASS */
}

/* ── Panel (card lite — no header/footer structure needed) ── */
.panel {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ── Countdown box ── */
.cd-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1rem 1rem 0.75rem;
  min-width: 68px;
  flex: 1;
  max-width: 96px;
  box-shadow: var(--shadow-sm);
}

.cd-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 2.75rem);
  font-weight: 300;
  color: hsl(var(--foreground));
  line-height: 1;
}

.cd-label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text-gold);
  /* was hsl(var(--accent)) — 3.18:1 FAIL → now 5.83:1 PASS */
  margin-top: 0.4rem;
}

/* ── Ornament diamond ── */
.diamond {
  width: 6px;
  height: 6px;
  background: hsl(var(--accent));
  transform: rotate(45deg);
  display: inline-block;
  flex-shrink: 0;
}

/* ── Gold divider ── */
.gold-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  margin: 1.5rem auto;
}

.gold-divider::before,
.gold-divider::after {
  content: '';
  flex: 1;
  max-width: 80px;
  height: 1px;
}

.gold-divider::before {
  background: linear-gradient(90deg, transparent, hsl(var(--accent)));
}

.gold-divider::after {
  background: linear-gradient(90deg, hsl(var(--accent)), transparent);
}

/* ── Floral accent ── */
.floral-accent {
  font-size: 1.1rem;
  color: hsl(var(--accent));
  opacity: 0.7;
  letter-spacing: 0.1em;
}

/* ── Petal canvas (fixed, drifts gently over the whole page) ── */
#petalCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
  /* above page content, below the editorial hero/cover/music */
}

/* ── Editorial Hero — Figma frame 305:111 ── */
#hero {
  position: relative;
  z-index: 46;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: #514741;
  background: #f5f0eb;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 26px minmax(368px, 1fr) 36px;
  width: 100%;
  min-height: max(590px, 100svh);
  padding: 24px clamp(24px, 3vw, 48px);
}

.hero-masthead,
.hero-meta {
  font-family: "DM Mono", monospace;
  font-style: normal;
  font-weight: 500;
}

.hero-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.hero-statement-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.hero-statement {
  display: grid;
  grid-template-rows: repeat(4, 23.369565%);
  gap: 2.173913% 0;
  width: min(607px, calc(100vw - 32px));
  aspect-ratio: 607 / 368;
  font-family: "Reflow Sans", Arial, Helvetica, sans-serif;
  font-size: clamp(29px, calc(10.5436vw - 3.374px), 64px);
  font-style: normal;
  font-weight: 700;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.01em;
}

.hero-line {
  display: grid;
  align-items: center;
  column-gap: 1.812191%;
  min-width: 0;
  white-space: nowrap;
}

.hero-line--celebrate {
  grid-template-columns: minmax(0, 1fr) 31.136738%;
}

.hero-line--celebrate>span {
  font-size: 0.88em;
  letter-spacing: 0.005em;
}

.hero-line--happy {
  grid-template-columns: 20.098847% minmax(0, 1fr);
}

.hero-line--names {
  grid-template-columns: minmax(0, 1fr) 18%;
}

.hero-line--names>span {
  font-size: 0.82em;
  letter-spacing: 0;
}

.hero-line--aliva {
  grid-template-columns: 66.556837% minmax(0, 1fr);
}

.hero-line--aliva>span {
  letter-spacing: 0.03em;
}

/* Indonesian copy is naturally shorter than the English copy. Give the
   editorial wordmarks a little more visual width so the image/text rhythm
   stays tight when the locale changes. */
html[lang="id"] .hero-line--celebrate>span {
  font-size: 0.96em;
  letter-spacing: 0.015em;
}

html[lang="id"] .hero-line--names>span {
  font-size: 0.98em;
  letter-spacing: 0.01em;
}

.hero-crop {
  position: relative;
  align-self: stretch;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #d9d9d9;
}

.hero-crop img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* The pinned chapter uses a viewport-sized stage on capable desktop
   layouts. Short and narrow viewports keep the section in normal flow. */
@media (min-width: 768px) and (min-height: 700px) {
  .motion-enhanced #couple {
    display: flex;
    min-height: auto;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }

  .motion-enhanced .couple-stage {
    display: flex;
    width: 100%;
    min-height: auto;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ── Couple profiles: compact editorial layout ───────────────── */
.couple-heading h2 {
  margin-inline: auto;
  max-width: 28rem;
}

.couple-intro {
  max-width: 30rem;
  margin: 1rem auto 0;
  color: hsl(var(--foreground) / 0.68);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}

.couple-cards {
  align-items: stretch;
}

.couple-card {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid hsl(var(--accent) / 0.58);
  border-radius: 1rem;
  background: hsl(var(--card) / 0.72);
}

.couple-card__portrait {
  width: 7rem;
  height: 7rem;
  overflow: hidden;
  border: 2px solid hsl(var(--accent) / 0.78);
  border-radius: 50%;
  background: hsl(var(--muted));
}

.couple-card__portrait img {
  display: block;
}

.couple-card__content {
  min-width: 0;
}

.couple-card__role {
  margin: 0 0 0.35rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.4;
  text-transform: uppercase;
}

.couple-card__content h3 {
  margin: 0;
  line-height: 1.12;
}

.couple-card__rule {
  width: 2rem;
  height: 1px;
  margin: 0.85rem 0;
}

.couple-card__bio {
  margin: 0;
  color: hsl(var(--foreground) / 0.68);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.65;
}

.couple-quote {
  margin-inline: auto;
  padding-top: 0.25rem;
}

/* Keep the chapter breathable without making the pinned sequence feel
   detached from the sections before and after it. */
.couple-story {
  padding-block: clamp(3.75rem, 7vw, 6rem);
}

@media (min-width: 768px) and (min-height: 700px) {
  .motion-enhanced #couple {
    padding-block: clamp(3.5rem, 7vh, 5.5rem);
  }
}

@media (max-width: 520px) {
  .couple-story {
    padding-block: clamp(3.5rem, 11vw, 4.5rem);
  }

  .couple-card {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.15rem;
  }

  .couple-card__portrait {
    width: 5.5rem;
    height: 5.5rem;
  }

  .couple-card__content h3 {
    font-size: 1.55rem;
  }

  .couple-card__bio {
    font-size: 0.875rem;
  }
}

.hero-crop--portrait img {
  position: absolute;
  top: -122.49%;
  left: -56.65%;
  width: 213.31%;
  height: 483.61%;
}

.hero-meta {
  display: grid;
  grid-template-columns: 336px 336px 98px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.hero-meta__tagline,
.hero-meta__couple,
.hero-scroll-cue,
.hero-meta__date p,
.hero-masthead p {
  margin: 0;
}

.hero-meta__tagline,
.hero-meta__couple {
  width: 336px;
}

.hero-meta__tagline {
  font-size: 0.875rem;
  line-height: 1.4;
  opacity: 0.9;
}

.hero-scroll-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: clamp(12px, 2.2vh, 22px);
  color: #514741;
  font-family: "DM Mono", monospace;
  font-size: clamp(0.75rem, 1.4vw, 0.875rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  opacity: 0.78;
  text-align: center;
  white-space: normal;
}

.hero-scroll-cue span {
  display: inline-block;
  font-size: 1em;
  line-height: 1.2;
  animation: scroll-cue-drop 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes scroll-cue-drop {
  0%,
  100% {
    transform: translateY(-1px);
    opacity: 1;
  }

  50% {
    transform: translateY(3px);
    opacity: 1;
  }
}

.hero-meta__date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  width: max-content;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .hero-content {
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 100vh;
    min-height: 100svh;
    padding: 24px;
  }

  .hero-masthead {
    gap: 16px;
    font-size: clamp(0.75rem, 2.65vw, 0.875rem);
  }

  .hero-masthead p:last-child {
    text-align: right;
  }

  .hero-statement {
    width: min(607px, calc(100vw - 48px));
    font-size: clamp(29px, calc(10.5436vw - 5.0609px), 64px);
  }

  .hero-meta {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 16px;
    font-size: clamp(0.75rem, 2.4vw, 0.875rem);
  }

  .hero-meta__tagline {
    grid-column: 1 / -1;
    width: min(100%, 336px);
    line-height: 1.4;
  }

  .hero-meta__couple {
    align-self: end;
    width: auto;
    white-space: nowrap;
  }

  .hero-scroll-cue {
    gap: 5px;
    margin-top: clamp(10px, 2vh, 16px);
    font-size: clamp(0.75rem, 2.2vw, 0.875rem);
    line-height: 1.4;
    opacity: 0.78;
  }
}

/* On phones, keep the complete metadata stack centered and lift it clear
   of the fixed music panel when it expands. */
@media (max-width: 640px) {
  .hero-meta {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 7px;
    padding-bottom: clamp(2.5rem, 8vh, 4rem);
    text-align: center;
  }

  .hero-meta__tagline {
    grid-column: auto;
    width: min(100%, 336px);
  }

  .hero-meta__couple {
    justify-self: center;
  }

  .hero-meta__date {
    align-items: center;
    justify-self: center;
  }
}

@media (max-width: 520px) {
  .hero-content {
    padding: 16px;
  }

  .hero-statement {
    width: calc(100vw - 32px);
    font-size: clamp(29px, calc(10.5436vw - 3.374px), 64px);
  }
}

@media (max-width: 420px) {
  .hero-masthead {
    align-items: flex-start;
  }

  .hero-masthead p:first-child {
    max-width: 9rem;
  }

  .hero-masthead p:last-child {
    max-width: 12rem;
    white-space: normal;
  }

}

@media (max-height: 650px) and (max-width: 820px) {
  .hero-meta {
    row-gap: 8px;
  }
}

/* ── Smooth scroll offset ── */
section {
  scroll-margin-top: 72px;
}

/* ── RSVP radio cards ── */
.radio-card input[type="radio"] {
  display: none;
}

.radio-card label {
  display: block;
  padding: 0.6rem 1.4rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  transition: background var(--duration-base) var(--ease-default),
    border-color var(--duration-base) var(--ease-default),
    color var(--duration-base) var(--ease-default);
  background: hsl(var(--card));
}

.radio-card input[type="radio"]:checked+label {
  background: hsl(var(--accent));
  border-color: hsl(var(--accent));
  color: hsl(var(--card));
}

.radio-card label:hover {
  border-color: hsl(var(--accent));
  color: hsl(var(--accent));
}

/* ── Form input (page-specific alias of .input token class) ── */
.form-input {
  width: 100%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: hsl(var(--foreground));
  outline: none;
  transition: border-color var(--duration-base) var(--ease-default),
    box-shadow var(--duration-base) var(--ease-default);
}

.form-input:focus {
  border-color: hsl(var(--accent));
  box-shadow: var(--shadow-gold);
}

.form-input::placeholder {
  color: hsl(var(--muted-foreground));
  opacity: 1;
}

/* ── Submit button (page-specific; uses .btn-default under the hood) ── */
.btn-submit {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 0.9rem 2.5rem;
  min-height: 2.75rem;
  border: 1px solid hsl(var(--primary));
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-default),
    border-color var(--duration-base) var(--ease-default),
    color var(--duration-base) var(--ease-default),
    box-shadow var(--duration-base) var(--ease-default);
  display: inline-block;
}

.btn-submit:hover {
  background: hsl(var(--accent));
  border-color: hsl(var(--accent));
  color: hsl(var(--card));
}

.btn-submit:focus-visible {
  outline: none;
  box-shadow: var(--shadow-gold);
}

/* ── Reveal on scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* ── Staggered reveal (section headers): children rise in sequence ── */
.reveal.stagger {
  transform: none;
  /* children handle the motion, container just fades */
}

.reveal.stagger.visible>* {
  animation: reveal-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.reveal.stagger.visible>*:nth-child(1) {
  animation-delay: 0.05s;
}

.reveal.stagger.visible>*:nth-child(2) {
  animation-delay: 0.18s;
}

.reveal.stagger.visible>*:nth-child(3) {
  animation-delay: 0.31s;
}

.reveal.stagger.visible>*:nth-child(4) {
  animation-delay: 0.44s;
}

.reveal.stagger.visible>*:nth-child(5) {
  animation-delay: 0.57s;
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ── Music Player ── */
.music-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 1px solid hsl(var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(44, 36, 32, 0.18);
  transition: background var(--duration-base) var(--ease-default),
    transform var(--duration-base) var(--ease-default);
  position: relative;
}

.music-btn:hover {
  background: hsl(var(--accent));
  transform: scale(1.08);
}

.music-btn.is-playing::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid hsl(var(--accent) / 0.45);
  animation: music-pulse 2s ease-in-out infinite;
}

@keyframes music-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.18);
    opacity: 0;
  }
}

.music-panel {
  transform-origin: bottom right;
  transform: scale(0.9) translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.music-panel.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ── Cover Screen ── */
#cover-screen {
  --cover-surface: hsl(var(--secondary));
  --ticket-surface: hsl(var(--muted));
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  touch-action: none;
  background: var(--cover-surface);
  font-family: var(--font-body);
  color: hsl(var(--foreground));
  transition:
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.9s ease-out;
}

.cover-photo {
  position: absolute;
  z-index: 0;
  top: clamp(-10.2rem, -36vw, -8.45rem);
  left: 50%;
  width: min(100vw, 42rem);
  aspect-ratio: 2 / 3;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg,
      hsl(var(--secondary) / 0) 16%,
      hsl(var(--foreground) / 0.2) 44%,
      hsl(var(--secondary) / 0.72) 68%,
      var(--cover-surface) 84%),
    url("../assets/cover/andrika-aliva-curtain.jpeg") center / cover no-repeat;
}

.cover-ticket {
  --ticket-gap: clamp(1.35rem, 8.27vw, 1.9375rem);
  --ticket-padding: clamp(0.8rem, 4.27vw, 1rem);
  --ticket-photo-height: clamp(4.7rem, 23.73vw, 5.5625rem);
  --ticket-notch-y: calc(var(--ticket-padding) + 1.5625rem + var(--ticket-gap) + var(--ticket-photo-height) + var(--ticket-gap) + 0.09375rem);
  position: absolute;
  z-index: 1;
  top: clamp(17.125rem, calc(35dvh + 3.125rem), 23.125rem);
  left: 50%;
  isolation: isolate;
  display: flex;
  width: min(75.47vw, 17.6875rem);
  min-height: min(68.49dvh, 31.5rem);
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: var(--ticket-gap);
  padding: var(--ticket-padding);
  border-radius: 1.5rem;
  background: var(--ticket-surface);
  box-shadow: 0 0.4rem 1.25rem hsl(var(--foreground) / 0.04);
  -webkit-mask-image:
    radial-gradient(circle 0.75rem at left var(--ticket-notch-y),
      transparent 0.72rem,
      #000 0.75rem),
    radial-gradient(circle 0.75rem at right var(--ticket-notch-y),
      transparent 0.72rem,
      #000 0.75rem);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle 0.75rem at left var(--ticket-notch-y),
      transparent 0.72rem,
      #000 0.75rem),
    radial-gradient(circle 0.75rem at right var(--ticket-notch-y),
      transparent 0.72rem,
      #000 0.75rem);
  mask-composite: intersect;
}

.cover-ticket-header {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 1.5625rem;
}

.cover-ticket-header p,
.cover-ticket-names {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.55;
}

.cover-ticket-header p {
  text-transform: uppercase;
}

.cover-ticket-photo {
  position: relative;
  z-index: 3;
  width: 100%;
  height: var(--ticket-photo-height);
  overflow: hidden;
  margin: 0;
  border: 3px solid hsl(var(--muted-foreground) / 0.25);
  border-radius: var(--radius);
}

.cover-ticket-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}

.cover-ticket-dash {
  position: relative;
  z-index: 3;
  width: 84%;
  height: 1px;
  background: repeating-linear-gradient(90deg,
      hsl(var(--accent) / 0.65) 0 0.5rem,
      transparent 0.5rem 0.9rem);
}

.cover-ticket-details {
  position: relative;
  z-index: 3;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.cover-ticket-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.cover-ticket-ornament {
  width: 0.8125rem;
  height: 1.1336rem;
}

.cover-ticket-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.55;
}

.cover-ticket-date p:last-child {
  font-weight: 600;
}

.cover-ticket-guest {
  max-width: 100%;
  color: var(--text-rose);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.3;
}

#cover-btn {
  position: relative;
  z-index: 3;
  display: inline-flex;
  width: 100%;
  min-height: 3.0625rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border: 1px solid hsl(var(--primary));
  border-radius: 0.75rem;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  cursor: pointer;
  transition:
    background var(--duration-base) var(--ease-default),
    border-color var(--duration-base) var(--ease-default),
    color var(--duration-base) var(--ease-default),
    box-shadow var(--duration-base) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}

#cover-btn:hover {
  border-color: hsl(var(--accent));
  background: hsl(var(--accent));
  color: hsl(var(--card));
}

#cover-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-gold);
}

#cover-btn:active {
  transform: translateY(1px) scale(0.99);
}

@media (max-height: 50rem) {
  .cover-ticket {
    --ticket-gap: 1.5rem;
  }
}

@media (max-height: 41rem) {
  .cover-ticket {
    --ticket-gap: 1.2rem;
    top: clamp(12.625rem, calc(26dvh + 3.125rem), 13.625rem);
  }
}

@media (min-width: 48rem) {
  .cover-photo {
    width: 32rem;
  }
}

/* ── Ticket tear → full-screen opening transition ── */
#cover-screen.ticket-transitioning {
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

#cover-screen.ticket-transitioning>.cover-ticket {
  visibility: hidden;
}

#cover-screen.ticket-transitioning.dismissed {
  transform: none;
}

.ticket-transition-stage {
  position: fixed;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
  transform: translateZ(0) scale(1);
  transform-origin: center center;
  will-change: transform;
}

.ticket-transition-stage.is-active {
  animation: ticket-stage-zoom 1.45s cubic-bezier(0.45, 0, 0.2, 1) forwards;
}

.ticket-transition-clone {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  transform: none;
  box-shadow: none;
  pointer-events: none;
  filter: blur(0);
  will-change: transform, filter;
}

.ticket-transition-clone--top {
  transform-origin: center var(--ticket-tear-y);
}

.ticket-transition-clone--bottom {
  transform-origin: center var(--ticket-tear-y);
}

.ticket-transition-stage.is-active .ticket-transition-clone--top {
  animation:
    ticket-tear-top 1.45s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    ticket-motion-blur 1.45s linear forwards;
}

.ticket-transition-stage.is-active .ticket-transition-clone--bottom {
  animation:
    ticket-tear-bottom 1.45s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    ticket-motion-blur 1.45s linear forwards;
}

@keyframes ticket-tear-top {
  0% {
    transform: translate3d(0, 0, 0) rotate(0);
  }

  30% {
    transform: translate3d(-3px, -16px, 0) rotate(-0.65deg);
  }

  46% {
    transform: translate3d(-3px, -16px, 0) rotate(-0.65deg);
  }

  68% {
    transform: translate3d(-1px, -7px, 0) rotate(-0.25deg);
  }

  100% {
    transform: translate3d(0, -2px, 0) rotate(0);
  }
}

@keyframes ticket-tear-bottom {
  0% {
    transform: translate3d(0, 0, 0) rotate(0);
  }

  30% {
    transform: translate3d(3px, 20px, 0) rotate(0.7deg);
  }

  46% {
    transform: translate3d(3px, 20px, 0) rotate(0.7deg);
  }

  68% {
    transform: translate3d(1px, 9px, 0) rotate(0.28deg);
  }

  100% {
    transform: translate3d(0, 3px, 0) rotate(0);
  }
}

@keyframes ticket-stage-zoom {

  0%,
  46% {
    transform: translateZ(0) scale(1);
  }

  55% {
    transform: translateZ(0) scale(0.985);
  }

  100% {
    transform: translateZ(0) scale(var(--ticket-zoom-scale));
  }
}

@keyframes ticket-motion-blur {

  0%,
  46% {
    filter: blur(0);
  }

  62% {
    filter: blur(0.35px);
  }

  78% {
    filter: blur(1px);
  }

  90% {
    filter: blur(2px);
  }

  100% {
    filter: blur(3px);
  }
}

/* Cover dissolves into the light rather than sliding away */
#cover-screen.dismissed {
  transform: scale(1.06);
  opacity: 0;
  pointer-events: none;
}

/* ── Light-bloom transition (cover → hero) ── */
#bloom {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 65;
  /* above cover content, below nothing else during transition */
  background: radial-gradient(circle,
      #FFFBEF 0%,
      #F8E9C4 32%,
      #EBCB86 56%,
      rgba(235, 203, 134, 0) 70%);
}

#bloom.active {
  animation: bloom-flare 1.5s ease-out forwards;
}

@keyframes bloom-flare {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  55% {
    transform: translate(-50%, -50%) scale(120);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(150);
    opacity: 0;
  }
}

/* Hero emerges from the light after the cover is dismissed */
.hero-emerge .hero-content {
  animation: hero-emerge 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hero-emerge {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* ── Prewedding gallery ──
   Figma 312:74. The section is full-bleed and tall; .gallery-frame is
   the rounded panel painted behind the content. GSAP scrubs the frame's
   horizontal inset and radius so it expands to fill the screen on the
   way in and contracts on the way out. Without GSAP it simply sits
   full-bleed, which is a correct resting state on its own. */
#photo-band {
  position: relative;
  z-index: 1;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3.5rem, 8vw, 5.5rem);
}

.gallery-frame {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Animated by GSAP. Content padding below always clears the largest
     inset these reach, so the layout never escapes the panel. */
  left: 0;
  right: 0;
  border-radius: 0;
  z-index: 0;
  background-image:
    radial-gradient(120% 55% at 50% 0%, hsl(28 22% 30%), transparent 70%),
    linear-gradient(180deg, #3F3128 0%, #372B22 100%);
}

.gallery-layout {
  position: relative;
  z-index: 2;
  max-width: 1560px;
  margin: 0 auto;
  /* Never less than the frame's 6% inset, at any viewport. */
  padding: 0 clamp(1.5rem, 8vw, 9rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.25rem, 5vw, 3.5rem);
}

@media (min-width: 1024px) {
  .gallery-layout {
    grid-template-columns: minmax(230px, 30%) 1fr;
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: start;
  }
}

/* ── Left column: the context ── */
.gallery-context__inner {
  text-align: center;
}

@media (min-width: 1024px) {
  .gallery-context__inner {
    text-align: left;
    /* Clears the fixed language switcher when pinned. */
    padding-top: 0.5rem;
  }

  .gallery-context__rule {
    margin-left: 0;
    justify-content: flex-start;
  }

  .gallery-context__rule::before {
    display: none;
  }
}

.gallery-context__label {
  color: #F3E7CF;
  margin-bottom: 0.85rem;
}

.gallery-context__heading {
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: var(--leading-tight);
  color: #FCF7EC;
  margin: 0;
}

.gallery-context__rule {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  max-width: 8rem;
}

.gallery-context__intro {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: #E4D4B4;
  margin: 0 0 1.75rem;
  max-width: 34ch;
}

@media (max-width: 1023px) {
  .gallery-context__intro {
    margin-left: auto;
    margin-right: auto;
  }
}

.gallery-context__count {
  margin: 1.25rem 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #C9AF7E;
}

/* ── Masonry grid ──
   CSS multi-column: every card keeps its own image ratio while the
   gutters stay mechanically even. Cards flow down each column.
   --gallery-columns is the count this breakpoint wants. */
.gallery-grid {
  --gallery-columns: 2;
  column-count: var(--gallery-columns);
  column-gap: clamp(0.7rem, 1.6vw, 1.35rem);
}

/* Counts follow the width the grid actually gets, which is not monotonic:
   it grows while the layout is stacked, drops back at 1024 when the
   context column splits off, then grows again. */
@media (min-width: 640px) {
  .gallery-grid {
    --gallery-columns: 3;
  }
}

@media (min-width: 1024px) {
  .gallery-grid {
    --gallery-columns: 2;
  }
}

@media (min-width: 1440px) {
  .gallery-grid {
    --gallery-columns: 3;
  }
}

.gallery-card {
  break-inside: avoid;
  margin: 0 0 clamp(1.35rem, 2.4vw, 2rem);
}

.gallery-card__media {
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 253, 249, 0.05);
  box-shadow: 0 8px 20px -10px rgba(16, 10, 5, 0.55);
  transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-card__media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .gallery-card:hover .gallery-card__media {
    box-shadow: 0 16px 32px -12px rgba(16, 10, 5, 0.68);
  }

  .gallery-card:hover .gallery-card__media img {
    transform: scale(1.045);
  }
}

.gallery-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.7rem 0.15rem 0;
}

.gallery-card__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  line-height: var(--leading-snug);
  color: #FBF4E6;
}

@media (max-width: 1023px) {
  .gallery-card__meta {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0.55rem;
  }

  .gallery-card__title {
    font-size: 0.875rem;
  }

}

@media (prefers-reduced-motion: reduce) {

  .gallery-card__media,
  .gallery-card__media img {
    transition: none;
  }
}

/* ── RSVP success ── */
#rsvp-success {
  display: none;
  text-align: center;
  padding: 2rem;
}

/* ================================================================
   PREMIUM POLISH
   Small, on-brand refinements: texture, typographic finish,
   and tactile interaction feedback. No colour or layout changes.
================================================================ */

/* ── Grain: a whisper of texture so surfaces don't read as flat ── */
#grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 45;
  /* over petals, under the editorial hero/cover/music */
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Typographic finish ── */
/* Tabular figures so ticking numbers never shift width */
.cd-num,
.cd-label {
  font-variant-numeric: tabular-nums;
}

#when .font-display.text-4xl,
#when .font-display.text-3xl {
  font-variant-numeric: tabular-nums;
}

/* Balance headings, tidy the last line of body copy */
h1,
h2,
h3,
.font-display {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Large couple names: a touch tighter for a more composed look */
#hero h1.text-5xl,
#hero h1.text-6xl,
#cover-screen h1 {
  letter-spacing: 0.01em;
}

/* ── Tactile feedback: press + accessible focus ── */
.btn-submit {
  transition-property: background, border-color, color, box-shadow, transform;
}

.btn-submit:active {
  transform: translateY(1px) scale(0.99);
}

.music-btn:active {
  transform: scale(0.95);
}

.radio-card input[type="radio"]:focus-visible+label {
  border-color: hsl(var(--accent));
  box-shadow: var(--shadow-gold);
}

.radio-card label:active {
  transform: translateY(1px);
}

/* Visible keyboard focus for links that carry the gold-outline pattern */
a:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-gold);
}

/* ── Reduced motion: keep everything readable, drop the flourish ── */
@media (prefers-reduced-motion: reduce) {

  #smooth-wrapper,
  #smooth-content {
    overflow: visible !important;
  }

  .reveal,
  .reveal.stagger.visible>* {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  #bloom,
  #bloom.active {
    animation: none !important;
    opacity: 0 !important;
  }

  #cover-screen {
    transition: opacity 0.4s ease-out !important;
  }

  #cover-screen.dismissed {
    transform: none !important;
  }

  .ticket-transition-stage,
  .ticket-transition-clone {
    animation: none !important;
    transform: none !important;
  }

  .hero-emerge .hero-content {
    animation: none !important;
  }

  .music-btn.is-playing::after {
    animation: none !important;
  }

  .hero-scroll-cue span {
    animation: none !important;
  }
}
/* ── Language toggle ─────────────────────────────────────────── */
.language-switcher {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(201, 169, 110, 0.55);
  border-radius: 999px;
  background: rgba(250, 246, 239, 0.86);
  color: #7e5922;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(44, 36, 32, 0.08);
}

.language-btn {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.35rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  opacity: 0.82;
  transition: opacity 150ms ease, transform 150ms ease;
}

.language-btn:hover,
.language-btn:focus-visible,
.language-btn.is-active {
  opacity: 1;
}

.language-btn:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.language-btn:active {
  transform: scale(0.94);
}

@media (max-width: 30rem) {
  .language-switcher {
    top: 0.8rem;
    right: 0.8rem;
  }
}

/* ── Date chapter: decisive hierarchy ────────────────────────── */
#when .when-shell {
  max-width: 62rem;
}

#when h2 {
  font-size: clamp(2.9rem, 6vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

#when .when-calendar {
  max-width: 34rem;
  border: 1px solid hsl(var(--accent));
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
}

#when .when-calendar__day {
  min-height: 11rem;
  transition: background-color var(--duration-base) var(--ease-default);
}

#when .when-calendar__day--active {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  opacity: 1;
}

#when .when-calendar__day--active .section-label,
#when .when-calendar__day--active > span {
  color: var(--text-gold);
}

#when .when-calendar__day--active > div {
  border-color: hsl(var(--destructive)) !important;
  box-shadow: 0 0 0 4px hsl(var(--destructive) / 0.12) !important;
}

#when .when-calendar__day:not(.when-calendar__day--active) .section-label,
#when .when-calendar__day:not(.when-calendar__day--active) > span {
  color: hsl(var(--foreground) / 0.72);
}

#when .when-countdown > .flex {
  max-width: 34rem;
  margin-inline: auto;
  padding: 0.75rem;
  border-radius: 1rem;
  background: hsl(var(--primary));
  box-shadow: var(--shadow-md);
}

#when .when-countdown {
  position: relative;
  z-index: 45;
}

#when .when-countdown .cd-box {
  max-width: none;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  box-shadow: none;
}

#when .when-countdown .cd-num,
#when .when-countdown .cd-label {
  color: hsl(var(--primary-foreground));
}

#when .when-countdown .cd-num {
  font-size: clamp(2.35rem, 5vw, 3.5rem);
  font-weight: 500;
}

#when .when-countdown .cd-label {
  opacity: 0.84;
}

#when .when-event {
  border: 1px solid hsl(var(--accent));
  border-radius: 1rem;
  box-shadow: var(--shadow-sm);
}

#when .when-event__title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3em;
}

#when .when-event__date {
  font-size: 1.35rem;
  font-weight: 500;
}

#when .when-event__time {
  font-size: 1.05rem;
  font-weight: 500;
}

#when .when-event__venue {
  font-size: 0.9rem;
  opacity: 0.82;
}

@media (max-width: 640px) {
  #when {
    padding-block: clamp(4rem, 14vw, 5.5rem);
  }

  #when .when-calendar {
    max-width: 100%;
  }

  #when .when-calendar__day {
    min-height: 9.5rem;
    padding-inline: 0.5rem;
  }

  #when .when-countdown > .flex {
    display: flex;
    gap: 0.25rem;
    padding: 0.55rem;
    background: hsl(var(--primary));
    box-shadow: var(--shadow-md);
  }

  #when .when-countdown > .section-label {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
  }

  #when .when-countdown .cd-box {
    min-width: 0;
    padding: 0.8rem 0.2rem 0.65rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    box-shadow: none;
  }

  #when .when-countdown .cd-num {
    color: hsl(var(--primary-foreground));
    font-size: clamp(1.8rem, 10vw, 2.4rem);
  }

  #when .when-countdown .cd-label {
    margin-top: 0.55rem;
    color: hsl(var(--primary-foreground));
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    opacity: 0.86;
    white-space: nowrap;
  }

  #when .when-event {
    padding: 1.35rem;
  }
}

/* ── RSVP: focused, expandable form flow ─────────────────────── */
#rsvp .rsvp-shell {
  max-width: 44rem;
}

#rsvp .rsvp-form-panel {
  border-color: hsl(var(--accent));
  box-shadow: var(--shadow-md);
}

#rsvp .rsvp-primary-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10rem;
  gap: 1.25rem;
}

#rsvp .rsvp-guest-count {
  width: 100%;
}

#rsvp .rsvp-attendance-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#rsvp .rsvp-attendance-options .radio-card,
#rsvp .rsvp-attendance-options .radio-card label {
  width: 100%;
}

#rsvp .rsvp-attendance-options .radio-card label {
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-align: center;
}

#rsvp .rsvp-message {
  min-height: 9rem;
  max-height: 24rem;
  line-height: 1.65;
}

#rsvp .rsvp-submit-row {
  display: flex;
  justify-content: flex-end;
}

#rsvp-success {
  max-width: 34rem;
  margin-inline: auto;
  overflow-wrap: anywhere;
}

/* ── Wedding gifts ───────────────────────────────────────────── */
#gift .gift-shell {
  max-width: 56rem;
}

#gift .gift-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

#gift .gift-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  text-align: center;
  border-color: hsl(var(--accent));
  box-shadow: var(--shadow-md);
}

#gift .gift-card__ornament {
  margin-bottom: 0.9rem;
  font-size: 1.1rem;
}

#gift .gift-card__bank {
  margin-bottom: 0.8rem;
}

#gift .gift-card__holder-label,
#gift .gift-card__account-label {
  color: var(--text-rose);
  font-size: 0.75rem;
}

#gift .gift-card__holder-label {
  margin-bottom: 0.25rem;
}

#gift .gift-card__name {
  max-width: 18rem;
  margin-inline: auto;
}

#gift .gift-card__rule {
  width: 2rem;
  height: 1px;
  margin: 1.25rem auto 1rem;
  background: hsl(var(--accent));
}

#gift .gift-card__account-label {
  margin-bottom: 0;
}

#gift .gift-card__number {
  max-width: 100%;
  margin: 0.35rem 0 1.25rem;
  overflow-wrap: anywhere;
  color: hsl(var(--foreground));
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.45rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
}

#gift .gift-card__number.is-empty {
  color: hsl(var(--muted-foreground));
  letter-spacing: 0.12em;
}

#gift .gift-copy-btn {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border: 1px solid hsl(var(--accent));
  background: transparent;
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background var(--duration-base) var(--ease-default), color var(--duration-base) var(--ease-default), opacity var(--duration-base) var(--ease-default);
}

#gift .gift-copy-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

#gift .gift-copy-btn:hover:not(:disabled),
#gift .gift-copy-btn.is-copied {
  background: hsl(var(--accent));
  color: hsl(var(--card));
}

#gift .gift-copy-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-gold);
}

#gift .gift-copy-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

#gift .gift-card__status {
  min-height: 1.25rem;
  margin-top: 0.75rem;
  color: var(--text-gold);
  font-size: 0.875rem;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-default);
}

#gift .gift-card__status.is-visible {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 640px) {
  #rsvp {
    padding-block: clamp(4rem, 14vw, 5.5rem);
  }

  #rsvp .rsvp-primary-fields {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  #rsvp .rsvp-guest-count {
    max-width: 12rem;
  }

  #rsvp .rsvp-attendance-options {
    grid-template-columns: 1fr;
  }

  #rsvp .rsvp-submit-row,
  #rsvp .btn-submit {
    width: 100%;
  }

  #rsvp .rsvp-form-panel {
    padding: 1.1rem;
  }

  #gift .gift-cards {
    grid-template-columns: 1fr;
  }

  #gift .gift-card__number {
    font-size: clamp(1.7rem, 8vw, 2.25rem);
  }
}