/* home.css — только то, что есть на главной и больше нигде
 *
 * Слой сети Bridge WAF. Разбор системы — `docs/design-system.md`.
 * Файл собственный, не копия комплекта: `site.css` и `_ops/site-kit/**`
 * общие на четыре спутника, и правка там задела бы соседей.
 *
 * Порядок подключения обязателен:
 *   fonts.css → tokens.css → base.css → home.css | kb.css
 */

/* ------------------------------------------------------------------- герой */

.hero { border-bottom: var(--hairline) solid var(--line); }
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 618px) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: start;
  padding-block: clamp(56px, 9vw, 140px) clamp(48px, 7vw, 104px);
}

h1 {
  margin-top: var(--space-8);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 600;
  text-wrap: balance;
}
h1 .second { display: block; color: var(--muted); font-weight: 400; }

.hero-lead { margin-top: var(--space-8); }
.hero-cta { margin-top: var(--space-16); display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ------------------------------------------- панель режимов: главный акцент

   Спека §5.2 просит интерактивный переключатель с автоциклом, который
   останавливается навсегда при первом взаимодействии. Сделан без скрипта:
   четвёртая радио-кнопка `auto` включена по умолчанию и гоняет цикл, а любой
   клик по вкладке переключает радио-группу — auto снимается и цикл больше
   не запускается. Ровно требуемое поведение, ноль строк JS.

   Панели лежат стопкой в grid: высота равна самой высокой, и переключение
   не дёргает правую колонку героя.
   ------------------------------------------------------------------------- */

/* индикатор скользит между позициями, а не перерисовывается рамкой */

/* --- ручной выбор: auto снят, цикл не идёт --- */

/* --- автоцикл: три слота по 6.5с, сдвиг отрицательной задержкой --- */

/* фокус с клавиатуры виден на подписи: сама радио-кнопка скрыта */

/* ------------------------------------------------------------- адаптивность */

@media (max-width: 1080px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }

}

@media (max-width: 760px) {
   .facts{ grid-template-columns: 1fr; }
  .hero-cta { margin-top: var(--space-10); }
  .hero-cta .btn { flex: 1 1 auto; }
}

/* На печати прокруточной шкалы нет: без этого блока всё, до чего читатель не
   долистал, ушло бы в PDF прозрачным. Та же причина — у скриншотов страницы
   целиком. */
@media print {
  .sec-head > *, .faq > .index-faq-item > *,
  .facts > div > *, .final .wrap > *{ animation: none !important; opacity: 1 !important; transform: none !important; }

}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- ведро токенов: лимит на домен ---------------------------------------- */

/* --- партия записей: копятся и уходят пачкой ------------------------------ */

/* Записи, доехавшие до приёмника: появляются ровно тогда, когда партия уходит,
   иначе приёмник всё время пустой и стрелка ведёт в никуда. */

/* --- слои: где этот фильтр стоит, а где нет ------------------------------- */

/* --- микрографика в полосе фактов ----------------------------------------- */

@keyframes step3 { 0%, 100% { opacity: 0.25; } 20%, 46% { opacity: 1; } }

.facts > div { position: relative; overflow: hidden; }
.facts .spark { display: flex; gap: 5px; margin-top: var(--space-4); }
.facts .spark i {
  display: block; width: 22px; height: 3px; border-radius: 1px;
  background: var(--accent); opacity: 0.25;
  animation: step3 3.6s var(--ease) infinite;
}
.facts .spark i:nth-child(2) { animation-delay: 1.2s; }
.facts .spark i:nth-child(3) { animation-delay: 2.4s; }
.facts > div:nth-child(3) .spark i { background: var(--warn); }

/* --- уголки-скобки на панели, приём koyeb --------------------------------- */

.bracketed { position: relative; }
.bracketed::before, .bracketed::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border: 1px solid var(--dim); pointer-events: none;
}
.bracketed::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.bracketed::after { bottom: -5px; right: -5px; border-left: 0; border-top: 0; }

/* --- кнопки и вкладки: ускоренная реакция, как у koyeb -------------------- */

.btn { transition: background var(--t-ui), color var(--t-ui), border-color var(--t-ui), transform var(--t-ui); }
.btn:active { transform: translateY(1px); }
.btn-primary:hover { box-shadow: 0 0 0 4px var(--glow); }

/* --- уважение к настройке «меньше движения» ------------------------------- */

/* На печати прокруточной шкалы нет: без этого блока всё, до чего читатель не
   долистал, ушло бы в PDF прозрачным. Та же причина — у скриншотов страницы
   целиком. */
@media print {
  .sec-head > *, .faq > .index-faq-item > *,
  .facts > div > *, .final .wrap > *{ animation: none !important; opacity: 1 !important; transform: none !important; }

}

@media (prefers-reduced-motion: reduce) {
   .facts .spark i{ animation: none !important; }

  @supports (animation-timeline: view()) {
    .sec-head > *, .faq > .index-faq-item > *,
    .facts > div > *, .final .wrap > *{
      animation: none; opacity: 1; transform: none;
    }
  }
}

/* задержки потока вынесены в классы: nth-of-type считает <rect> вперемешку с
   разметкой сцены и ломается от любой правки рисунка */

/* ==================================================== ИЗОБРАЖЕНИЯ И ПАРАЛЛАКС
   Параллакс у спеки §7 — на rAF-цикле. Здесь он на `animation-timeline: view()`:
   ту же работу делает сама прокруточная шкала CSS, и это не стоит ни строки
   скрипта. Где браузер её не знает, картинка просто стоит на месте.
   ------------------------------------------------------------------------- */

@keyframes par-slow { from { transform: translate3d(0, -4%, 0) scale(1.06); }
                      to   { transform: translate3d(0,  4%, 0) scale(1.06); } }

.bg-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.bg-art img {
  width: 100%; height: 118%;
  object-fit: cover;
  will-change: transform;
  transform: translate3d(0, -2%, 0) scale(1.06);
}
@supports (animation-timeline: view()) {
  .bg-art img { animation: par-slow linear both; animation-timeline: view(); animation-range: cover; }
}

/* герой: барьер уводим под лог-панель справа, слева держим читаемость */
.hero .bg-art img { object-position: 58% 62%; opacity: 0.62; }
.hero .bg-art::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--bg) 26%, color-mix(in srgb, var(--bg) 92%, transparent) 50%, transparent 78%),
    linear-gradient(to bottom, transparent 55%, var(--bg) 96%);
}
:root[data-theme="proof-light"] .hero .bg-art img { opacity: 0.3; }
/* Под заголовком и лидом снимок поднимал подложку до 213 — дисплей давал
   4.3:1 при норме 7. Спека §5.1: поднимать остановку градиента, не гасить
   картинку. Левая треть уходит почти в чистый фон, справа снимок остаётся. */
:root[data-theme="proof-light"] .hero .bg-art::after {
  background:
    linear-gradient(100deg, var(--bg) 30%, color-mix(in srgb, var(--bg) 96%, transparent) 52%, transparent 80%),
    linear-gradient(to bottom, transparent 55%, var(--bg) 96%);
}

/* §4.3 интерстишл: единственная полноширинная картинка с текстом на странице */
/* Полоса перестала быть украшением: на ней стоит утверждение о цене слепого
   включения и переход к продукту. Высота теперь задаётся содержимым, а не
   числом, иначе текст упрётся в края на узких экранах. */

/* Текст сидит на подложке с размытием, а не прямо на снимке: замер показал
   4.4:1 у заголовка при норме 7 и 1.6:1 у лида при норме 4.5 — зелёный поток
   проходит ровно под строками. Гасить снимок сильнее нельзя, он тогда
   исчезает; подложка держит контраст и оставляет картинку видимой вокруг. */

.interstitial-in .lead { color: var(--text); opacity: 0.86; }

.interstitial-in .h2 { margin: 0; }
.interstitial-in .lead { margin: var(--space-6) auto 0; max-width: 56ch; }

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

/* швов быть не должно: картинка растворяется в фон со всех сторон */

/* финальная полоса: та же мембрана отражением, поток идёт к кнопке */
.final { position: relative; isolation: isolate; overflow: hidden; }
.final .bg-art img { transform: scaleX(-1) scale(1.06); opacity: 0.22; }
:root[data-theme="proof-light"] .final .bg-art img { opacity: 0.14; }
/* Середина градиента была полностью прозрачной, и текст блока «кто это
   ведёт» садился прямо на светлый участок снимка: замер после смены
   гарнитуры дал 3.57:1 при норме 4.5. Гарнитура тут ни при чём — она лишь
   сдвинула рамку строки на другой пиксель; дыра в подложке была всегда.
   Поднят стоп, а не погашен снимок: по краям картинка видна как прежде,
   под строками появляется пол. */
.final .bg-art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 72%, transparent) 30%,
    color-mix(in srgb, var(--bg) 72%, transparent) 70%,
    var(--bg) 100%);
}
@supports (animation-timeline: view()) {
  .final .bg-art img { animation: none; }
}

/* ================================================================ ДЕТАЛИ §12 */

/* шапка: фон и граница проявляются после 40px прокрутки. Спека вешает это на
   слушатель scroll; здесь — на `animation-timeline: scroll()`, ту же работу
   делает прокруточная шкала CSS. */
.landing-header {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
@keyframes nav-solid {
  to { background: color-mix(in srgb, var(--bg) 86%, transparent); border-bottom-color: var(--line); }
}
@supports (animation-timeline: scroll()) {
  .landing-header {
    animation: nav-solid linear both;
    animation-timeline: scroll();
    animation-range: 0 40px;
  }
}
@supports not (animation-timeline: scroll()) {
  .landing-header { background: var(--bg); border-bottom-color: var(--line); }
}

/* кнопка действия: блик слева направо раз в 6с */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: skewX(-20deg);
  animation: shimmer 6s var(--ease-io) infinite;
}
@keyframes shimmer { 0%, 72% { transform: translateX(0) skewX(-20deg); }
                     88%, 100% { transform: translateX(420%) skewX(-20deg); } }

/* бегущая строка: каждый элемент оживает под курсором */

/* документация: стрелка уезжает вправо */

/* ========================================= ДИПТИХ: АСИММЕТРИЯ ОТКАЗОВ §10

   Спека предлагала перевес по прокрутке: правая панель опускается, левая
   поднимается. Сделал — и это читалось как сломанная вёрстка: ячейки
   разъезжались, а между ними проступал фон-разделитель сетки жирной полосой,
   потому что сетка рисует линии зазором в 1px, а не рамками.

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

/* ===================================================== ПУТЬ ЗАПРОСА §11
   Схема CLIENT → EDGE → WAF → ORIGIN. Точка едет по пути, на рубеже её
   поведение зависит от режима: проходит, помечается, отказывается.
   Три дорожки нарисованы разом одна под другой — так видно, что различие
   не в скорости и не в маршруте, а в исходе.
   ------------------------------------------------------------------------- */

/* На узком экране схема ужимается до нечитаемых подписей: 760 единиц вьюбокса
   в 350 пикселях дают кегль около 4px. Даём ей прокрутку в своём контейнере —
   страница по горизонтали при этом не едет. */

/* block доезжает только до кромки рубежа и гаснет — до ORIGIN не доходит */

/* копия уходит вниз в журнал — в обоих режимах, где что-то записывается */

/* Цвет метки — классом. Атрибут stroke= перебивается любым правилом CSS,
   которое задаёт то же свойство, и делает это молча. */

/* ============================================== ПРОИЗВОДИТЕЛЬНОСТЬ §14

   `content-visibility: auto` здесь пробовался и снят. Выигрыш на десятке
   секций небольшой, а `contain-intrinsic-size` приходится угадывать — при
   промахе полоса прокрутки прыгает на скролле, и страница целиком (печать,
   снимок, поиск по странице) отдаётся пустой ниже первого экрана.

   Пауза лупов за пределами вьюпорта (спека §9.3) без скрипта недостижима:
   `animation-play-state` прокруточной шкалой не управляется. Лупы здесь
   дешёвые — трансформации и прозрачность на паре десятков узлов, без
   layout и paint, — поэтому оставлены идти. Если понадобится строго,
   это IntersectionObserver и +12 строк JS.
   ------------------------------------------------------------------------- */

/* ==================================== ДОСТУПНОСТЬ И ПЕЧАТЬ (сводно) §15
   Блок стоит последним намеренно: он гасит и то, что добавлено выше по
   файлу. Страница обязана остаться полностью читаемой и понятной без
   единого движения — это критерий приёмки спеки §17.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .bg-art img{ transform: none !important; animation: none !important; }

  .btn-primary::after { display: none; }
  /* автоцикл не крутится: показываем monitor — режим, с которого продукт
     просит начинать */

}

@media print {
  
  .bg-art, .btn-primary::after{ display: none !important; }

  .landing-header { position: static; }
}

/* ============================================ СЛОЙ ОЖИВЛЕНИЯ ПАНЕЛИ (JS)

   Классы ставит `js/home.js`. Всё ниже — надстройка: без скрипта панель
   работает, просто без печати, вспышки и счётчика.
   ------------------------------------------------------------------------- */

/* печать строки: не посимвольно перебором узлов, а отсечкой по ширине
   ступенями — тот же эффект машинописи одним свойством */

/* вердикт вспыхивает и гаснет — §5.2 */

/* в block путь зачёркивается слева направо */

/* печать значений полосы фактов не должна дёргать высоту: минимальную
   выставляет скрипт до очистки текста, здесь только каретка */

/* ------------------------------------------------- снятие возражений у CTA */

.hero-note, .final-note {
  margin-top: var(--space-6);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--dim);
}
/* Финальная строка лежит поверх снимка и акцентного пятна: на --dim она
   давала 3.9:1. Это снятие возражения перед кнопкой, ему и по смыслу
   положен вес. */
.final-note { color: var(--muted); }
.hero-note code, .final-note code { font-family: var(--font-sans); color: var(--muted); }
.final-note { text-align: center; }