/* ──────────────────────────────────────────────────────────────────────────
   Baptismal invitation — golden-hour wolf rider.
   The supplied artwork is the source of truth; the RSVP panel follows
   guest_fill_up.png (smoked panel, double gold frame, paw crest, bevelled
   gold SUBMIT). One dark world: the scene is dusk, so is the chrome.
   ────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Cinzel";
  src: url("/assets/fonts/cinzel.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/garamond.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/garamond-italic.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink-950: #120c07;
  --ink-900: #1c140c;
  --ink-800: #2a1c0e;
  --bronze-700: #6b4a1c;
  --bronze-600: #9c7031;
  --gold-500: #c9a45c;
  --gold-400: #d9b566;
  --gold-300: #ecd08f;
  --gold-200: #f6dc98;
  --parch: #f4e7cb;
  --cream: #fff3d8;
  --coral: #ffb9a3;

  --display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --text: "EB Garamond", "Garamond", "Georgia", serif;

  --gutter: 16px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --safe-t: max(var(--gutter), env(safe-area-inset-top));
  --safe-r: max(var(--gutter), env(safe-area-inset-right));
  --safe-b: max(var(--gutter), env(safe-area-inset-bottom));
  --safe-l: max(var(--gutter), env(safe-area-inset-left));

  color-scheme: dark;
  scrollbar-color: #8a6a35 var(--ink-950);
}

@media (min-width: 768px) {
  :root { --gutter: 28px; }
}

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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink-950);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  /* No background here: html carries it. A body background would paint over
     the fixed z-index:-1/-2 art layers (ambient glow, RSVP scenery). */
  color: var(--parch);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: var(--gold-300); color: var(--ink-900); }

:focus-visible {
  outline: 3px solid var(--gold-200);
  outline-offset: 3px;
}

button { font: inherit; color: inherit; }

svg { display: block; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Ambient glow behind the film ─────────────────────────────────────── */
/* A blurred copy of the invitation fills whatever the ultra-wide frame
   cannot (a phone held upright shows the film as a band), so the empty
   space reads as the same dusk rather than as black bars. */

.ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.ambient img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.25);
  filter: blur(42px) saturate(1.25) brightness(0.42);
}
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 45%, transparent 30%, rgba(10, 6, 3, 0.75) 100%);
}

/* ── Scenes ───────────────────────────────────────────────────────────── */

.scene {
  min-height: 100vh;
  min-height: 100svh;
  animation: scene-in 0.9s var(--ease-out) both;
}

@keyframes scene-in {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: blur(0); }
}

/* ── Scene 1: film ────────────────────────────────────────────────────── */

.scene--film {
  --bar: 6.5rem;
  display: grid;
  place-items: center;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}

.film {
  /* Fit the frame to whichever runs out first: width or height (less room
     for the control bar below), and never balloon past 1600px. */
  width: min(100%, 1600px, calc((100svh - var(--bar)) * 2.3684));
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.film__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 608;
  overflow: hidden;
  border-radius: 6px;
  background: #0b0704;
  box-shadow:
    0 0 0 1px rgba(236, 208, 143, 0.38),
    0 2px 0 1px rgba(0, 0, 0, 0.5),
    0 40px 90px -30px rgba(0, 0, 0, 0.9);
}

.film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;  /* never crop or stretch the artwork */
  display: block;
  background: #0b0704;
}

/* The whole looping invitation is the RSVP control. */
.invite {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  animation: invite-in 1.1s var(--ease-out) both;
}
.invite:focus-visible { outline-offset: -6px; }

@keyframes invite-in {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: none; }
}

/* A halo over the painted "RSVP - CLICK HERE" plate, so the eye finds it
   and a mouse knows it is live. Box measured off the invite video. */
.invite::after {
  content: "";
  position: absolute;
  left: 36.1%;
  top: 26.6%;
  width: 27.6%;
  height: 10%;
  border-radius: 3px;
  box-shadow: 0 0 0 1.5px rgba(246, 220, 152, 0.75), 0 0 22px 4px rgba(246, 205, 120, 0.35);
  animation: halo 2.6s ease-in-out infinite;
  pointer-events: none;
}
.invite:hover::after,
.invite:focus-visible::after {
  box-shadow: 0 0 0 2px var(--gold-200), 0 0 34px 8px rgba(246, 205, 120, 0.55);
}

@keyframes halo {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

.play-over {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.75rem;
  border: 0;
  background: rgba(10, 6, 3, 0.38);
  color: var(--cream);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(0.95rem, 2.4vw, 1.35rem);
  letter-spacing: 0.08em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  cursor: pointer;
}
.play-over svg {
  width: clamp(3.5rem, 9vw, 5.5rem);
  height: auto;
  padding: 1.1rem 0.9rem 1.1rem 1.3rem;
  border-radius: 50%;
  fill: var(--ink-800);
  background: linear-gradient(180deg, #f6dc98, #c9994a 60%, #8f6427);
  box-shadow: 0 0 0 3px rgba(18, 12, 7, 0.6), 0 12px 30px rgba(0, 0, 0, 0.6);
}
.play-over:hover svg { filter: brightness(1.08); }

.film__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3rem;
}

/* On tall screens the painted RSVP plate is small; add a real one. */
@media (min-aspect-ratio: 4/3) {
  .btn-gold--cta { display: none !important; }
}

@media (max-height: 500px) {
  .scene--film { --bar: 4.25rem; }
  .film { gap: 0.5rem; }
}

.scene--film.is-immersive { padding: 0; }

/* Full-screen toggle: a round corner button on the film. */
.film { position: relative; }

.fs-toggle {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(236, 208, 143, 0.6);
  border-radius: 50%;
  background: rgba(18, 12, 7, 0.6);
  color: var(--gold-300);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.fs-toggle svg { width: 1.3rem; height: 1.3rem; }
.fs-toggle:hover { border-color: var(--gold-200); color: var(--gold-200); }
.fs-toggle .i-exit,
.film.is-fullscreen .fs-toggle .i-enter { display: none; }
.film.is-fullscreen .fs-toggle .i-exit { display: block; }

.film__glow,
.rotate-hint { display: none; }

/* ── Immersive film: phones, tablets, short windows, and full screen ─────
   Toggled by JS (.is-immersive) from a media query OR the fullscreen state,
   so one rule set serves both. The frame is sized to the film's own aspect
   and centred; whatever the film cannot cover shows the blurred castle
   scene, so the screen is always filled and nothing is cropped. */

.film.is-immersive {
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  margin: 0;
  overflow: hidden;
  background: var(--ink-950);
}
.film.is-immersive .film__glow {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.film.is-immersive .film__glow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);
  filter: blur(26px) saturate(1.2) brightness(0.62);
}
.film.is-immersive .film__frame {
  --film-w: min(100vw, calc(100svh * 2.3684));
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--film-w);
  height: auto;
  transform: translate(-50%, -50%);
  border-radius: 0;
  background: transparent;
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.45);
}
.film.is-immersive .film__video { background: transparent; }

.film.is-immersive .fs-toggle {
  top: var(--safe-t);
  left: var(--safe-l);
  right: auto;
  width: 3rem;
  height: 3rem;
}

/* below the band in portrait */
.film.is-immersive .film__bar {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + min(100vw, calc(100svh * 2.3684)) / 4.7368 + 1.25rem);
  padding: 0 var(--safe-r) 0 var(--safe-l);
}

@media (orientation: portrait) {
  .film.is-immersive .rotate-hint {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(50% + min(100vw, calc(100svh * 2.3684)) / 4.7368 + 1.25rem);
    margin: 0;
    padding: 0 var(--safe-r) 0 var(--safe-l);
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    font-size: 1.05rem;
    color: var(--parch);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
  }
  .rotate-hint svg {
    width: 2rem;
    height: 2rem;
    color: var(--gold-300);
    animation: tilt 2.8s var(--ease-out) infinite;
  }
}

@keyframes tilt {
  0%, 25%   { transform: rotate(0deg); }
  55%, 85%  { transform: rotate(-90deg); }
  100%      { transform: rotate(0deg); }
}

/* sideways: the film fills the height; the bar would sit off-screen */
@media (orientation: landscape) {
  .film.is-immersive .film__bar { display: none; }
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.45rem 1.15rem;
  border: 1px solid rgba(236, 208, 143, 0.55);
  border-radius: 999px;
  background: rgba(18, 12, 7, 0.6);
  color: var(--parch);
  font-family: var(--text);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.btn-ghost svg { width: 1rem; height: 1rem; fill: currentColor; }
.btn-ghost:hover { border-color: var(--gold-300); background: rgba(42, 28, 14, 0.85); color: var(--cream); }

/* The bevelled gold plate from the mockup: a pointed hexagon with a darker
   edge. The shape lives on the pseudo-elements so the element itself keeps a
   normal (unclipped) focus outline. */
.btn-gold {
  --tip: 1.15rem;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.6rem;
  padding: 0 calc(var(--tip) + 1.6rem);
  border: 0;
  background: none;
  color: var(--cream);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 0 #3d250a, 0 0 12px rgba(40, 22, 4, 0.55);
  cursor: pointer;
  transition: filter 0.2s, transform 0.12s;
}
.btn-gold::before,
.btn-gold::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(0 50%, var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%);
}
.btn-gold::before {
  inset: 0;
  background: linear-gradient(180deg, #f7e2a4, #8a5f22 55%, #f0cf82);
}
.btn-gold::after {
  inset: 3px;
  --tip: 1.05rem;
  background: linear-gradient(180deg, #d9ae62 0%, #a57835 42%, #7a531c 70%, #946626 100%);
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, 0.75), inset 0 -2px 0 rgba(50, 28, 6, 0.45);
}
.btn-gold svg { width: 1.1rem; height: 1.1rem; margin-right: -0.25rem; }
.btn-gold:hover { filter: brightness(1.1) saturate(1.05); }
.btn-gold:active { transform: translateY(1px); }
.btn-gold:focus-visible { outline-offset: 5px; }
.btn-gold[disabled] { cursor: progress; filter: saturate(0.55) brightness(0.9); }

.btn-gold--cta {
  --tip: 0.9rem;
  min-height: 3rem;
  font-size: 1.02rem;
  padding: 0 2rem;
}
.btn-gold--cta::after { --tip: 0.82rem; }

/* ── Scene 2: RSVP ────────────────────────────────────────────────────── */
/* Two layouts, chosen so the panel NEVER covers the child or the wolf:
   - default (phones, tablets, short or squarish windows): the artwork is shown
     whole above the panel, which overlaps only its lower edge;
   - wide and tall enough: full-bleed art anchored right, so the rider sits in
     the left column, and the panel shrinks to fit the space right of the wolf.
   In the wide art the rider spans ~27–64% of the width. */

.scene--rsvp {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: 0 var(--safe-r) calc(var(--safe-b) + 1.5rem) var(--safe-l);
}

.rsvp__art {
  position: relative;
  width: calc(100% + var(--safe-r) + var(--safe-l));
  margin: 0 calc(-1 * var(--safe-r)) 0 calc(-1 * var(--safe-l));
  overflow: hidden;
}
.rsvp__art img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72svh;
  object-fit: cover;
  object-position: 45% 30%;
}
.rsvp__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 12, 7, 0) 62%, rgba(18, 12, 7, 0.7) 88%, var(--ink-950) 100%);
}

.scene--rsvp .panel {
  /* overlap the art's faded lower edge (rocks and harness, not faces) */
  margin-top: clamp(-4.5rem, -9vw, -2.5rem);
}

@media (min-aspect-ratio: 7/5) and (min-height: 600px) {
  .scene--rsvp {
    align-content: center;
    justify-items: end;
    min-height: 100svh;
    padding: calc(var(--safe-t) + 4.5rem) calc(var(--safe-r) + 4vw) calc(var(--safe-b) + 2rem) var(--safe-l);
  }
  .rsvp__art {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: auto;
    margin: 0;
  }
  .rsvp__art img {
    height: 100%;
    max-height: none;
    object-position: 100% 50%;
  }
  .rsvp__art::after {
    background: linear-gradient(90deg, rgba(18, 12, 7, 0) 45%, rgba(18, 12, 7, 0.45) 100%);
  }
  .scene--rsvp .panel {
    margin-top: 0;
    /* The wolf's nose sits 36% of the art's width from its right edge; the art
       is 2.33× the viewport height when height-bound. Keep the panel inside
       that strip: 0.36 × 2.33 × 100svh ≈ 84svh, less the right margin. */
    width: min(38rem, calc(84svh - 4vw - 1.5rem));
  }
}

.panel {
  container-type: inline-size;
  position: relative;
  width: min(100%, 38rem);
  padding: clamp(3.6rem, 9cqi, 4.6rem) clamp(1.25rem, 6.5cqi, 3.25rem) 2rem;
  border: 1.5px solid var(--gold-500);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(44, 31, 18, 0.8), rgba(20, 13, 7, 0.88));
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.16),
    0 2px 0 rgba(0, 0, 0, 0.35),
    0 34px 70px -24px rgba(0, 0, 0, 0.85);
}
/* the inner hairline of the double frame */
.panel::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(236, 208, 143, 0.32);
  border-radius: 11px;
  pointer-events: none;
}

.panel__crest {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(170px, 44cqi, 240px);
  height: auto;
  transform: translate(-50%, -54%);
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.55));
}

.panel__jewel {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 15px;
  height: 15px;
  transform: translate(-50%, 55%) rotate(45deg);
  background: linear-gradient(135deg, #fbe8b2, #b8873a 60%, #7a531c);
  box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 3px var(--gold-500);
}

.panel__title {
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 8.6cqi, 3.15rem);
  line-height: 1.05;
  letter-spacing: 0.015em;
  color: var(--gold-300);
  text-wrap: balance;
  text-shadow:
    0 1px 0 #8a6a2e,
    0 2px 0 rgba(40, 24, 8, 0.9),
    0 6px 18px rgba(0, 0, 0, 0.6);
}
.panel__title:focus { outline: none; }

.rule {
  position: relative;
  width: 82%;
  height: 1px;
  margin: 0.8rem auto 1rem;
  background: linear-gradient(90deg, transparent, var(--gold-500) 18%, var(--gold-500) 82%, transparent);
}
.rule span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold-300);
  box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 3px rgba(201, 164, 92, 0.8);
}

.panel__lede {
  margin: 0 0 1.35rem;
  text-align: center;
  font-size: clamp(1.15rem, 4.6cqi, 1.45rem);
  color: var(--parch);
}

/* ── Form ─────────────────────────────────────────────────────────────── */

.form { display: grid; }

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__error {
  margin: 0 0 1rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid rgba(255, 170, 140, 0.55);
  border-radius: 8px;
  background: rgba(90, 24, 10, 0.45);
  color: var(--coral);
  font-size: 1.05rem;
}

.field + .field { margin-top: 1.05rem; }

.field__label {
  display: block;
  margin: 0 0 0.4rem;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--parch);
}

.field__box {
  display: flex;
  align-items: stretch;
  min-height: 3.5rem;
  border: 1.5px solid #b48d49;
  border-radius: 8px;
  background: rgba(16, 10, 5, 0.58);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 236, 190, 0.07);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field__box:focus-within {
  border-color: var(--gold-200);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(246, 220, 152, 0.26);
}

.field__icon {
  flex: 0 0 3.25rem;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(180, 141, 73, 0.5);
  color: #d8c6a2;
}
.field__icon svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }

.field__input {
  flex: 1;
  min-width: 0;
  padding: 0 1rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cream);
  caret-color: var(--gold-200);
  font-family: var(--text);
  font-weight: 500;
  font-size: 1.25rem;  /* ≥16px so iOS does not zoom on focus */
}
.field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--cream);
  -webkit-box-shadow: 0 0 0 40px #20150b inset;
  caret-color: var(--gold-200);
}

.field__value {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  color: var(--cream);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
}
.field__placeholder {
  font-style: italic;
  font-size: 1.08rem;
  letter-spacing: 0;
  color: rgba(244, 231, 203, 0.66);
}
.field__box--static { background: rgba(16, 10, 5, 0.38); border-color: rgba(180, 141, 73, 0.7); }

.field__err {
  margin: 0.35rem 0 0;
  color: var(--coral);
  font-size: 1rem;
  line-height: 1.35;
}
.field__err:empty { display: none; }
.field.is-invalid .field__box { border-color: #ff9d7e; }
.field.is-invalid .field__box:focus-within { box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(255, 157, 126, 0.3); }

.btn-gold--submit {
  justify-self: center;
  width: min(100%, 22rem);
  margin-top: 1.8rem;
}

/* ── Confirmation ─────────────────────────────────────────────────────── */

.view--done {
  display: grid;
  justify-items: center;
  text-align: center;
  padding-top: 0.2rem;
}

.done__title {
  margin: 0.2rem 0 0.9rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.35rem, 6.2cqi, 2.1rem);
  line-height: 1.15;
  color: var(--gold-300);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.done__title:focus { outline: none; }

.done__label {
  margin: 0;
  font-size: 1.2rem;
  color: var(--parch);
}

.done__number {
  margin: 0.1rem 0 0.4rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.6rem, 24cqi, 6rem);
  line-height: 1;
  letter-spacing: 0.06em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gold-200);
  text-shadow: 0 2px 0 #7a5a24, 0 3px 0 rgba(30, 18, 6, 0.9), 0 0 38px rgba(246, 205, 120, 0.35);
}
.view--done.is-new .done__number { animation: number-in 1.3s var(--ease-out) both 0.15s; }

@keyframes number-in {
  from { opacity: 0; transform: scale(0.82); filter: blur(12px); letter-spacing: 0.3em; }
  to   { opacity: 1; transform: none; filter: blur(0); letter-spacing: 0.06em; }
}

.done__note {
  max-width: 30ch;
  margin: 0 0 1.5rem;
  font-size: 1.15rem;
  color: var(--parch);
  text-wrap: balance;
}

/* ── Keepsake invitation ──────────────────────────────────────────────── */

.keepsake {
  width: min(100%, 17.5rem);
  margin: 0 0 1.1rem;
  animation: scene-in 0.8s var(--ease-out) both;
}
.keepsake__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(236, 208, 143, 0.5), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
  /* long-press to save must stay available on phones */
  -webkit-touch-callout: default;
  user-select: auto;
}
.keepsake__cap {
  margin-top: 0.55rem;
  font-style: italic;
  font-size: 1rem;
  color: rgba(244, 231, 203, 0.75);
}

.btn-gold--save {
  width: min(100%, 21rem);
  padding: 0 calc(var(--tip) + 0.9rem);
  font-size: clamp(0.86rem, 4.3cqi, 1.05rem);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.btn-gold--save svg { width: 1.25rem; height: 1.25rem; margin: 0 0.1rem 0 -0.2rem; }

.keepsake__hint {
  max-width: 30ch;
  margin: 0.6rem 0 0;
  font-size: 0.98rem;
  line-height: 1.4;
  color: rgba(244, 231, 203, 0.78);
  text-wrap: balance;
}

.view--done #another { margin-top: 1.4rem; }

.panel__foot {
  display: flex;
  justify-content: center;
  margin-top: 1.4rem;
}

.link-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border: 0;
  background: none;
  color: rgba(244, 231, 203, 0.85);
  font-family: var(--text);
  font-size: 1.02rem;
  text-decoration: underline;
  text-decoration-color: rgba(201, 164, 92, 0.6);
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.link-back svg { width: 1rem; height: 1rem; }
.link-back:hover { color: var(--cream); text-decoration-color: var(--gold-300); }

/* ── Credit footer: one engraved line along the bottom of every page ─────
   Pinned to the viewport so it runs under the film too. The gold hairline
   spans the full width with the invitation's diamond at its centre. */

:root { --foot-h: 2.6rem; }
@media (max-width: 560px) { :root { --foot-h: 3.5rem; } }

.credit {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--foot-h) + env(safe-area-inset-bottom));
  padding: 0.35rem var(--safe-r) max(0.35rem, env(safe-area-inset-bottom)) var(--safe-l);
  background: linear-gradient(0deg, rgba(12, 8, 4, 0.94), rgba(12, 8, 4, 0.78));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(244, 231, 203, 0.74);
  pointer-events: none;
}

.credit__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 164, 92, 0) 0%, rgba(201, 164, 92, 0.8) 18%, rgba(236, 208, 143, 0.95) 50%, rgba(201, 164, 92, 0.8) 82%, rgba(201, 164, 92, 0) 100%);
}
.credit__line span {
  position: absolute;
  left: 50%;
  top: 0;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold-300);
  box-shadow: 0 0 0 2px var(--ink-950), 0 0 0 3px rgba(201, 164, 92, 0.75);
}

.credit__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.9rem;
  row-gap: 0.05rem;
  margin: 0;
  text-align: center;
  line-height: 1.3;
}

.credit__by {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(0.66rem, 1.9vw, 0.9rem);
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.credit__name { color: var(--gold-300); font-weight: 700; }

.credit__gem {
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--gold-500);
}

.credit__rights {
  font-style: italic;
  font-size: clamp(0.8rem, 2.2vw, 1.02rem);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: rgba(244, 231, 203, 0.62);
}

@media (max-width: 560px) {
  .credit__gem { display: none; }   /* two lines: the gem would dangle */
}

/* Make room for the bar so it never hides the form or the film's controls. */
.scene--rsvp { padding-bottom: calc(var(--safe-b) + var(--foot-h) + 1.5rem) !important; }
.scene--film { --bar: calc(6.5rem + var(--foot-h)); padding-bottom: calc(var(--safe-b) + var(--foot-h)); }
@media (max-height: 500px) { .scene--film { --bar: calc(4.25rem + var(--foot-h)); } }

/* Edge-to-edge film: the bar floats over the bottom of the glow / film. */
.scene--film.is-immersive { padding-bottom: 0; }

/* ── Sound controls ───────────────────────────────────────────────────── */

.sound {
  position: fixed;
  top: var(--safe-t);
  right: var(--safe-r);
  z-index: 20;
}

.sound__toggle {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(236, 208, 143, 0.6);
  border-radius: 50%;
  background: rgba(18, 12, 7, 0.65);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--gold-300);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: border-color 0.2s, color 0.2s;
}
.sound__toggle svg { width: 1.45rem; height: 1.45rem; fill: currentColor; }
.sound__toggle:hover { border-color: var(--gold-200); color: var(--gold-200); }
.sound__toggle[aria-pressed="true"] .i-off,
.sound__toggle[aria-pressed="false"] .i-on { display: none; }

.sound-prompt {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 0.5rem);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.1rem;
  padding: 0.55rem 1.45rem 0.55rem 1.2rem;
  border: 1px solid #fbe8b2;
  border-radius: 999px;
  background: linear-gradient(180deg, #f3d893, #c89a4c);
  color: #24170a;
  font-family: var(--text);
  font-weight: 700;
  font-size: 1.12rem;
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-50%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  animation: prompt-in 0.6s var(--ease-out) both, breathe 2.4s ease-out 0.6s infinite;
}
.sound-prompt svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.sound-prompt:hover { filter: brightness(1.06); }

/* On the RSVP scene the pill must never sit on the form: tuck it top-right,
   beside the sound button. */
body[data-scene="rsvp"] .sound-prompt {
  top: var(--safe-t);
  bottom: auto;
  left: auto;
  right: calc(var(--safe-r) + 3.6rem);
  min-height: 3rem;
  padding: 0.45rem 1.05rem 0.45rem 0.9rem;
  font-size: 1rem;
  transform: none;
  animation: breathe 2.4s ease-out infinite;
}

@keyframes prompt-in {
  from { opacity: 0; transform: translate(-50%, 1.2rem); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes breathe {
  0%   { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(243, 216, 147, 0.55); }
  100% { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 0 16px rgba(243, 216, 147, 0); }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .invite::after { opacity: 1; }
}

/* after the base .sound-prompt rule: sit above the credit bar */
.sound-prompt { bottom: calc(var(--safe-b) + var(--foot-h) + 0.6rem); }
body[data-scene="rsvp"] .sound-prompt { bottom: auto; }