@property --y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -1%;
}

.snowfall,
.snowfall::before,
.snowfall::after {
  position: absolute;
  inset: 0;
  content: "";
  overflow: hidden;
  pointer-events: none;

  background-image:
    radial-gradient(circle at 5% calc(var(--y) * 1), #fff 3px, transparent 6px),
    radial-gradient(circle at 30% calc(var(--y) * 1.2), #fff 3px, transparent 6px),
    radial-gradient(circle at 55% calc(var(--y) * 0.9), #fff 2px, transparent 4px),
    radial-gradient(circle at 65% calc(var(--y) * 1.3), #fff 2px, transparent 4px);
}

.snowfall {
  animation: snowfall 20s linear infinite;
  background-size: 65% 100%;
}

.snowfall::before {
  inset: -4rem 0 0;
  opacity: 0.7;
  animation: snowfall 27s linear infinite, wind 27s ease-in-out infinite;
  background-size: 45% 100%;
}

.snowfall::after {
  inset: -8rem 0 0;
  opacity: 0.8;
  animation: snowfall 37s linear infinite, wind 47s ease-in-out infinite;
  background-size: 32% 100%;
}

@keyframes snowfall {
  0% {
    --y: -1%;
  }
  100% {
    --y: 101%;
  }
}

@keyframes wind {
  50% {
    translate: 200px;
  }
}