.gradient-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.circle-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(60px);
  opacity: 0.5;
  mix-blend-mode: screen;
  animation: pulseAndFloat 20s ease-in-out infinite alternate;
  transform: translate(-50%, -50%);
  background: transparent;
}

/* Слой 1 — глубокий синий с пульсирующим светом */
.circle-layer:nth-child(1) {
  animation-delay: 0s;
  background: radial-gradient(circle at 30% 70%,
    #3a76ff 0%,
    #1e3aff 25%,
    #0b1c3a 60%
  );
}

/* Слой 2 — чуть фиолетовее, плавает с другой скоростью */
.circle-layer:nth-child(2) {
  animation-delay: 5s;
  filter: blur(80px);
  opacity: 0.45;
  background: radial-gradient(circle at 70% 40%,
    #5d54d8 0%,
    #0f2b6e 30%,
    #081428 70%
  );
}

/* Слой 3 — тусклый светло-синий блик */
.circle-layer:nth-child(3) {
  animation-delay: 10s;
  filter: blur(100px);
  opacity: 0.3;
  background: radial-gradient(circle at 50% 50%,
    #a0d8f1 0%, /* Очень тусклый светло-синий */
    #1e3aff 20%,
    transparent 50%
  );
}

/* Анимация — пульсация и хаотичное движение */
@keyframes pulseAndFloat {
  0% {
    transform: translate(-50%, -50%) scale(0.95);
  }
  50% {
    transform: translate(-48%, -52%) scale(1.05) rotate(180deg);
  }
  100% {
    transform: translate(-52%, -48%) scale(0.9) rotate(360deg);
  }
}

/* Очень мягкий overlay сверху — просто для сглаживания */
.blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 20, 40, 0.2); /* тёмно-синий полупрозрачный */
  backdrop-filter: blur(1px);
  filter: blur(2px);
  opacity: 0.6;
  pointer-events: none;
  animation: glowPulse 14s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  0% { opacity: 0.5; }
  100% { opacity: 0.7; }
}