/* Starry night: twinkling stars and the odd shooting star. */
.bgfx--stars .bgfx-p > i {
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 calc(var(--s) * 2) rgba(255, 255, 255, 0.55);
}
.bgfx--stars .bgfx-p:nth-child(5n) > i { background: #cfe0ff; }
.bgfx--stars .bgfx-p:nth-child(7n) > i { background: #ffe8c2; }
.bgfx--stars .is-bright > i { position: relative; }
.bgfx--stars .is-bright > i::before,
.bgfx--stars .is-bright > i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--s) * 7);
  height: 1px;
  margin: -0.5px 0 0 calc(var(--s) * -3.5);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
}
.bgfx--stars .is-bright > i::after { transform: rotate(90deg); }

.bgfx-shoot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(18 * var(--u));
  height: 2px;
  transform: rotate(28deg);
  transform-origin: 0 50%;
}
.bgfx-shoot > i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .bgfx--stars .bgfx-p { top: var(--y); animation: none; will-change: auto; }
  .bgfx--stars .bgfx-p > i { animation: bgfx-twinkle var(--d) ease-in-out var(--t) infinite alternate; }
  .bgfx-shoot > i { animation: bgfx-shoot var(--d) ease-in var(--t) infinite; }
}
@keyframes bgfx-shoot {
  0%, 90% { opacity: 0; transform: translateX(0); }
  92%     { opacity: 1; }
  100%    { opacity: 0; transform: translateX(calc(45 * var(--u))); }
}