/* Classes-style texture and motes live inside the parallax background only. */
.world-parallax__cells {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(62,66,55,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(62,66,55,.09) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .56;
  mix-blend-mode: multiply;
  backdrop-filter: blur(.6px);
}
.world-parallax__motes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.world-background-mote {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px 1px #fff9, 0 0 14px #fff7;
  filter: blur(var(--softness));
  animation: world-background-drift var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
  opacity: 0;
}
@keyframes world-background-drift {
  0%, 100% { opacity: 0; transform: translate3d(-20px, 35px, 0); }
  25% { opacity: var(--brightness); }
  75% { opacity: calc(var(--brightness) * .65); }
  95% { transform: translate3d(var(--sway), -85px, 0); opacity: 0; }
}
.world-background-paused .world-background-mote { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .world-parallax__motes { display: none; } }