@layer demo {
  .gradient-glowing-text {
    display: grid;
    
    > * {
      grid-area: 1 / 1;
    }
    
    > h1 {
      --space:;
      background: linear-gradient(to right var(--space), oklch(90% .3 230), oklch(70% .3 340));
      -webkit-background-clip: text;
      color: transparent;
      
      @supports (background: linear-gradient(in oklab, #000, #fff)) {
        --space: in oklch;
      }
      
      @media (prefers-reduced-motion: no-preference) {
        animation: rotate-gradient 5s linear infinite;
      }
      
      &[aria-hidden] {
        filter: blur(clamp(30px, 4vw, 60px)) saturate(2);
      }
    }
  }
}

@keyframes rotate-gradient {
  0%, 100% {
    background: linear-gradient(to right in oklch, oklch(90% .3 230), oklch(70% .3 340));
    -webkit-background-clip: text;
    color: transparent;
  }
  25% {
    background: linear-gradient(to right in oklch, oklch(87% .4 142), oklch(100% .4 95));
    -webkit-background-clip: text;
    color: transparent;
  }
  50% {
    background: linear-gradient(to right in oklab, oklch(95% .25 160), oklch(75% .5 260));
    -webkit-background-clip: text;
    color: transparent;
  }
  75% {
    background: linear-gradient(to right in oklab, oklch(95% .4 95), oklch(55% .45 350));
    -webkit-background-clip: text;
    color: transparent;
  }
}