:root {
  --rocket-x: 0px;
  --rocket-y: 0px;
  --planet-x: 0px;
  --planet-y: 0px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  overflow: hidden;
  background: #17144a;
  color: #fff9ed;
  font-family: ui-rounded, "Avenir Next", Avenir, "Segoe UI", sans-serif;
}

:focus-visible {
  outline: 3px solid #fff2a5;
  outline-offset: 4px;
}

.space {
  isolation: isolate;
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  place-items: center;
  background: radial-gradient(
    circle at 50% 46%,
    #35328b 0,
    #242166 32%,
    #17144a 70%
  );
}

.brand,
.tagline,
.motion-note {
  position: absolute;
  z-index: 5;
  margin: 0;
}

.brand {
  top: clamp(1.5rem, 4vw, 3rem);
  left: clamp(1.5rem, 5vw, 4.5rem);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 750;
  letter-spacing: 0.025em;
}

.tagline {
  bottom: clamp(1.7rem, 5vw, 4rem);
  font-size: clamp(0.82rem, 1.2vw, 1rem);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.motion-note {
  right: clamp(1.5rem, 5vw, 4.5rem);
  bottom: clamp(1.7rem, 5vw, 4rem);
  color: #c7c8f7;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  opacity: 0.75;
  text-transform: uppercase;
}

.stars {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background-repeat: repeat;
}
.stars-far {
  opacity: 0.7;
  background-image: radial-gradient(#fffdf0 1px, transparent 1.5px);
  background-size: 49px 49px;
  animation: drift 45s linear infinite;
}
.stars-near {
  opacity: 0.9;
  background-image:
    radial-gradient(#fff5c7 1.5px, transparent 2px),
    radial-gradient(#b9e6ff 1px, transparent 1.5px);
  background-position:
    12px 6px,
    31px 29px;
  background-size:
    97px 97px,
    83px 83px;
  animation:
    twinkle 4s ease-in-out infinite alternate,
    drift 28s linear infinite reverse;
}

.aurora {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.85;
}
.aurora-left {
  width: 65vw;
  height: 50vw;
  top: -30vw;
  left: -22vw;
  background: radial-gradient(circle, #db659b 0, #a857be 28%, transparent 67%);
}
.aurora-right {
  width: 58vw;
  height: 58vw;
  right: -29vw;
  bottom: -35vw;
  background: radial-gradient(circle, #6bc6d4 0, #566bc4 34%, transparent 67%);
}

.planet {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  transform: translate3d(var(--planet-x), var(--planet-y), 0);
}
.planet-large {
  width: clamp(11rem, 23vw, 22rem);
  aspect-ratio: 1;
  top: clamp(4rem, 12vh, 10rem);
  right: clamp(-4rem, -2vw, -1rem);
  background:
    radial-gradient(circle at 30% 27%, #ffc79b 0 6%, transparent 6.5%),
    radial-gradient(circle at 68% 44%, #c46c94 0 10%, transparent 10.5%),
    radial-gradient(circle at 42% 67%, #714779 0 13%, transparent 13.5%),
    linear-gradient(145deg, #f9aa8b, #b55f95 52%, #583a79);
  box-shadow:
    inset -35px -20px 50px #4e3674,
    0 0 60px #cb709c66;
}
.planet-glow {
  position: absolute;
  inset: -8%;
  border: 2px solid #ffc9a269;
  border-radius: inherit;
}
.planet-ring {
  position: absolute;
  width: 145%;
  height: 30%;
  top: 45%;
  left: -22%;
  border: 12px solid #ffd19d99;
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-24deg);
}
.planet-small {
  width: clamp(3.5rem, 7vw, 6rem);
  aspect-ratio: 1;
  bottom: 18%;
  left: 10%;
  background:
    radial-gradient(circle at 35% 28%, #d6eeff 0 8%, transparent 9%),
    linear-gradient(135deg, #7ac3d3, #4a579e);
  box-shadow: inset -12px -10px 20px #34417c;
}

.cloud {
  position: absolute;
  z-index: 1;
  width: clamp(15rem, 34vw, 34rem);
  height: clamp(4rem, 9vw, 8rem);
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0.8;
}
.cloud::before,
.cloud::after {
  position: absolute;
  border-radius: 50%;
  background: inherit;
  content: "";
}
.cloud::before {
  width: 48%;
  height: 130%;
  left: 17%;
  bottom: 4%;
}
.cloud::after {
  width: 34%;
  height: 95%;
  right: 14%;
  bottom: 0;
}
.cloud-one {
  bottom: -2%;
  left: -5%;
  background: linear-gradient(135deg, #aa86c7, #6678bd);
  animation: cloud-drift 16s ease-in-out infinite alternate;
}
.cloud-two {
  right: -8%;
  bottom: 8%;
  background: linear-gradient(135deg, #8fcfcf, #7284c4);
  opacity: 0.6;
  animation: cloud-drift 20s ease-in-out -6s infinite alternate-reverse;
}

.rocket-scene {
  z-index: 3;
  width: min(48vw, 25rem);
  transform: translate3d(var(--rocket-x), var(--rocket-y), 0);
  animation: rocket-float 5s ease-in-out infinite;
}
.rocket {
  display: block;
  width: 100%;
  overflow: visible;
  filter: drop-shadow(0 20px 20px #10104455);
  transform: rotate(13deg);
}
.rocket-flame {
  transform-origin: 150px 320px;
  animation: flame 260ms ease-in-out infinite alternate;
}
.flame-inner {
  animation-delay: -130ms;
}

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

@keyframes rocket-float {
  50% {
    transform: translate3d(var(--rocket-x), calc(var(--rocket-y) - 18px), 0)
      rotate(-2deg);
  }
}
@keyframes flame {
  to {
    transform: scaleY(1.18) scaleX(0.88);
    opacity: 0.8;
  }
}
@keyframes twinkle {
  to {
    opacity: 0.45;
  }
}
@keyframes drift {
  to {
    transform: translate3d(4%, 3%, 0);
  }
}
@keyframes cloud-drift {
  to {
    transform: translateX(3vw);
  }
}

@media (max-width: 600px) {
  .space {
    background: radial-gradient(
      circle at 50% 44%,
      #36348b 0,
      #242166 39%,
      #17144a 78%
    );
  }
  .rocket-scene {
    width: min(77vw, 20rem);
  }
  .planet-large {
    top: 12%;
    right: -17%;
  }
  .planet-small {
    left: 6%;
    bottom: 25%;
  }
  .cloud-two {
    bottom: 13%;
  }
  .motion-note {
    display: none;
  }
}

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