:root {
  --color-bg: #000000;

  --size-star: 20px;
  --size-blur: 10px;

  --timing-orbit-duration: 30s;
}

html {
  background-color: var(--color-bg);
}

body {
  position: fixed;
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

star-field {
  background-color: var(--color-bg);
  height: var(--space-size);
  width: var(--space-size);
}

.star {
  position: absolute;
  top: var(--position-top, 0);
  left: var(--position-left, 0);
  width: var(--size-star);
  aspect-ratio: 1;
  background-color: var(--color-random);
  border-radius: 50%;
  filter: blur(var(--size-blur));
  opacity: 0;
  transform-origin: bottom right;
}

.star.is-lit {
  animation: orbit var(--timing-orbit-duration) linear forwards;
  animation-direction: var(--animation-direction, normal);
}

@keyframes orbit {
  0% {
    transform: rotate(0deg) scale(0) translate(0, 0);
    opacity: 0;
  }

  1% {
    transform: rotate(10deg) scale(0) translate(0, 0);
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: rotate(180deg) scale(var(--random-size)) translate(var(--random-x), var(--random-y));
    opacity: 0;
  }
}