/* A compact arcade invitation between the playground and desktop demo. */
.scene-afterword.interface-invitation {
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  display: grid;
  place-items: center;
  min-height: 0;
  height: auto;
  padding: 16px 24px 20px;
  background: transparent;
  overflow: visible;
}

.interface-invitation #story-deck.invitation-content {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: 8px;
  width: min(430px, 100%);
  max-width: 430px;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  left: auto;
  top: auto;
  transform: none;
  text-align: center;
}

/* Keep the light close to the lettering, without a background wash. */
.scene-afterword.interface-invitation #story-deck::before {
  content: none;
  display: none;
}

/* One shared timeline keeps the bite, pellets and reset in sync when paused.
   Pac-Man travels 264px in 11 of 14 beats. Pellets sit 24px apart. */
.invitation-arcade {
  --pacman-loop: 6s;
  position: relative;
  width: 240px;
  height: 22px;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 8px), transparent);
}

.invitation-pellet {
  position: absolute;
  left: calc(var(--pellet) * 24px - 1.5px);
  top: 9.5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff4ca;
  box-shadow: 0 0 0 1px #6b5a3033, 0 0 4px #fff9d999;
  animation-duration: var(--pacman-loop);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.invitation-pacman {
  position: absolute;
  left: -22px;
  top: 1px;
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 1px 1px #76612a55) drop-shadow(0 0 3px #fff5b3a6);
  animation: invitation-pacman-pass var(--pacman-loop) linear infinite;
}
.invitation-pacman svg { display: block; width: 100%; height: 100%; fill: #ffd34e; }
.invitation-pacman path {
  transform-origin: 10px 10px;
  animation-duration: calc(var(--pacman-loop) / 14);
  animation-timing-function: var(--ease-in-out);
  animation-iteration-count: infinite;
}
.pacman-jaw-top { transform: rotate(-32deg); animation-name: invitation-chomp-top; }
.pacman-jaw-bottom { transform: rotate(32deg); animation-name: invitation-chomp-bottom; }

/* Leave the track before restoring the dots, then wrap invisibly to the left. */
@keyframes invitation-pacman-pass {
  0% { transform: translateX(0); }
  78.5714%, 100% { transform: translateX(264px); }
}
@keyframes invitation-chomp-top {
  0%, 100% { transform: rotate(-32deg); }
  50% { transform: rotate(0); }
}
@keyframes invitation-chomp-bottom {
  0%, 100% { transform: rotate(32deg); }
  50% { transform: rotate(0); }
}
/* Each pellet vanishes inside the closing mouth. Their return is a soft wave
   after the pass; using delays here would also shift the reset incorrectly. */
.pellet-1 { --pellet: 1; animation-name: invitation-pellet-1; }
@keyframes invitation-pellet-1 {
  0%, 10.7043% { opacity: 1; animation-timing-function: step-end; }
  10.7143%, 81% { opacity: 0; }
  84%, 100% { opacity: 1; }
}
.pellet-2 { --pellet: 2; animation-name: invitation-pellet-2; }
@keyframes invitation-pellet-2 {
  0%, 17.8471% { opacity: 1; animation-timing-function: step-end; }
  17.8571%, 82% { opacity: 0; }
  85%, 100% { opacity: 1; }
}
.pellet-3 { --pellet: 3; animation-name: invitation-pellet-3; }
@keyframes invitation-pellet-3 {
  0%, 24.9900% { opacity: 1; animation-timing-function: step-end; }
  25.0000%, 83% { opacity: 0; }
  86%, 100% { opacity: 1; }
}
.pellet-4 { --pellet: 4; animation-name: invitation-pellet-4; }
@keyframes invitation-pellet-4 {
  0%, 32.1329% { opacity: 1; animation-timing-function: step-end; }
  32.1429%, 84% { opacity: 0; }
  87%, 100% { opacity: 1; }
}
.pellet-5 { --pellet: 5; animation-name: invitation-pellet-5; }
@keyframes invitation-pellet-5 {
  0%, 39.2757% { opacity: 1; animation-timing-function: step-end; }
  39.2857%, 85% { opacity: 0; }
  88%, 100% { opacity: 1; }
}
.pellet-6 { --pellet: 6; animation-name: invitation-pellet-6; }
@keyframes invitation-pellet-6 {
  0%, 46.4186% { opacity: 1; animation-timing-function: step-end; }
  46.4286%, 86% { opacity: 0; }
  89%, 100% { opacity: 1; }
}
.pellet-7 { --pellet: 7; animation-name: invitation-pellet-7; }
@keyframes invitation-pellet-7 {
  0%, 53.5614% { opacity: 1; animation-timing-function: step-end; }
  53.5714%, 87% { opacity: 0; }
  90%, 100% { opacity: 1; }
}
.pellet-8 { --pellet: 8; animation-name: invitation-pellet-8; }
@keyframes invitation-pellet-8 {
  0%, 60.7043% { opacity: 1; animation-timing-function: step-end; }
  60.7143%, 88% { opacity: 0; }
  91%, 100% { opacity: 1; }
}
.pellet-9 { --pellet: 9; animation-name: invitation-pellet-9; }
@keyframes invitation-pellet-9 {
  0%, 67.8471% { opacity: 1; animation-timing-function: step-end; }
  67.8571%, 89% { opacity: 0; }
  92%, 100% { opacity: 1; }
}

.invitation-copy {
  --invitation-sweep-duration: 4.8s;
  position: relative;
  margin: 0;
  min-width: 0;
  color: #244d59;
  font: 700 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.invitation-copy-ink {
  display: block;
  text-shadow: -.65px -.65px 0 #fff, .65px -.65px 0 #fff,
    -.65px .65px 0 #fff, .65px .65px 0 #fff,
    0 0 4px #fff, 0 0 9px #fffbe8;
}

/* Move a soft mask across a stationary gold copy. The equal, opposite
   transforms keep every letter aligned; no per-frame layout or text repaint. */
.invitation-copy-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent 24%, #000 42%, #000 58%, transparent 76%);
  transform: translateX(-80%);
  animation: invitation-gold-sweep var(--invitation-sweep-duration) linear infinite;
}
.invitation-copy-sweep > span {
  display: block;
  color: #ffd34e;
  -webkit-text-stroke: .3px #8b6316;
  text-shadow: 0 0 3px #fff3b9, 0 0 7px #ffd34eb3;
  transform: translateX(80%);
  animation: invitation-gold-countermove var(--invitation-sweep-duration) linear infinite;
}
@keyframes invitation-gold-sweep {
  0% { transform: translateX(-80%); }
  78%, 100% { transform: translateX(80%); }
}
@keyframes invitation-gold-countermove {
  0% { transform: translateX(80%); }
  78%, 100% { transform: translateX(-80%); }
}

.interface-invitation:not([data-scene-active="true"]) *,
html[data-motion="paused"] .interface-invitation *,
html[data-visible="false"] .interface-invitation * { animation-play-state: paused; }

@media (max-width: 599px) {
  .scene-afterword.interface-invitation { padding: 14px 12px 18px; }
  .invitation-copy { font-size: 12px; }
}

@media (prefers-contrast: more), (forced-colors: active) {
  .invitation-copy { color: #092c3a; }
  .invitation-copy-sweep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .invitation-copy-sweep { display: none; }
  .interface-invitation * { animation: none; }
  .invitation-pacman { transform: translateX(22px); }
}