/* Snow Effect - Hiệu ứng tuyết rơi 3D đẹp mắt */
.snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
  perspective: 1000px;
  perspective-origin: 50% 50%;
}

/* Layer tuyết - tạo độ sâu */
.snow-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.snowflake {
  position: absolute;
  top: -20px;
  color: #ffffff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 
    0 0 5px rgba(255, 255, 255, 1),
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 15px rgba(255, 255, 255, 0.6),
    0 0 20px rgba(255, 255, 255, 0.4);
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  filter: blur(0.3px);
  opacity: 1;
}

/* Layer 1 - Tuyết gần (lớn, chậm) */
.snow-layer.layer-1 .snowflake {
  font-size: 1.8em;
  filter: blur(0.2px);
  opacity: 1;
}

/* Layer 2 - Tuyết giữa (vừa) */
.snow-layer.layer-2 .snowflake {
  font-size: 1.2em;
  filter: blur(0.3px);
  opacity: 0.9;
}

/* Layer 3 - Tuyết xa (nhỏ, nhanh) */
.snow-layer.layer-3 .snowflake {
  font-size: 0.8em;
  filter: blur(0.5px);
  opacity: 0.8;
}

/* Animation tuyết rơi với hiệu ứng 3D và đung đưa */
@keyframes snowfall {
  0% {
    transform: translateY(0) translateX(0) translateZ(0) rotate(0deg);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  25% {
    transform: translateY(25vh) translateX(calc(var(--drift) * 0.25 + var(--sway))) translateZ(var(--depth)) rotate(180deg);
  }
  50% {
    transform: translateY(50vh) translateX(calc(var(--drift) * 0.5)) translateZ(var(--depth)) rotate(360deg);
  }
  75% {
    transform: translateY(75vh) translateX(calc(var(--drift) * 0.75 - var(--sway))) translateZ(var(--depth)) rotate(540deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) translateX(var(--drift)) translateZ(var(--depth)) rotate(720deg);
    opacity: 0;
  }
}

.snowflake {
  animation: snowfall linear infinite;
}

/* Sparkle effect - hiệu ứng lấp lánh */
.snowflake::before {
  content: '✨';
  position: absolute;
  top: -5px;
  left: -5px;
  font-size: 0.3em;
  animation: sparkle 2s ease-in-out infinite;
  opacity: 0;
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Sway animation - đung đưa nhẹ (tích hợp vào snowfall) */

/* Responsive */
@media (max-width: 768px) {
  .snow-layer.layer-1 .snowflake {
    font-size: 1.2em;
  }
  
  .snow-layer.layer-2 .snowflake {
    font-size: 0.9em;
  }
  
  .snow-layer.layer-3 .snowflake {
    font-size: 0.6em;
  }
}

/* Wind effect - gió thổi */
@keyframes wind {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
}

.snow-layer.layer-1 {
  animation: wind 8s ease-in-out infinite;
}

.snow-layer.layer-2 {
  animation: wind 6s ease-in-out infinite reverse;
}

.snow-layer.layer-3 {
  animation: wind 4s ease-in-out infinite;
}