/* Анимация снега на фоне */
@keyframes snow {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0.3;
  }
}

@keyframes snow2 {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) rotate(-360deg);
    opacity: 0.2;
  }
}

/* Создание снежного эффекта через псевдоэлементы */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 300%;
  pointer-events: none;
  z-index: 1;
  background-image: 
    radial-gradient(2px 2px at 10% 20%, white 100%, transparent),
    radial-gradient(2px 2px at 20% 30%, white 100%, transparent),
    radial-gradient(1px 1px at 30% 40%, white 100%, transparent),
    radial-gradient(1px 1px at 40% 50%, white 100%, transparent),
    radial-gradient(2px 2px at 50% 60%, white 100%, transparent),
    radial-gradient(1px 1px at 60% 70%, white 100%, transparent),
    radial-gradient(2px 2px at 70% 80%, white 100%, transparent),
    radial-gradient(1px 1px at 80% 90%, white 100%, transparent),
    radial-gradient(2px 2px at 90% 10%, white 100%, transparent),
    radial-gradient(1px 1px at 15% 25%, white 100%, transparent),
    radial-gradient(2px 2px at 25% 35%, white 100%, transparent),
    radial-gradient(1px 1px at 35% 45%, white 100%, transparent),
    radial-gradient(2px 2px at 45% 55%, white 100%, transparent),
    radial-gradient(1px 1px at 55% 65%, white 100%, transparent),
    radial-gradient(2px 2px at 65% 75%, white 100%, transparent),
    radial-gradient(1px 1px at 75% 85%, white 100%, transparent),
    radial-gradient(2px 2px at 85% 95%, white 100%, transparent),
    radial-gradient(1px 1px at 95% 5%, white 100%, transparent),
    radial-gradient(2px 2px at 5% 15%, white 100%, transparent),
    radial-gradient(1px 1px at 12% 22%, white 100%, transparent),
    radial-gradient(2px 2px at 22% 32%, white 100%, transparent),
    radial-gradient(1px 1px at 32% 42%, white 100%, transparent),
    radial-gradient(2px 2px at 42% 52%, white 100%, transparent),
    radial-gradient(1px 1px at 52% 62%, white 100%, transparent),
    radial-gradient(2px 2px at 62% 72%, white 100%, transparent),
    radial-gradient(1px 1px at 72% 82%, white 100%, transparent),
    radial-gradient(2px 2px at 82% 92%, white 100%, transparent),
    radial-gradient(1px 1px at 92% 12%, white 100%, transparent),
    radial-gradient(2px 2px at 8% 18%, white 100%, transparent),
    radial-gradient(1px 1px at 18% 28%, white 100%, transparent);
  background-size: 200% 200%;
  background-position: 0 0, 0 0;
  background-repeat: repeat;
  animation: snow 15s linear infinite;
  opacity: 0.7;
}

body::after {
  animation: snow2 20s linear infinite;
  background-image: 
    radial-gradient(1px 1px at 5% 10%, white 100%, transparent),
    radial-gradient(2px 2px at 15% 20%, white 100%, transparent),
    radial-gradient(1px 1px at 25% 30%, white 100%, transparent),
    radial-gradient(2px 2px at 35% 40%, white 100%, transparent),
    radial-gradient(1px 1px at 45% 50%, white 100%, transparent),
    radial-gradient(2px 2px at 55% 60%, white 100%, transparent),
    radial-gradient(1px 1px at 65% 70%, white 100%, transparent),
    radial-gradient(2px 2px at 75% 80%, white 100%, transparent),
    radial-gradient(1px 1px at 85% 90%, white 100%, transparent),
    radial-gradient(2px 2px at 95% 5%, white 100%, transparent),
    radial-gradient(1px 1px at 7% 15%, white 100%, transparent),
    radial-gradient(2px 2px at 17% 25%, white 100%, transparent),
    radial-gradient(1px 1px at 27% 35%, white 100%, transparent),
    radial-gradient(2px 2px at 37% 45%, white 100%, transparent),
    radial-gradient(1px 1px at 47% 55%, white 100%, transparent),
    radial-gradient(2px 2px at 57% 65%, white 100%, transparent),
    radial-gradient(1px 1px at 67% 75%, white 100%, transparent),
    radial-gradient(2px 2px at 77% 85%, white 100%, transparent),
    radial-gradient(1px 1px at 87% 95%, white 100%, transparent),
    radial-gradient(2px 2px at 97% 8%, white 100%, transparent),
    radial-gradient(1px 1px at 3% 12%, white 100%, transparent),
    radial-gradient(2px 2px at 13% 22%, white 100%, transparent),
    radial-gradient(1px 1px at 23% 32%, white 100%, transparent),
    radial-gradient(2px 2px at 33% 42%, white 100%, transparent),
    radial-gradient(1px 1px at 43% 52%, white 100%, transparent),
    radial-gradient(2px 2px at 53% 62%, white 100%, transparent),
    radial-gradient(1px 1px at 63% 72%, white 100%, transparent),
    radial-gradient(2px 2px at 73% 82%, white 100%, transparent),
    radial-gradient(1px 1px at 83% 92%, white 100%, transparent),
    radial-gradient(2px 2px at 93% 2%, white 100%, transparent);
  background-size: 200% 200%;
  opacity: 0.5;
}

/* Анимация логотипа - плавное движение вверх-вниз */
@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.hero-image img {
  animation: logoFloat 3s ease-in-out infinite;
  position: relative;
  z-index: 2;
}