/* ==========================================
   1. БАЗОВЫЕ НАСТРОЙКИ СТРАНИЦЫ
   ========================================== */
body {
  background-color: #030615; 
  color: white;
  font-family: Verdana, sans-serif;
  margin: 0; 
  min-height: 100vh; 
  overflow: hidden; 
}
  
/* КОРОБКА ДЛЯ ВСЕГО НЕБА */ 
.sky { 
  position: fixed; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  overflow: hidden; 
  z-index: 1;
}

/* ==========================================
   2. СЕВЕРНОЕ СИЯНИЕ (Ваш исходный вариант)
   ========================================== */ 
.aurora { 
  position: absolute; 
  width: 120%; 
  height: 80%; 
  top: -10%; 
  left: -10%; 
  background-image: 
    radial-gradient(ellipse at 30% 50%, rgba(130, 50, 255, 0.4), transparent 45%),
    radial-gradient(ellipse at 60% 40%, rgba(80, 229, 255, 0.4), transparent 45%),
    radial-gradient(ellipse at 75% 60%, rgba(50, 255, 135, 0.4), transparent 45%);
  background-size: 150% 150%, 150% 150%, 200% 200%;
    filter: blur(50px);
  mix-blend-mode: screen;
  animation: auroraMove 10s ease-in-out infinite alternate;
}

@keyframes auroraMove { 
  0% { transform: translateX(-5%) rotate(-5deg); background-position: 0% 0%, 10% 20%, 0% 30%; }
  50% { transform: translateX(5%) rotate(4deg); background-position: 50% 40%, 30% 60%, 40% 10%; }
  100% { transform: translateX(-2%) rotate(-3deg); background-position: 100% 80%, 80% 40%, 70% 90%;}
}

/* ==========================================
   3. ВЕРТИКАЛЬНЫЙ СНЕГ С КОНЦЕНТРАЦИЕЙ ВНИЗУ
   ========================================== */ 
.snow { 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  overflow: hidden;
  z-index: 2;

  /* 🌟 ИСПРАВЛЕНО: Маска теперь делает верх прозрачным (opacity 15%), 
     а к низу (начиная с 60% высоты) снег становится полностью плотным и белым */
  -webkit-mask-image: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.2) 35%, white 70%, white 100%);
  mask-image: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.2) 35%, white 70%, white 100%);
}

/* Общие настройки слоев */
.snow::before,
.snow::after,
.snow-layer3 {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
}

/* СЛОЙ 1: Маленькие далекие снежинки */
.snow::before {
  background-image: 
    radial-gradient(circle, white 1px, transparent 1px),
    radial-gradient(circle, white 1px, transparent 1px),
    radial-gradient(circle, white 1.2px, transparent 1.2px),
    radial-gradient(circle, white 1px, transparent 1px);
  background-size: 200px 200px;
  background-position: 0 0, 50px 120px, 130px 40px, 180px 170px;
  animation: snowScroll1 22s linear infinite;
}

/* СЛОЙ 2: Средние снежинки */
.snow::after {
  background-image: 
    radial-gradient(circle, rgba(255,255,255,0.8) 2px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.8) 1.8px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,0.7) 2px, transparent 2px);
  background-size: 300px 300px;
  background-position: 0 0, 100px 180px, 220px 70px;
  animation: snowScroll2 14s linear infinite;
}

/* СЛОЙ 3: Крупные хлопья */
.snow-layer3 {
  background-image: 
    radial-gradient(circle, rgba(255,255,255,0.9) 3.5px, transparent 3.5px),
    radial-gradient(circle, rgba(255,255,255,0.85) 3px, transparent 3px);
  background-size: 400px 400px;
  background-position: 0 0, 200px 250px;
  animation: snowScroll3 8s linear infinite;
}

/* 🌟 ИСПРАВЛЕНО: Все первые цифры (сдвиг по X) занулены. 
   Снежинки теперь падают строго по вертикали сверху вниз, плавно и без прерываний! */

@keyframes snowScroll1 {
  from { background-position: 0 0, 50px 120px, 130px 40px, 180px 170px; }
  to { background-position: 0 200px, 50px 320px, 130px 240px, 180px 370px; }
}

@keyframes snowScroll2 {
  from { background-position: 0 0, 100px 180px, 220px 70px; }
  to { background-position: 0 300px, 100px 480px, 220px 370px; }
}

@keyframes snowScroll3 {
  from { background-position: 0 0, 200px 250px; }
  to { background-position: 0 400px, 200px 650px; }
}

/* ==========================================
   4. СОДЕРЖИМОЕ САЙТА (ТЕКСТ И ПЛЕЕР)
   ========================================== */ 
.content { 
  position: relative; 
  z-index: 3; 
  color: white;
  text-align: center;
  padding-top: 100px;
}

.audio-player {
  margin-bottom: 20px; 
  background: rgba(255, 255, 255, 0.08); 
  backdrop-filter: blur(5px);
  padding: 10px;
  border-radius: 30px;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.menu {
  background-color: rgba(255, 255, 255, 0.08);
}