<h1>Gradients</h1>

@property --c1 {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(95% .25 160);
}

@property --c2 {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(75% .5 180);
}

@property --c3 {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(75% .5 210);
}

@property --c4 {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(75% .5 230);
}

@property --c5 {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(75% .5 260);
}

body {
  min-height: 100dvh;
  margin: 0;
  padding: 0;
 background-image: 
    radial-gradient(
      farthest-corner circle at 0% 0% in oklch, 
      var(--c1) 0%, 26%, var(--c2) 0% 0%, 46%, var(--c3) 0% 0%, 60%, var(--c4) 0% 0%, 82%, var(--c5) 0% 0%
    )
  ;
  animation: colors 12s linear infinite;
}



@keyframes colors {
  0%, 100% {
    --c1:oklch(95% .25 160);
    --c2:oklch(75% .5 180); 
    --c3:oklch(75% .5 210);
    --c4:oklch(75% .5 230);
    --c5:oklch(75% .5 260);
  }
  8.33% {
    --c1:oklch(95% .25 130);
    --c2:oklch(75% .5 180); 
    --c3:oklch(75% .5 210);
    --c4:oklch(75% .5 230);
    --c5:oklch(75% .5 260);
  }
  16.66% {
    --c1:oklch(95% .25 130);
    --c2:oklch(75% .5 170); 
    --c3:oklch(75% .5 210);
    --c4:oklch(75% .5 230);
    --c5:oklch(75% .5 260);
  }
  24.99% {
    --c1:oklch(95% .25 130);
    --c2:oklch(75% .5 170); 
    --c3:oklch(75% .5 190);
    --c4:oklch(75% .5 230);
    --c5:oklch(75% .5 260);
  }
  33.32% {
    --c1:oklch(95% .25 130);
    --c2:oklch(75% .5 170); 
    --c3:oklch(75% .5 190);
    --c4:oklch(65% .5 200);
    --c5:oklch(75% .5 260);
  }
  41.65% {
    --c1:oklch(95% .25 130);
    --c2:oklch(75% .5 170); 
    --c3:oklch(75% .5 190);
    --c4:oklch(65% .5 200);
    --c5:oklch(65% .5 230);
  }
  49.98% {
    
    --c1:oklch(95% .25 130);
    --c2:oklch(75% .5 170); 
    --c3:oklch(75% .5 190);
    --c4:oklch(75% .5 200);
    --c5:oklch(65% .5 230);
  }
  58.31% {
    
    --c1:oklch(95% .25 130);
    --c2:oklch(75% .5 170); 
    --c3:oklch(75% .5 190);
    --c4:oklch(75% .5 200);
    --c5:oklch(75% .5 260);
    
  }
  66.64% {
    --c1:oklch(95% .25 130);
    --c2:oklch(75% .5 170); 
    --c3:oklch(75% .5 190);
    --c4:oklch(75% .5 230);
    --c5:oklch(75% .5 260);
    
  }
  74.97% {
    --c1:oklch(95% .25 130);
    --c2:oklch(75% .5 170); 
    --c3:oklch(75% .5 220);
    --c4:oklch(75% .5 230);
    --c5:oklch(75% .5 260);
  }
  83.3% {
    --c1:oklch(95% .25 130);
    --c2:oklch(75% .5 200); 
    --c3:oklch(75% .5 220);
    --c4:oklch(75% .5 230);
    --c5:oklch(75% .5 260);
  }
  91.63% {
    --c1:oklch(95% .25 160);
    --c2:oklch(75% .5 180); 
    --c3:oklch(75% .5 210);
    --c4:oklch(75% .5 230);
    --c5:oklch(75% .5 260);
  }
}


h1 {
  color: white;
  font-family: sans-serif;
  font-weight: 300;
  font-size: 5rem;
  letter-spacing:  2rem;
  text-transform: uppercase;
}

@media (prefers-reduced-motion) {
  body {
    animation: none;
  }
  h1::after {
    text-transform: none;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    display: block;
    background: black;
    content: 'This demo has flickering gradients, we decided not to show this based on your preferences (reduced motion setting)';
  }
}