:root {
  --bg: #7e0a34;
  --ink: #7e0a34;
  --cream: #f3e6ea;
  --column: 480px;
  --script: "Hurricane", "Brush Script MT", cursive;
  --serif: "Lora", Georgia, "Times New Roman", serif;
}

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

html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--serif);
  overflow-x: hidden;
}

.column {
  display: block;
  width: 100%;
  max-width: var(--column);
  margin: 0 auto;
}

.page {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  container-type: inline-size;
  isolation: isolate;
}

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

.piece {
  position: absolute;
  left: calc(var(--x) / 1080 * 100%);
  top: calc(var(--y) / 1920 * 100%);
  width: calc(var(--w) / 1080 * 100%);
  height: auto;
  max-width: none;
  display: block;
  z-index: var(--z, 1);
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--bg);
}

.hero-play {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 0.7em 1.9em;
  font: 500 calc(34 / 1080 * 100cqw) / 1 var(--serif);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgb(126 10 52 / 0.72);
  border: 1px solid rgb(243 230 234 / 0.7);
  border-radius: 999px;
  cursor: pointer;
}

.hero-play[hidden] {
  display: none;
}

.hero-play:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

.frame {
  height: calc(var(--h) / 1920 * 100%);
  overflow: hidden;
}

.frame img {
  position: absolute;
  left: var(--ix);
  top: var(--iy);
  width: var(--iw);
  height: auto;
  max-width: none;
  display: block;
}

.s2-frame-wide { --x: 0; --y: 525; --w: 1080; --h: 852; --ix: -16.6%; --iy: 0%; --iw: 127.3%; }
.s2-frame-left { --x: 0; --y: 1377; --w: 535; --h: 548; --ix: -0.9%; --iy: -29%; --iw: 101.8%; }
.s2-frame-right { --x: 535; --y: 1377; --w: 545; --h: 548; --ix: -0.5%; --iy: -40.3%; --iw: 114.4%; }

.s2-verse {
  position: absolute;
  left: calc(150 / 1080 * 100%);
  width: calc(810 / 1080 * 100%);
  top: calc(80 / 1920 * 100%);
  margin: 0;
  z-index: 2;
  font-family: var(--script);
  font-weight: 400;
  font-size: calc(76 / 1080 * 100cqw);
  line-height: 1;
  letter-spacing: 0.05em;
  word-spacing: 0.18em;
  -webkit-text-stroke: calc(1.2 / 1080 * 100cqw) currentColor;
  text-align: center;
  color: var(--cream);
}

.s2-strip { --x: 209; --y: 403; --w: 748; --z: 3; }
.s2-heart { --x: -145; --y: 233; --w: 654; --z: 4; }
.s2-lettering { --x: 209; --y: 403; --w: 748; --z: 5; }
.s2-bouquet { --x: 879; --y: 299; --w: 410; --z: 7; }

.s2-date {
  position: absolute;
  left: calc(380 / 1080 * 100%);
  width: calc(380 / 1080 * 100%);
  top: calc(598 / 1920 * 100%);
  margin: 0;
  z-index: 6;
  font-family: var(--serif);
  font-weight: 500;
  font-size: calc(48 / 1080 * 100cqw);
  line-height: 1;
  letter-spacing: 0.245em;
  text-indent: 0.245em;
  text-align: center;
  color: var(--ink);
}

.s3-snapdragons { --x: 506; --y: 172; --w: 667; --z: 1; }
.s3-carnations { --x: 314; --y: 1019; --w: 760; --z: 1; }
.s3-date-card { --x: -23; --y: 579; --w: 1098; --z: 2; }
.s3-love-card { --x: 24; --y: 29; --w: 717; --z: 3; }
.s3-beginning { --x: 204; --y: 976; --w: 679; --z: 5; }
.s3-details { --x: 0; --y: 1212; --w: 987; --z: 4; }

.s4-ceremony { --x: 2; --y: 13; --w: 1191; --z: 3; }
.s4-cake { --x: 108; --y: 1352; --w: 420; --z: 1; }
.s4-backing { --x: -196; --y: 594; --w: 775; --z: 2; }
.s4-calendar { --x: 155; --y: 823; --w: 530; --z: 3; }
.s4-swans { --x: 665; --y: 830; --w: 471; --z: 3; }
.s4-stay { --x: 452; --y: 1185; --w: 578; --z: 4; }
.s4-parking { --x: 395; --y: 1502; --w: 676; --z: 5; }

.s4-mark {
  --x: 444; --y: 1060; --w: 58; --z: 4;
  fill: #f6b9cb;
  stroke: #c2456f;
  stroke-width: 1.2;
  mix-blend-mode: multiply;
  overflow: visible;
}

.page--celebrate {
  margin-top: calc(-130 / 1080 * 100%);
}

.s5-gifts { --x: 64; --y: 42; --w: 971; --z: 1; }
.s5-painting { --x: 550; --y: 999; --w: 505; --z: 1; }
.s5-celebration { --x: 0; --y: 437; --w: 1080; --z: 2; }
.s5-rings { --x: 169; --y: 1139; --w: 248; --z: 2; }
.s5-rsvp { --x: -104; --y: 1171; --w: 1374; --z: 3; }

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  33% {
    transform: translate3d(var(--dx), calc(var(--dy) * -1), 0) rotate(var(--rot));
  }
  66% {
    transform: translate3d(calc(var(--dx) * -0.7), var(--dy), 0) rotate(calc(var(--rot) * -0.6));
  }
}

:where(.piece, .s2-date) {
  --dx: 0.55cqw;
  --dy: 0.8cqw;
  --rot: 0.45deg;
  --dur: 8s;
  --delay: 0s;
}

.piece:not(.frame),
.s2-date {
  animation: drift var(--dur) ease-in-out var(--delay) infinite;
  backface-visibility: hidden;
}

:where(.page) > :where(.piece:nth-child(4n + 1)) { --dur: 7.2s; --delay: -1.3s; --dx: -0.5cqw; }
:where(.page) > :where(.piece:nth-child(4n + 2)) { --dur: 9.1s; --delay: -4.6s; --rot: -0.4deg; }
:where(.page) > :where(.piece:nth-child(4n + 3)) { --dur: 8.4s; --delay: -2.9s; --dy: -0.7cqw; }
:where(.page) > :where(.piece:nth-child(4n)) { --dur: 10.3s; --delay: -6.1s; --dx: 0.7cqw; --rot: -0.5deg; }

.s2-strip,
.s2-lettering,
.s2-date {
  --dur: 8.8s;
  --delay: -3.4s;
  --dx: 0.5cqw;
  --dy: 0.7cqw;
  --rot: 0deg;
}

.s4-calendar,
.s4-mark {
  --dur: 9.6s;
  --delay: -5.2s;
  --dx: -0.5cqw;
  --dy: 0.7cqw;
  --rot: 0deg;
}

.page.is-offscreen .piece,
.page.is-offscreen .s2-date {
  animation-play-state: paused;
}

@media (min-width: 720px) {
  body {
    padding-block: 0;
  }

  .column {
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 30px 80px rgb(40 0 14 / 0.45);
  }
}