:root {
  --page-bg-base: var(--bg);
  --page-bg-secondary: color-mix(in srgb, var(--bg) 88%, var(--accent));
  --page-bg-tertiary: color-mix(in srgb, var(--bg-strong) 92%, var(--accent));
  --page-bg-glow: var(--accent);
  --page-grid-line: color-mix(in srgb, var(--accent) 46%, var(--ink));
  --page-bg-glow-opacity: 28%;
  --page-bg-grid-opacity: 0.11;
}

body[data-art-theme="light"] {
  --page-bg-glow-opacity: 18%;
  --page-bg-grid-opacity: 0.07;
}

body[data-art-theme="cream"] {
  --page-bg-glow-opacity: 22%;
  --page-bg-grid-opacity: 0.08;
}

body[data-art-theme] {
  --app-bg: var(--page-bg-base);
  background:
    radial-gradient(
      68rem 52rem at 8% -12%,
      color-mix(in srgb, var(--page-bg-glow) var(--page-bg-glow-opacity), transparent),
      transparent 68%
    ),
    radial-gradient(
      58rem 46rem at 96% 8%,
      color-mix(in srgb, var(--page-bg-secondary) 72%, transparent),
      transparent 66%
    ),
    radial-gradient(
      54rem 44rem at 48% 112%,
      color-mix(in srgb, var(--page-bg-glow) 12%, transparent),
      transparent 70%
    ),
    linear-gradient(145deg, var(--page-bg-base), var(--page-bg-secondary) 52%, var(--page-bg-tertiary));
  background-attachment: fixed;
  background-size: 130% 130%, 125% 125%, 135% 135%, 100% 100%;
  animation: themeBackgroundFlow 24s ease-in-out infinite alternate;
}

body[data-art-theme] .bg-grid {
  display: block;
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--page-grid-line) 42%, transparent) 0.0625rem,
      transparent 0.0625rem
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--page-grid-line) 34%, transparent) 0.0625rem,
      transparent 0.0625rem
    );
  background-size: 5rem 5rem;
  opacity: var(--page-bg-grid-opacity);
  animation: themeGridFlow 42s linear infinite;
}

@keyframes themeBackgroundFlow {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%, center;
  }

  50% {
    background-position: 8% 7%, 92% 12%, 44% 94%, center;
  }

  100% {
    background-position: 14% 4%, 86% 18%, 56% 88%, center;
  }
}

@keyframes themeGridFlow {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 10rem 5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-art-theme],
  body[data-art-theme] .bg-grid {
    animation: none;
  }
}