body { overflow-x: hidden; }

#starfield{
  position: fixed;
  inset: 0;
  height: 100vh;
  width: 100vw;
  z-index: -10;
  pointer-events: none;

  opacity: 0;
  transition: opacity 0.6s ease-out;

  background: radial-gradient(
    ellipse at top,
    #0f1114 0%,
    #07080a 60%,
    #050607 100%
  );
}
#starfield.is-visible{
  opacity: 1;
}
.stars{
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  background: transparent;
  will-change: transform;
  animation-name: starScroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  box-shadow: var(--shadows, none);
}

.stars::after{
  content:"";
  position:absolute;
  top: var(--sfH, 2000px);
  left:0;
  width: inherit;
  height: inherit;
  background: transparent;
  box-shadow: inherit;
}


.layer1{ width:1px; height:1px; opacity:.70; animation-duration: 70s; }
.layer2{ width:2px; height:2px; opacity:.50; animation-duration: 120s; }
.layer3{ width:3px; height:3px; opacity:.30; animation-duration: 180s; }

@keyframes starScroll{
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-1 * var(--sfH, 2000px))); }
}

@media (prefers-reduced-motion: reduce){
  .stars{ animation:none; }
}