:root {
  --pixel: 6px;
  --bg-1: #86d8ff;
  --bg-2: #5fb0ef;
  --bg-3: #2f6bb7;
  --cyan: #67f2ff;
  --cream: #fff0b8;
  --orange: #ff9f1c;
  --red: #ff3d57;
  --ink: #120821;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg-1);
}

body {
  font-family: "Courier New", Courier, monospace;
  image-rendering: pixelated;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 58%, var(--bg-3) 100%);
  isolation: isolate;
  transition: background 1.6s steps(8, end);
}

.stage.is-sky {
  --bg-1: #62cdf8;
  --bg-2: #2f88d2;
  --bg-3: #1e4f96;
}

.stage.is-space {
  --bg-1: #0b1745;
  --bg-2: #10123e;
  --bg-3: #24154e;
}

.stage.is-outer-space {
  --bg-1: #01030d;
  --bg-2: #05071d;
  --bg-3: #160b2f;
}

.stage.is-impact-shaking {
  animation: stageImpactShake 0.52s steps(8, end);
}

.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent 0 49%, rgb(255 255 255 / 0.04) 49% 51%, transparent 51% 100%),
    linear-gradient(0deg, transparent 0 49%, rgb(255 255 255 / 0.03) 49% 51%, transparent 51% 100%);
  background-size: 42px 42px;
  opacity: 0.4;
}

.stage.is-waiting * {
  animation-play-state: paused;
}

.start-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-rows: auto auto;
  gap: 28px;
  place-items: center;
  align-content: center;
  background:
    repeating-linear-gradient(
      180deg,
      rgb(5 7 29 / 0.15) 0,
      rgb(5 7 29 / 0.15) 6px,
      transparent 6px,
      transparent 18px
    );
}

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

.start-title {
  margin: 0;
  transform: translateY(clamp(-82px, -10vh, -46px));
  color: var(--cream);
  font: 700 clamp(34px, 9vw, 88px) "Courier New", Courier, monospace;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    5px 5px 0 var(--ink),
    0 0 18px rgb(103 242 255 / 0.45);
}

.start-button {
  border: 0;
  padding: 18px 28px;
  color: var(--cream);
  font: 700 clamp(28px, 7vw, 72px) "Courier New", Courier, monospace;
  line-height: 1;
  letter-spacing: 0;
  background: #172348;
  box-shadow:
    0 0 0 5px var(--cyan),
    0 0 0 10px var(--ink),
    10px 10px 0 rgb(18 8 33 / 0.45);
  cursor: pointer;
}

.start-button:active {
  transform: translate(4px, 4px);
  box-shadow:
    0 0 0 5px var(--cyan),
    0 0 0 10px var(--ink),
    4px 4px 0 rgb(18 8 33 / 0.45);
}

.environment {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 1.2s steps(8, end), transform 1.8s steps(10, end);
  will-change: opacity, transform;
}

.land-motion-layer {
  z-index: 2;
  overflow: hidden;
  opacity: 1;
}

.land-motion-layer::before {
  content: "";
  position: absolute;
  inset: -120vh 0 0;
  background:
    linear-gradient(#ffffff 0 0) 10vw 5vh / 5px 58px no-repeat,
    linear-gradient(#d9edf8 0 0) 23vw 32vh / 6px 78px no-repeat,
    linear-gradient(#fff0b8 0 0) 39vw 14vh / 4px 50px no-repeat,
    linear-gradient(#ffffff 0 0) 58vw 42vh / 6px 84px no-repeat,
    linear-gradient(#d9edf8 0 0) 76vw 20vh / 5px 72px no-repeat,
    linear-gradient(#fff0b8 0 0) 91vw 58vh / 4px 64px no-repeat;
  background-repeat: repeat-y;
  opacity: 0.48;
  animation: landRush 0.58s linear infinite;
}

.launch-puff {
  position: absolute;
  width: 122px;
  height: 42px;
  background:
    linear-gradient(#eef7ff 0 0) 0 18px / 122px 18px no-repeat,
    linear-gradient(#c7d5e3 0 0) 22px 8px / 38px 18px no-repeat,
    linear-gradient(#fff0b8 0 0) 64px 0 / 48px 22px no-repeat,
    linear-gradient(rgb(18 8 33 / 0.16) 0 0) 14px 32px / 96px 10px no-repeat;
  filter: drop-shadow(6px 6px 0 rgb(18 8 33 / 0.12));
  animation: puffFall 1.2s linear infinite;
}

.puff-one {
  left: 8vw;
  top: 12vh;
}

.puff-two {
  left: 62vw;
  top: 26vh;
  width: 96px;
  animation-duration: 0.9s;
}

.puff-three {
  left: 32vw;
  top: 58vh;
  width: 146px;
  animation-duration: 1.05s;
}

.puff-four {
  left: 78vw;
  top: -8vh;
  width: 110px;
  animation-duration: 1.35s;
}

.stage.is-sky .land-motion-layer,
.stage.is-space .land-motion-layer,
.stage.is-outer-space .land-motion-layer {
  opacity: 0;
  transform: translateY(80vh);
  transition-duration: 0.12s;
}

.sky-layer-art {
  z-index: 2;
  opacity: 0;
  transform: translateY(24px);
  overflow: hidden;
}

.sky-layer-art::before {
  content: "";
  position: absolute;
  inset: -120vh 0 0;
  background:
    linear-gradient(#d8f5ff 0 0) 12vw 10vh / 7px 74px no-repeat,
    linear-gradient(#ffffff 0 0) 26vw 32vh / 5px 96px no-repeat,
    linear-gradient(#d8f5ff 0 0) 44vw 18vh / 8px 88px no-repeat,
    linear-gradient(#ffffff 0 0) 67vw 44vh / 6px 108px no-repeat,
    linear-gradient(#d8f5ff 0 0) 82vw 22vh / 8px 92px no-repeat,
    linear-gradient(#ffffff 0 0) 92vw 64vh / 5px 118px no-repeat;
  background-repeat: repeat-y;
  opacity: 0.58;
  animation: skyRush 0.42s linear infinite;
}

.cloud {
  position: absolute;
  width: 132px;
  height: 42px;
  background:
    linear-gradient(#fff 0 0) 0 18px / 132px 24px no-repeat,
    linear-gradient(#fff 0 0) 24px 6px / 42px 18px no-repeat,
    linear-gradient(#fff 0 0) 62px 0 / 54px 24px no-repeat,
    linear-gradient(#d8f5ff 0 0) 12px 30px / 108px 12px no-repeat;
  filter: drop-shadow(6px 6px 0 rgb(10 42 86 / 0.18));
  animation: cloudRun 0.95s linear infinite;
}

.cloud-one {
  top: 18vh;
  left: 8vw;
}

.cloud-two {
  top: 38vh;
  left: 64vw;
  width: 104px;
  animation-duration: 0.78s;
}

.cloud-three {
  top: 70vh;
  left: 24vw;
  width: 150px;
  animation-duration: 0.64s;
}

.cloud-four {
  top: -12vh;
  left: 48vw;
  width: 118px;
  animation-duration: 1.1s;
}

.orbit-layer {
  z-index: 2;
  opacity: 0;
  transform: translateY(32px);
}

.planet,
.moon,
.nebula {
  position: absolute;
  image-rendering: pixelated;
}

.planet-blue {
  top: 12vh;
  right: 11vw;
  width: 82px;
  height: 82px;
  background:
    linear-gradient(90deg, transparent 0 12%, #3ee0ff 12% 88%, transparent 88%),
    linear-gradient(180deg, transparent 0 12%, #1c85de 12% 88%, transparent 88%);
  box-shadow:
    inset -14px -10px 0 #0b4aa3,
    0 0 0 6px rgb(103 242 255 / 0.14);
  border-radius: 50%;
  animation: planetDrift 10s steps(12, end) infinite;
}

.planet-gold {
  left: 9vw;
  bottom: 20vh;
  width: 54px;
  height: 54px;
  background: #ffcf5c;
  box-shadow:
    inset -10px -8px 0 #c56e26,
    -28px 24px 0 -18px #fff0b8,
    0 0 0 5px rgb(255 207 92 / 0.12);
  border-radius: 50%;
  animation: planetDrift 7s steps(10, end) infinite reverse;
}

.deep-space-layer {
  z-index: 2;
  opacity: 0;
  transform: scale(1.08);
}

.nebula {
  top: 10vh;
  left: 50%;
  width: min(680px, 84vw);
  height: min(360px, 50vh);
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 28% 45%, rgb(255 61 87 / 0.38) 0 6px, transparent 7px),
    radial-gradient(circle at 62% 38%, rgb(103 242 255 / 0.32) 0 5px, transparent 6px),
    radial-gradient(circle at 48% 62%, rgb(255 240 184 / 0.22) 0 4px, transparent 5px),
    radial-gradient(ellipse at 50% 50%, rgb(128 70 255 / 0.18), transparent 68%);
  background-size: 84px 76px, 110px 96px, 130px 108px, 100% 100%;
  filter: drop-shadow(0 0 26px rgb(103 242 255 / 0.14));
  animation: nebulaPulse 2.6s steps(5, end) infinite;
}

.moon {
  right: 16vw;
  bottom: 18vh;
  width: 46px;
  height: 46px;
  background:
    radial-gradient(circle at 18px 18px, #a8acbd 0 4px, transparent 5px),
    radial-gradient(circle at 30px 30px, #7b8196 0 5px, transparent 6px),
    #e6e7ef;
  border-radius: 50%;
  box-shadow: inset -9px -8px 0 #9298ab;
}

.stage.is-sky .sky-layer-art {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 0.06s;
}

.stage.is-cruising .sky-layer-art {
  opacity: 1;
  transform: translateY(0);
}

.stage.is-space .sky-layer-art {
  opacity: 0;
  transform: translateY(48vh);
}

.stage.is-space .orbit-layer,
.stage.is-outer-space .orbit-layer {
  opacity: 1;
  transform: translateY(0);
}

.stage.is-outer-space .sky-layer-art {
  opacity: 0;
  transform: translateY(90vh);
}

.stage.is-outer-space .deep-space-layer {
  opacity: 1;
  transform: scale(1);
}

.sky-layer {
  position: absolute;
  inset: -200vh 0 0;
  z-index: 1;
  background-repeat: repeat;
  opacity: 0;
  transition: opacity 1.1s steps(8, end);
  will-change: transform;
}

.stars-back {
  background-image:
    radial-gradient(circle at 18px 38px, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 90px 120px, #8be9ff 0 1px, transparent 2px),
    radial-gradient(circle at 144px 72px, #fff0b8 0 2px, transparent 3px);
  background-size: 170px 190px, 230px 260px, 280px 240px;
  animation: starRun 4.2s linear infinite;
}

.stars-mid {
  background-image:
    radial-gradient(circle at 40px 40px, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 130px 110px, #ffd166 0 2px, transparent 3px),
    radial-gradient(circle at 210px 70px, #67f2ff 0 2px, transparent 3px);
  background-size: 260px 280px, 310px 330px, 360px 300px;
  animation: starRun 1.9s linear infinite;
}

.stars-front {
  background-image:
    radial-gradient(ellipse at 70px 30px, #fff 0 3px, transparent 4px),
    radial-gradient(ellipse at 170px 150px, #ffcf5c 0 3px, transparent 4px),
    radial-gradient(ellipse at 285px 85px, #67f2ff 0 2px, transparent 3px);
  background-size: 220px 240px, 300px 280px, 340px 300px;
  animation: starRun 0.72s linear infinite;
}

.stage.is-space .stars-back {
  opacity: 0.45;
}

.stage.is-space .stars-mid {
  opacity: 0.76;
}

.stage.is-space .stars-front {
  opacity: 0.86;
}

.stage.is-outer-space .stars-back {
  opacity: 0.65;
}

.stage.is-outer-space .stars-mid {
  opacity: 0.9;
}

.stage.is-outer-space .stars-front {
  opacity: 1;
  animation-duration: 0.48s;
}

.credit-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.credit-name {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  max-width: min(430px, 84vw);
  padding: 8px 12px;
  color: var(--cream);
  font: 700 clamp(15px, 2.4vw, 28px) "Courier New", Courier, monospace;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  background: rgb(23 35 72 / 0.9);
  box-shadow:
    0 0 0 4px var(--ink),
    0 0 0 7px var(--credit-color, var(--cyan)),
    7px 7px 0 rgb(18 8 33 / 0.34);
  text-shadow: 3px 3px 0 var(--ink);
  transform: translate(-50%, 0);
  animation: creditThrow var(--credit-speed, 4.8s) steps(18, end) forwards;
  will-change: transform, opacity;
}

.credit-name::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  background: var(--credit-color, var(--cyan));
  box-shadow:
    -14px 0 0 var(--credit-color, var(--cyan)),
    -28px 0 0 rgb(255 240 184 / 0.9);
}

.credit-name.is-gold {
  --credit-color: #ffcf5c;
}

.credit-name.is-cyan {
  --credit-color: #67f2ff;
}

.credit-name.is-red {
  --credit-color: #ff3d57;
}

.credit-name.is-green {
  --credit-color: #a985ff;
}

.space-credit-name {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
  width: min(960px, 96vw);
  color: rgb(255 240 184 / 0.24);
  font-family: Impact, Haettenschweiler, "Arial Black", "Arial Narrow Bold", sans-serif;
  font-size: clamp(86px, 16vw, 190px);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    6px 6px 0 rgb(103 242 255 / 0.12),
    0 0 28px rgb(255 240 184 / 0.12);
  transform: translate(calc(-50% + var(--slide-x, 0px)), -140%);
  animation: spaceNameSlide 1.29s steps(14, end) forwards;
  will-change: opacity, transform;
}

.space-credit-name.is-long {
  font-size: clamp(58px, 10.5vw, 122px);
}

.timed-line {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 2;
  display: block;
  width: max-content;
  max-width: 92vw;
  color: rgb(255 240 184 / 0.38);
  font: 900 clamp(18px, 3.4vw, 42px) "Courier New", Courier, monospace;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-shadow:
    4px 4px 0 rgb(18 8 33 / 0.55),
    0 0 22px rgb(103 242 255 / 0.18);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  will-change: opacity, transform;
}

.timed-line.is-from-right {
  animation: timedLineRightToLeft 2.25s steps(18, end) forwards;
}

.timed-line.is-from-left {
  top: 56%;
  color: rgb(103 242 255 / 0.34);
  font-size: clamp(14px, 2.4vw, 30px);
  animation: timedLineLeftToRight 2.35s steps(18, end) forwards;
}

.finale-and,
.final-zachary {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: block;
  width: min(1040px, 96vw);
  color: var(--cream);
  font-family: Impact, Haettenschweiler, "Arial Black", "Arial Narrow Bold", sans-serif;
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: opacity, transform;
}

.finale-and {
  color: rgb(103 242 255 / 0.62);
  font-size: clamp(42px, 8vw, 96px);
  text-shadow:
    4px 4px 0 rgb(18 8 33 / 0.8),
    0 0 18px rgb(103 242 255 / 0.28);
  animation: finaleAndPop 0.76s steps(8, end) forwards;
}

.final-zachary {
  color: #fff5d9;
  font-size: clamp(86px, 17vw, 218px);
  text-shadow:
    10px 10px 0 #120821,
    16px 16px 0 rgb(255 61 87 / 0.45),
    -10px -8px 0 rgb(103 242 255 / 0.28),
    0 0 38px rgb(255 207 92 / 0.28);
  transform: translate(-50%, -50%) scale(6.8);
  animation: zacharyImpact 1.24s steps(14, end) forwards;
}

.final-zachary.is-ending {
  animation: zacharyExitBottom 1.28s steps(12, end) forwards;
}

.still-flying {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: block;
  width: min(540px, 90vw);
  color: rgb(103 242 255 / 0.82);
  font: 900 clamp(24px, 4.5vw, 52px) Impact, Haettenschweiler, "Arial Black", sans-serif;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-shadow:
    4px 4px 0 #120821,
    0 0 22px rgb(103 242 255 / 0.24);
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.86);
  animation: stillFlyingReveal 1.05s steps(10, end) 0.48s forwards;
  pointer-events: none;
}

.pixel-firework {
  position: absolute;
  z-index: 0;
  width: 9px;
  height: 9px;
  background: var(--firework-core, #fff5d9);
  opacity: 0;
  box-shadow:
    0 -48px 0 var(--firework-burst, #ffcf5c),
    34px -34px 0 var(--firework-spark, #67f2ff),
    50px 0 0 var(--firework-burst, #ffcf5c),
    34px 34px 0 var(--firework-trail, #ff3d57),
    0 50px 0 var(--firework-spark, #67f2ff),
    -34px 34px 0 var(--firework-burst, #ffcf5c),
    -50px 0 0 var(--firework-trail, #ff3d57),
    -34px -34px 0 var(--firework-spark, #67f2ff),
    0 0 0 7px rgb(255 255 255 / 0.1);
  filter: drop-shadow(0 0 14px var(--firework-burst, #ffcf5c));
  transform: translate(-50%, -50%) scale(0.15);
  animation: pixelFireworkBurst 0.78s steps(8, end) var(--firework-delay, 0s) both;
  will-change: opacity, transform;
}

.pixel-firework::before,
.pixel-firework::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  background: var(--firework-core, #fff5d9);
}

.pixel-firework::before {
  box-shadow:
    0 -76px 0 var(--firework-trail, #ff3d57),
    54px -54px 0 var(--firework-burst, #ffcf5c),
    78px 0 0 var(--firework-spark, #67f2ff),
    54px 54px 0 var(--firework-burst, #ffcf5c),
    0 78px 0 var(--firework-trail, #ff3d57),
    -54px 54px 0 var(--firework-spark, #67f2ff),
    -78px 0 0 var(--firework-burst, #ffcf5c),
    -54px -54px 0 var(--firework-trail, #ff3d57);
}

.pixel-firework::after {
  width: 5px;
  height: 5px;
  background: var(--firework-spark, #67f2ff);
  box-shadow:
    18px -64px 0 var(--firework-core, #fff5d9),
    70px -18px 0 var(--firework-trail, #ff3d57),
    18px 66px 0 var(--firework-burst, #ffcf5c),
    -68px 18px 0 var(--firework-core, #fff5d9),
    -18px -66px 0 var(--firework-spark, #67f2ff);
}

.scanlines {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgb(255 255 255 / 0.05) 0,
    rgb(255 255 255 / 0.05) 2px,
    transparent 2px,
    transparent 7px
  );
  mix-blend-mode: screen;
  opacity: 0.28;
}

.hud {
  position: absolute;
  top: clamp(14px, 3vw, 28px);
  left: clamp(14px, 3vw, 32px);
  z-index: 11;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--cyan);
  font-size: clamp(14px, 2vw, 22px);
  line-height: 1;
  text-shadow: 3px 3px 0 var(--ink);
  letter-spacing: 0;
}

.sound-toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-width: 82px;
  padding: 7px 9px;
  border: 0;
  color: var(--cyan);
  font: 900 clamp(13px, 1.8vw, 18px) "Courier New", Courier, monospace;
  line-height: 1;
  letter-spacing: 0;
  background: rgb(5 7 29 / 0.66);
  box-shadow: 0 0 0 3px rgb(103 242 255 / 0.25);
  text-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  image-rendering: pixelated;
}

.sound-toggle:hover {
  color: var(--cream);
  box-shadow: 0 0 0 3px rgb(255 240 184 / 0.32);
}

.sound-toggle.is-muted {
  color: rgb(255 61 87 / 0.9);
  box-shadow: 0 0 0 3px rgb(255 61 87 / 0.25);
}

.sound-icon {
  position: relative;
  display: inline-block;
  width: 17px;
  height: 15px;
  background:
    linear-gradient(90deg, transparent 0 3px, currentColor 3px 8px, transparent 8px),
    linear-gradient(90deg, currentColor 0 5px, transparent 5px);
  clip-path: polygon(0 34%, 35% 34%, 78% 0, 78% 100%, 35% 66%, 0 66%);
}

.sound-icon::before,
.sound-icon::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 20px;
  width: 5px;
  height: 5px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
}

.sound-icon::after {
  top: 8px;
  left: 25px;
  opacity: 0.7;
}

.sound-toggle.is-muted .sound-icon::before {
  top: 6px;
  left: 21px;
  width: 14px;
  height: 3px;
  border: 0;
  background: currentColor;
  transform: rotate(45deg);
}

.sound-toggle.is-muted .sound-icon::after {
  top: 6px;
  left: 21px;
  width: 14px;
  height: 3px;
  border: 0;
  background: currentColor;
  opacity: 1;
  transform: rotate(-45deg);
}

.sound-label {
  min-width: 28px;
  text-align: left;
}

.rocket-wrap {
  position: absolute;
  left: 50%;
  bottom: -34vh;
  z-index: 5;
  width: calc(var(--pixel) * 18);
  height: calc(var(--pixel) * 35);
  transform: translateX(-50%);
  animation: launchToCenter 5.2s cubic-bezier(0.22, 0.92, 0.28, 1) forwards,
    hoverBob 0.8s steps(2, end) 5.2s infinite;
  will-change: transform, bottom;
}

.rocket-wrap.is-ending {
  animation: rocketExitTop 1.28s steps(12, end) forwards;
}

.rocket {
  position: relative;
  width: 100%;
  height: calc(var(--pixel) * 25);
  filter: drop-shadow(0 0 16px rgb(103 242 255 / 0.36));
  animation: rocketShake 0.18s steps(2, end) infinite;
}

.rocket-nose {
  position: absolute;
  top: 0;
  left: calc(var(--pixel) * 4);
  width: calc(var(--pixel) * 10);
  height: calc(var(--pixel) * 6);
  background:
    linear-gradient(90deg, transparent 0 18%, var(--red) 18% 82%, transparent 82%),
    linear-gradient(90deg, transparent 0 28%, #ff7a6f 28% 72%, transparent 72%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.rocket-body {
  position: absolute;
  top: calc(var(--pixel) * 5);
  left: calc(var(--pixel) * 4);
  width: calc(var(--pixel) * 10);
  height: calc(var(--pixel) * 17);
  background:
    linear-gradient(90deg, #c8d8f0 0 18%, #fff5d9 18% 72%, #b3c4e8 72% 100%);
  box-shadow:
    inset calc(var(--pixel) * -1) 0 0 rgb(18 8 33 / 0.24),
    0 0 0 calc(var(--pixel) * 0.5) var(--ink);
}

.window {
  position: absolute;
  top: calc(var(--pixel) * 3);
  left: calc(var(--pixel) * 2.5);
  width: calc(var(--pixel) * 5);
  height: calc(var(--pixel) * 5);
  background: var(--cyan);
  border: calc(var(--pixel) * 0.75) solid var(--ink);
  box-shadow: inset calc(var(--pixel) * 0.75) calc(var(--pixel) * -0.75) 0 #148aa0;
}

.stripe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--pixel) * 4);
  height: calc(var(--pixel) * 2);
  background: var(--red);
  box-shadow: 0 calc(var(--pixel) * 2) 0 var(--orange);
}

.fin {
  position: absolute;
  top: calc(var(--pixel) * 17);
  width: calc(var(--pixel) * 5);
  height: calc(var(--pixel) * 8);
  background: var(--red);
  box-shadow: 0 0 0 calc(var(--pixel) * 0.5) var(--ink);
}

.fin-left {
  left: calc(var(--pixel) * 1);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.fin-right {
  right: calc(var(--pixel) * 1);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.exhaust {
  position: absolute;
  top: calc(var(--pixel) * 23);
  left: calc(var(--pixel) * 5);
  width: calc(var(--pixel) * 8);
  height: calc(var(--pixel) * 14);
}

.flame,
.spark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.flame-one {
  top: 0;
  width: calc(var(--pixel) * 7);
  height: calc(var(--pixel) * 13);
  background: var(--orange);
  clip-path: polygon(14% 0, 86% 0, 100% 52%, 50% 100%, 0 52%);
  animation: flameFlicker 0.2s steps(2, end) infinite;
}

.flame-two {
  top: calc(var(--pixel) * 1);
  width: calc(var(--pixel) * 4);
  height: calc(var(--pixel) * 10);
  background: var(--cream);
  clip-path: polygon(20% 0, 80% 0, 100% 46%, 50% 100%, 0 46%);
  animation: flameFlicker 0.16s steps(2, end) reverse infinite;
}

.spark {
  width: calc(var(--pixel) * 2);
  height: calc(var(--pixel) * 2);
  background: var(--cream);
  box-shadow: 0 calc(var(--pixel) * 4) 0 var(--orange);
  animation: sparks 0.36s steps(3, end) infinite;
}

.spark-one {
  top: calc(var(--pixel) * 8);
  margin-left: calc(var(--pixel) * -5);
}

.spark-two {
  top: calc(var(--pixel) * 6);
  margin-left: calc(var(--pixel) * 5);
  animation-delay: 0.12s;
}

.launch-pad {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(340px, 82vw);
  height: 58px;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, transparent 0 6%, #576574 6% 13%, transparent 13% 87%, #576574 87% 94%, transparent 94%),
    linear-gradient(180deg, #9aa6b2 0 38%, #596273 38% 64%, #303545 64% 100%);
  box-shadow: 0 -8px 0 rgb(255 255 255 / 0.1), 0 0 0 5px var(--ink);
  animation: padDrop 1.4s steps(8, end) 1.5s forwards;
}

.launch-pad span {
  border-right: 4px solid rgb(18 8 33 / 0.45);
  background: repeating-linear-gradient(
    90deg,
    transparent 0 20px,
    rgb(255 255 255 / 0.1) 20px 25px
  );
}

@keyframes launchToCenter {
  0% {
    bottom: -34vh;
  }

  58% {
    bottom: 38vh;
  }

  100% {
    bottom: calc(50vh - (var(--pixel) * 17));
  }
}

@keyframes hoverBob {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(calc(var(--pixel) * -1));
  }
}

@keyframes rocketExitTop {
  0% {
    bottom: calc(50vh - (var(--pixel) * 17));
    transform: translateX(-50%) translateY(0);
  }

  18% {
    bottom: calc(50vh - (var(--pixel) * 17));
    transform: translateX(-50%) translateY(calc(var(--pixel) * 2));
  }

  100% {
    bottom: 128vh;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes starRun {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(200vh);
  }
}

@keyframes creditThrow {
  0% {
    opacity: 0;
    transform: translate(-50%, 18px) rotate(0deg) scale(0.72);
  }

  10% {
    opacity: 1;
  }

  78% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--credit-x, 0px)), var(--credit-y, -86vh))
      rotate(var(--credit-rotate, 0deg))
      scale(1.08);
  }
}

@keyframes spaceNameSlide {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--slide-x, 0px)), -140%);
  }

  12% {
    opacity: 1;
  }

  66% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--slide-x, 0px)), 112vh);
  }
}

@keyframes timedLineRightToLeft {
  0% {
    opacity: 0;
    transform: translate(62vw, -50%);
  }

  18% {
    opacity: 0.52;
  }

  72% {
    opacity: 0.52;
  }

  100% {
    opacity: 0;
    transform: translate(-128vw, -50%);
  }
}

@keyframes timedLineLeftToRight {
  0% {
    opacity: 0;
    transform: translate(-128vw, -50%);
  }

  18% {
    opacity: 0.48;
  }

  72% {
    opacity: 0.48;
  }

  100% {
    opacity: 0;
    transform: translate(62vw, -50%);
  }
}

@keyframes finaleAndPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }

  24% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }

  74% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
  }
}

@keyframes zacharyImpact {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(6.8);
  }

  16% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(5.4);
  }

  58% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.34);
  }

  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.96);
  }

  82% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.16);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes zacharyExitBottom {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }

  24% {
    opacity: 1;
    transform: translate(-50%, -38%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, 118vh) scale(1.18);
  }
}

@keyframes stillFlyingReveal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.86);
  }

  36% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes stageImpactShake {
  0%,
  100% {
    transform: translate(0, 0) scale(1.012);
  }

  12% {
    transform: translate(-12px, 8px) scale(1.012);
  }

  25% {
    transform: translate(10px, -10px) scale(1.012);
  }

  38% {
    transform: translate(-8px, -6px) scale(1.012);
  }

  50% {
    transform: translate(12px, 6px) scale(1.012);
  }

  62% {
    transform: translate(-6px, 10px) scale(1.012);
  }

  76% {
    transform: translate(8px, -4px) scale(1.012);
  }

  88% {
    transform: translate(-4px, 4px) scale(1.012);
  }
}

@keyframes pixelFireworkBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--firework-scale-start, 0.12)) rotate(0deg);
  }

  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--firework-scale-pop, 0.52)) rotate(0deg);
  }

  58% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--firework-scale-full, 1.1)) rotate(8deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--firework-scale-end, 1.38)) rotate(12deg);
  }
}

@keyframes landRush {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(120vh);
  }
}

@keyframes puffFall {
  from {
    transform: translateY(-35vh);
  }

  to {
    transform: translateY(120vh);
  }
}

@keyframes cloudRun {
  from {
    transform: translateY(-35vh);
  }

  to {
    transform: translateY(130vh);
  }
}

@keyframes skyRush {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(120vh);
  }
}

@keyframes planetDrift {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }
}

@keyframes nebulaPulse {
  0%,
  100% {
    opacity: 0.82;
  }

  50% {
    opacity: 1;
  }
}

@keyframes rocketShake {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(calc(var(--pixel) * 0.5));
  }
}

@keyframes flameFlicker {
  0%,
  100% {
    transform: translateX(-50%) scaleY(1);
  }

  50% {
    transform: translateX(-50%) scaleY(0.72);
  }
}

@keyframes sparks {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(var(--pixel) * 8));
  }
}

@keyframes padDrop {
  to {
    transform: translateX(-50%) translateY(76px);
  }
}

@media (max-width: 620px) {
  :root {
    --pixel: 5px;
  }

  .launch-pad {
    height: 48px;
  }
}