/* ============================================================
 * Жидкое стекло, свечение и глубина. 23.08.2026.
 *
 * Приёмы взяты у референса motionsites.ai: полупрозрачные панели
 * с размытием фона, светлая кромка сверху и снизу, свечение текста
 * и кнопок, полноэкранный первый экран, глубина при прокрутке.
 *
 * Шрифты и цвета остались наши: синий CooperVPN на тёмном. Свечение
 * тоже синее, а не белое — иначе сайт уезжает в спа-салон.
 *
 * Файл подключается последним. Откат — убрать одну строку из index.html.
 * ============================================================ */

/* --- Стеклянная панель ---
   Кромка рисуется псевдоэлементом: градиент по краю, вырезанный маской.
   Так свет ложится сверху и снизу, как на настоящем стекле, а не ровной
   рамкой по периметру. */
.bento-card,
.plan,
.faq-item,
.location-chip {
  position: relative;
  /* Тёмное стекло, а не светлое: фон под карточками теперь живой и яркий,
     и на прозрачной подложке текст читался бы по бегущей планете. */
  background: rgba(10, 15, 26, 0.52);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 24px 60px -40px rgba(0, 0, 0, 0.9);
}

.bento-card::before,
.plan::before,
.faq-item::before,
.location-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.14) 22%,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0) 58%,
    rgba(255, 255, 255, 0.14) 80%,
    rgba(255, 255, 255, 0.42) 100%
  );
  /* Порядок важен: сокращённое `mask` сбрасывает `mask-composite`,
     поэтому composite объявляется ПОСЛЕ него, а не до. */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* Содержимое — поверх кромки.
   Плашку «Выгоднее всего» исключаем: она висит на верхнем крае карточки
   через position: absolute, и общее правило сбивало её внутрь. */
.bento-card > *,
.plan > *:not(.plan__badge),
.faq-item > * {
  position: relative;
  z-index: 1;
}

.plan__badge {
  z-index: 2;
}

/* Выгодный тариф: то же стекло, но подсвечено акцентом. */
.plan--featured {
  background:
    linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.24), rgba(var(--color-accent-rgb), 0.1)),
    linear-gradient(rgba(10, 15, 26, 0.5), rgba(10, 15, 26, 0.5));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 24px 60px -34px rgba(var(--color-accent-rgb), 0.6);
}

.bento-card:hover {
  background: rgba(10, 15, 26, 0.44);
}

/* --- Свечение --- */
.hero__title {
  text-shadow:
    /* Тёмная подложка первым слоем: кадр стал ярче, и белые буквы на светлом
       крае планеты теряли контур. Свечение живёт слоями ниже. */
    0 2px 6px rgba(10, 15, 26, 0.9),
    0 0 40px rgba(255, 194, 77, 0.32),
    0 0 90px rgba(245, 165, 36, 0.18),
    0 0 140px rgba(240, 138, 28, 0.1);
}

.btn--primary {
  box-shadow:
    0 0 20px rgba(var(--color-accent-rgb), 0.38),
    0 0 46px rgba(var(--color-accent-rgb), 0.16);
}

.btn--primary:hover {
  box-shadow:
    0 0 26px rgba(var(--color-accent-rgb), 0.55),
    0 0 62px rgba(var(--color-accent-rgb), 0.24);
}

/* --- Слои страницы ---
   Содержимое идёт поверх закреплённого фона. Шапка — ещё выше: при равном
   слое первый экран накрывал её, и она просто пропадала. */
main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* --- Шапка ---
   Плавающая, а не в потоке: иначе под ней оказывается пустота, а не кадр. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  /* Не полоса, а мягкая тень: сверху притемняет, книзу тает. Ссылки читаются
     на любом кадре, при этом у шапки нет границы и она не «появляется»
     при прокрутке — раньше именно это и раздражало. */
  background: linear-gradient(
    to bottom,
    rgba(10, 15, 26, 0.95) 0%,
    rgba(10, 15, 26, 0.82) 45%,
    rgba(10, 15, 26, 0.3) 78%,
    rgba(10, 15, 26, 0) 100%
  );
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Открытое мобильное меню — на плотной подложке, иначе ссылки лягут на кадр. */
.site-header:has(.nav.is-open) {
  background: rgba(10, 15, 26, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* --- Полноэкранный первый экран ---
   100svh, а не 100vh: на телефоне vh считает высоту вместе с адресной
   строкой, и низ экрана уезжает под неё. */
.hero {
  position: relative;
  min-height: 100svh;
  /* Шапка плавает поверх, поэтому содержимое отодвигаем от неё вручную. */
  padding-top: 72px;
  display: grid;
  align-items: center;
}

/* Якорные ссылки (#pricing и другие) не должны уводить заголовок под шапку. */
html {
  scroll-padding-top: 88px;
}

/* --- Живой фон ВСЕЙ страницы ---
 * Раньше свет жил только на первом экране: пролистал — и дальше чёрная
 * пустота, а стеклянные карточки стояли не на чем. Теперь слой закреплён
 * за окном и виден под всей страницей, поэтому стекло всюду имеет что
 * преломлять, а границы между секциями исчезли.
 *
 * Почему не видео на всю страницу: ролик пришлось бы держать в памяти всё
 * время прокрутки. Здесь — 4 КБ кода и один маленький холст.
 */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* На телефоне при прокрутке прячется адресная строка, и высота окна скачком
     меняется. Слой был привязан к текущей высоте — планета в этот момент
     рывком увеличивалась. `lvh` — высота окна БЕЗ адресной строки, она
     постоянна, поэтому кадр стоит неподвижно. `inset: 0` выше остаётся
     запасным вариантом для браузеров, которые lvh не знают.
     Так же сделано в кабинете. */
  height: 100lvh;
  bottom: auto;
}

.page-flow {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Холст рисуется крошечным и растягивается: размытие всё равно съедает
     детали, зато считать почти нечего. */
  filter: blur(72px) saturate(125%);
  opacity: 0.72;
}

/* Ролик закреплён за окном — страница едет поверх него. Появляется плавно,
   иначе на месте фона моргает чёрный прямоугольник. */
.page-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
  filter: saturate(1.16) contrast(1.1) brightness(1.12);
}

.page-video.is-ready {
  opacity: 1;
}

/* Вуаль поверх видео. Наверху почти прозрачная — кадр во всю силу.
   Ниже густеет, иначе текст пришлось бы читать по бегущим облакам.
   Плотность задаёт скрипт при прокрутке. */
.page-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    /* Тёплый тон вместо синего: он поддерживает огни городов, а не гасит их.
       Держим еле заметным — на 0.08 кадр становился блёклым. Живёт здесь, а не
       на первом экране: там он обрывался на границе секции и давал шов. */
    linear-gradient(rgba(255, 170, 60, 0.025), rgba(255, 170, 60, 0.025)),
    /* Плотность одна на всю страницу: раньше она росла при прокрутке, и
       планета внизу выглядела тусклее, чем на первом экране. */
    linear-gradient(rgb(10 15 26 / 0.3), rgb(10 15 26 / 0.3));
}

/* Зерно. Убирает полосы на градиентах и даёт плёночную фактуру —
   без него большие размытые заливки выглядят дёшево. */
.page-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
  /* На телефоне размытие подложки убрано.
   *
   * Размытие живого фона — самая дорогая операция для телефона, а таких
   * элементов на странице 27. Поверх играющего видео это давало рывки при
   * прокрутке: содержимое как будто подгружалось с опозданием. Взамен делаем
   * подложку плотнее — на глаз разница почти незаметна, а прокрутка ровная.
   *
   * На планшете и шире размытие остаётся: там мощности хватает.
   */
  .bento-card,
  .plan,
  .faq-item,
  .location-chip {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10, 15, 26, 0.72);
  }

  .plan--featured {
    background:
      linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.24), rgba(var(--color-accent-rgb), 0.1)),
      linear-gradient(rgba(10, 15, 26, 0.7), rgba(10, 15, 26, 0.7));
  }

  .page-video {
    /* Ролик здесь свой, снятый вертикально — обрезать и сдвигать нечего,
       кадр ложится в экран как есть. Тёплые огни городов НЕ приглушаем:
       это самое живое, что есть в кадре. Наоборот, добавляем яркости. */
    object-position: center center;
    filter: saturate(1.22) contrast(1.12) brightness(1.2);
  }

  /* На телефоне кадр светлее и занимает весь экран — под заголовком гасим
     сильнее. К краям сводим в ноль, чтобы на границе секции не было шва. */
  .hero::after {
    /* Пятно было плотным на 0.74 и гасило самую яркую часть кадра — планета
       выглядела тусклой. Держим его ровно под буквами: уже, ниже и легче.
       Читаемость добираем тенью текста. */
    background: radial-gradient(
      70% 30% at 50% 44%,
      rgba(10, 15, 26, 0.46) 0%,
      rgba(10, 15, 26, 0.2) 62%,
      rgba(10, 15, 26, 0) 100%
    );
  }
}

/* Старые статичные пятна больше не нужны — их работу делает холст. */
.hero__glow {
  display: none;
}

/* Затемнение под текстом первого экрана: заголовок должен читаться на
   почти чёрном, а не на самом ярком месте кадра. Книзу больше не заливаем —
   этим занимается маска видео, иначе поверх общего фона легла бы чёрная
   полоса и вернулся бы шов. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Общая вуаль наверху нарочно слабая, чтобы кадр было видно во всю силу.
     Поэтому под заголовком гасим отдельным пятном. */
  background: radial-gradient(
    54% 40% at 50% 48%,
    rgba(10, 15, 26, 0.44) 0%,
    rgba(10, 15, 26, 0.18) 62%,
    rgba(10, 15, 26, 0) 100%
  );
}

/* Текст первого экрана лежит на светлом кадре. Гасить кадр ради читаемости
   неправильно — он ради этого и ставился. Поэтому усиливаем сам текст:
   поднимаем яркость и подкладываем мягкую тень, как в титрах кино. */
.hero__subtitle,
.hero__price-hint {
  color: rgba(255, 255, 255, 0.88);
  text-shadow:
    0 1px 3px rgba(10, 15, 26, 0.95),
    0 1px 18px rgba(10, 15, 26, 0.95);
}

.hero__price-hint {
  color: rgba(255, 255, 255, 0.72);
}

.hero .eyebrow {
  text-shadow: 0 1px 10px rgba(10, 15, 26, 0.9);
}

/* Заголовки и подписи секций тоже лежат на живом кадре. Тень отделяет их
   от фона, не заставляя гасить сам кадр. */
.section-title,
.section-subtitle,
.eyebrow,
.locations__note,
.bento-card h3,
.faq-item__q {
  text-shadow: 0 1px 14px rgba(10, 15, 26, 0.85);
}

.hero > .container {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .page-flow {
    filter: blur(80px) saturate(110%);
  }
}