/* SurfingVPN — фоновая система: палитра слоёв и раскладка.
 *
 * Здесь только фон. Токены интерфейса (кнопки, текст, карточки) живут в
 * tokens/colors.css и этим файлом не трогаются — иначе смена настроения фона
 * тянула бы за собой весь интерфейс.
 *
 * Тёмная и светлая темы — ДВЕ РАЗНЫЕ палитры, а не инверсия одной. Светлую
 * нельзя получить из тёмной через filter: brightness(): на белом фоне те же
 * линии либо исчезают, либо становятся грязными, поэтому у неё свои цвета и
 * своя (заметно меньшая) насыщенность декора.
 *
 * Композиция (z-index внутри .bgfx):
 *     0  градиент фона  — этот файл, .bgfx::before / ::after
 *     1  волны сзади    — waves.js
 *     2  геометрия      — geometry.js
 *     3  планета        — planet.js (единственный canvas на странице)
 *     4  дуги планеты   — planet.js
 *     5  волны спереди и сигналы — waves.js
 *     10+ интерфейс
 */

/* ── Тёмная тема (основная) ─────────────────────────────────────────────── */
.bgfx,
html.theme-dark .bgfx {
  /* Цвета взяты из Surfing_VPN_Design_System.md §3.1 и §4, а не подобраны на
     глаз. Оттуда же главное требование к центру кадра: «не должен уходить в
     почти чёрный, должен оставаться глубоким, но luminous» — поэтому база это
     насыщенный navy, а не почти чёрный, как было до 18.09.2026. */
  --bgfx-base:        #07143C;   /* между bg-deep и bg-main, ближе к deep */
  --bgfx-base-top:    #0C2060;
  --bgfx-base-bottom: #060F33;
  --bgfx-base-indigo: #202B75;
  --bgfx-base-violet: #34205C;

  /* Ход тона одной заливкой на весь холст (Design System §4):
     electric blue → cobalt/indigo → violet → coral. Держим в переменной, чтобы
     светлая тема могла подменить его целиком, а не наследовать тёмные стопы. */
  --bgfx-ramp:
    linear-gradient(to bottom,
      rgba(10, 26, 78, 0.30) 0%,
      rgba(5, 12, 40, 0.00) 40%,
      rgba(2, 5, 20, 0.78) 100%),
    linear-gradient(101deg,
      #0C2A76 0%,
      #0A1F5A 18%,
      #071540 36%,
      #050F2C 52%,
      #060D26 68%,
      #0A0C20 84%,
      #100E1A 100%);

  /* Свечения. Ход тона по ТЗ: electric blue → cobalt/indigo → violet →
     coral/orange. Ядра всех трёх полей вынесены ЗА пределы кадра (см. ниже),
     поэтому здесь задана только их сила. */
  --bgfx-glow-blue:      rgba(63, 140, 255, 0.30);   /* dark-glow-blue */
  --bgfx-glow-blue-soft: rgba(108, 182, 255, 0.10);  /* dark-glow-blue-soft */
  --bgfx-glow-violet:    rgba(90, 60, 143, 0.10);    /* dark-glow-violet */
  --bgfx-glow-coral:     rgba(255, 122, 79, 0.44);   /* dark-glow-coral */
  --bgfx-glow-orange:    rgba(255, 150, 80, 0.22);   /* dark-glow-orange */

  /* Линии: тонкие, полупрозрачные, цвет зависит от части экрана.
     Непрозрачность 0.14–0.30 — как требует §6 дизайн-системы. */
  --bgfx-line-blue:   #5b8dfb;
  --bgfx-line-violet: #8b7fe8;
  --bgfx-line-coral:  #ff8a5c;
  --bgfx-line-opacity: 0.22;
  --bgfx-line-width:  0.9px;

  /* Геометрия — дальний план, почти незаметна. */
  --bgfx-geo-stroke:  #ff8a5c;
  --bgfx-geo-stroke-alt: #5b8dfb;
  --bgfx-geo-opacity: 0.14;

  /* Сигналы: ядро почти белое, ореол цвета участка. */
  --bgfx-signal-core:   #ffffff;
  --bgfx-signal-blue:   #7db0ff;
  --bgfx-signal-violet: #a99bff;
  --bgfx-signal-coral:  #ffa774;

  /* Дуги на планете и её атмосфера. */
  --bgfx-arc-from:    #3F8CFF;
  --bgfx-arc-to:      #FF7A4F;
  --bgfx-planet-glow: #6CB6FF;
  --bgfx-planet-shadow: rgba(4, 8, 22, 0.75);

  /* Плотность зерна поверх градиента: убирает банды на больших заливках. */
  --bgfx-noise: 0.05;
}

/* ── Светлая тема ───────────────────────────────────────────────────────── */
/* Не инверсия тёмной, а та же цепочка тона на светлой базе (§3.2 и §4):
   pale blue слева, soft lavender в центре, peach справа. */
html.theme-light .bgfx {
  --bgfx-base:        #F8FAFF;
  --bgfx-base-top:    #FFFFFF;
  --bgfx-base-bottom: #F3F6FD;
  --bgfx-base-indigo: #EAF3FF;
  --bgfx-base-violet: #F1ECFF;

  --bgfx-ramp:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(243, 246, 253, 0.00) 42%,
      rgba(226, 236, 252, 0.55) 100%),
    linear-gradient(101deg,
      #E6F1FF 0%,
      #EDF3FF 20%,
      #F5F8FF 42%,
      #F2EDFF 60%,
      #F9EEF6 78%,
      #FFF0EA 100%);

  --bgfx-glow-blue:      rgba(78, 149, 255, 0.24);
  --bgfx-glow-blue-soft: rgba(107, 184, 255, 0.18);
  --bgfx-glow-violet:    rgba(124, 93, 190, 0.14);
  --bgfx-glow-coral:     rgba(255, 122, 79, 0.20);
  --bgfx-glow-orange:    rgba(255, 155, 84, 0.16);

  /* На белом тонкая светлая линия исчезает — берём те же оттенки, но темнее
     и плотнее по цвету, а прозрачность, наоборот, ниже (§6: 0.06–0.14). */
  --bgfx-line-blue:   #3f74d8;
  --bgfx-line-violet: #6f62c8;
  --bgfx-line-coral:  #ef6a36;
  --bgfx-line-opacity: 0.13;
  --bgfx-line-width:  1px;

  --bgfx-geo-stroke:  #ef6a36;
  --bgfx-geo-stroke-alt: #3f74d8;
  --bgfx-geo-opacity: 0.10;

  --bgfx-signal-core:   #ffffff;
  --bgfx-signal-blue:   #3f74d8;
  --bgfx-signal-violet: #6f62c8;
  --bgfx-signal-coral:  #ef6a36;

  --bgfx-arc-from:    #3f74d8;
  --bgfx-arc-to:      #ef6a36;
  --bgfx-planet-glow: #8fbaff;
  --bgfx-planet-shadow: rgba(120, 140, 180, 0.28);

  --bgfx-noise: 0.02;
}

/* ── Контейнер и слои ───────────────────────────────────────────────────── */
.bgfx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background-color: var(--bgfx-base);
  /* Ход тона задан ОДНОЙ заливкой на весь холст, а не набором пятен. Так было
     не всегда: до 18.09.2026 фон собирался из трёх радиальных пятен, и между
     левым синим и правым коралловым оставалась тёмная колонна — владелец
     прочитал её как вертикальный шов посреди кадра. Линейный градиент не имеет
     ни центра, ни края, поэтому швов у него не бывает по построению, а пятна
     ниже только добавляют объём поверх него.
     Порядок слоёв: сверху вертикальная глубина, под ней горизонтальный ход
     electric blue → cobalt/indigo → violet → coral (Design System §4). */
  background-image: var(--bgfx-ramp);
  /* Контент страницы должен ощущаться внутри одной атмосферы, поэтому слой
     фиксированный: при прокрутке он не уезжает и стыков между секциями нет. */
  contain: strict;
}

/* Цветовые поля. Раньше это были радиальные пятна со screen-смешиванием, то
   есть «источники света»: у каждого читались ядро и край, а вместе они
   разбеливали центр кадра. Владелец назвал это засветами и бледностью.
   Теперь каждый слой — ЛИНЕЙНОЕ поле во весь холст с обычным наложением: у
   линейного градиента нет ни центра, ни края, а обычная альфа поверх плотной
   базы сохраняет насыщенность (screen, наоборот, тянет всё к белому).
   Слоями, а не одной заливкой: слой можно дёшево «дышать» трансформацией на
   композиторе, не пересчитывая всю заливку каждый кадр. */
.bgfx-amb {
  position: absolute;
  inset: -10%;                  /* запас под сдвиг: края не должны обнажаться */
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Слева — насыщенный кобальт (не cyan): плотный у самого края и полностью
   сходящий на нет к середине кадра. */
.bgfx-amb-blue {
  background: linear-gradient(100deg,
    rgba(22, 92, 255, 0.80) 0%,
    rgba(16, 66, 210, 0.48) 14%,
    rgba(11, 44, 150, 0.24) 32%,
    rgba(9, 30, 100, 0.10) 44%,
    rgba(8, 24, 80, 0.00) 58%);
  animation: bgfx-amb-a 34s ease-in-out infinite alternate;
}

/* Мост между сторонами — приглушённый фиолет, только чтобы синее и тёплое не
   встречались стыком. Намеренно слабый: в референсе никакой сиреневой дымки
   нет, есть лишь переход. */
.bgfx-amb-violet {
  background: linear-gradient(100deg,
    rgba(58, 42, 108, 0.00) 52%,
    rgba(58, 42, 108, 0.18) 72%,
    rgba(58, 42, 108, 0.00) 92%);
  animation: bgfx-amb-b 27s ease-in-out infinite alternate;
}

/* Справа — тёплый коралл у самого края, плотный и узкий. */
.bgfx-amb-coral {
  background: linear-gradient(100deg,
    rgba(120, 40, 26, 0.00) 64%,
    rgba(160, 56, 30, 0.30) 80%,
    rgba(210, 82, 36, 0.62) 93%,
    rgba(238, 108, 48, 0.80) 100%);
  animation: bgfx-amb-c 41s ease-in-out infinite alternate;
}

/* Дыхание — только прозрачностью и едва заметным сдвигом. Пятен не видно по
   построению, поэтому и «плывущего пятна» здесь быть не может (§5). */
@keyframes bgfx-amb-a {
  from { transform: translate3d(0, 0, 0); opacity: 0.90; }
  to   { transform: translate3d(1.5%, -1%, 0); opacity: 1; }
}

@keyframes bgfx-amb-b {
  from { transform: translate3d(0, 0, 0); opacity: 0.75; }
  to   { transform: translate3d(-1.5%, 1%, 0); opacity: 1; }
}

@keyframes bgfx-amb-c {
  from { transform: translate3d(0, 0, 0); opacity: 1; }
  to   { transform: translate3d(-1.5%, 0.8%, 0); opacity: 0.88; }
}
}
}

.bgfx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}

.bgfx-layer svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Планета — единственный canvas. Маски здесь больше нет: растворение низа
   делает шейдер (planet.js, FADE_LOW/FADE_HIGH). Причина: css-маска режет ВЕСЬ
   слой одной прямой — вместе с ореолом атмосферы и дугами, и граница была
   видна; шейдер гасит каждый элемент сцены своей кривой. */
.bgfx-planet canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Слои появляются мягко: без этого на первом кадре видно, как сцена собирается. */
.bgfx-layer {
  opacity: 0;
  transition: opacity 1.1s ease;
}

.bgfx-ready .bgfx-layer {
  opacity: 1;
}

/* Линии и сигналы */
.bgfx-line {
  fill: none;
  stroke-width: var(--bgfx-line-width);
  stroke-linecap: round;
  opacity: var(--bgfx-line-opacity);
}

.bgfx-signal-core {
  fill: var(--bgfx-signal-core);
}

.bgfx-signal-halo {
  opacity: 0.55;
}

.bgfx-signal-trail {
  fill: none;
  stroke-linecap: round;
  opacity: 0.5;
}

/* Геометрия */
.bgfx-geo {
  fill: none;
  stroke: var(--bgfx-geo-stroke);
  stroke-width: 1;
  opacity: var(--bgfx-geo-opacity);
}

.bgfx-geo-alt {
  stroke: var(--bgfx-geo-stroke-alt);
}

/* Зерно поверх заливки: большие радиальные градиенты на дешёвых матрицах
   полосят, а лёгкий шум это скрывает. */
.bgfx-grain {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: var(--bgfx-noise);
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter>\
<rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}

/* ── Размеры экрана ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  /* Планшет: мост тише — на узком экране он лезет под текст. */
  .bgfx-amb-violet { opacity: 0.6; }
}

@media (max-width: 700px) {
  /* Телефон: главное — свободное место под текстом, поэтому свет прижат к
     краям. Зерно не рисуем совсем: на мелком экране его не видно, а
     полноэкранный слой с blend-mode стоит кадров. */
  .bgfx-amb-blue { background: linear-gradient(104deg,
    rgba(16, 74, 226, 0.52) 0%, rgba(11, 44, 148, 0.24) 22%, rgba(8, 24, 80, 0.00) 52%); }
  .bgfx-amb-coral { background: linear-gradient(104deg,
    rgba(120, 40, 26, 0.00) 58%, rgba(178, 66, 32, 0.34) 80%, rgba(220, 92, 42, 0.52) 100%); }
  .bgfx-amb-violet { opacity: 0.5; }
  .bgfx-grain { display: none; }
}

/* ── Меньше движения ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Оркестратор не запускает цикл, слои рисуют статичную сцену. Здесь только
     гасим переходы, чтобы ничего не «наезжало» при загрузке. */
  .bgfx-layer {
    transition: none;
    opacity: 1;
  }
  .bgfx-amb {
    animation: none;
  }
}