/* background.css (Обновлённая версия) */

:root {
  /* Задаем переменные прямо здесь для удобства */
  --color-background-grad-a: #0b1620;
  --color-background-grad-b: #1e293b;
  --color-main-1: #008bf0;
  --color-main-2: #0068a0;
  --color-accent: #0ea5e9;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -2; /* Устанавливаем ниже, чем анимированные капли */

  /* Основной статичный фон */
  background-image:
    radial-gradient(1000px 500px at -10% -10%, #0d1b28 0%, transparent 60%),
    radial-gradient(900px 500px at 110% -20%, #0b2a3d 0%, transparent 55%),
    linear-gradient(135deg, var(--color-background-grad-b), var(--color-background-grad-a));
}

.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  filter: blur(80px); /* Увеличиваем размытие для мягкости */
}

.bg-shape {
  height: 25rem; /* Уменьшаем размер капель */
  width: 25rem;
  border-radius: 50%;
  position: absolute;
  opacity: 0.7;
}

/* Новые цвета и замедленная анимация */
.bg-shape-1 {
  animation: move-1 35s alternate infinite both cubic-bezier(0.65, 0.05, 0.36, 1);
  background: var(--color-main-1);
}

.bg-shape-2 {
  animation: move-2 30s alternate infinite both cubic-bezier(0.65, 0.05, 0.36, 1);
  background: var(--color-main-2);
}

.bg-shape-3 {
  animation: move-3 40s alternate infinite both;
  background: var(--color-accent);
}

@keyframes move-1 {
  from { transform: translate(-20vw, -20vh) scale(1); }
  to { transform: translate(80vw, 60vh) scale(1.5); }
}

@keyframes move-2 {
  from { transform: translate(10vw, 70vh) scale(1.2); }
  to { transform: translate(90vw, -10vh) scale(1); }
}

@keyframes move-3 {
  from { transform: translate(100vw, 40vh) scale(1.5); }
  to { transform: translate(-30vw, 30vh) scale(1.2); }
}