html {
  timeline-scope: --sparkle;
  animation: sparkle-bg steps(1, end) forwards;
  animation-timeline: --sparkle;
}

#sparkle {
  display: inline-block;
  view-timeline: --sparkle;
}

#sparkle > span {
  animation-timing-function: steps(1, end);
  animation-timeline: --sparkle;
  animation-fill-mode: forwards;
}

@keyframes sparkle-bg {
  0%  { background: oklch(25% 0.12 25); }
  8%  { background: oklch(25% 0.12 90); }
  16% { background: oklch(25% 0.12 160); }
  24% { background: oklch(25% 0.12 230); }
  32% { background: oklch(25% 0.12 300); }
  40% { background: oklch(25% 0.12 10); }
  48% { background: oklch(25% 0.12 200); }
  55%, 100% { background: repeating-linear-gradient(in oklch to bottom, oklch(22% 0.07 255), oklch(28% 0.09 350) 50vh, oklch(22% 0.07 255) 100vh); }
}

#sparkle > span:nth-child(1) { animation-name: sparkle-1; }
#sparkle > span:nth-child(2) { animation-name: sparkle-2; }
#sparkle > span:nth-child(3) { animation-name: sparkle-3; }
#sparkle > span:nth-child(4) { animation-name: sparkle-4; }
#sparkle > span:nth-child(5) { animation-name: sparkle-5; }
#sparkle > span:nth-child(6) { animation-name: sparkle-6; }
#sparkle > span:nth-child(7) { animation-name: sparkle-7; }
#sparkle > span:nth-child(8) { animation-name: sparkle-8; }

@keyframes sparkle-1 {
  0%  { color: oklch(70% 0.25 25); }
  7%  { color: oklch(70% 0.25 90); }
  14% { color: oklch(70% 0.25 160); }
  21% { color: oklch(70% 0.25 230); }
  28% { color: oklch(70% 0.25 300); }
  35% { color: oklch(70% 0.25 10); }
  42% { color: oklch(70% 0.25 120); }
  49% { color: oklch(70% 0.25 250); }
  55%, 100% { color: white; }
}

@keyframes sparkle-2 {
  0%  { color: oklch(70% 0.25 200); }
  5%  { color: oklch(70% 0.25 260); }
  11% { color: oklch(70% 0.25 320); }
  17% { color: oklch(70% 0.25 20); }
  24% { color: oklch(70% 0.25 80); }
  31% { color: oklch(70% 0.25 140); }
  38% { color: oklch(70% 0.25 210); }
  46% { color: oklch(70% 0.25 290); }
  55%, 100% { color: white; }
}

@keyframes sparkle-3 {
  0%  { color: oklch(70% 0.25 60); }
  9%  { color: oklch(70% 0.25 180); }
  18% { color: oklch(70% 0.25 300); }
  27% { color: oklch(70% 0.25 60); }
  36% { color: oklch(70% 0.25 180); }
  45% { color: oklch(70% 0.25 300); }
  55%, 100% { color: white; }
}

@keyframes sparkle-4 {
  0%  { color: oklch(70% 0.25 330); }
  4%  { color: oklch(70% 0.25 30); }
  10% { color: oklch(70% 0.25 90); }
  16% { color: oklch(70% 0.25 150); }
  23% { color: oklch(70% 0.25 210); }
  30% { color: oklch(70% 0.25 270); }
  38% { color: oklch(70% 0.25 330); }
  47% { color: oklch(70% 0.25 30); }
  55%, 100% { color: white; }
}

@keyframes sparkle-5 {
  0%  { color: oklch(70% 0.25 100); }
  6%  { color: oklch(70% 0.25 170); }
  13% { color: oklch(70% 0.25 240); }
  20% { color: oklch(70% 0.25 310); }
  28% { color: oklch(70% 0.25 20); }
  37% { color: oklch(70% 0.25 90); }
  46% { color: oklch(70% 0.25 200); }
  55%, 100% { color: white; }
}

@keyframes sparkle-6 {
  0%  { color: oklch(70% 0.25 280); }
  3%  { color: oklch(70% 0.25 340); }
  8%  { color: oklch(70% 0.25 40); }
  14% { color: oklch(70% 0.25 100); }
  21% { color: oklch(70% 0.25 160); }
  29% { color: oklch(70% 0.25 220); }
  38% { color: oklch(70% 0.25 280); }
  48% { color: oklch(70% 0.25 340); }
  55%, 100% { color: white; }
}

@keyframes sparkle-7 {
  0%  { color: oklch(70% 0.25 150); }
  10% { color: oklch(70% 0.25 0); }
  20% { color: oklch(70% 0.25 220); }
  30% { color: oklch(70% 0.25 70); }
  40% { color: oklch(70% 0.25 290); }
  50% { color: oklch(70% 0.25 130); }
  55%, 100% { color: white; }
}

@keyframes sparkle-8 {
  0%  { color: oklch(70% 0.25 250); }
  8%  { color: oklch(70% 0.25 350); }
  17% { color: oklch(70% 0.25 90); }
  26% { color: oklch(70% 0.25 190); }
  35% { color: oklch(70% 0.25 30); }
  44% { color: oklch(70% 0.25 270); }
  55%, 100% { color: white; }
}