:root {
  --page-background: #ffffff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--page-background);
}

.table-scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}

.landscape {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  transition: opacity 90ms steps(1, end);
}

.scene-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2560px;
  height: 1440px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--scene-scale, 1));
  transform-origin: center;
}

.scene-stage__background {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.scene-sprite {
  position: absolute;
  display: block;
  image-rendering: pixelated;
  pointer-events: none;
}

.scene-cloud--left {
  top: 30px;
  left: -95px;
  width: 760px;
  height: auto;
  animation: cloud-left-drift 6s steps(12, end) infinite alternate;
}

.scene-cloud--right {
  top: -175px;
  left: 1490px;
  width: 1080px;
  height: auto;
  animation: cloud-right-drift 7.5s steps(15, end) infinite alternate;
}

.pixel-smoke {
  z-index: 1;
  top: 137px;
  left: 2112px;
  width: 210px;
  height: 275px;
  overflow: visible;
}

/*
 * The smoke rises in front of the fixed landscape plate, while this tightly
 * clipped duplicate of the chimney is painted above it. That preserves the
 * original pixel art and gives the scene a real background/smoke/chimney
 * depth order without moving or cutting the house itself.
 */
.chimney-foreground {
  z-index: 2;
  top: 368px;
  left: 2136px;
  width: 125px;
  height: 175px;
  background-image: url("../images/dreamy-pastoral-static-v2.png");
  background-repeat: no-repeat;
  background-position: -2136px -368px;
  background-size: 2560px 1440px;
  clip-path: polygon(
    22px 0,
    65px 0,
    65px 5px,
    88px 5px,
    88px 12px,
    105px 12px,
    105px 20px,
    118px 20px,
    118px 43px,
    109px 43px,
    109px 175px,
    25px 175px,
    25px 45px,
    12px 45px,
    12px 40px,
    0 40px,
    0 14px,
    22px 14px
  );
}

.pixel-smoke__puff {
  position: absolute;
  bottom: 3px;
  left: 92px;
  width: 20px;
  height: 20px;
  background: #fff1d1;
  opacity: 0;
  box-shadow:
    20px 0 0 #ffd7bd,
    0 -20px 0 #fff1d1,
    -20px -20px 0 #f5aeb6;
  animation: pixel-smoke-rise 1.8s steps(8, end) infinite;
}

.pixel-smoke__puff:nth-child(2) {
  left: 106px;
  animation-delay: -0.45s;
}

.pixel-smoke__puff:nth-child(3) {
  left: 80px;
  animation-delay: -0.9s;
}

.pixel-smoke__puff:nth-child(4) {
  left: 98px;
  animation-delay: -1.35s;
}

.wood-floor-layer {
  position: absolute;
  z-index: 0;
  inset: 0;
  visibility: hidden;
  background-image: url("../images/pixel-wood-floor.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  image-rendering: pixelated;
  pointer-events: none;
}

.table-scene.is-memoir .wood-floor-layer {
  visibility: visible;
}

.tablecloth-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image: url("../images/pink-gingham-table-wide.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
  transform: translateY(42px) scale(0.94);
  transform-origin: center;
  filter: drop-shadow(0 18px 12px rgb(103 57 45 / 14%));
  transition:
    opacity 275ms steps(11, end),
    transform 300ms steps(12, end);
}

.table-scene.is-transitioning-to-memoir .landscape,
.table-scene.is-memoir .landscape {
  opacity: 0;
}

.table-scene.is-transitioning-to-memoir .scene-sprite,
.table-scene.is-memoir .scene-sprite {
  animation-play-state: paused;
}

.table-scene.is-memoir .tablecloth-layer {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.conveyor-layer {
  position: absolute;
  z-index: 2;
  top: 23.5%;
  left: 0;
  width: 100%;
  aspect-ratio: 1672 / 318;
  visibility: hidden;
  background-repeat: no-repeat;
  background-position: 0 0;
  image-rendering: pixelated;
  pointer-events: none;
}

.conveyor-layer.is-unrolling {
  visibility: visible;
  background-image: url("../images/conveyor-unroll-atlas.png");
  background-size: 100% 1200%;
  animation: conveyor-unroll 960ms steps(11, end) both;
}

.conveyor-layer.is-settled {
  visibility: visible;
  background-image: url("../images/conveyor-final.png");
  background-size: 100% 100%;
}

.conveyor-layer.is-running {
  visibility: visible;
  background-image: url("../images/conveyor-running-atlas.png");
  background-size: 100% 1100%;
  animation: conveyor-run 900ms steps(10, end) infinite;
}

.conveyor-delivery {
  position: absolute;
  z-index: 4;
  top: 23.5%;
  left: 0;
  width: 100%;
  aspect-ratio: 1672 / 318;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.conveyor-delivery__carrier {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 17.8%;
  transform: translate3d(0, -50%, 0);
  will-change: transform;
  pointer-events: auto;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
}

.conveyor-delivery__plate {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  image-rendering: pixelated;
  transform: scale(1);
  transform-origin: center;
  transition: transform 180ms steps(3, end);
}

.conveyor-delivery.is-running {
  visibility: visible;
}

.conveyor-delivery.is-running .conveyor-delivery__carrier {
  animation: conveyor-delivery-pass 9900ms steps(110, end) infinite;
}

.conveyor-layer.is-running.is-paused,
.conveyor-delivery.is-running.is-paused .conveyor-delivery__carrier {
  animation-play-state: paused;
}

.conveyor-delivery__carrier:is(:hover, :focus-visible) .conveyor-delivery__plate {
  transform: scale(1.1);
}

.conveyor-delivery.is-collected .conveyor-delivery__carrier {
  visibility: hidden;
  pointer-events: none;
}

.conveyor-delivery.is-settled {
  visibility: visible;
}

.conveyor-delivery.is-settled .conveyor-delivery__carrier {
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.landing-screen,
.memoir-page {
  position: absolute;
  z-index: 3;
  inset: 0;
}

.landing-screen.is-hidden {
  display: none;
}

.memoir-page {
  outline: none;
}

.memoir-page[aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
}

.memoir-page[aria-hidden="false"] {
  visibility: visible;
  pointer-events: auto;
}

.memoir-interaction-dismiss {
  position: absolute;
  z-index: 4;
  inset: 0;
  visibility: hidden;
  border: 0;
  padding: 0;
  background: rgb(255 248 248 / 4%);
  opacity: 0;
  pointer-events: none;
  cursor: default;
  outline: none;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.memoir-page.is-receiving-plate .memoir-interaction-dismiss {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.memoir-hands {
  position: absolute;
  z-index: 5;
  visibility: hidden;
  bottom: 0;
  left: 50%;
  display: block;
  width: 40vw;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
}

.memoir-page.is-receiving-plate .memoir-hands {
  visibility: visible;
  animation: memoir-hands-reveal 120ms steps(3, end) both;
}

.memoir-held-dish {
  position: absolute;
  z-index: 6;
  bottom: 4.5vw;
  left: 50%;
  display: none;
  visibility: hidden;
  opacity: 0;
  width: 34vw;
  max-width: none;
  aspect-ratio: 1;
  transform: translateX(-50%);
  isolation: isolate;
  pointer-events: none;
}

.memoir-page.has-held-plate .memoir-held-dish {
  display: block;
  visibility: visible;
  opacity: 1;
}

.memoir-held-dish__layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
}

.memoir-held-dish__plate {
  z-index: 0;
}

.memoir-held-dish__plate-hit {
  position: absolute;
  z-index: 1;
  inset: 9%;
  border-radius: 50%;
  pointer-events: auto;
  cursor: default;
}

.memoir-held-dish__content {
  position: absolute;
  z-index: 2;
  inset: 22%;
  overflow: hidden;
  border-radius: 0;
  pointer-events: auto;
}

.memoir-held-dish__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--crop-x, 50%) var(--crop-y, 50%);
  transform: scale(var(--crop-zoom, 1));
  image-rendering: auto;
  user-select: none;
}

.memoir-held-dish__upload {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 27%;
  aspect-ratio: 1;
  padding: 0;
  border: clamp(2px, 0.18vw, 4px) solid rgb(126 130 136 / 82%);
  border-radius: 50%;
  background: rgb(255 255 255 / 76%);
  box-shadow: 0 0.12vw 0 rgb(120 124 130 / 26%);
  transform: translate(-50%, -50%);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: transform 120ms ease, background-color 120ms ease;
}

.memoir-held-dish__upload span::before,
.memoir-held-dish__upload span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46%;
  height: clamp(2px, 0.16vw, 4px);
  border-radius: 999px;
  background: #757980;
  transform: translate(-50%, -50%);
}

.memoir-held-dish__upload span::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.memoir-held-dish[data-cloche-state="open"] .memoir-held-dish__upload {
  opacity: 1;
  pointer-events: auto;
}

.memoir-held-dish__content[data-state="ready"] .memoir-held-dish__upload {
  top: auto;
  right: 4%;
  bottom: 4%;
  left: auto;
  width: 18%;
  transform: none;
  opacity: 0.86;
}

.memoir-held-dish__upload:is(:hover, :focus-visible) {
  background: rgb(255 255 255 / 94%);
  transform: translate(-50%, -50%) scale(1.06);
  outline: none;
}

.memoir-held-dish__content[data-state="ready"] .memoir-held-dish__upload:is(:hover, :focus-visible) {
  transform: scale(1.06);
}

.memoir-held-dish__upload:disabled {
  cursor: wait;
  opacity: 0.46;
}

.memoir-held-dish__file-input {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.memoir-held-dish__status {
  position: absolute;
  z-index: 2;
  right: 6%;
  bottom: 5%;
  left: 6%;
  padding: 0.35em 0.45em;
  border-radius: 0.35em;
  background: rgb(255 255 255 / 88%);
  color: #51545a;
  font: 600 clamp(9px, 0.72vw, 15px) / 1.25 system-ui, sans-serif;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.memoir-held-dish__content[data-state="loading"] .memoir-held-dish__status,
.memoir-held-dish__content[data-state="uploading"] .memoir-held-dish__status,
.memoir-held-dish__content[data-state="error"] .memoir-held-dish__status {
  opacity: 1;
}

.memoir-held-dish__cloche {
  z-index: 3;
  visibility: hidden;
}

.memoir-page.has-held-plate .memoir-held-dish[data-cloche-state="closed"] .memoir-held-dish__cloche--closed,
.memoir-page.has-held-plate .memoir-held-dish[data-cloche-state="peek"] .memoir-held-dish__cloche--peek,
.memoir-page.has-held-plate .memoir-held-dish[data-cloche-state="open"] .memoir-held-dish__cloche--open {
  visibility: visible;
}

.memoir-held-dish__cloche--open {
  transform: translate(78%, -29%);
}

.memoir-held-dish__cloche-control {
  position: absolute;
  z-index: 4;
  inset: 0;
  border: 0;
  padding: 0;
  clip-path: circle(34% at 50% 50%);
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
}

.memoir-held-dish__cloche-control::after {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  opacity: 0;
}

.memoir-held-dish__cloche-control:focus-visible::after {
  box-shadow: 0 0 0 4px rgb(77 87 98 / 72%);
  opacity: 1;
}

.memoir-held-dish[data-cloche-state="open"] .memoir-held-dish__cloche-control {
  clip-path: ellipse(32% 31% at 50% 50%);
  transform: translate(78%, -29%);
}

.memoir-held-dish[data-cloche-state="open"] .memoir-held-dish__cloche-control::after {
  inset: 19% 17%;
  border-radius: 50%;
}

.memoir-interaction-hit-areas {
  position: absolute;
  z-index: 8;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.memoir-page.is-receiving-plate .memoir-interaction-hit-areas {
  visibility: visible;
}

.memoir-interaction-hit-area {
  position: absolute;
  display: block;
  pointer-events: auto;
  cursor: default;
}

.memoir-interaction-hit-area--left-hand,
.memoir-interaction-hit-area--right-hand {
  bottom: 0;
  width: 9vw;
  height: 14vw;
  border-radius: 48% 48% 18% 18%;
}

.memoir-interaction-hit-area--left-hand {
  left: 36.5vw;
}

.memoir-interaction-hit-area--right-hand {
  right: 36.5vw;
}

.site-title {
  position: absolute;
  z-index: 1;
  top: 5.5%;
  left: 50%;
  display: flex;
  align-items: stretch;
  width: clamp(360px, 50vw, 1040px);
  margin: 0;
  transform: translateX(-50%);
  isolation: isolate;
}

.title-character {
  position: relative;
  display: block;
  flex: var(--character-weight) 1 0;
  min-width: 0;
  cursor: pointer;
}

.title-character__art {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  transform-origin: center 76%;
  filter: drop-shadow(0 5px 0 rgb(111 55 55 / 24%));
  will-change: transform, filter;
}

.title-character::after {
  position: absolute;
  z-index: 2;
  top: 16%;
  right: 8%;
  width: 7px;
  height: 7px;
  content: "";
  background: #fff4a8;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    13px -11px 0 #7ad9d1,
    -10px 16px 0 #ff8eb4;
}

.title-character:nth-child(even) {
  --hop-tilt: 1.5deg;
  --hop-counter-tilt: -1deg;
  --hop-settle-tilt: 0.7deg;
  --hop-accent: #7ad9d1;
}

.title-character:nth-child(odd) {
  --hop-tilt: -1.5deg;
  --hop-counter-tilt: 1deg;
  --hop-settle-tilt: -0.7deg;
  --hop-accent: #ff91b3;
}

.title-character:hover .title-character__art {
  animation: character-pixel-hop 560ms steps(6, end) both;
  filter:
    drop-shadow(4px 4px 0 var(--hop-accent))
    drop-shadow(-4px -3px 0 #ffe07a)
    drop-shadow(0 8px 0 rgb(111 55 55 / 26%));
}

.title-character:hover::after {
  animation: character-sparkle 560ms steps(4, end) both;
}

.memoir-entry {
  position: absolute;
  z-index: 1;
  top: 39%;
  left: 50%;
  width: clamp(400px, 36vw, 760px);
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: pointer;
  outline: none;
  isolation: isolate;
}

.memoir-entry__art {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  transform-origin: center 75%;
  filter: drop-shadow(0 7px 0 rgb(102 47 45 / 24%));
  will-change: transform, filter;
}

.memoir-entry::before,
.memoir-entry::after {
  position: absolute;
  z-index: 2;
  width: 9px;
  height: 9px;
  content: "";
  background: #fff19c;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    17px -14px 0 #7bd9d0,
    -13px 18px 0 #ff8fb4;
}

.memoir-entry::before {
  top: 13%;
  left: 0;
}

.memoir-entry::after {
  right: 0;
  bottom: 16%;
  transform: scaleX(-1);
}

.memoir-entry:hover .memoir-entry__art,
.memoir-entry:focus-visible .memoir-entry__art {
  animation: memoir-button-hover 700ms steps(7, end) both;
  filter:
    drop-shadow(5px 5px 0 #ff8dad)
    drop-shadow(-4px -3px 0 #ffe276)
    drop-shadow(0 9px 0 rgb(102 47 45 / 26%));
}

.memoir-entry:hover::before,
.memoir-entry:hover::after,
.memoir-entry:focus-visible::before,
.memoir-entry:focus-visible::after {
  animation: memoir-button-sparkle 700ms steps(4, end) both;
}

.memoir-entry:focus-visible {
  outline: none;
}

.memoir-entry:active .memoir-entry__art {
  animation: none;
  transform: translateY(9px) scale(0.985);
  filter: drop-shadow(0 2px 0 rgb(102 47 45 / 20%));
}

.homepage-watermark {
  position: absolute;
  right: clamp(18px, 2.2vw, 52px);
  bottom: clamp(16px, 2.4vh, 38px);
  margin: 0;
  color: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", monospace;
  font-size: clamp(13px, 1.05vw, 22px);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-shadow:
    2px 0 0 rgb(143 76 89 / 72%),
    0 2px 0 rgb(143 76 89 / 72%),
    2px 2px 0 rgb(143 76 89 / 72%);
  pointer-events: none;
  image-rendering: pixelated;
  animation: watermark-pixel-glow 2.4s steps(4, end) infinite alternate;
}

.landing-screen.is-leaving .site-title {
  pointer-events: none;
  animation: landing-title-exit 135ms steps(6, end) forwards;
}

.landing-screen.is-leaving .memoir-entry {
  pointer-events: none;
  animation: landing-button-exit 125ms steps(6, end) forwards;
}

.memoir-back {
  position: absolute;
  z-index: 1;
  top: 6%;
  left: 5%;
  width: clamp(52px, 4.6vw, 82px);
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  isolation: isolate;
}

.memoir-back__art {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  transform-origin: center;
  filter: drop-shadow(0 5px 0 rgb(102 47 45 / 24%));
  will-change: transform, filter;
}

.memoir-back::after {
  position: absolute;
  top: 46%;
  right: -12%;
  width: 7px;
  height: 7px;
  content: "";
  background: #ff8fb4;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    14px 0 0 #ffe27a,
    28px 0 0 #7ad9d1;
}

.memoir-page[aria-hidden="false"] .memoir-back {
  animation: memoir-back-arrive 480ms steps(6, end) both;
}

.memoir-back:hover .memoir-back__art,
.memoir-back:focus-visible .memoir-back__art {
  animation: memoir-back-nudge 620ms steps(6, end) both;
  filter:
    drop-shadow(-4px 4px 0 #7ad9d1)
    drop-shadow(4px -3px 0 #ffe27a)
    drop-shadow(0 7px 0 rgb(102 47 45 / 26%));
}

.memoir-back:hover::after,
.memoir-back:focus-visible::after {
  animation: memoir-back-trail 620ms steps(4, end) both;
}

.memoir-back:focus-visible {
  outline: none;
}

.memoir-back:active .memoir-back__art {
  animation: none;
  transform: translateY(7px) scale(0.94);
  filter: drop-shadow(0 1px 0 rgb(102 47 45 / 18%));
}

@keyframes cloud-left-drift {
  from { transform: translateX(0); }
  to { transform: translateX(78px); }
}

@keyframes cloud-right-drift {
  from { transform: translateX(-36px); }
  to { transform: translateX(36px); }
}

@keyframes pixel-smoke-rise {
  0%,
  25% {
    opacity: 1;
    transform: translate(0, 0);
  }

  35%,
  74% {
    opacity: 1;
  }

  88%,
  100% {
    opacity: 0;
    transform: translate(-52px, -174px);
  }
}

@keyframes character-pixel-hop {
  0%,
  100% {
    transform: translateY(0) rotate(0) scale(1);
  }

  20% {
    transform: translateY(-13px) rotate(var(--hop-tilt)) scale(1.07);
  }

  40% {
    transform: translateY(3px) rotate(var(--hop-counter-tilt)) scale(0.985);
  }

  62% {
    transform: translateY(-6px) rotate(var(--hop-settle-tilt)) scale(1.035);
  }

  82% {
    transform: translateY(0) rotate(0) scale(1.01);
  }
}

@keyframes character-sparkle {
  0%,
  100% {
    opacity: 0;
    transform: translateY(8px) scale(0);
  }

  24%,
  68% {
    opacity: 1;
    transform: translateY(-6px) scale(1);
  }
}

@keyframes memoir-button-hover {
  0%,
  100% {
    transform: translateY(0) rotate(0) scale(1);
  }

  22% {
    transform: translateY(-11px) rotate(-0.6deg) scale(1.035);
  }

  44% {
    transform: translateY(3px) rotate(0.6deg) scale(0.99);
  }

  66% {
    transform: translateY(-5px) rotate(-0.3deg) scale(1.018);
  }
}

@keyframes memoir-button-sparkle {
  0%,
  100% {
    opacity: 0;
    transform: translateY(8px) scale(0);
  }

  25%,
  70% {
    opacity: 1;
    transform: translateY(-7px) scale(1);
  }
}

@keyframes landing-title-exit {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-70px) scale(0.9);
  }
}

@keyframes landing-button-exit {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(48px) scale(0.82);
  }
}

@keyframes conveyor-unroll {
  from { background-position: 0 0; }
  to { background-position: 0 100%; }
}

@keyframes conveyor-run {
  from { background-position: 0 0; }
  to { background-position: 0 100%; }
}

@keyframes conveyor-delivery-pass {
  from { transform: translate3d(0, -50%, 0); }
  to { transform: translate3d(-661.8%, -50%, 0); }
}

@keyframes memoir-hands-reveal {
  from {
    opacity: 0;
    transform: translate3d(-50%, 6%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes watermark-pixel-glow {
  from {
    opacity: 0.76;
    transform: translateY(0);
  }

  to {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@keyframes memoir-back-arrive {
  0% {
    opacity: 0;
    transform: translateX(-24px) scale(0.78);
  }

  70% {
    opacity: 1;
    transform: translateX(5px) scale(1.04);
  }

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

@keyframes memoir-back-nudge {
  0%,
  100% {
    transform: translateX(0) rotate(0) scale(1);
  }

  24% {
    transform: translateX(-10px) rotate(-3deg) scale(1.07);
  }

  48% {
    transform: translateX(3px) rotate(2deg) scale(0.98);
  }

  70% {
    transform: translateX(-4px) rotate(-1deg) scale(1.025);
  }
}

@keyframes memoir-back-trail {
  0%,
  100% {
    opacity: 0;
    transform: translateX(-8px) scale(0);
  }

  25%,
  68% {
    opacity: 1;
    transform: translateX(5px) scale(1);
  }
}

@media (max-width: 760px) {
  .site-title {
    top: 19%;
    width: 72vw;
  }

  .memoir-entry {
    top: 42%;
    width: 68vw;
  }

  .memoir-back {
    top: 23%;
    left: 8%;
    width: 52px;
  }

  .homepage-watermark {
    right: 14px;
    bottom: 14px;
    font-size: 12px;
  }

  .conveyor-layer,
  .conveyor-delivery {
    top: 31%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-sprite {
    animation: none;
  }

  .tablecloth-layer {
    transition: none;
  }

  .title-character:hover .title-character__art,
  .title-character:hover::after {
    animation: none;
  }

  .memoir-entry:hover .memoir-entry__art,
  .memoir-entry:focus-visible .memoir-entry__art,
  .memoir-entry:hover::before,
  .memoir-entry:hover::after,
  .memoir-entry:focus-visible::before,
  .memoir-entry:focus-visible::after,
  .landing-screen.is-leaving .site-title,
  .landing-screen.is-leaving .memoir-entry,
  .memoir-page[aria-hidden="false"] .memoir-back,
  .memoir-back:hover .memoir-back__art,
  .memoir-back:focus-visible .memoir-back__art,
  .memoir-back:hover::after,
  .memoir-back:focus-visible::after {
    animation: none;
  }

  .homepage-watermark {
    animation: none;
  }

  .conveyor-layer.is-unrolling,
  .conveyor-layer.is-running,
  .conveyor-delivery.is-running .conveyor-delivery__carrier {
    animation: none;
  }

  .conveyor-delivery__plate {
    transition: none;
  }

  .memoir-page.is-receiving-plate .memoir-hands {
    animation: none;
  }

  .conveyor-delivery.is-running .conveyor-delivery__carrier {
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
}