/* Galaxy: a slowly turning star field under nebula clouds. */
.bgfx-spin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 145vmax;          /* covers the screen's diagonal at any angle */
  height: 145vmax;
  margin: -72.5vmax 0 0 -72.5vmax;
}
.bgfx--demo .bgfx-spin { width: 72px; height: 72px; margin: -36px 0 0 -36px; }

.bgfx--galaxy .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.5);
}
.bgfx--galaxy .bgfx-p:nth-child(4n) > i { background: #c9dbff; }
.bgfx--galaxy .bgfx-p:nth-child(6n) > i { background: #ffd9f2; }
.bgfx--galaxy .is-bright > i { box-shadow: 0 0 calc(var(--s) * 4) rgba(200, 220, 255, 0.8); }

.bgfx-neb {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(80 * var(--u));
  height: calc(50 * var(--u));
  margin: calc(-25 * var(--u)) 0 0 calc(-40 * var(--u));
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  opacity: 0.22;
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: no-preference) {
  .bgfx--galaxy .bgfx-p { top: var(--y); animation: none; will-change: auto; }
  .bgfx--galaxy .bgfx-p > i { animation: bgfx-twinkle var(--d) ease-in-out var(--t) infinite alternate; }
  .bgfx-spin { animation: bgfx-spin 360s linear infinite; }
  .bgfx-neb { animation: bgfx-nebula var(--d) ease-in-out var(--t) infinite alternate; }
}
@keyframes bgfx-spin   { to { transform: rotate(360deg); } }
@keyframes bgfx-nebula {
  from { transform: translate(-6%, -4%) scale(1); opacity: 0.16; }
  to   { transform: translate(6%, 5%) scale(1.18); opacity: 0.28; }
}