/* Christmas Snowfall Effect */
.snowflake {
  position: fixed;
  top: -20px;
  color: #fff;
  font-size: 2em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
  pointer-events: none;
  z-index: 9999;
  opacity: 0.9;
  transition: opacity 0.5s ease;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Blue colored snowflakes */
.snowflake.blue {
  color: #87CEEB;
  text-shadow: 0 0 12px rgba(135, 206, 235, 0.9), 0 0 20px rgba(100, 180, 255, 0.6);
}

.snowflake.light-blue {
  color: #ADD8E6;
  text-shadow: 0 0 12px rgba(173, 216, 230, 0.9), 0 0 20px rgba(150, 200, 255, 0.6);
}

.snowflake.hidden {
  opacity: 0 !important;
}

/* Smooth falling animation */
@keyframes snowfall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: translate3d(15px, 25vh, 0) rotate(90deg);
  }
  50% {
    transform: translate3d(-10px, 50vh, 0) rotate(180deg);
  }
  75% {
    transform: translate3d(20px, 75vh, 0) rotate(270deg);
  }
  100% {
    transform: translate3d(5px, 105vh, 0) rotate(360deg);
    opacity: 0.6;
  }
}

/* Alternate sway animation */
@keyframes snowfall-sway {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: translate3d(-20px, 25vh, 0) rotate(-45deg);
  }
  50% {
    transform: translate3d(15px, 50vh, 0) rotate(0deg);
  }
  75% {
    transform: translate3d(-15px, 75vh, 0) rotate(45deg);
  }
  100% {
    transform: translate3d(10px, 105vh, 0) rotate(0deg);
    opacity: 0.6;
  }
}

/* Gentle drift animation */
@keyframes snowfall-drift {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  33% {
    transform: translate3d(25px, 33vh, 0);
  }
  66% {
    transform: translate3d(-15px, 66vh, 0);
  }
  100% {
    transform: translate3d(10px, 105vh, 0);
    opacity: 0.6;
  }
}