:root {
  color-scheme: light;
  --burgundy: #762728;
  --gold: #c1a16b;
}

* { box-sizing: border-box; }
html { background: #fff; scrollbar-gutter: stable; }
body { margin: 0; color: var(--burgundy); background: #fff; font-family: "Times New Roman", Times, serif; }
.js:has(body:not([data-state="opened"])) { overflow: hidden; overflow: clip; }
.js body:not([data-state="opened"]) { overflow: hidden; overflow: clip; height: 100svh; }
.js body:not([data-state="opened"]) .page-two { visibility: hidden; }
.js body:is([data-state="closed"], [data-state="opening"]) .page-one { visibility: hidden; }
.invitation { width: min(100%, 760px); margin-inline: auto; }
.first-stage { position: relative; }
.page { position: relative; width: 100%; aspect-ratio: 1054 / 1471; container-type: inline-size; }
.page-background { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.art { position: absolute; display: block; height: auto; }
.qr img { display: block; width: 100%; height: auto; }

/* Top-left / width percentages from the supplied 1054 × 1471 artboard.
   The original SVG and WebP proportions are retained without stretching. */
.scripture { left: 39.251328%; top: 17.683821%; width: 21.497533%; --delay: 0ms; }
.top-divider { left: 35.697154%; top: 23.323997%; width: 28.606072%; --delay: 90ms; }
.parents { left: 35.472960%; top: 25.264990%; width: 29.054459%; --delay: 180ms; }
.invitation-copy { left: 28.482543%; top: 30.438545%; width: 43.035199%; --delay: 270ms; }
.groom { left: 24.572770%; top: 34.339361%; width: 50.854364%; --delay: 360ms; --duration: 850ms; }
.love { left: 46.127230%; top: 39.776615%; width: 7.745731%; --delay: 450ms; }
.bride { left: 29.982448%; top: 43.468049%; width: 40.036148%; --delay: 540ms; --duration: 850ms; }
.date-time { left: 31.696395%; top: 53.943100%; width: 36.520114%; --delay: 630ms; }
.qr { left: 46.820114%; top: 62.616791%; width: 10.785863%; --delay: 720ms; }
.venue { left: 46.724099%; top: 70.690483%; width: 10.973814%; --delay: 720ms; }
.closing { left: 39.014516%; top: 76.433175%; width: 26.141176%; --delay: 810ms; }
.ornament { left: 38.857306%; top: 81.120394%; width: 26.455693%; --delay: 900ms; }

.location-link {
  position: absolute;
  left: 52.182163%; /* 550 / 1054 */
  top: 73.962610%; /* 1088 / 1471 */
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--burgundy);
  font-size: 1.897533cqi; /* 20px on the master canvas */
  line-height: 1.25;
  letter-spacing: .025em;
  text-decoration: underline;
  text-decoration-thickness: .5px;
  text-underline-offset: .2em;
  --delay: 720ms;
}
.location-link span { margin-left: .25em; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.js .entrance { opacity: 0; transform: translateY(7px); }
.js .location-link.entrance { transform: translateX(-50%) translateY(7px); }
/* QR artwork only fades; no transforms are applied to the code. */
.js .qr.entrance { transform: none; }
.page-one.is-visible .entrance {
  opacity: 1;
  transform: none;
  transition: opacity var(--duration, 750ms) ease var(--delay), transform var(--duration, 750ms) ease var(--delay);
}
.page-one.is-visible .location-link { transform: translateX(-50%); }

.intro { display: none; }
.js .intro {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  container-type: inline-size;
  opacity: 1;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Center before JS measures the visible viewport. Page 01 stays in flow. */
  transform: translateY(calc((100svh - 100% + var(--safe-top) - var(--safe-bottom)) / 2));
  transition: opacity 120ms ease;
}
.intro-video, .intro-poster { position: absolute; left: 0; top: 50%; width: 100%; height: auto; transform: translateY(-50%); display: block; }
.intro-poster { opacity: 1; transition: opacity 250ms ease; }
.intro.is-playing .intro-poster { opacity: 0; }
.intro.is-leaving { opacity: 0; pointer-events: none; }
.intro[hidden] { display: none; }
.open-button {
  position: absolute;
  /* Exact Illustrator top-left / size on the 1054 × 1471 stage. */
  left: 25.215678368%;
  top: 66.850866757%;
  width: 43.730825427%;
  height: 6.352202583%;
  display: block;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  background: transparent;
  border: 0;
  line-height: 0;
  cursor: pointer;
  animation: printed-breath 3.8s ease-in-out infinite;
  transition: opacity 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.open-button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.open-button:disabled { opacity: 0; animation: none; cursor: default; }
@keyframes printed-breath { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }

.floral-top { left: 69.480076%; top: 7.685044%; width: 22.834915%; }
.floral-bottom { left: 7.685009%; top: 75.694426%; width: 33.138710%; }
.couple { left: 33.302657%; top: 31.738137%; width: 33.394592%; }
.js .page-two { opacity: 0; transition: opacity 800ms ease-out; }
.js .page-two.is-visible { opacity: 1; }
.js .page-two .floral-top { opacity: 0; transform: translate(10px, -10px); }
.js .page-two .floral-bottom { opacity: 0; transform: translate(-10px, 10px); }
.js .page-two .couple { opacity: 0; transform: translateY(10px); }
.js .page-two.is-visible .art { opacity: 1; transform: none; transition: opacity 900ms ease, transform 900ms ease; }
.js .page-two.is-visible .floral-top { transition-delay: 160ms; }
.js .page-two.is-visible .floral-bottom { transition-delay: 250ms; }
.js .page-two.is-visible .couple { transition-duration: 1000ms; transition-delay: 320ms; }

.music-toggle {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: .75px solid var(--gold);
  border-radius: 50%;
  background: #fffdf8;
  color: var(--burgundy);
  cursor: pointer;
}
.music-toggle[hidden] { display: none; }
.music-toggle .sound-waves { display: none; }
.music-toggle[aria-pressed="true"] .sound-waves { display: inline; }
.music-toggle[aria-pressed="true"] .sound-off { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.noscript-note { text-align: center; padding: 0 1rem 1rem; }

@media (prefers-reduced-motion: reduce) {
  .open-button { animation: none; }
  .intro, .intro-poster, .open-button { transition-duration: 1ms; }
  .js .entrance, .js .page-two .art { transform: none; }
  .js .location-link.entrance { transform: translateX(-50%); }
  .js .page-two, .js .page-two .art { opacity: 1; transition: none; }
  .page-one.is-visible .entrance, .js .page-two.is-visible .art { transition: none; }
}