@property --size {
  syntax: '<length>';
  initial-value: 18px;
  inherits: false;
}

@property --speed {
  syntax: '<time>';
  initial-value: 35s;
  inherits: false;
}

:root {
  --size: 18px;
  --speed: 35s;

  --stop1: #eec32d;
  --stop2: #ec4b4b;
  --stop3: #709ab9;
  --stop4: #4dffbf;
}

.stars {
  position: absolute;
  inset: 0;
  width: 211px;
  height: 100%;
  background: conic-gradient(
    from 180deg at 50% 70%,
    hsla(0, 0%, 98%, 1) 0deg,
    var(--stop1) 72deg,
    var(--stop2) 144deg,
    var(--stop3) 216deg,
    var(--stop4) 288deg,
    hsla(0, 0%, 98%, 1) 1turn
  );
  mask:
    radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / var(--size) var(--size),
    url('../images/noise-mask.png') 256px 50% / 256px 256px;
  mask-composite: intersect;
  animation: flicker var(--speed) infinite linear;

  transition:
    width 0.5s linear,
    --size 0.2s linear,
    --speed 0.2s linear;
}

@keyframes flicker {
  to {
    mask-position:
      50% 50%,
      0 50%;
  }
}