/* Standalone Austral star field.
   Required markup: .starfield with three .starfield__layer elements and
   one .starfield__crux containing five empty i elements. */

.starfield {
  --starfield-color: #00077c;
  --starfield-far: 0.1;
  --starfield-mid: 0.15;
  --starfield-near: 0.22;
  --starfield-crux: 0.5;
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--starfield-color);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .starfield {
    --starfield-color: #fff;
    --starfield-far: 0.16;
    --starfield-mid: 0.22;
    --starfield-near: 0.3;
    --starfield-crux: 0.72;
  }
}

:root[data-theme="dark"] .starfield {
  --starfield-color: #fff;
  --starfield-far: 0.16;
  --starfield-mid: 0.22;
  --starfield-near: 0.3;
  --starfield-crux: 0.72;
}

.starfield__layer {
  --star-size: 0.7px;
  position: absolute;
  inset: -48px;
  color: inherit;
  background-image:
    radial-gradient(circle at 4% 9%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.45px)),
    radial-gradient(circle at 13% 27%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.4px)),
    radial-gradient(circle at 21% 6%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.35px)),
    radial-gradient(circle at 28% 43%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.45px)),
    radial-gradient(circle at 36% 17%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.4px)),
    radial-gradient(circle at 43% 73%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.35px)),
    radial-gradient(circle at 51% 31%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.45px)),
    radial-gradient(circle at 58% 89%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.4px)),
    radial-gradient(circle at 66% 12%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.35px)),
    radial-gradient(circle at 72% 56%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.45px)),
    radial-gradient(circle at 79% 35%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.4px)),
    radial-gradient(circle at 86% 81%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.35px)),
    radial-gradient(circle at 94% 18%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.45px)),
    radial-gradient(circle at 8% 67%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.35px)),
    radial-gradient(circle at 17% 92%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.4px)),
    radial-gradient(circle at 32% 84%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.45px)),
    radial-gradient(circle at 47% 5%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.35px)),
    radial-gradient(circle at 61% 48%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.4px)),
    radial-gradient(circle at 76% 96%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.45px)),
    radial-gradient(circle at 91% 62%, currentColor 0 var(--star-size), transparent calc(var(--star-size) + 0.35px));
  background-repeat: repeat;
}

.starfield__layer--far {
  --star-size: 0.45px;
  opacity: var(--starfield-far);
  background-size: 330px 290px;
  background-position: 17px 29px;
}

.starfield__layer--mid {
  --star-size: 0.7px;
  opacity: var(--starfield-mid);
  background-size: 510px 430px;
  background-position: -83px 51px;
}

.starfield__layer--near {
  --star-size: 1px;
  opacity: var(--starfield-near);
  background-size: 760px 640px;
  background-position: 113px -97px;
}

.starfield__crux {
  position: absolute;
  top: clamp(120px, 16vh, 180px);
  right: clamp(28px, 8vw, 130px);
  width: clamp(150px, 18vw, 220px);
  aspect-ratio: 0.84;
  opacity: var(--starfield-crux);
  transform: rotate(-9deg);
  transform-origin: center;
}

.starfield__crux i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 2px currentColor, 0 0 5px currentColor;
}

.starfield__crux i:nth-child(1) { top: 3%; left: 50%; transform: scale(1.3); }
.starfield__crux i:nth-child(2) { top: 48%; left: 5%; transform: scale(1.45); }
.starfield__crux i:nth-child(3) { top: 43%; right: 3%; transform: scale(1.05); }
.starfield__crux i:nth-child(4) { bottom: 2%; left: 52%; transform: scale(1.65); }
.starfield__crux i:nth-child(5) { top: 64%; left: 31%; transform: scale(0.85); opacity: 0.72; }

@media (max-width: 720px) {
  .starfield__crux {
    top: 145px;
    right: 18px;
    width: 130px;
  }
}