/* this is def a hack */
@layer demo {
  .noise {
    --lines: 4px;
    
    mask: repeating-radial-gradient(
      circle at center,
      #000,
      var(--lines),
      #000,
      0, /* transition hints make code easier to manage */
      #0000,
      calc(var(--lines) * 2),
      #0000 0 /* trailing 0 is part of the hard stop logic */
    );
  }
}

@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
  }
  
  h1 {
    font-size: min(30vw, 35vh);
    line-height: 1;
    line-height: 1.1cap;
  }
  
  .noise {
    --space:;
    @supports (background: linear-gradient(in oklch, #000, #000)) {
      --space: in oklch;
    }
    
    display: grid;
    gap: 5vmin;
    
    /* shared gradient across headlines "fixed" */
    background: linear-gradient(to bottom right var(--space), deeppink, blue) fixed;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    @media (prefers-color-scheme: light) {
      background: linear-gradient(
        to bottom var(--space), 
        black, gray
      ) fixed;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}