/* Анимированный фон: заметное движение, только transform/opacity */

html {
  background-color: #070b10;
}

html::before,
html::after,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}

html::before {
  inset: -20% -15% 35% -15%;
  opacity: 0.85;
  background: radial-gradient(
    ellipse 75% 60% at 50% -5%,
    rgba(88, 130, 220, 0.22),
    transparent 58%
  );
  animation: ft-bg-glow-a 22s ease-in-out infinite alternate;
}

html::after {
  inset: -30%;
  opacity: 0.55;
  background: conic-gradient(
    from 210deg at 50% 50%,
    transparent 0deg,
    rgba(200, 255, 61, 0.06) 80deg,
    transparent 160deg,
    rgba(120, 180, 255, 0.07) 240deg,
    transparent 360deg
  );
  animation: ft-bg-sweep 48s linear infinite;
}

body::after {
  inset: -28%;
  opacity: 0.9;
  background:
    radial-gradient(circle at 18% 42%, rgba(200, 255, 61, 0.14), transparent 40%),
    radial-gradient(circle at 82% 18%, rgba(120, 180, 255, 0.12), transparent 42%),
    radial-gradient(circle at 58% 78%, rgba(200, 255, 61, 0.08), transparent 46%);
  animation: ft-bg-drift 28s ease-in-out infinite alternate;
}

body::before {
  animation: ft-bg-grid 42s linear infinite !important;
}

@keyframes ft-bg-glow-a {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.65;
  }
  100% {
    transform: translate3d(2%, 3%, 0) scale(1.08);
    opacity: 0.92;
  }
}

@keyframes ft-bg-drift {
  0% {
    transform: translate3d(-2%, 1%, 0) scale(1);
  }
  100% {
    transform: translate3d(3%, -2.5%, 0) scale(1.06);
  }
}

@keyframes ft-bg-sweep {
  0% {
    transform: rotate(0deg) scale(1.05);
  }
  100% {
    transform: rotate(360deg) scale(1.05);
  }
}

@keyframes ft-bg-grid {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 56px 56px, 56px 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html::before,
  html::after,
  body::after,
  body::before {
    animation: none !important;
    will-change: auto;
  }
}

@media (max-width: 640px) {
  html::before {
    opacity: 0.55;
    animation-duration: 30s;
  }

  body::after {
    opacity: 0.75;
    animation-duration: 34s;
  }

  html::after {
    opacity: 0.35;
    animation-duration: 60s;
  }

  body::before {
    opacity: 0.22 !important;
    display: block !important;
    animation-duration: 52s;
  }
}