/* Snowfall Setup */
#snow-container {
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 111%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.snowflake {
  position: absolute;
  top: -10px;
  border-radius: 50%;
  opacity: 0.8;
  filter: blur(3px);
  animation-name: fallAndWhirl;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
  box-shadow: 0 0 6px rgba(255,255,255,0.6);
}

@keyframes fallAndWhirl {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(var(--drift-x, 0px), 50vh) rotate(180deg);
  }
  100% {
    transform: translate(calc(var(--drift-x, 0px) * 2), 100vh) rotate(360deg);
  }
}