.starfield > i {
  left: -120px;
  width: calc(100% + var(--tile) + 120px);
  transition:
    opacity 1400ms cubic-bezier(0.33, 0, 0.2, 1) var(--sky-in-delay, 0ms),
    visibility 0s linear var(--sky-in-delay, 0ms),
    scale 1800ms cubic-bezier(0.16, 1, 0.3, 1) var(--sky-in-delay, 0ms);
}
.starfield-far { --sky-depth: 0.25; --sky-in-delay: 0ms; --sky-dolly: 1.02; }
.starfield-mid { --sky-depth: 0.55; --sky-in-delay: 0ms; --sky-dolly: 1.025; }
.starfield-near { --sky-depth: 1; --sky-in-delay: 0ms; --sky-dolly: 1.03; }

html:not([data-sky="on"]) .starfield > i {
  scale: var(--sky-dolly, 1);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .starfield > i { transition: none; scale: none; }
  html:not([data-sky="on"]) .starfield > i { scale: none; }
  html[data-sky="on"] .starfield > i { transition: opacity 600ms ease-out, visibility 0s !important; transition-duration: 600ms, 0s !important; }
}