/* The original site star artwork, tinted by the active shared theme. */
#site-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
  user-select: none;
}

body:has(> #site-background) {
  isolation: isolate;
}

#site-background > span {
  position: absolute;
  width: var(--zenbu-sys-space-content);
  height: var(--zenbu-sys-space-content);
  background: var(--zenbu-sys-color-info-foreground);
  opacity: 0.45;
  -webkit-mask: url('/public/images/start-large.webp') center / contain no-repeat;
  mask: url('/public/images/start-large.webp') center / contain no-repeat;
  animation: mjj-star-drift 18s ease-in-out infinite alternate;
}

#site-background > span:nth-child(4n + 2) {
  width: var(--zenbu-sys-space-related);
  height: var(--zenbu-sys-space-related);
  background: var(--zenbu-sys-color-action-primary-background);
  -webkit-mask-image: url('/public/images/start-small-1.webp');
  mask-image: url('/public/images/start-small-1.webp');
  animation-duration: 16s;
}

#site-background > span:nth-child(4n + 3) {
  width: var(--zenbu-sys-space-control);
  height: var(--zenbu-sys-space-control);
  background: var(--zenbu-sys-color-success-foreground);
  -webkit-mask-image: url('/public/images/start-small-2.webp');
  mask-image: url('/public/images/start-small-2.webp');
  animation-duration: 22s;
}

#site-background > span:nth-child(4n) {
  width: var(--zenbu-sys-space-container);
  height: var(--zenbu-sys-space-container);
  background: var(--zenbu-sys-color-text-link);
  -webkit-mask-image: url('/public/images/start-small-3.webp');
  mask-image: url('/public/images/start-small-3.webp');
  animation-duration: 20s;
}

#site-background[data-paused='true'] > span {
  animation-play-state: paused;
}

@keyframes mjj-star-drift {
  from { transform: translate(-30px, 24px) rotate(-24deg); }
  to { transform: translate(30px, -24px) rotate(24deg); }
}

@media (prefers-reduced-motion: reduce) {
  #site-background > span { animation: none; }
}

@media (forced-colors: active), print {
  #site-background { display: none; }
}