/* ===========================================================================
   Фон сайта «Напарник» — золотой, лёгкий.
   Замена старого синего starfield + тяжёлого анимированного backdrop-filter
   (blur/brightness/hue-rotate вешал GPU). Теперь: два слоя дрейфующих
   золотых частиц (parallax) + статичное золотое свечение для глубины.
   Уважает prefers-reduced-motion.
   =========================================================================== */

/* базовая заливка — на случай если слои не прогрузились */
html { background-color: #090a0f; }

/* --- слой 1: мелкие дальние частицы, медленный дрейф вверх ---
   Раньше был один background-image из 10 отдельных radial-gradient() —
   при масштабе страницы, отличном от 100% (Ctrl+- / Ctrl++), браузер
   округляет позицию/размер каждого градиента в device-пиксели независимо,
   и на стыке тайла (320×760, repeat) они начинают "гулять" относительно
   друг друга — визуально звёзды выглядят хаотично раскиданными вместо
   ровного повторяющегося паттерна. Один SVG-тайл вместо десяти градиентов
   убирает саму возможность такого рассинхрона — браузеру больше нечего
   округлять по отдельности, тайл either целый, либо целый. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: #090a0f;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='760'%3E%3Ccircle%20cx='40'%20cy='60'%20r='.9'%20fill='rgba(200,204,223,.55)'/%3E%3Ccircle%20cx='130'%20cy='200'%20r='.6'%20fill='rgba(200,204,223,.28)'/%3E%3Ccircle%20cx='220'%20cy='120'%20r='.9'%20fill='rgba(200,204,223,.55)'/%3E%3Ccircle%20cx='290'%20cy='300'%20r='.6'%20fill='rgba(200,204,223,.28)'/%3E%3Ccircle%20cx='90'%20cy='360'%20r='.9'%20fill='rgba(200,204,223,.55)'/%3E%3Ccircle%20cx='180'%20cy='440'%20r='.6'%20fill='rgba(200,204,223,.28)'/%3E%3Ccircle%20cx='30'%20cy='520'%20r='.9'%20fill='rgba(200,204,223,.55)'/%3E%3Ccircle%20cx='250'%20cy='560'%20r='.6'%20fill='rgba(200,204,223,.28)'/%3E%3Ccircle%20cx='150'%20cy='620'%20r='.9'%20fill='rgba(200,204,223,.55)'/%3E%3Ccircle%20cx='60'%20cy='700'%20r='.6'%20fill='rgba(200,204,223,.28)'/%3E%3C/svg%3E");
  background-size: 320px 760px;
  background-repeat: repeat;
  animation: bg-drift-slow 180s linear infinite;
}

/* --- слой 2: частицы ближе/крупнее, дрейф чуть быстрее (parallax) ---
   Та же проблема, что и в слое 1, плюс своя: слой 1 и слой 2 раньше
   тайлились с РАЗНЫМИ периодами (320×760 и 360×900) — при неточном
   масштабе округление сдвигало каждый слой на разную дробную величину,
   и получался муар (визуальные биения между двумя решётками с близкой,
   но не кратной частотой) — та самая "багающаяся" картина при отдалении.
   Статичные золотые свечения (без повтора) остаются градиентами как были,
   искры вынесены в тот же однотайловый SVG-приём, что и в слое 1. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 90% 55% at 50% 108%, rgba(199, 155, 71, .10), #0000 70%),
    radial-gradient(ellipse 70% 40% at 50% -8%,  rgba(27, 39, 53, .55),  #0000 65%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='360'%20height='900'%3E%3Ccircle%20cx='70'%20cy='140'%20r='1'%20fill='rgba(232,185,106,.6)'/%3E%3Ccircle%20cx='240'%20cy='380'%20r='1'%20fill='rgba(232,185,106,.6)'/%3E%3Ccircle%20cx='120'%20cy='640'%20r='1'%20fill='rgba(232,185,106,.6)'/%3E%3Ccircle%20cx='300'%20cy='820'%20r='1'%20fill='rgba(232,185,106,.6)'/%3E%3C/svg%3E");
  background-size: auto, auto, 360px 900px;
  background-repeat: no-repeat, no-repeat, repeat;
  animation: bg-drift-fast 110s linear infinite;
}

@keyframes bg-drift-slow {
  from { background-position: 0 0; }
  to   { background-position: 0 -760px; }   /* вверх на один тайл */
}

@keyframes bg-drift-fast {
  /* первые два градиента (свечение) — фиксированы, дрейфует только SVG-тайл с искрами */
  from { background-position: 50% 108%, 50% -8%, 0 0; }
  to   { background-position: 50% 108%, 50% -8%, 0 -900px; }
}

/* доступность: полностью гасим движение фона */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none; }
}