/*
 * HD-2D in CSS: low-resolution silhouettes + high-resolution atmosphere.
 * Every moving layer travels downwards, so the fixed rocket feels like it rises.
 */

:root {
  --ink: #081027;
  --night: #0b1737;
  --blue: #173d69;
  --sky: #3f7898;
  --mist: #a9d0d0;
  --cream: #ffe6a3;
  --orange: #ff8a3d;
  --red: #d8443e;
  --pixel: 4px;
  --rocket-y: 70%;
  --rocket-scale: .62;
}

@property --nebula-transfer {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  color: #fff8da;
  background: var(--ink);
  font-family: "Courier New", Courier, monospace;
}

.scene {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 70%, rgba(18, 34, 50, .2), transparent 46%),
    linear-gradient(180deg, #02040b 0%, #040812 58%, #07101b 100%);
}

.scene::before {
  position: absolute;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.2;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.035) 0,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

.stars {
  position: absolute;
  z-index: -1;
  top: -100vh;
  left: 0;
  width: 100%;
  height: 200vh;
  will-change: transform;
}

.nebula-field {
  position: absolute;
  z-index: -2;
  top: -100vh;
  left: 0;
  width: 100%;
  height: 200vh;
  pointer-events: none;
  opacity: 0;
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100vw 100vh;
  filter: blur(1.1px) saturate(1.34) contrast(1.08);
  mix-blend-mode: normal;
  animation: nebula-field-fall 520s linear infinite;
  transition: opacity 9s ease-in-out;
  will-change: transform;
}

.nebula-depth-field {
  position: absolute;
  top: -100vh;
  left: 0;
  width: 100%;
  height: 200vh;
  pointer-events: none;
  opacity: 0;
  background-position: center top;
  background-repeat: repeat-y;
  mix-blend-mode: screen;
  transition: opacity 9s ease-in-out;
  will-change: transform;
}

.nebula-depth-field--middle {
  z-index: 3;
  background-size: 150vw 100vh;
  filter: blur(6px) saturate(1.18);
  animation: nebula-field-fall 340s linear infinite;
  mask-image: radial-gradient(ellipse at 38% 48%, #000 0 22%, rgba(0, 0, 0, .56) 46%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 38% 48%, #000 0 22%, rgba(0, 0, 0, .56) 46%, transparent 78%);
}

.nebula-depth-field--near {
  z-index: 11;
  background-position: 68% top;
  background-size: 230vw 100vh;
  filter: blur(14px) saturate(1.08);
  animation: nebula-field-fall 210s linear infinite;
  mask-image:
    radial-gradient(ellipse at 4% 36%, rgba(0, 0, 0, .76), transparent 34%),
    radial-gradient(ellipse at 96% 72%, rgba(0, 0, 0, .62), transparent 31%);
  -webkit-mask-image:
    radial-gradient(ellipse at 4% 36%, rgba(0, 0, 0, .76), transparent 34%),
    radial-gradient(ellipse at 96% 72%, rgba(0, 0, 0, .62), transparent 31%);
}

.nebula-knot-field {
  position: absolute;
  z-index: -1;
  top: -100vh;
  left: 0;
  width: 100%;
  height: 200vh;
  pointer-events: none;
  opacity: 0;
  animation: nebula-field-fall 520s linear infinite;
  transition: opacity 9s ease-in-out;
  will-change: transform;
}

.scene--nebula-visible .nebula-field {
  opacity: .58;
}

.scene--nebula-visible .nebula-depth-field--middle {
  opacity: .2;
}

.scene--nebula-visible .nebula-depth-field--near {
  opacity: .1;
}

.scene--nebula-visible .nebula-knot-field {
  opacity: .72;
}

.nebula-light {
  position: absolute;
  top: var(--nebula-light-y);
  left: var(--nebula-light-x);
  width: var(--nebula-light-size);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: #f6fdff;
  box-shadow:
    0 0 3px rgba(240, 252, 255, .86),
    0 0 10px rgb(var(--nebula-light-color) / .5),
    0 0 24px rgb(var(--nebula-light-color) / .2);
}

.nebula-light::after {
  position: absolute;
  inset: -10px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--nebula-light-color) / .14), transparent 68%);
}

.galaxy-field {
  position: absolute;
  z-index: -3;
  top: -100vh;
  left: 0;
  width: 100%;
  height: 200vh;
  pointer-events: none;
  animation: starfield-fall 420s linear infinite;
  will-change: transform;
}

.constellation-field {
  position: absolute;
  z-index: -3;
  top: -100vh;
  left: 0;
  width: 100%;
  height: 200vh;
  pointer-events: none;
  animation: starfield-fall 560s linear infinite;
  will-change: transform;
}

.constellation {
  position: absolute;
  top: var(--constellation-y);
  left: var(--constellation-x);
  width: var(--constellation-width);
  height: calc(var(--constellation-width) * .62);
  translate: -50% -50%;
  rotate: var(--constellation-tilt);
  overflow: visible;
  opacity: .2;
}

.constellation polyline {
  fill: none;
  stroke: rgba(160, 195, 210, .22);
  stroke-width: .55;
  stroke-dasharray: 2 2;
}

.constellation circle {
  fill: rgba(220, 236, 232, .76);
  filter: drop-shadow(0 0 2px rgba(176, 220, 226, .54));
}

.galaxy {
  position: absolute;
  top: var(--galaxy-y);
  left: var(--galaxy-x);
  width: var(--galaxy-width);
  height: calc(var(--galaxy-width) * .42);
  opacity: var(--galaxy-opacity);
  translate: -50% -50%;
  rotate: var(--galaxy-tilt);
  border-radius: 50%;
  background:
    radial-gradient(ellipse, hsla(var(--galaxy-hue), 22%, 94%, .66) 0 3%, hsla(var(--galaxy-hue), 48%, 72%, .24) 10%, transparent 30%),
    radial-gradient(ellipse, transparent 0 28%, hsla(var(--galaxy-hue), 54%, 62%, .14) 34%, transparent 48%),
    radial-gradient(ellipse, hsla(calc(var(--galaxy-hue) + 24), 42%, 56%, .1), transparent 68%);
  filter: blur(2.4px);
  box-shadow: 0 0 calc(var(--galaxy-width) * .18) hsla(var(--galaxy-hue), 48%, 58%, .16);
}

.galaxy::after {
  content: none;
}

.stars--far {
  z-index: -3;
  animation: starfield-fall 240s linear infinite;
}

.stars--near {
  z-index: -1;
  animation: starfield-fall 240s linear infinite;
}

.stars--bright {
  z-index: 0;
  animation: starfield-fall 240s linear infinite;
}

.star {
  position: absolute;
  top: var(--star-y);
  left: var(--star-x);
  width: var(--star-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: hsl(var(--star-hue), var(--star-saturation), var(--star-lightness));
  box-shadow: 0 0 var(--star-glow, 0) hsl(var(--star-hue), var(--star-saturation), var(--star-lightness));
}

.planet-field,
.black-hole-field,
.planet-flyby-field,
.pulsar-field,
.cosmic-dust-field,
.comet-field,
.meteor-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.planet-field--far {
  z-index: 0;
}

.planet-field--near {
  z-index: 4;
}

.planet-field--far .planet__surface {
  filter: brightness(var(--planet-brightness, .9)) opacity(.62);
}

.planet-field--far .planet__moon,
.planet-field--far .planet__ring {
  opacity: .58;
}

.planet-field--far .asteroid {
  filter: opacity(.68);
}

.planet-field--far .planet--atmosphere::after {
  opacity: .62;
}

.planet-field--far .planet__sun {
  filter: brightness(1.18);
}

.planet {
  position: absolute;
  top: 0;
  left: var(--planet-x);
  width: var(--planet-size);
  aspect-ratio: 1;
  border-radius: 50%;
  animation: planet-fall var(--planet-speed) linear var(--planet-delay) infinite;
  rotate: var(--planet-tilt);
  will-change: translate;
}

.planet__surface {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  border: max(1px, calc(var(--planet-size) * .018)) solid hsla(var(--planet-hue), 12%, 12%, .72);
  border-radius: 50%;
  filter: brightness(var(--planet-brightness, .9));
  box-shadow:
    inset calc(var(--planet-size) * -.15) calc(var(--planet-size) * -.05) calc(var(--planet-size) * .16) rgba(1, 3, 10, .42),
    inset calc(var(--planet-size) * .025) calc(var(--planet-size) * .02) calc(var(--planet-size) * .035) rgba(225, 226, 213, .08);
}

.planet__surface::before,
.planet__surface::after {
  position: absolute;
  inset: -5%;
  content: "";
  border-radius: inherit;
}

.planet__surface::before {
  transform: rotate(var(--surface-rotation)) scale(1.08);
}

.planet__surface::after {
  z-index: 2;
  opacity: var(--terminator-opacity, .76);
  background: radial-gradient(
    circle at var(--light-x, 27%) var(--light-y, 25%),
    transparent 0 30%,
    rgba(5, 7, 14, .06) 45%,
    rgba(3, 5, 12, .38) 68%,
    rgba(1, 2, 8, .88) 100%
  );
}

.planet--rocky > .planet__surface {
  background: radial-gradient(
    circle at var(--light-x, 32%) var(--light-y, 29%),
    hsl(var(--planet-hue), 19%, 54%),
    hsl(var(--planet-hue), 20%, 37%) 48%,
    hsl(var(--planet-hue), 17%, 21%) 78%,
    hsl(var(--planet-hue), 14%, 12%)
  );
}

.planet--rocky > .planet__surface::before {
  opacity: .58;
  background:
    conic-gradient(
      from 32deg at var(--feature-x1) var(--feature-y1),
      transparent 0 9%,
      hsla(calc(var(--planet-hue) + 9), 20%, 17%, .54) 12% 24%,
      transparent 29% 57%,
      hsla(calc(var(--planet-hue) - 6), 16%, 61%, .18) 63% 74%,
      transparent 80%
    ),
    conic-gradient(
      from 218deg at var(--feature-x2) var(--feature-y2),
      transparent 0 18%,
      hsla(var(--planet-hue), 18%, 24%, .46) 24% 39%,
      transparent 46% 72%,
      hsla(calc(var(--planet-hue) + 12), 14%, 56%, .12) 78% 86%,
      transparent 92%
    ),
    repeating-linear-gradient(
      17deg,
      transparent 0 4px,
      hsla(var(--planet-hue), 12%, 12%, .08) 5px,
      transparent 6px 9px
    );
  filter: blur(.65px) contrast(.94);
  mix-blend-mode: multiply;
}

.planet--gas > .planet__surface {
  background: linear-gradient(
    168deg,
    hsl(var(--planet-hue), 22%, 63%),
    hsl(var(--planet-hue), 24%, 43%) 52%,
    hsl(var(--planet-hue), 20%, 24%)
  );
}

.planet--gas > .planet__surface::before {
  opacity: .78;
  background:
    radial-gradient(ellipse 18% 7% at var(--feature-x1) var(--feature-y1), hsla(calc(var(--planet-hue) + 18), 34%, 32%, .62) 0 34%, hsla(calc(var(--planet-hue) + 8), 22%, 45%, .24) 52%, transparent 76%),
    repeating-linear-gradient(
      174deg,
      hsla(calc(var(--planet-hue) + 10), 26%, 70%, .2) 0 5%,
      hsla(var(--planet-hue), 20%, 27%, .26) 6% 11%,
      hsla(calc(var(--planet-hue) - 9), 18%, 58%, .12) 12% 17%
    );
  filter: blur(.45px);
}

.planet--ice > .planet__surface {
  background: radial-gradient(
    circle at var(--light-x, 31%) var(--light-y, 28%),
    hsl(var(--planet-hue), 24%, 75%),
    hsl(var(--planet-hue), 22%, 52%) 52%,
    hsl(var(--planet-hue), 19%, 26%) 84%,
    hsl(var(--planet-hue), 16%, 15%)
  );
}

.planet--ice > .planet__surface::before {
  opacity: .58;
  background:
    linear-gradient(117deg, transparent 0 41%, hsla(var(--planet-hue), 40%, 88%, .36) 42% 43%, transparent 44%),
    linear-gradient(26deg, transparent 0 57%, hsla(calc(var(--planet-hue) + 12), 33%, 86%, .22) 58% 59%, transparent 60%),
    radial-gradient(ellipse 62% 38% at var(--feature-x2) var(--feature-y2), hsla(var(--planet-hue), 28%, 24%, .28) 0, hsla(var(--planet-hue), 24%, 36%, .16) 38%, transparent 74%);
  filter: blur(.35px);
}

.planet--ocean > .planet__surface {
  background:
    radial-gradient(ellipse 34% 22% at var(--feature-x1) var(--feature-y1), hsla(112, 34%, 34%, .72), transparent 78%),
    radial-gradient(ellipse 26% 18% at var(--feature-x2) var(--feature-y2), hsla(74, 28%, 40%, .58), transparent 76%),
    radial-gradient(circle at var(--light-x, 31%) var(--light-y, 28%), hsl(194, 52%, 66%), hsl(205, 55%, 38%) 54%, hsl(218, 52%, 16%) 88%);
}

.planet__weather,
.planet__lights {
  position: absolute;
  inset: -8%;
  display: none;
  border-radius: 50%;
  pointer-events: none;
}

.planet--cloudy > .planet__surface > .planet__weather {
  z-index: 1;
  display: block;
  opacity: .34;
  background:
    repeating-linear-gradient(174deg, transparent 0 9%, rgba(233, 239, 230, .46) 10% 13%, transparent 15% 23%),
    radial-gradient(ellipse 26% 12% at 72% 38%, rgba(245, 241, 222, .52), transparent 74%);
  filter: blur(.55px);
  animation: weather-drift var(--weather-speed) linear var(--weather-delay) infinite;
  mix-blend-mode: screen;
}

.planet--stormy > .planet__surface > .planet__weather {
  background:
    radial-gradient(ellipse 17% 9% at var(--feature-x1) var(--feature-y1), rgba(75, 45, 58, .72) 0 38%, rgba(215, 181, 148, .3) 50%, transparent 74%),
    repeating-linear-gradient(174deg, transparent 0 8%, rgba(225, 221, 205, .4) 9% 13%, transparent 15% 22%);
}

.planet--inhabited > .planet__surface > .planet__lights {
  z-index: 3;
  display: block;
  opacity: .72;
  background:
    radial-gradient(circle at var(--city-x) var(--city-y), #ffe59a 0 1px, transparent 1.5px),
    radial-gradient(circle at calc(var(--city-x) + 9%) calc(var(--city-y) - 5%), #ffc96f 0 1px, transparent 1.5px),
    radial-gradient(circle at calc(var(--city-x) - 7%) calc(var(--city-y) + 8%), #fff0b0 0 .8px, transparent 1.3px);
  filter: drop-shadow(0 0 2px rgba(255, 194, 92, .8));
}

.planet__eclipse {
  position: absolute;
  z-index: 4;
  top: var(--eclipse-y);
  left: calc(var(--eclipse-size) * -1.2);
  width: var(--eclipse-size);
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  background: rgba(1, 3, 9, .58);
  box-shadow: 0 0 calc(var(--planet-size) * .1) rgba(1, 3, 9, .52);
  animation: eclipse-cross var(--eclipse-speed) ease-in-out var(--eclipse-delay) infinite;
}

.planet__ring {
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  width: 178%;
  height: 38%;
  translate: -50% -50%;
  rotate: var(--ring-tilt);
  border: max(1px, calc(var(--planet-size) * .025)) solid hsla(var(--planet-hue), 15%, 66%, .36);
  border-radius: 50%;
  box-shadow: 0 0 0 max(1px, calc(var(--planet-size) * .012)) hsla(var(--planet-hue), 12%, 38%, .12);
}

.planet--ringed > .planet__ring {
  display: block;
}

.planet__ring--back {
  z-index: 0;
}

.planet__ring--front {
  z-index: 2;
  clip-path: inset(50% -10% -15% -10%);
  border-color: transparent;
  border-bottom-color: hsla(var(--planet-hue), 17%, 73%, .48);
  box-shadow: none;
}

.planet__sun {
  position: absolute;
  z-index: 0;
  top: calc(50% + var(--sun-y));
  left: calc(50% + var(--sun-x));
  width: var(--sun-size);
  aspect-ratio: 1;
  translate: -50% -50%;
  border: max(1px, calc(var(--sun-size) * .018)) solid hsla(var(--sun-hue), 38%, 88%, .42);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    hsl(var(--sun-hue), 24%, 98%) 0 13%,
    hsl(var(--sun-hue), 48%, 92%) 24%,
    hsl(var(--sun-hue), var(--sun-saturation), var(--sun-lightness)) 56%,
    hsl(var(--sun-hue), var(--sun-saturation), 54%) 82%,
    hsl(var(--sun-hue), var(--sun-saturation), 38%) 100%
  );
  box-shadow:
    0 0 calc(var(--sun-size) * .24) hsla(var(--sun-hue), var(--sun-saturation), 82%, .88),
    0 0 calc(var(--sun-size) * .78) hsla(var(--sun-hue), var(--sun-saturation), 68%, .32);
  filter: brightness(1.08);
  isolation: isolate;
}

.planet__sun::before {
  content: none;
}

.planet__sun::after {
  position: absolute;
  top: -48%;
  right: -26%;
  display: none;
  width: 72%;
  height: 86%;
  content: "";
  transform-origin: 28% 88%;
  background:
    radial-gradient(ellipse 22% 58% at 24% 86%, hsla(var(--sun-hue), 30%, 98%, .72), hsla(var(--sun-hue), 96%, 70%, .3) 38%, transparent 78%),
    radial-gradient(ellipse 27% 46% at 47% 62%, hsla(var(--sun-hue), 94%, 68%, .26), transparent 76%),
    radial-gradient(ellipse 34% 31% at 70% 39%, hsla(var(--sun-hue), 90%, 61%, .14), transparent 78%);
  filter: blur(3.5px) drop-shadow(0 0 6px hsla(var(--sun-hue), 96%, 66%, .3));
  mix-blend-mode: screen;
  animation: solar-flare 12s ease-out infinite;
}

.planet__sun.sun--flaring::after {
  display: block;
}

.planet__sun--secondary {
  top: calc(50% + var(--sun2-y));
  left: calc(50% + var(--sun2-x));
  width: var(--sun2-size);
  border: max(1px, calc(var(--sun2-size) * .018)) solid hsla(var(--sun2-hue), 38%, 90%, .46);
  background: radial-gradient(
    circle,
    hsl(var(--sun2-hue), 20%, 98%) 0 14%,
    hsl(var(--sun2-hue), 46%, 91%) 28%,
    hsl(var(--sun2-hue), var(--sun2-saturation), var(--sun2-lightness)) 60%,
    hsl(var(--sun2-hue), var(--sun2-saturation), 42%) 100%
  );
  box-shadow:
    0 0 calc(var(--sun2-size) * .24) hsla(var(--sun2-hue), var(--sun2-saturation), 84%, .84),
    0 0 calc(var(--sun2-size) * .72) hsla(var(--sun2-hue), var(--sun2-saturation), 68%, .3);
}

.planet--atmosphere::after {
  position: absolute;
  z-index: 3;
  inset: -3%;
  pointer-events: none;
  content: "";
  border: max(1px, calc(var(--planet-size) * .022)) solid hsla(var(--atmosphere-hue), 68%, 72%, var(--atmosphere-opacity));
  border-radius: 50%;
  box-shadow:
    inset calc(var(--planet-size) * .025) calc(var(--planet-size) * -.02) calc(var(--planet-size) * .035) hsla(var(--atmosphere-hue), 72%, 82%, .25),
    0 0 calc(var(--planet-size) * .08) hsla(var(--atmosphere-hue), 68%, 64%, .18);
  mask-image: linear-gradient(135deg, #000 0 42%, rgba(0, 0, 0, .68) 62%, transparent 92%);
  -webkit-mask-image: linear-gradient(135deg, #000 0 42%, rgba(0, 0, 0, .68) 62%, transparent 92%);
}

.planet__moon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--moon-size);
  aspect-ratio: 1;
  translate: calc(-50% + var(--moon-x)) calc(-50% + var(--moon-y));
  border: 1px solid hsla(var(--moon-hue), 12%, 24%, .7);
  border-radius: 50%;
  background: radial-gradient(
    circle at var(--light-x, 30%) var(--light-y, 28%),
    hsl(var(--moon-hue), 12%, var(--moon-lightness)),
    hsl(var(--moon-hue), 10%, 30%) 62%,
    hsl(var(--moon-hue), 9%, 11%) 100%
  );
  box-shadow: 0 0 calc(var(--moon-size) * .3) rgba(190, 201, 205, .14);
  animation: moon-orbit var(--moon-speed) linear var(--moon-delay) infinite;
}

.planet__companion {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: var(--planet-size);
  aspect-ratio: 1;
  translate: calc(-50% + var(--orbit-x)) calc(-50% + var(--orbit-y));
  rotate: var(--planet-tilt);
  border-radius: 50%;
  isolation: isolate;
}

.asteroid-belt {
  position: absolute;
  z-index: 0;
  top: calc(50% + var(--sun-y));
  left: calc(50% + var(--sun-x));
  width: var(--belt-width);
  height: var(--belt-height);
  translate: -50% -50%;
  rotate: var(--belt-tilt);
  border: 1px dashed hsla(var(--sun-hue), 12%, 64%, .08);
  border-radius: 50%;
}

.asteroid {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--asteroid-size);
  aspect-ratio: 1;
  translate: var(--asteroid-x) var(--asteroid-y);
  rotate: var(--asteroid-rotation);
  border-radius: 38% 62% 44% 56%;
  opacity: var(--asteroid-opacity);
  background: hsl(var(--asteroid-hue), 10%, var(--asteroid-lightness));
  box-shadow: 0 0 1px rgba(221, 207, 184, .24);
}

.black-hole-field {
  z-index: 2;
  opacity: .72;
}

.black-hole {
  position: absolute;
  top: 0;
  left: var(--black-hole-x);
  width: var(--black-hole-size);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 205, 134, .12);
  border-radius: 50%;
  background: #000107;
  box-shadow:
    0 0 calc(var(--black-hole-size) * .28) rgba(0, 0, 0, .95),
    inset 0 0 calc(var(--black-hole-size) * .22) rgba(32, 15, 48, .42);
  rotate: var(--black-hole-tilt);
  animation: black-hole-fall var(--black-hole-speed) linear var(--black-hole-delay) infinite;
  isolation: isolate;
  will-change: translate;
}

.black-hole::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 270%;
  height: 48%;
  content: "";
  translate: -50% -50%;
  border: max(1px, calc(var(--black-hole-size) * .06)) solid hsla(var(--black-hole-hue), 92%, 64%, .78);
  border-color: hsla(var(--black-hole-hue), 94%, 76%, .9) hsla(calc(var(--black-hole-hue) + 18), 92%, 52%, .38);
  border-radius: 50%;
  box-shadow:
    0 0 calc(var(--black-hole-size) * .32) hsla(var(--black-hole-hue), 92%, 58%, .5),
    inset 0 0 calc(var(--black-hole-size) * .2) hsla(calc(var(--black-hole-hue) + 24), 90%, 64%, .42);
}

.black-hole::after {
  position: absolute;
  z-index: 2;
  inset: -92%;
  content: "";
  border: 2px solid transparent;
  border-right-color: rgba(212, 197, 239, .32);
  border-left-color: rgba(131, 108, 187, .2);
  border-radius: 50%;
  backdrop-filter: blur(2.2px) contrast(1.45) saturate(1.2);
  -webkit-backdrop-filter: blur(2.2px) contrast(1.45) saturate(1.2);
  box-shadow:
    inset 5px -3px 8px rgba(135, 101, 201, .16),
    4px 0 8px -5px rgba(236, 225, 255, .42),
    -4px 0 8px -5px rgba(126, 97, 183, .34);
  mask-image: radial-gradient(circle, transparent 0 34%, #000 43% 58%, transparent 69%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 34%, #000 43% 58%, transparent 69%);
  animation: lensing-shimmer 8s ease-in-out infinite;
}

.planet-flyby-field {
  z-index: 6;
}

.planet-flyby {
  position: absolute;
  top: 0;
  left: var(--flyby-x);
  width: var(--flyby-size);
  aspect-ratio: 1;
  translate: -50% calc(var(--flyby-size) * -1.15);
  rotate: var(--flyby-tilt);
  opacity: 0;
  border-radius: 50%;
  animation: planet-flyby var(--flyby-speed) cubic-bezier(.2, .45, .35, 1) forwards;
  filter: drop-shadow(18px 26px 28px rgba(0, 0, 10, .55));
  will-change: translate, opacity;
}

.planet-flyby__surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: max(2px, calc(var(--flyby-size) * .012)) solid rgba(15, 18, 28, .8);
  border-radius: 50%;
  background: radial-gradient(
    circle at var(--flyby-light-x) var(--flyby-light-y),
    hsl(var(--flyby-hue), 38%, 66%),
    hsl(var(--flyby-hue), 42%, 38%) 48%,
    hsl(var(--flyby-hue), 38%, 15%) 82%,
    #03050b 100%
  );
  box-shadow:
    inset calc(var(--flyby-size) * -.12) calc(var(--flyby-size) * -.04) calc(var(--flyby-size) * .18) rgba(0, 1, 8, .62),
    0 0 calc(var(--flyby-size) * .035) hsla(var(--flyby-hue), 74%, 68%, .34);
}

.planet-flyby--ocean .planet-flyby__surface {
  background:
    radial-gradient(ellipse 24% 14% at 34% 52%, rgba(76, 123, 72, .74), transparent 72%),
    radial-gradient(ellipse 28% 16% at 63% 35%, rgba(97, 139, 79, .64), transparent 74%),
    radial-gradient(circle at var(--flyby-light-x) var(--flyby-light-y), #78bfc8, #286986 48%, #102a4b 78%, #02050c 100%);
}

.planet-flyby--gas .planet-flyby__surface {
  background:
    repeating-linear-gradient(174deg, hsla(var(--flyby-hue), 42%, 68%, .24) 0 5%, hsla(var(--flyby-hue), 34%, 31%, .3) 7% 12%, transparent 14% 19%),
    radial-gradient(circle at var(--flyby-light-x) var(--flyby-light-y), hsl(var(--flyby-hue), 42%, 72%), hsl(var(--flyby-hue), 44%, 38%) 58%, #08070b 100%);
}

.planet-flyby__surface::after {
  position: absolute;
  inset: -3%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle at var(--flyby-light-x) var(--flyby-light-y), transparent 0 34%, rgba(2, 4, 12, .12) 52%, rgba(1, 2, 8, .78) 88%, #010208 100%);
}

.planet-flyby__weather {
  position: absolute;
  z-index: 1;
  inset: -5%;
  display: block;
  opacity: .26;
  border-radius: 50%;
  background: repeating-linear-gradient(171deg, transparent 0 8%, rgba(239, 240, 220, .38) 10% 12%, transparent 14% 23%);
  filter: blur(1.5px);
  animation: weather-drift 22s ease-in-out infinite alternate;
}

.pulsar-field {
  z-index: 2;
}

.pulsar {
  position: absolute;
  top: 0;
  left: var(--pulsar-x);
  width: var(--pulsar-size);
  aspect-ratio: 1;
  animation: pulsar-fall var(--pulsar-speed) linear var(--pulsar-delay) infinite;
  will-change: translate, opacity;
}

.pulsar__core {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 50%;
  background: #f4fcff;
  box-shadow:
    0 0 calc(var(--pulsar-size) * .55) rgba(167, 226, 255, .94),
    0 0 calc(var(--pulsar-size) * 1.8) rgba(101, 174, 255, .45);
  animation: pulsar-pulse 4.8s ease-in-out infinite;
}

.pulsar__beam {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 78vw;
  height: clamp(110px, 24vw, 290px);
  translate: -50% -50%;
  transform-origin: center;
  opacity: .42;
  background:
    radial-gradient(ellipse 23% 24% at 19% 42%, rgba(104, 180, 245, .12), transparent 74%),
    radial-gradient(ellipse 31% 18% at 31% 58%, rgba(138, 207, 255, .14), transparent 76%),
    radial-gradient(ellipse 18% 12% at 43% 47%, rgba(203, 238, 255, .2), transparent 72%),
    radial-gradient(ellipse 18% 12% at 57% 53%, rgba(203, 238, 255, .2), transparent 72%),
    radial-gradient(ellipse 31% 18% at 69% 42%, rgba(138, 207, 255, .14), transparent 76%),
    radial-gradient(ellipse 23% 24% at 81% 58%, rgba(104, 180, 245, .12), transparent 74%);
  filter: blur(18px) saturate(.82);
  animation: pulsar-sweep 48s linear infinite;
}

.cosmic-dust-field {
  z-index: 11;
}

.cosmic-dust {
  position: absolute;
  top: -4vh;
  left: var(--dust-x);
  width: var(--dust-size);
  aspect-ratio: 1;
  opacity: 0;
  border-radius: 50%;
  background: rgba(225, 214, 190, .72);
  box-shadow: 0 0 2px rgba(186, 203, 206, .36);
  animation: dust-rush var(--dust-speed) linear var(--dust-delay) infinite;
  will-change: translate, scale, opacity;
}

.warp-overlay {
  position: absolute;
  z-index: 11;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 54%, rgba(126, 197, 255, .1), rgba(12, 35, 75, .12) 34%, transparent 68%);
  transition: opacity 1.1s ease;
}

.scene--warp .warp-overlay {
  opacity: 1;
}

.warp-streak {
  position: absolute;
  top: 52%;
  left: 50%;
  width: var(--warp-length);
  height: var(--warp-size);
  opacity: 0;
  transform: rotate(var(--warp-angle)) translateX(8vw) scaleX(.12);
  transform-origin: left center;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, hsla(var(--warp-hue), 82%, 86%, .84));
  filter: drop-shadow(0 0 3px hsla(var(--warp-hue), 84%, 72%, .5));
}

.exhaust-nebula-glow {
  position: fixed;
  z-index: 9;
  top: calc(var(--rocket-y) + 42px);
  left: 50%;
  width: 190px;
  height: 210px;
  pointer-events: none;
  opacity: 0;
  translate: -50% 0;
  background:
    radial-gradient(ellipse at 50% 2%, rgba(255, 237, 173, .34), rgba(255, 127, 61, .18) 18%, transparent 56%),
    radial-gradient(ellipse at 50% 34%, rgb(var(--nebula-accent-color, 240 170 90) / .14), transparent 64%),
    radial-gradient(ellipse at 34% 62%, rgb(var(--nebula-light-color, 40 130 160) / .11), transparent 68%);
  filter: blur(17px) saturate(1.18);
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse, #000 0 18%, rgba(0, 0, 0, .66) 42%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse, #000 0 18%, rgba(0, 0, 0, .66) 42%, transparent 76%);
  transition: opacity 9s ease-in-out;
  animation: exhaust-haze-pulse 1.8s ease-in-out infinite;
}

.scene--nebula-visible .exhaust-nebula-glow {
  opacity: .68;
}

.scene--warp .warp-streak {
  animation: warp-streak .82s linear var(--warp-delay) infinite;
}

.scene--warp .rocket-wrap {
  filter: drop-shadow(7px 11px 9px rgba(1, 3, 10, .62)) brightness(1.12) saturate(1.12);
}

.motion-field--far {
  z-index: 1;
  opacity: .4;
  filter: blur(1.25px);
}

.motion-field--middle {
  z-index: 5;
  opacity: .76;
  filter: blur(.35px);
}

.motion-field--near {
  z-index: 11;
}

.comet {
  position: absolute;
  top: var(--comet-start-y);
  left: var(--comet-start-x);
  width: var(--comet-length);
  height: calc(var(--comet-size) * .7);
  opacity: 0;
  transform: rotate(var(--comet-angle));
  transform-origin: right center;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    hsla(var(--comet-hue), 72%, 76%, .05) 18%,
    hsla(var(--comet-hue), 78%, 82%, .24) 72%,
    hsla(var(--comet-hue), 38%, 94%, .72)
  );
  filter: drop-shadow(0 0 5px hsla(var(--comet-hue), 76%, 72%, .3));
  animation: comet-drift var(--comet-speed) linear forwards;
  will-change: transform, opacity;
}

.comet::after {
  position: absolute;
  top: 50%;
  right: calc(var(--comet-size) * -.35);
  width: var(--comet-size);
  aspect-ratio: 1;
  content: "";
  translate: 0 -50%;
  border-radius: 48% 52% 44% 56%;
  background: #eafcff;
  box-shadow:
    0 0 calc(var(--comet-size) * .8) hsla(var(--comet-hue), 82%, 84%, .92),
    0 0 calc(var(--comet-size) * 2.4) hsla(var(--comet-hue), 78%, 68%, .28);
}

.meteor {
  position: absolute;
  top: var(--meteor-start-y);
  left: var(--meteor-start-x);
  width: var(--meteor-length);
  height: max(1px, calc(var(--meteor-size) * .18));
  opacity: 0;
  transform: rotate(var(--meteor-angle));
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, hsla(var(--meteor-hue), 12%, 58%, .08) 52%, hsla(var(--meteor-hue), 16%, 76%, .7));
  filter: drop-shadow(0 0 2px hsla(var(--meteor-hue), 18%, 72%, .32));
  animation: meteor-shoot var(--meteor-speed) cubic-bezier(.16, .74, .35, 1) forwards;
  will-change: transform, opacity;
}

.meteor::after {
  position: absolute;
  top: 50%;
  right: calc(var(--meteor-size) * -.3);
  width: var(--meteor-size);
  aspect-ratio: 1;
  content: "";
  translate: 0 -50%;
  border-radius: 50%;
  background: #d5d3c9;
  box-shadow:
    0 0 calc(var(--meteor-size) * .45) hsla(var(--meteor-hue), 18%, 72%, .45);
}

.rocket-wrap {
  position: fixed;
  z-index: 10;
  top: var(--rocket-y);
  left: 50%;
  width: 132px;
  height: 300px;
  transform: translate(-50%, -48%) scale(var(--rocket-scale));
  animation: thrust-bob .56s steps(2, end) infinite;
  filter: drop-shadow(7px 11px 9px rgba(1, 3, 10, .62));
}

.rocket {
  position: absolute;
  inset: 0;
  --nebula-transfer: 0;
  animation: engine-vibration .24s steps(1, end) infinite;
  transition: --nebula-transfer 9s ease-in-out;
  transform-origin: 50% 65%;
  will-change: transform;
}

.scene--nebula-visible .rocket {
  --nebula-transfer: .16;
}

.rocket-shadow {
  position: absolute;
  z-index: -1;
  top: 48px;
  left: 50%;
  width: 102px;
  height: 204px;
  transform: translateX(-50%);
  background: rgba(2, 4, 11, .38);
  filter: blur(22px);
}

.nose {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 33px;
  width: 66px;
  height: 66px;
  background:
    linear-gradient(90deg, rgba(8, 10, 17, .48), transparent 29% 62%, rgba(8, 8, 14, .42)),
    linear-gradient(180deg, #1c1820 0%, #262027 54%, #30272d 100%);
  clip-path: polygon(50% 0, 63% 7%, 76% 22%, 89% 48%, 100% 100%, 0 100%, 11% 48%, 24% 22%, 37% 7%);
  filter: drop-shadow(0 -1px 0 #171722) drop-shadow(3px 1px 0 #171722) drop-shadow(-3px 1px 0 #171722);
}

.nose::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(132deg, rgb(var(--nebula-light-color, 40 130 160) / var(--nebula-transfer)), transparent 64%),
    radial-gradient(circle at 50% 12%, hsla(202, 96%, 72%, var(--pulsar-light-intensity, 0)), transparent 64%),
    radial-gradient(circle at var(--stellar-rim-x, 50%) var(--stellar-rim-y, 0%), hsla(var(--stellar-rim-hue, 48), 96%, 64%, var(--stellar-rim-intensity, 0)), transparent 42%),
    radial-gradient(circle at var(--stellar-light-x, 50%) var(--stellar-light-y, 0%), hsla(var(--stellar-light-hue, 48), 96%, 68%, var(--stellar-light-intensity, 0)), transparent 68%);
  mix-blend-mode: screen;
}

.body {
  position: absolute;
  z-index: 2;
  top: 69px;
  left: 25px;
  width: 82px;
  height: 137px;
  border: 3px solid #222431;
  border-top: 0;
  background:
    linear-gradient(90deg, rgba(10, 13, 21, .54), transparent 25% 64%, rgba(8, 9, 16, .48)),
    linear-gradient(180deg, #353b43 0 32%, #565b5b 58%, #897b69 80%, #c1855d 100%);
  clip-path: polygon(10% 0, 90% 0, 100% 12%, 100% 64%, 91% 89%, 78% 100%, 22% 100%, 9% 89%, 0 64%, 0 12%);
  box-shadow:
    inset 5px 0 rgba(230, 225, 202, .05),
    inset -8px 0 rgba(9, 10, 17, .22);
}

.body-highlight {
  position: absolute;
  z-index: 0;
  bottom: -2px;
  left: 10px;
  width: 56px;
  height: 42px;
  background: radial-gradient(ellipse at 50% 110%, rgba(255, 170, 91, .28), rgba(255, 133, 67, .08) 48%, transparent 72%);
}

.stellar-sheen {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(128deg, rgb(var(--nebula-light-color, 40 130 160) / var(--nebula-transfer)), transparent 68%),
    radial-gradient(circle at 50% 18%, hsla(202, 96%, 70%, var(--pulsar-light-intensity, 0)), transparent 68%),
    radial-gradient(circle at var(--stellar-rim-x, 50%) var(--stellar-rim-y, 0%), hsla(var(--stellar-rim-hue, 48), 98%, 62%, var(--stellar-rim-intensity, 0)), transparent 38%),
    radial-gradient(circle at var(--stellar-light-x, 50%) var(--stellar-light-y, 0%), hsla(var(--stellar-light-hue, 48), 96%, 68%, var(--stellar-light-intensity, 0)) 0, hsla(var(--stellar-light-hue, 48), 88%, 58%, var(--stellar-light-soft-intensity, 0)) 40%, transparent 74%);
  mix-blend-mode: screen;
}

.body::before {
  position: absolute;
  z-index: 1;
  inset: 7px 8px 10px;
  content: "";
  opacity: .48;
  background:
    radial-gradient(circle at 7px 9px, rgba(209, 201, 181, .58) 0 1px, rgba(25, 26, 34, .72) 1.4px 2px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 7px) 9px, rgba(209, 201, 181, .42) 0 1px, rgba(25, 26, 34, .72) 1.4px 2px, transparent 2.4px),
    radial-gradient(circle at 7px calc(100% - 8px), rgba(236, 155, 98, .4) 0 1px, rgba(39, 29, 33, .7) 1.4px 2px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 8px), rgba(236, 155, 98, .32) 0 1px, rgba(39, 29, 33, .7) 1.4px 2px, transparent 2.4px),
    linear-gradient(90deg, transparent 49%, rgba(215, 209, 188, .1) 50%, rgba(21, 23, 31, .3) 51%, transparent 52%);
}

.body::after {
  position: absolute;
  z-index: 0;
  top: 72%;
  left: 5%;
  width: 90%;
  height: 9px;
  content: "";
  background:
    linear-gradient(90deg, rgba(18, 18, 27, .55), transparent 22% 75%, rgba(18, 18, 27, .48)),
    #713b38;
  box-shadow: 0 2px rgba(24, 22, 29, .42), 0 5px 8px rgba(255, 120, 60, .05);
}

.window {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 23px;
  width: 31px;
  aspect-ratio: 1;
  border: 5px solid #432b31;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 112%, rgba(255, 146, 72, .28), transparent 48%),
    #101722;
  box-shadow:
    0 2px 0 #171923,
    inset 0 -3px 4px rgba(255, 124, 61, .16),
    inset 2px 2px 4px rgba(0, 0, 0, .75);
}

.window span {
  position: absolute;
  left: 7px;
  bottom: 5px;
  width: 10px;
  height: 2px;
  border-radius: 50%;
  background: rgba(238, 143, 86, .2);
}

.window::after {
  position: absolute;
  top: 5px;
  left: 6px;
  width: 7px;
  height: 3px;
  content: "";
  rotate: -28deg;
  border-radius: 50%;
  background: rgba(190, 222, 224, .34);
  animation: window-glint 4.8s ease-in-out infinite;
}

.panel-lines {
  position: absolute;
  right: 15px;
  bottom: 25px;
  width: 12px;
  height: 13px;
  opacity: .28;
  border-top: 1px solid rgba(49, 42, 49, .7);
  border-bottom: 1px solid rgba(49, 42, 49, .7);
}

.telemetry-lights {
  position: absolute;
  z-index: 3;
  bottom: 27px;
  left: 16px;
  display: flex;
  gap: 3px;
}

.telemetry-lights i {
  width: 3px;
  height: 3px;
  border: 1px solid rgba(26, 25, 33, .76);
  background: #65c985;
  box-shadow: 0 0 3px rgba(87, 224, 135, .58);
  animation: telemetry-pulse 2.4s steps(2, end) infinite;
}

.telemetry-lights i:nth-child(2) {
  background: #e5b754;
  box-shadow: 0 0 3px rgba(245, 190, 75, .55);
  animation-delay: -.8s;
}

.telemetry-lights i:nth-child(3) {
  background: #68a9cf;
  box-shadow: 0 0 3px rgba(92, 181, 236, .56);
  animation-delay: -1.6s;
}

.fin {
  position: absolute;
  z-index: 1;
  top: 130px;
  width: 62px;
  height: 88px;
  background:
    linear-gradient(135deg, rgb(var(--nebula-light-color, 40 130 160) / var(--nebula-transfer)), transparent 66%),
    radial-gradient(circle at 50% 18%, hsla(202, 96%, 70%, var(--pulsar-light-intensity, 0)), transparent 66%),
    radial-gradient(circle at var(--stellar-rim-x, 50%) var(--stellar-rim-y, 0%), hsla(var(--stellar-rim-hue, 48), 98%, 62%, var(--stellar-rim-intensity, 0)), transparent 40%),
    radial-gradient(circle at var(--stellar-light-x, 50%) var(--stellar-light-y, 0%), hsla(var(--stellar-light-hue, 48), 96%, 68%, var(--stellar-light-intensity, 0)), transparent 66%),
    linear-gradient(90deg, rgba(12, 12, 20, .5), transparent 54%),
    linear-gradient(180deg, #3a2831, #6b3838 54%, #ad5a3e 100%);
  border: 3px solid #222330;
}

.fin::before {
  position: absolute;
  right: 10px;
  bottom: 9px;
  width: 2px;
  height: 39px;
  content: "";
  background: rgba(255, 157, 91, .24);
}

.fin::after {
  position: absolute;
  right: 8px;
  bottom: 12px;
  width: 5px;
  height: 5px;
  content: "";
  border: 1px solid rgba(31, 27, 34, .72);
  border-radius: 50%;
  background: rgba(255, 154, 91, .34);
  box-shadow: 0 -18px 0 -1px rgba(46, 34, 40, .72);
}

.fin--left {
  left: -10px;
  clip-path: polygon(100% 0, 100% 100%, 2% 100%, 22% 78%, 47% 34%);
}

.fin--right {
  right: -10px;
  transform: scaleX(-1);
  clip-path: polygon(100% 0, 100% 100%, 2% 100%, 22% 78%, 47% 34%);
}

.nav-light {
  position: absolute;
  z-index: 5;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(13, 14, 22, .82);
  border-radius: 50%;
}

.nav-light--port {
  top: 181px;
  left: 2px;
  background: #e44349;
  box-shadow: 0 0 7px #e44349;
  animation: navigation-blink 1.6s steps(2, end) infinite;
}

.nav-light--starboard {
  top: 181px;
  right: 2px;
  background: #55d67a;
  box-shadow: 0 0 7px #55d67a;
  animation: navigation-blink 1.6s steps(2, end) -.8s infinite;
}

.nav-light--strobe {
  top: 70px;
  left: 64px;
  width: 4px;
  height: 4px;
  background: #efffff;
  box-shadow: 0 0 8px #c9f3ff;
  animation: strobe-flash 3.8s steps(1, end) infinite;
}

.rcs-port {
  position: absolute;
  z-index: 4;
  top: 112px;
  width: 8px;
  height: 5px;
  border: 1px solid #222330;
  background: #4d4c51;
}

.rcs-port::after {
  position: absolute;
  top: 1px;
  width: 10px;
  height: 2px;
  content: "";
  opacity: 0;
  background: linear-gradient(90deg, rgba(174, 231, 255, .9), transparent);
  filter: drop-shadow(0 0 3px rgba(120, 201, 255, .7));
  animation: rcs-burst 11s steps(2, end) infinite;
}

.rcs-port--left { left: 20px; }
.rcs-port--left::after { right: 7px; transform: scaleX(-1); }
.rcs-port--right { right: 20px; }
.rcs-port--right::after { left: 7px; animation-delay: -5.5s; }

.engine {
  position: absolute;
  z-index: 3;
  top: 202px;
  left: 43px;
  width: 46px;
  height: 18px;
  border: 3px solid #222330;
  background:
    linear-gradient(135deg, rgb(var(--nebula-accent-color, 240 170 90) / var(--nebula-transfer)), transparent 66%),
    radial-gradient(circle at 50% 12%, hsla(202, 96%, 74%, var(--pulsar-light-intensity, 0)), transparent 66%),
    radial-gradient(circle at var(--stellar-rim-x, 50%) var(--stellar-rim-y, 0%), hsla(var(--stellar-rim-hue, 48), 98%, 64%, var(--stellar-rim-intensity, 0)), transparent 42%),
    radial-gradient(circle at var(--stellar-light-x, 50%) var(--stellar-light-y, 0%), hsla(var(--stellar-light-hue, 48), 96%, 70%, var(--stellar-light-intensity, 0)), transparent 68%),
    linear-gradient(90deg, #292832, #7d5a4a 27% 73%, #292832);
  box-shadow: 0 5px 10px rgba(255, 126, 59, .18);
}

.engine::before {
  position: absolute;
  inset: 3px 6px;
  content: "";
  opacity: .64;
  background: repeating-linear-gradient(90deg, rgba(29, 28, 35, .82) 0 2px, transparent 2px 7px);
}

.engine::after {
  position: absolute;
  right: 3px;
  bottom: 2px;
  left: 3px;
  height: 2px;
  content: "";
  background: rgba(255, 196, 117, .3);
  box-shadow: 0 2px 5px rgba(255, 119, 53, .44);
}

.flame {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: top;
  clip-path: polygon(33% 0, 67% 0, 72% 24%, 86% 56%, 100% 100%, 0 100%, 14% 56%, 28% 24%);
}

.flame--outer {
  z-index: 0;
  top: 215px;
  width: 48px;
  height: 81px;
  background: linear-gradient(180deg, #ff9b4a, rgba(194, 66, 62, .3));
  filter: drop-shadow(0 10px 12px rgba(255, 112, 54, .42));
  animation: flame-outer .32s steps(2, end) infinite;
}

.flame--middle {
  z-index: 1;
  top: 215px;
  width: 30px;
  height: 61px;
  background: linear-gradient(180deg, #ffd078, rgba(255, 129, 56, .38));
  animation: flame-middle .26s steps(2, end) infinite reverse;
}

.flame--core {
  z-index: 2;
  top: 215px;
  width: 15px;
  height: 39px;
  background: linear-gradient(180deg, #fff7cf, rgba(255, 225, 145, .5));
  animation: flame-core .18s steps(2, end) infinite;
}

.engine-sparks {
  position: absolute;
  z-index: 2;
  top: 229px;
  left: 65px;
  width: 2px;
  height: 2px;
  background: #fff3b2;
  box-shadow:
    -13px 13px #ffb05d,
    17px 21px #ff8245,
    -7px 35px #ffd477,
    10px 48px rgba(255, 109, 57, .72);
  animation: engine-sparks 1.1s steps(4, end) infinite;
}

.vignette {
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,8,25,.7), transparent 18%, transparent 82%, rgba(3,8,25,.7)),
    linear-gradient(180deg, rgba(3,8,25,.5), transparent 25%, transparent 76%, rgba(3,8,25,.48));
}

.title-card {
  position: absolute;
  z-index: 15;
  top: clamp(24px, 6vh, 64px);
  left: clamp(20px, 6vw, 80px);
  text-transform: uppercase;
  text-shadow: 3px 3px 0 rgba(13, 28, 52, .7);
}

.title-card .eyebrow {
  margin: 0 0 9px;
  color: #9fc7c6;
  font-size: clamp(9px, 1vw, 12px);
  letter-spacing: .28em;
}

.title-card h1 {
  margin: 0;
  color: #fff1b8;
  font-size: clamp(30px, 5vw, 68px);
  line-height: .88;
  letter-spacing: .08em;
}

.title-card > p:last-child {
  margin: 11px 0 0 2px;
  color: rgba(222, 239, 218, .7);
  font-size: clamp(8px, .9vw, 11px);
  letter-spacing: .22em;
}

.status {
  position: absolute;
  z-index: 15;
  right: clamp(20px, 5vw, 70px);
  bottom: clamp(20px, 5vh, 48px);
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(230, 242, 220, .72);
  font-size: 10px;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.status-dot {
  width: 6px;
  height: 6px;
  background: #ffbd58;
  box-shadow: 0 0 8px #ffbd58;
  animation: blink 1.4s steps(2, end) infinite;
}

.status-rule {
  width: clamp(30px, 6vw, 75px);
  height: 1px;
  background: rgba(211, 230, 213, .34);
}

.event-hud {
  position: absolute;
  z-index: 15;
  top: clamp(28px, 6vh, 66px);
  right: clamp(20px, 5vw, 70px);
  display: grid;
  width: min(270px, calc(100vw - 40px));
  padding: 12px 14px;
  opacity: 0;
  transform: translateX(22px);
  border-right: 2px solid rgba(122, 211, 218, .62);
  background: linear-gradient(90deg, transparent, rgba(5, 17, 34, .72));
  text-align: right;
  text-shadow: 2px 2px 0 rgba(3, 8, 19, .72);
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}

.event-hud--visible {
  opacity: 1;
  transform: translateX(0);
}

.event-hud__code {
  color: rgba(131, 205, 207, .7);
  font-size: 8px;
  letter-spacing: .19em;
}

.event-hud__title {
  margin-top: 4px;
  color: #fff0b5;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.event-hud__detail {
  margin-top: 3px;
  color: rgba(219, 235, 221, .62);
  font-size: 9px;
  letter-spacing: .08em;
}

@keyframes starfield-fall {
  from { transform: translateY(0); }
  to { transform: translateY(100vh); }
}

@keyframes nebula-field-fall {
  from { transform: translateY(0); }
  to { transform: translateY(100vh); }
}

@keyframes planet-fall {
  0%, 28% { translate: 0 -28vh; opacity: 0; }
  30% { opacity: 1; }
  60% { opacity: 1; }
  63%, 100% { translate: 0 128vh; opacity: 0; }
}

@keyframes planet-flyby {
  0% { translate: -50% calc(var(--flyby-size) * -1.15); opacity: 0; }
  9% { opacity: .92; }
  88% { opacity: .92; }
  100% { translate: calc(-50% + var(--flyby-drift)) 128vh; opacity: 0; }
}

@keyframes weather-drift {
  from { transform: translateX(-5%) rotate(-2deg); }
  to { transform: translateX(5%) rotate(2deg); }
}

@keyframes moon-orbit {
  0%, 100% { translate: calc(-50% + var(--moon-x)) -50%; z-index: 0; }
  12.5% { translate: calc(-50% + var(--moon-x-diagonal)) calc(-50% - var(--moon-y-diagonal)); z-index: 0; }
  25% { translate: -50% calc(-50% - var(--moon-y)); z-index: 0; }
  37.5% { translate: calc(-50% - var(--moon-x-diagonal)) calc(-50% - var(--moon-y-diagonal)); z-index: 0; }
  49.9% { translate: calc(-50% - var(--moon-x)) -50%; z-index: 0; }
  50% { translate: calc(-50% - var(--moon-x)) -50%; z-index: 4; }
  62.5% { translate: calc(-50% - var(--moon-x-diagonal)) calc(-50% + var(--moon-y-diagonal)); z-index: 4; }
  75% { translate: -50% calc(-50% + var(--moon-y)); z-index: 4; }
  87.5% { translate: calc(-50% + var(--moon-x-diagonal)) calc(-50% + var(--moon-y-diagonal)); z-index: 4; }
  99.9% { translate: calc(-50% + var(--moon-x)) -50%; z-index: 4; }
}

@keyframes eclipse-cross {
  0%, 18% { transform: translateX(0); opacity: 0; }
  28% { opacity: .72; }
  72% { opacity: .72; }
  82%, 100% { transform: translateX(calc(var(--planet-size) * 1.45)); opacity: 0; }
}

@keyframes solar-flare {
  0%, 22%, 100% { scale: .35 .18; translate: -10% 18%; rotate: -8deg; opacity: 0; }
  36% { scale: .72 .58; translate: -3% 5%; rotate: 2deg; opacity: .42; }
  54% { scale: 1 1; translate: 5% -5%; rotate: 8deg; opacity: .58; }
  74% { scale: .9 1.12; translate: 14% -16%; rotate: 14deg; opacity: .2; }
  88% { scale: .68 1.2; translate: 23% -25%; rotate: 18deg; opacity: 0; }
}

@keyframes black-hole-fall {
  0%, 40% { translate: 0 -28vh; opacity: 0; }
  42% { opacity: .72; }
  59% { opacity: .72; }
  61%, 100% { translate: 0 128vh; opacity: 0; }
}

@keyframes lensing-shimmer {
  0%, 100% { scale: .96; opacity: .56; rotate: -2deg; }
  50% { scale: 1.04; opacity: .82; rotate: 2deg; }
}

@keyframes pulsar-fall {
  0%, 46% { translate: 0 -28vh; opacity: 0; }
  48% { opacity: .76; }
  60% { opacity: .76; }
  62%, 100% { translate: 0 128vh; opacity: 0; }
}

@keyframes pulsar-sweep {
  to { transform: rotate(1turn); }
}

@keyframes pulsar-pulse {
  50% { filter: brightness(1.22); scale: 1.04; }
}

@keyframes dust-rush {
  0% { translate: 0 -5vh; scale: .18; opacity: 0; }
  15% { opacity: .08; }
  72% { opacity: var(--dust-opacity); }
  100% { translate: var(--dust-drift) 112vh; scale: 1.8; opacity: 0; }
}

@keyframes warp-streak {
  0% { transform: rotate(var(--warp-angle)) translateX(7vw) scaleX(.08); opacity: 0; }
  18% { opacity: .82; }
  100% { transform: rotate(var(--warp-angle)) translateX(68vw) scaleX(1.2); opacity: 0; }
}

@keyframes meteor-shoot {
  0% { transform: translate(0, 0) rotate(var(--meteor-angle)); opacity: 0; }
  8% { opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translate(var(--meteor-travel-x), var(--meteor-travel-y)) rotate(var(--meteor-angle)); opacity: 0; }
}

@keyframes comet-drift {
  0% { transform: translate(0, 0) rotate(var(--comet-angle)); opacity: 0; }
  8% { opacity: .78; }
  88% { opacity: .72; }
  100% { transform: translate(var(--comet-travel-x), var(--comet-travel-y)) rotate(var(--comet-angle)); opacity: 0; }
}

@keyframes thrust-bob {
  0%, 100% { margin-top: -1px; }
  50% { margin-top: 1px; }
}

@keyframes engine-vibration {
  0% { transform: translate(-1px, -2px) rotate(-.18deg); }
  25% { transform: translate(1px, 0) rotate(.14deg); }
  50% { transform: translate(-1px, 2px) rotate(-.1deg); }
  75% { transform: translate(1px, -1px) rotate(.18deg); }
  100% { transform: translate(0, -2px) rotate(-.12deg); }
}

@keyframes flame-outer {
  0%, 100% { scale: 1 1; }
  50% { scale: .88 1.12; }
}

@keyframes flame-middle {
  0%, 100% { scale: 1 .9; margin-left: -3px; }
  50% { scale: .82 1.08; margin-left: 3px; }
}

@keyframes flame-core {
  0%, 100% { scale: 1 1; }
  50% { scale: .8 .72; }
}

@keyframes engine-sparks {
  0% { translate: 0 -5px; opacity: 0; scale: .7; }
  18% { opacity: .85; }
  100% { translate: 2px 28px; opacity: 0; scale: .25; }
}

@keyframes exhaust-haze-pulse {
  0%, 100% { scale: .94 1; filter: blur(17px) saturate(1.12); }
  50% { scale: 1.08 1.06; filter: blur(20px) saturate(1.24); }
}

@keyframes window-glint {
  0%, 72%, 100% { opacity: .22; }
  78% { opacity: .82; }
  84% { opacity: .3; }
}

@keyframes telemetry-pulse {
  50% { opacity: .28; }
}

@keyframes navigation-blink {
  0%, 72% { opacity: .32; }
  74%, 84% { opacity: 1; }
  86%, 100% { opacity: .32; }
}

@keyframes strobe-flash {
  0%, 4% { opacity: 1; scale: 1.35; }
  5%, 9% { opacity: .15; scale: 1; }
  10%, 13% { opacity: 1; scale: 1.2; }
  14%, 100% { opacity: .16; scale: 1; }
}

@keyframes rcs-burst {
  0%, 88%, 100% { opacity: 0; scale: .3 1; }
  90%, 94% { opacity: .82; scale: 1 1; }
  96% { opacity: .24; scale: .62 1; }
}

@keyframes blink {
  50% { opacity: .25; }
}

@media (max-width: 640px) {
  .rocket-wrap {
    transform: translate(-50%, -43%) scale(.54);
  }

  .title-card > p:last-child {
    display: none;
  }

  .status {
    left: 20px;
    right: auto;
  }

  .event-hud {
    top: 92px;
    right: 18px;
    width: min(238px, calc(100vw - 36px));
  }

  .scene--nebula-visible .nebula-depth-field--middle {
    opacity: .14;
  }

  .scene--nebula-visible .nebula-depth-field--near {
    opacity: .055;
  }

  .nebula-depth-field--middle {
    filter: blur(4px) saturate(1.12);
  }

  .nebula-depth-field--near {
    filter: blur(9px) saturate(1.04);
  }

  .exhaust-nebula-glow {
    top: calc(var(--rocket-y) + 34px);
    width: 150px;
    height: 174px;
  }

  .black-hole::after {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}