/* Свечения главной без filter: blur().
 *
 * Зачем. Пять декоративных пятен были цветными кругами с filter: blur(138…250px). Под каждое
 * такое пятно браузер заводит буфер в видеопамяти, который больше самого круга примерно на
 * полтора радиуса размытия в каждую сторону: на экране айфона выходило ~209 МБ на все пятна.
 * Когда памяти не хватает, Safari выбрасывает уже отрисованные куски страницы - на iPhone 16
 * это выглядело как «при прокрутке всё пропадает», задержки нажатий и общая вязкость
 * (18.09.2026; на iPhone 14, 11 и Android запаса хватало).
 *
 * Что сделано. Тот же рисунок нарисован радиальным градиентом - он не требует ни буфера, ни
 * перерисовки при прокрутке.
 *
 * Как подобрана форма. НЕ по формуле: браузеры рисуют большие размытия упрощённо (сравнение
 * показало, что настоящий гаусс в центре вдвое ярче того, что рисует движок). Поэтому каждое
 * пятно отрисовано в браузере с тем же размером и радиусом, профиль прозрачности снят прямо
 * со снимка и перенесён в стопы градиента. Генератор: scratchpad/gen-glow-css2.mjs.
 *
 * Про размеры. Пятна заданы в rem, а корневой шрифт плавающий: 14px на телефоне, 15px на
 * планшете, 16px на большом экране. Радиус размытия был в пикселях, поэтому на каждой ширине
 * пятно расплывалось по-своему - отсюда свой профиль в медиазапросах. Вылет за коробку задан
 * в px (полтора радиуса) и от кегля не зависит.
 *
 * Откат: убрать подключение этого файла из src/pages/index.html.
 */

/* Голубое пятно первого экрана: круг 24rem, было blur(138px) */
body.home .hero__el { background-color: transparent; filter: none; will-change: auto; }
body.home .hero__el::before {
  content: ''; position: absolute; inset: -207px; border-radius: 50%; pointer-events: none;
  background-image: radial-gradient(circle closest-side,
    rgba(0, 200, 255, 0.324) 0%,
    rgba(0, 200, 255, 0.320) 10%,
    rgba(0, 200, 255, 0.303) 20%,
    rgba(0, 200, 255, 0.260) 30%,
    rgba(0, 200, 255, 0.216) 40%,
    rgba(0, 200, 255, 0.183) 50%,
    rgba(0, 200, 255, 0.138) 60%,
    rgba(0, 200, 255, 0.092) 70%,
    rgba(0, 200, 255, 0.054) 80%,
    rgba(0, 200, 255, 0.038) 90%,
    rgba(0, 200, 255, 0) 100%);
}

/* Фиолетовое пятно: круг 28rem, было blur(215px). Таких два - в #hero и в #vr-games. */
body.home .hero__el-two { background-color: transparent; filter: none; will-change: auto; }
body.home .hero__el-two::before {
  content: ''; position: absolute; inset: -323px; border-radius: 50%; pointer-events: none;
  background-image: radial-gradient(circle closest-side,
    rgba(183, 31, 255, 0.216) 0%,
    rgba(183, 31, 255, 0.211) 10%,
    rgba(183, 31, 255, 0.182) 20%,
    rgba(183, 31, 255, 0.166) 30%,
    rgba(183, 31, 255, 0.150) 40%,
    rgba(183, 31, 255, 0.111) 50%,
    rgba(183, 31, 255, 0.076) 60%,
    rgba(183, 31, 255, 0.058) 70%,
    rgba(183, 31, 255, 0.027) 80%,
    rgba(183, 31, 255, 0.016) 90%,
    rgba(183, 31, 255, 0) 100%);
}

/* Голубое пятно у космонавта: круг 24rem (17rem от 1023px и уже), было blur(138px) */
body.home #vr-games .zone__el-1::before {
  background-color: transparent; filter: none; will-change: auto;
  box-sizing: content-box; padding: 207px; margin: -207px;
  transform: translate(calc(-0.13 * 24rem), calc(-0.5 * 24rem));
  background-image: radial-gradient(circle closest-side,
    rgba(0, 200, 255, 0.324) 0%,
    rgba(0, 200, 255, 0.320) 10%,
    rgba(0, 200, 255, 0.303) 20%,
    rgba(0, 200, 255, 0.260) 30%,
    rgba(0, 200, 255, 0.216) 40%,
    rgba(0, 200, 255, 0.183) 50%,
    rgba(0, 200, 255, 0.138) 60%,
    rgba(0, 200, 255, 0.092) 70%,
    rgba(0, 200, 255, 0.054) 80%,
    rgba(0, 200, 255, 0.038) 90%,
    rgba(0, 200, 255, 0) 100%);
}

/* Фиолетовый овал внизу блока зон: 24×41rem, было blur(138px). На ≤1023px блок скрыт. */
body.home #vr-games .zone__el-3::before {
  background-color: transparent; filter: none; will-change: auto;
  box-sizing: content-box; padding: 207px; margin: -207px;
  transform: translate(calc(-0.13 * 24rem), calc(-0.8 * 41rem));
  background-image: radial-gradient(ellipse closest-side,
    rgba(183, 31, 255, 0.407) 0%,
    rgba(183, 31, 255, 0.392) 10%,
    rgba(183, 31, 255, 0.359) 20%,
    rgba(183, 31, 255, 0.322) 30%,
    rgba(183, 31, 255, 0.262) 40%,
    rgba(183, 31, 255, 0.216) 50%,
    rgba(183, 31, 255, 0.160) 60%,
    rgba(183, 31, 255, 0.099) 70%,
    rgba(183, 31, 255, 0.061) 80%,
    rgba(183, 31, 255, 0.024) 90%,
    rgba(183, 31, 255, 0) 100%);
}

/* Голубое пятно под девушкой: круг 21.5rem, было blur(250px) */
body.home #manager .manager__img::before {
  background-color: transparent; filter: none; will-change: auto;
  box-sizing: content-box; padding: 375px; margin: -375px;
  transform: translate(calc(-0.5 * 21.5rem), calc(0.1 * 21.5rem));
  background-image: radial-gradient(circle closest-side,
    rgba(0, 200, 255, 0.140) 0%,
    rgba(0, 200, 255, 0.140) 10%,
    rgba(0, 200, 255, 0.135) 20%,
    rgba(0, 200, 255, 0.108) 30%,
    rgba(0, 200, 255, 0.099) 40%,
    rgba(0, 200, 255, 0.089) 50%,
    rgba(0, 200, 255, 0.077) 60%,
    rgba(0, 200, 255, 0.048) 70%,
    rgba(0, 200, 255, 0.040) 80%,
    rgba(0, 200, 255, 0.031) 90%,
    rgba(0, 200, 255, 0) 100%);
}

/* 1rem = 15px: планшеты и ноутбуки */
@media screen and (max-width: 1365px) {
  body.home .hero__el::before { background-image: radial-gradient(circle closest-side,
    rgba(0, 200, 255, 0.307) 0%,
    rgba(0, 200, 255, 0.303) 10%,
    rgba(0, 200, 255, 0.271) 20%,
    rgba(0, 200, 255, 0.248) 30%,
    rgba(0, 200, 255, 0.205) 40%,
    rgba(0, 200, 255, 0.159) 50%,
    rgba(0, 200, 255, 0.131) 60%,
    rgba(0, 200, 255, 0.090) 70%,
    rgba(0, 200, 255, 0.051) 80%,
    rgba(0, 200, 255, 0.038) 90%,
    rgba(0, 200, 255, 0) 100%); }
  body.home .hero__el-two::before { background-image: radial-gradient(circle closest-side,
    rgba(183, 31, 255, 0.182) 0%,
    rgba(183, 31, 255, 0.178) 10%,
    rgba(183, 31, 255, 0.171) 20%,
    rgba(183, 31, 255, 0.157) 30%,
    rgba(183, 31, 255, 0.123) 40%,
    rgba(183, 31, 255, 0.090) 50%,
    rgba(183, 31, 255, 0.088) 60%,
    rgba(183, 31, 255, 0.055) 70%,
    rgba(183, 31, 255, 0.024) 80%,
    rgba(183, 31, 255, 0.014) 90%,
    rgba(183, 31, 255, 0) 100%); }
  body.home #vr-games .zone__el-1::before { background-image: radial-gradient(circle closest-side,
    rgba(0, 200, 255, 0.307) 0%,
    rgba(0, 200, 255, 0.303) 10%,
    rgba(0, 200, 255, 0.271) 20%,
    rgba(0, 200, 255, 0.248) 30%,
    rgba(0, 200, 255, 0.205) 40%,
    rgba(0, 200, 255, 0.159) 50%,
    rgba(0, 200, 255, 0.131) 60%,
    rgba(0, 200, 255, 0.090) 70%,
    rgba(0, 200, 255, 0.051) 80%,
    rgba(0, 200, 255, 0.038) 90%,
    rgba(0, 200, 255, 0) 100%); }
  body.home #vr-games .zone__el-3::before { background-image: radial-gradient(ellipse closest-side,
    rgba(183, 31, 255, 0.376) 0%,
    rgba(183, 31, 255, 0.370) 10%,
    rgba(183, 31, 255, 0.335) 20%,
    rgba(183, 31, 255, 0.310) 30%,
    rgba(183, 31, 255, 0.242) 40%,
    rgba(183, 31, 255, 0.197) 50%,
    rgba(183, 31, 255, 0.154) 60%,
    rgba(183, 31, 255, 0.086) 70%,
    rgba(183, 31, 255, 0.059) 80%,
    rgba(183, 31, 255, 0.024) 90%,
    rgba(183, 31, 255, 0) 100%); }
  body.home #manager .manager__img::before { background-image: radial-gradient(circle closest-side,
    rgba(0, 200, 255, 0.132) 0%,
    rgba(0, 200, 255, 0.130) 10%,
    rgba(0, 200, 255, 0.108) 20%,
    rgba(0, 200, 255, 0.100) 30%,
    rgba(0, 200, 255, 0.092) 40%,
    rgba(0, 200, 255, 0.083) 50%,
    rgba(0, 200, 255, 0.054) 60%,
    rgba(0, 200, 255, 0.045) 70%,
    rgba(0, 200, 255, 0.038) 80%,
    rgba(0, 200, 255, 0.030) 90%,
    rgba(0, 200, 255, 0) 100%); }
}

/* От 1023px пятно у космонавта уменьшается до 17rem - сдвиг и профиль пересчитаны */
@media screen and (max-width: 1023px) {
  body.home #vr-games .zone__el-1::before {
    transform: translate(calc(-0.13 * 17rem), calc(-0.5 * 17rem));
    background-image: radial-gradient(circle closest-side,
    rgba(0, 200, 255, 0.192) 0%,
    rgba(0, 200, 255, 0.189) 10%,
    rgba(0, 200, 255, 0.164) 20%,
    rgba(0, 200, 255, 0.151) 30%,
    rgba(0, 200, 255, 0.137) 40%,
    rgba(0, 200, 255, 0.101) 50%,
    rgba(0, 200, 255, 0.087) 60%,
    rgba(0, 200, 255, 0.054) 70%,
    rgba(0, 200, 255, 0.040) 80%,
    rgba(0, 200, 255, 0.033) 90%,
    rgba(0, 200, 255, 0) 100%);
  }
}

/* 1rem = 14px: телефоны */
@media screen and (max-width: 767px) {
  body.home .hero__el::before { background-image: radial-gradient(circle closest-side,
    rgba(0, 200, 255, 0.271) 0%,
    rgba(0, 200, 255, 0.268) 10%,
    rgba(0, 200, 255, 0.256) 20%,
    rgba(0, 200, 255, 0.217) 30%,
    rgba(0, 200, 255, 0.192) 40%,
    rgba(0, 200, 255, 0.150) 50%,
    rgba(0, 200, 255, 0.105) 60%,
    rgba(0, 200, 255, 0.086) 70%,
    rgba(0, 200, 255, 0.049) 80%,
    rgba(0, 200, 255, 0.036) 90%,
    rgba(0, 200, 255, 0) 100%); }
  body.home .hero__el-two::before { background-image: radial-gradient(circle closest-side,
    rgba(183, 31, 255, 0.167) 0%,
    rgba(183, 31, 255, 0.146) 10%,
    rgba(183, 31, 255, 0.157) 20%,
    rgba(183, 31, 255, 0.141) 30%,
    rgba(183, 31, 255, 0.114) 40%,
    rgba(183, 31, 255, 0.081) 50%,
    rgba(183, 31, 255, 0.066) 60%,
    rgba(183, 31, 255, 0.054) 70%,
    rgba(183, 31, 255, 0.023) 80%,
    rgba(183, 31, 255, 0.014) 90%,
    rgba(183, 31, 255, 0) 100%); }
  body.home #vr-games .zone__el-1::before { background-image: radial-gradient(circle closest-side,
    rgba(0, 200, 255, 0.161) 0%,
    rgba(0, 200, 255, 0.159) 10%,
    rgba(0, 200, 255, 0.151) 20%,
    rgba(0, 200, 255, 0.141) 30%,
    rgba(0, 200, 255, 0.118) 40%,
    rgba(0, 200, 255, 0.095) 50%,
    rgba(0, 200, 255, 0.083) 60%,
    rgba(0, 200, 255, 0.051) 70%,
    rgba(0, 200, 255, 0.040) 80%,
    rgba(0, 200, 255, 0.032) 90%,
    rgba(0, 200, 255, 0) 100%); }
  body.home #manager .manager__img::before { background-image: radial-gradient(circle closest-side,
    rgba(0, 200, 255, 0.104) 0%,
    rgba(0, 200, 255, 0.102) 10%,
    rgba(0, 200, 255, 0.099) 20%,
    rgba(0, 200, 255, 0.092) 30%,
    rgba(0, 200, 255, 0.086) 40%,
    rgba(0, 200, 255, 0.079) 50%,
    rgba(0, 200, 255, 0.051) 60%,
    rgba(0, 200, 255, 0.043) 70%,
    rgba(0, 200, 255, 0.036) 80%,
    rgba(0, 200, 255, 0.030) 90%,
    rgba(0, 200, 255, 0) 100%); }
}

/* На узких телефонах (≤499px) картинка девушки скрыта, и пятном работает сам блок */
@media screen and (max-width: 499px) {
  body.home #manager .manager__img { background-color: transparent; filter: none; will-change: auto; }
  body.home #manager .manager__img::after {
    content: ''; position: absolute; inset: -375px; border-radius: 50%; pointer-events: none; z-index: 0;
    background-image: radial-gradient(circle closest-side,
    rgba(0, 200, 255, 0.104) 0%,
    rgba(0, 200, 255, 0.102) 10%,
    rgba(0, 200, 255, 0.099) 20%,
    rgba(0, 200, 255, 0.092) 30%,
    rgba(0, 200, 255, 0.086) 40%,
    rgba(0, 200, 255, 0.079) 50%,
    rgba(0, 200, 255, 0.051) 60%,
    rgba(0, 200, 255, 0.043) 70%,
    rgba(0, 200, 255, 0.036) 80%,
    rgba(0, 200, 255, 0.030) 90%,
    rgba(0, 200, 255, 0) 100%);
  }
}