/* ===== Snowfall Container ===== */
.snow-container {
  position: fixed;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
  pointer-events: none;     /* snow does NOT block clicks */
  overflow: hidden;
  z-index: 9999;            /* above everything */
}

/* ===== Snowflake Base ===== */
.snowflake {
  position: absolute;
  top: -6vh;                /* start slightly above viewport */
  background: #ffffff;
              box-shadow: 0 0 2px rgba(156, 240, 255, 0.781);
  border-radius: 50%;
  opacity: 0.9;
  will-change: transform;   /* improve animation performance */
}

/* Optional: give depth effect (blur every 6th) */
.snowflake:nth-child(6n) {
  filter: blur(1px);
}

/* Fallback animation (in case JS keyframes are not injected) */
@keyframes snowfall {
  0% {
    transform: translate3d(var(--left-ini, 0), 0, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(var(--left-end, 0), 110vh, 0) rotate(360deg);
  }
}