---
// Cheap, CSS-only topology motif: a faint grid + slow-drifting accent glows.
// No canvas, no WebGL, no JS. Fully disabled under prefers-reduced-motion.
---

<div class="bg" aria-hidden="true">
  <div class="bg__grid"></div>
  <div class="bg__glow bg__glow--a"></div>
  <div class="bg__glow bg__glow--b"></div>
</div>

<style>
  .bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }
  .bg__grid {
    position: absolute;
    inset: -2px;
    background-image:
      linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 46px 46px;
    /* Fade the grid out toward the edges so it reads as a motif, not a table. */
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
  }
  .bg__glow {
    position: absolute;
    width: 46rem;
    height: 46rem;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
  }
  .bg__glow--a {
    top: -22rem;
    left: -10rem;
    background: radial-gradient(circle, var(--accent-glow), transparent 62%);
    animation: drift-a 26s var(--ease) infinite alternate;
  }
  .bg__glow--b {
    top: -16rem;
    right: -14rem;
    background: radial-gradient(circle, var(--accent-glow), transparent 65%);
    opacity: 0.35;
    animation: drift-b 32s var(--ease) infinite alternate;
  }
  @keyframes drift-a {
    to {
      transform: translate(6rem, 4rem) scale(1.12);
    }
  }
  @keyframes drift-b {
    to {
      transform: translate(-5rem, 3rem) scale(1.08);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .bg__glow {
      animation: none;
    }
  }
</style>