style.css

@property --scroll-percentage {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}

@layer base, animations;

@layer base {
  :root {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;
    color-scheme: light dark;
    color: rgb(255 255 255 / 87%);
    font-synthesis: none;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
  }

  main {
    max-width: 80ch;
    margin: 0 auto;
    padding: 1rem;
    color: lightgray;
  }
}

@layer animations {
  :root {
    --can-scroll: 0;

    animation: detect-scroll;
    animation-duration: 1ms;
    animation-iteration-count: infinite;
    animation-timeline: scroll(self);
    animation-direction: normal;
    animation-timing-function: linear;

    body {
      background: radial-gradient(
          circle at var(--scroll-percentage) var(--scroll-percentage),
          hsl(0deg 100% 10%),
          transparent 50%
        ),
        radial-gradient(
          circle at calc(100% - var(--scroll-percentage))
            var(--scroll-percentage),
          hsl(90deg 100% 10%),
          transparent 50%
        ),
        radial-gradient(
          circle at calc(100% - var(--scroll-percentage))
            calc(100% - var(--scroll-percentage)),
          hsl(180deg 100% 10%),
          transparent 50%
        ),
        radial-gradient(
          circle at var(--scroll-percentage)
            calc(100% - var(--scroll-percentage)),
          hsl(270deg 100% 10%),
          transparent 50%
        );
      animation: background-position-diagonal;
      animation-duration: 15s;
      animation-iteration-count: infinite;
      animation-timeline: auto;
      animation-direction: alternate;
      animation-timing-function: cubic-bezier(0, 0.25, 1, 0.75);
    }

    @container style(--can-scroll: 1) {
      body {
        animation-duration: unset;
        animation-timeline: scroll(y root);
        animation-iteration-count: unset;
      }
    }
  }

  @keyframes detect-scroll {
    to {
      --can-scroll: 1;
    }
  }

  @keyframes background-position-diagonal {
    from {
      --scroll-percentage: 0%;
    }

    to {
      --scroll-percentage: 100%;
    }
  }
}