/* ======================================================================
   Фон «Пролёт» — шесть планов глубины, привязанных к прокрутке.

   Настроен на заметность. Первая редакция была сделана «чтобы не мешать»
   и ушла в невидимость: фон читался как чуть более тёмная бумага. Здесь
   подняты яркость точки, плотность плитки и непрозрачность плана, а
   заливка секций и виньетка ослаблены — они гасили поле сильнее всего.

   Правило, по которому это собрано: одной разницы скоростей мало, она
   читается как скольжение слоя. Расстояние дают четыре признака сразу —
   скорость, размер точки, её мягкость и яркость. Дальнее мелкое, резкое
   и медленное; ближнее крупное, расфокусированное и быстрое.

   Ни канваса, ни filter: blur(). Размытие запечено в градиент точки,
   каждый план — повторяющаяся плитка: браузер растрирует её однажды и
   дальше только двигает трансформом. Версия на канвасе с фильтрами
   роняла прокрутку с 61 кадра в секунду до шести.
   ====================================================================== */

html {
  background: var(--paper);
}

/* На body висит .theme-original со своим фиксированным градиентом —
   специфичность выше, чем у голого body, поэтому целимся точно. */
body.theme-original {
  background: transparent;
}

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

/* Пять содержательных секций красит правило из template-sections.css
   со специфичностью (0,3,1) — повторяем его целиком, иначе не перебить. */
.theme-original main > .section,
.theme-original main > .section.services,
.theme-original main > .section.approach,
.theme-original main > .section.process,
.theme-original main > .section.about,
.theme-original main > .section.faq,
.theme-original .proof,
.theme-original .contact {
  background: transparent;
}

.theme-original main > .section::before {
  display: none;
}

/* Тёмная ступень tpl-секций занимает половину верха страницы. При 58%
   фон под ней читался вдвое слабее, чем внизу. Ступень остаётся, но
   пропускает. */
.tpl-section {
  background: color-mix(in srgb, var(--tpl-bg) 27%, transparent);
}

.theme-original .footer {
  background: color-mix(in srgb, var(--surface) 44%, transparent);
}

/* --- первый экран ------------------------------------------------------
   Раньше он стоял на глухой заливке, и фон обрывался ровно под ним: сверху
   тёмный прямоугольник, ниже поле с пылью. Теперь заливка снята, а рендер
   конструкции отделён от собственной чёрной подложки маской по яркости —
   пыль и туман видно и вокруг башни, и сквозь неё.

   Маска отдельным файлом, а не альфа-каналом внутри картинки: альфа в WebP
   стоила бы 476 КБ, отдельная восьмибитная маска — 80 КБ.
   mask-size: cover и mask-position повторяют object-fit картинки, иначе
   маска и кадр разъедутся при обрезке. */

.theme-original .hero,
.theme-original .hero-art,
.theme-original .system-map {
  background: transparent;
}

.theme-original .hero-art > img.system-image {
  -webkit-mask-image: url("assets/hero-tower-mask-lum-1600.webp?v=2");
          mask-image: url("assets/hero-tower-mask-lum-1600.webp?v=2");
  -webkit-mask-source-type: luminance;
          mask-mode: luminance;
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Кадрирование картинки меняется по брейкпойнтам — маска идёт следом. */
@media (max-width: 900px) {
  .theme-original .hero-art > img.system-image {
    -webkit-mask-position: 74% center;
            mask-position: 74% center;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .theme-original .hero-art > img.system-image {
    -webkit-mask-position: 80% center;
            mask-position: 80% center;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .theme-original .hero-art > img.system-image {
    -webkit-mask-position: 72% center;
            mask-position: 72% center;
  }
}

/* Интро-ролик убран из разметки: три секунды глухого кадра — ровно то, что
   ломало единство фона, ради которого всё затевалось. Заодно минус 585 КБ.
   Конструкция по-прежнему появляется мягко, через общий эффект .rise. */

/* --- слои ------------------------------------------------------------- */

.bgfx .haze {
  position: absolute;
}

.bgfx .dust {
  position: absolute;
  will-change: transform;
  backface-visibility: hidden;
}

.bgfx .haze {
  border-radius: 50%;
}

.bgfx .haze-a {
  top: -34vh;
  right: -16vw;
  width: 86vw;
  height: 86vw;
  background: radial-gradient(closest-side, rgba(52, 94, 148, .5), rgba(38, 72, 118, .22) 46%, transparent 72%);
}

.bgfx .haze-b {
  top: 18vh;
  left: -22vw;
  width: 74vw;
  height: 74vw;
  background: radial-gradient(closest-side, rgba(40, 78, 124, .46), rgba(30, 60, 100, .18) 48%, transparent 74%);
}

.bgfx .haze-c {
  bottom: -30vh;
  left: 34vw;
  width: 64vw;
  height: 64vw;
  background: radial-gradient(closest-side, rgba(44, 104, 132, .36), transparent 70%);
}

/* Пыль. Слои выступают за кадр на высоту своей плитки; сдвиг берётся по
   модулю плитки, поэтому край не выедет, сколько бы ни прокрутили. */

.bgfx .dust {
  right: 0;
  left: 0;
}

.bgfx .dust-far {
  top: -280px;
  bottom: -280px;
  opacity: .95;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23d6e8ff' stop-opacity='0.98'/%3E%3Cstop offset='0.28' stop-color='%237ab4ff' stop-opacity='0.51'/%3E%3Cstop offset='1' stop-color='%234b9dff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='235.2' cy='291.1' r='2.95' fill='url(%23g)'/%3E%3Ccircle cx='242.1' cy='264.1' r='2.44' fill='url(%23g)'/%3E%3Ccircle cx='96.0' cy='266.2' r='2.51' fill='url(%23g)'/%3E%3Ccircle cx='412.3' cy='48.9' r='2.01' fill='url(%23g)'/%3E%3Ccircle cx='47.1' cy='421.0' r='2.60' fill='url(%23g)'/%3E%3Ccircle cx='21.8' cy='510.7' r='3.01' fill='url(%23g)'/%3E%3Ccircle cx='340.0' cy='320.1' r='1.79' fill='url(%23g)'/%3E%3Ccircle cx='7.8' cy='274.8' r='1.65' fill='url(%23g)'/%3E%3Ccircle cx='98.9' cy='125.8' r='1.60' fill='url(%23g)'/%3E%3Ccircle cx='241.2' cy='229.1' r='2.83' fill='url(%23g)'/%3E%3Ccircle cx='269.9' cy='333.0' r='2.31' fill='url(%23g)'/%3E%3Ccircle cx='344.5' cy='237.8' r='1.98' fill='url(%23g)'/%3E%3Ccircle cx='-1.2' cy='-2.2' r='2.82' fill='url(%23g)'/%3E%3Ccircle cx='-1.2' cy='517.8' r='2.82' fill='url(%23g)'/%3E%3Ccircle cx='-1.2' cy='1037.8' r='2.82' fill='url(%23g)'/%3E%3Ccircle cx='518.8' cy='-2.2' r='2.82' fill='url(%23g)'/%3E%3Ccircle cx='518.8' cy='517.8' r='2.82' fill='url(%23g)'/%3E%3Ccircle cx='518.8' cy='1037.8' r='2.82' fill='url(%23g)'/%3E%3Ccircle cx='1038.8' cy='-2.2' r='2.82' fill='url(%23g)'/%3E%3Ccircle cx='1038.8' cy='517.8' r='2.82' fill='url(%23g)'/%3E%3Ccircle cx='1038.8' cy='1037.8' r='2.82' fill='url(%23g)'/%3E%3Ccircle cx='368.1' cy='163.9' r='1.90' fill='url(%23g)'/%3E%3Ccircle cx='150.3' cy='36.5' r='2.71' fill='url(%23g)'/%3E%3Ccircle cx='208.2' cy='440.2' r='2.14' fill='url(%23g)'/%3E%3Ccircle cx='498.2' cy='440.6' r='1.56' fill='url(%23g)'/%3E%3Ccircle cx='109.1' cy='473.3' r='2.27' fill='url(%23g)'/%3E%3Ccircle cx='509.8' cy='206.7' r='1.67' fill='url(%23g)'/%3E%3Ccircle cx='327.3' cy='404.8' r='1.96' fill='url(%23g)'/%3E%3Ccircle cx='45.3' cy='172.9' r='3.01' fill='url(%23g)'/%3E%3Ccircle cx='394.2' cy='61.4' r='1.93' fill='url(%23g)'/%3E%3Ccircle cx='52.5' cy='31.1' r='2.76' fill='url(%23g)'/%3E%3Ccircle cx='92.4' cy='290.8' r='2.23' fill='url(%23g)'/%3E%3Ccircle cx='99.2' cy='380.6' r='1.75' fill='url(%23g)'/%3E%3Ccircle cx='334.7' cy='60.6' r='2.19' fill='url(%23g)'/%3E%3Ccircle cx='110.7' cy='140.3' r='3.02' fill='url(%23g)'/%3E%3Ccircle cx='417.8' cy='158.2' r='2.89' fill='url(%23g)'/%3E%3Ccircle cx='109.6' cy='205.0' r='2.85' fill='url(%23g)'/%3E%3Ccircle cx='333.8' cy='52.2' r='3.05' fill='url(%23g)'/%3E%3Ccircle cx='110.9' cy='134.3' r='2.72' fill='url(%23g)'/%3E%3Ccircle cx='171.1' cy='154.1' r='1.67' fill='url(%23g)'/%3E%3Ccircle cx='46.9' cy='303.0' r='1.92' fill='url(%23g)'/%3E%3Ccircle cx='312.7' cy='193.3' r='2.24' fill='url(%23g)'/%3E%3Ccircle cx='498.8' cy='251.5' r='2.42' fill='url(%23g)'/%3E%3Ccircle cx='450.6' cy='95.1' r='1.79' fill='url(%23g)'/%3E%3Ccircle cx='472.4' cy='425.3' r='1.93' fill='url(%23g)'/%3E%3Ccircle cx='98.7' cy='384.5' r='2.98' fill='url(%23g)'/%3E%3Ccircle cx='102.2' cy='494.1' r='2.89' fill='url(%23g)'/%3E%3Ccircle cx='313.8' cy='219.2' r='1.71' fill='url(%23g)'/%3E%3Ccircle cx='20.1' cy='500.6' r='1.92' fill='url(%23g)'/%3E%3Ccircle cx='366.4' cy='133.6' r='2.80' fill='url(%23g)'/%3E%3Ccircle cx='310.2' cy='152.6' r='1.82' fill='url(%23g)'/%3E%3Ccircle cx='374.6' cy='35.8' r='1.90' fill='url(%23g)'/%3E%3Ccircle cx='290.9' cy='443.2' r='2.48' fill='url(%23g)'/%3E%3Ccircle cx='145.7' cy='477.0' r='1.86' fill='url(%23g)'/%3E%3C/svg%3E") repeat;
  background-size: 520px 520px;
  /* Стартовое положение. Дальше background.js пишет transform прямо сюда:
     запись переменных в общий контейнер .bgfx инвалидировала и слой .haze-a,
     а он во весь экран — отсюда была тысяча перерисовок за проход. */
  transform: translate3d(0, 0, 0);
}

.bgfx .dust-mid {
  top: -340px;
  bottom: -340px;
  opacity: .58;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='680' viewBox='0 0 680 680'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23d6e8ff' stop-opacity='0.86'/%3E%3Cstop offset='0.38' stop-color='%237ab4ff' stop-opacity='0.44'/%3E%3Cstop offset='1' stop-color='%234b9dff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='651.6' cy='95.5' r='5.05' fill='url(%23g)'/%3E%3Ccircle cx='-0.9' cy='125.3' r='5.52' fill='url(%23g)'/%3E%3Ccircle cx='679.1' cy='125.3' r='5.52' fill='url(%23g)'/%3E%3Ccircle cx='1359.1' cy='125.3' r='5.52' fill='url(%23g)'/%3E%3Ccircle cx='443.0' cy='235.0' r='9.21' fill='url(%23g)'/%3E%3Ccircle cx='157.6' cy='652.4' r='6.47' fill='url(%23g)'/%3E%3Ccircle cx='408.8' cy='633.8' r='8.23' fill='url(%23g)'/%3E%3Ccircle cx='628.2' cy='481.5' r='5.17' fill='url(%23g)'/%3E%3Ccircle cx='599.3' cy='400.9' r='6.43' fill='url(%23g)'/%3E%3Ccircle cx='129.3' cy='577.9' r='7.74' fill='url(%23g)'/%3E%3Ccircle cx='637.8' cy='526.3' r='9.55' fill='url(%23g)'/%3E%3Ccircle cx='385.1' cy='474.9' r='7.88' fill='url(%23g)'/%3E%3Ccircle cx='175.7' cy='650.6' r='6.44' fill='url(%23g)'/%3E%3Ccircle cx='531.2' cy='649.2' r='8.06' fill='url(%23g)'/%3E%3Ccircle cx='96.7' cy='561.2' r='8.14' fill='url(%23g)'/%3E%3Ccircle cx='125.8' cy='33.4' r='7.49' fill='url(%23g)'/%3E%3Ccircle cx='21.9' cy='629.1' r='7.37' fill='url(%23g)'/%3E%3Ccircle cx='351.8' cy='278.4' r='8.11' fill='url(%23g)'/%3E%3Ccircle cx='623.2' cy='209.0' r='6.73' fill='url(%23g)'/%3E%3Ccircle cx='396.2' cy='202.2' r='7.80' fill='url(%23g)'/%3E%3Ccircle cx='369.3' cy='294.8' r='8.17' fill='url(%23g)'/%3E%3Ccircle cx='359.2' cy='59.9' r='9.72' fill='url(%23g)'/%3E%3Ccircle cx='241.9' cy='293.6' r='6.87' fill='url(%23g)'/%3E%3Ccircle cx='632.1' cy='647.5' r='7.40' fill='url(%23g)'/%3E%3Ccircle cx='272.4' cy='65.7' r='9.23' fill='url(%23g)'/%3E%3Ccircle cx='116.5' cy='371.7' r='6.61' fill='url(%23g)'/%3E%3C/svg%3E") repeat;
  background-size: 680px 680px;
  transform: translate3d(0, 0, 0);
}

.bgfx .dust-near {
  top: -420px;
  bottom: -420px;
  opacity: .26;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='890' height='890' viewBox='0 0 890 890'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23d6e8ff' stop-opacity='0.67'/%3E%3Cstop offset='0.54' stop-color='%237ab4ff' stop-opacity='0.35'/%3E%3Cstop offset='1' stop-color='%234b9dff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='507.6' cy='562.7' r='45.53' fill='url(%23g)'/%3E%3Ccircle cx='246.8' cy='580.2' r='47.35' fill='url(%23g)'/%3E%3Ccircle cx='808.9' cy='166.0' r='41.46' fill='url(%23g)'/%3E%3Ccircle cx='549.2' cy='448.0' r='49.21' fill='url(%23g)'/%3E%3Ccircle cx='470.2' cy='396.3' r='48.65' fill='url(%23g)'/%3E%3Ccircle cx='565.7' cy='268.2' r='33.02' fill='url(%23g)'/%3E%3Ccircle cx='441.5' cy='-843.2' r='40.37' fill='url(%23g)'/%3E%3Ccircle cx='441.5' cy='46.8' r='40.37' fill='url(%23g)'/%3E%3Ccircle cx='441.5' cy='936.8' r='40.37' fill='url(%23g)'/%3E%3Ccircle cx='654.9' cy='379.3' r='46.26' fill='url(%23g)'/%3E%3Ccircle cx='825.9' cy='494.5' r='42.19' fill='url(%23g)'/%3E%3C/svg%3E") repeat;
  background-size: 890px 890px;
  transform: translate3d(0, 0, 0);
}

/* Зерно: плоская тёмная заливка полосит на реальных экранах. */
.bgfx .grain {
  position: absolute;
  inset: 0;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Края кадра чуть тише центра. Раньше виньетка съедала поле целиком. */
.bgfx::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 130% 105% at 52% 44%, transparent 56%, color-mix(in srgb, var(--paper) 56%, transparent) 100%);
}

@media (max-width: 760px) {
  /* На телефоне ближний план только шумит: точки крупные, экран узкий. */
  .bgfx .dust-near,
  .bgfx .haze-c {
    display: none;
  }

  .bgfx .dust-mid {
    opacity: .48;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bgfx .haze,
  .bgfx .dust {
    transform: none;
  }
}

/* --- атмосфера одним слоем -------------------------------------------
   Три тумана, зерно и виньетка были пятью полноэкранными полупрозрачными
   слоями; на ретине каждый такой слой — полный блендинг кадра. Теперь это
   одна статичная картинка из нескольких background-градиентов: рисуется
   один раз и просто кэшируется композитором. Движется только пыль. */
.bgfx .haze-a {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background:
    url("assets/grain-96.png") 0 0 / 96px 96px repeat,
    radial-gradient(circle 43vw at 73% 35%, rgba(52, 94, 148, .5), rgba(38, 72, 118, .22) 46%, transparent 72%),
    radial-gradient(circle 37vw at 15% 77%, rgba(40, 78, 124, .46), rgba(30, 60, 100, .18) 48%, transparent 74%),
    radial-gradient(circle 32vw at 66% 79%, rgba(44, 104, 132, .36), transparent 70%);
}

.bgfx .haze-b,
.bgfx .haze-c,
.bgfx .grain {
  display: none;
}

@media (max-width: 760px) {
  .bgfx .haze-a {
    background:
      url("assets/grain-96.png") 0 0 / 96px 96px repeat,
      radial-gradient(circle 60vw at 73% 30%, rgba(52, 94, 148, .5), rgba(38, 72, 118, .22) 46%, transparent 72%),
      radial-gradient(circle 52vw at 15% 78%, rgba(40, 78, 124, .46), rgba(30, 60, 100, .18) 48%, transparent 74%);
  }
}