/* ============================================================
   site.10-hero-bg.css — живой декоративный фон «аврора»

   Отдельный слой под контентом (z-index:0, .page-shell — z-index:1),
   не перехватывает клики. Мягко перетекающие «закатные» пятна в
   бренд-родственной гамме. Аккуратно к производительности, обеим
   темам и prefers-reduced-motion.
   ============================================================ */

.site-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Фото-фон на этом же фиксированном слое. Поскольку .site-bg — position:fixed,
   картинка ведёт себя как «прибитая» к вьюпорту без background-attachment: fixed
   (который ломается на мобильных). Вуаль сверху сохраняет читаемость текста. */
html[data-theme="light"] .site-bg {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(245, 247, 251, 0.55), rgba(245, 247, 251, 0.66)),
    url("/static/img/bg/bg-light.webp?v=hq");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

html[data-theme="dark"] .site-bg {
  background-color: #0d0e13;
  background-image:
    linear-gradient(rgba(9, 12, 18, 0.6), rgba(9, 12, 18, 0.72)),
    url("/static/img/bg/bg-dark.webp?v=hq");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.site-bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(46% 50% at 18% 20%, rgba(45, 212, 191, 0.15), transparent 60%),
    radial-gradient(46% 50% at 82% 82%, rgba(251, 191, 36, 0.06), transparent 60%),
    radial-gradient(38% 42% at 70% 26%, rgba(45, 212, 191, 0.09), transparent 62%);
  filter: blur(60px);
  animation: bgAuroraDrift 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes bgAuroraDrift {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1.05) rotate(0deg); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.12) rotate(4deg); }
  100% { transform: translate3d(5%, -3%, 0) scale(1.08) rotate(-3deg); }
}

html[data-theme="light"] .site-bg::before {
  background:
    radial-gradient(46% 50% at 18% 20%, rgba(20, 184, 166, 0.1), transparent 60%),
    radial-gradient(46% 50% at 82% 82%, rgba(217, 119, 6, 0.05), transparent 60%),
    radial-gradient(38% 42% at 70% 26%, rgba(20, 184, 166, 0.06), transparent 62%);
}

@media (max-width: 991.98px) {
  .site-bg::before {
    filter: blur(45px);
    opacity: 0.82;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-bg::before {
    animation: none !important;
  }
}