/* ============================================================
   Главная KidmaTech — приёмы, выбранные Дианой 19.09.2026
   (1 свет · 3 стекло · 4 живая кнопка · 5 появление при прокрутке ·
    6 плитка bento · 9 текстура · 10 мягкие переходы ·
    11 прилипающие блоки · 12 подсветка под курсором)

   Файл накладывается ПОВЕРХ боевого styles.css и ничего в нём не меняет:
   так превью можно показать, а потом либо влить целиком, либо выбросить.
   Подключён к боевой главной (src/index.html) с 19.09.2026 — Диана приёмы приняла.
   ============================================================ */

/* ------------------------------------------------------------
   01 — свет за первым экраном  +  09 — тонкая текстура
   ------------------------------------------------------------ */
/* Раскладку не трогаем: свет живёт в псевдоэлементе и выходит за края через inset,
   без отрицательных полей — они съедали поля контейнера и текст прилипал к краю. */
/* Хук .fx-hero — те же приёмы на лендингах (CRM, InvoiceBot, мессенджер):
   у них первый экран называется .crm-hero/.inv-hero/.msg-hero со своей
   раскладкой, поэтому раскладочный .hero им вешать нельзя — только хук. */
.hero, .fx-hero {
  position: relative;
  isolation: isolate;
  /* Свет дышит (kt-drift) и на краях цикла выходит за левый край. В обычной
     раскладке этого не видно — браузер не прокручивает страницу влево, — а на
     иврите он давал 8px горизонтальной прокрутки на телефоне. `clip` только по
     горизонтали: вертикальный вылет света вниз и вверх остаётся на месте. */
  overflow-x: clip;
}
.hero::before, .fx-hero::before {
  content: "";
  /* По горизонтали не вылезаем за родителя: вылет вправо добавлял 23px
     горизонтальной прокрутки на телефоне. Растекается пусть размытие. */
  position: absolute; inset: -12% 0 -18%;
  z-index: -2; pointer-events: none;
  /* Цвета и размытие — из токенов: светлой и тёмной теме нужны разные числа
     (см. блок «ЭФФЕКТЫ ГЛАВНОЙ» в tokens.css). */
  background:
    radial-gradient(48% 60% at 14% 18%, var(--fx-glow-a), transparent 70%),
    radial-gradient(44% 56% at 88% 26%, var(--fx-glow-b), transparent 72%),
    radial-gradient(60% 50% at 46% 108%, var(--fx-glow-c), transparent 70%);
  filter: blur(var(--fx-glow-blur));
  /* Края растушёваны: без маски прямоугольник со светом даёт видимый шов
     слева и справа, особенно в тёмной теме. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent),
                      linear-gradient(180deg, #000 70%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent),
              linear-gradient(180deg, #000 70%, transparent);
  mask-composite: intersect;
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before,
  .fx-hero::before { animation: kt-drift 20s ease-in-out infinite alternate; }
}
@keyframes kt-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.1); }
}

/* Зерно на всей странице — самое заметное отличие «сделано руками» от
   ровной заливки, которой выдаёт себя генератор. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; opacity: var(--fx-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode: var(--fx-grain-blend);
}

/* ------------------------------------------------------------
   Парящие панели интерфейса на фоне (20.09.2026, замена волнам)
   Позиция и ширина каждой панели приходят из home-fx.js переменными:
   разметки в index.html нет, слой собирается скриптом.
   ------------------------------------------------------------ */
.bg-panel {
  position: absolute;
  /* Панель стоит от края ЭКРАНА в процентах: раскладка раскидана по всей
     ширине, а не прижата к колонке текста (правка Дианы 20.09.2026).
     Логическое свойство — чтобы в RTL отсчёт шёл от правого края; сам
     процент скрипт при этом зеркалит. */
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  width: var(--w);
  height: auto;
  opacity: calc(var(--fx-panel-opacity) * var(--dim, 1));
  /* Скругление и тень рисовать не надо — они внутри самой картинки.
     Сдвиг: --px от мыши, --sy от прокрутки. Перехода нет намеренно:
     с ним прокрутка отстаёт от пальца и панель «догоняет» страницу. */
  transform: translate3d(var(--px, 0px), var(--sy, 0px), 0);
  will-change: transform;
  /* Приглушение назначается замером при прокрутке: панель проезжает под
     строкой и выходит обратно. Переход стоит только на РАЗГОРАНИЕ — когда
     панель отъехала от букв. Гашение идёт мгновенно (у .is-dim переход
     отключён): при инерционной прокрутке панель влетает под строку за доли
     секунды, и плавное гашение означало бы яркую картинку поверх текста.
     На transform перехода быть не должно вовсе — прокрутка отстаёт от пальца. */
  transition: opacity .25s ease, filter .25s ease;
}
/* Панель, стоящая под колонкой текста. Её не убираем — без центральных фон
   снова становится «только по краям», — но гасим и размываем: буквы читаются
   поверх неё, а глубина остаётся. Порог сторожит сценарий Н19 в check-home.py. */
.bg-panel.is-dim {
  /* Множитель свой на каждую тему: непрозрачности у них разные, а итог под
     буквами приёмка (Н19) требует держать не выше 0.2. Числа — в tokens.css
     рядом с --fx-panel-opacity, здесь только подстановка. */
  --dim: var(--fx-panel-dim, 0.3);
  filter: blur(1.5px);
  /* Гасим сразу, без перехода — см. комментарий у .bg-panel. */
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .bg-panel { transform: none !important; }
}

/* Подложка под строкой, на которую наехала неприглушённая панель. Так бывает
   на телефоне: панель там одна, и гасить её нечем — погашенную не видно
   совсем, а ради неё всё и затевалось. Поэтому подсвечиваем не фон, а сам
   текст: под буквами появляется мягкое пятно цвета страницы с растушёванным
   краем (приём называется «скрим»). Класс вешает markDim() в home-fx.js по
   живому замеру, поэтому пятно приходит ровно в момент наезда и уходит,
   когда панель проехала. Просьба Дианы 20.09.2026: «на белом текст
   нечитаемый, когда попадает на картинку». */
.has-scrim {
  /* Цвет подложки НЕ задаётся токеном фона: фон страницы под текстом не
     ровный — сверху лежит свет первого экрана, у секций свои оттенки, — и
     плашка цвета --color-bg выходила светлее фона на светлой теме и черноты
     темнее на тёмной («а надо в цвет фона» — Диана 20.09.2026). Поэтому
     основную работу делает backdrop-filter: он размывает и обесцвечивает то,
     что лежит ПОД строкой прямо здесь, а значит подложка сама принимает
     местный цвет фона, где бы строка ни оказалась. Тон добавляем чуть-чуть —
     ровно чтобы поднять контраст букв, не перебивая местный цвет. */
  /* Размытие крупное намеренно: чем шире радиус, тем больше окружающего
     фона попадает в усреднение и тем точнее подложка повторяет МЕСТНЫЙ цвет,
     а не цвет панели под ней. Замер на живой странице (design/bg-preview):
     при 9 px отличие от чистого фона 19.8, при 32 px — 17.0, дальше
     выигрыш пропадает. */
  -webkit-backdrop-filter: blur(32px) saturate(var(--fx-scrim-sat));
  backdrop-filter: blur(32px) saturate(var(--fx-scrim-sat));
  background-color: var(--fx-scrim);
  border-radius: 14px;
  /* Поле вокруг букв, чтобы край подложки не шёл вплотную к строке. Отступ
     тут же съедается отрицательным полем: раскладка остаётся прежней, а
     закрашиваемая область становится шире текста. */
  padding: 6px 10px;
  margin: -6px -10px;
  /* Край растушёван маской. Без неё backdrop-filter обрывается по рамке
     элемента ровным прямоугольником, и подложка читается как серая плашка,
     которой в макете нет. Тенью это не лечится: тень рисуется снаружи, а
     обрыв размытия остаётся. */
  -webkit-mask-image: radial-gradient(116% 128% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(116% 128% at 50% 50%, #000 62%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
  /* Появляется плавно, уходит плавно — иначе на прокрутке мигает. Главное в
     подложке теперь backdrop-filter, поэтому переход нужен именно ему: на
     один тон в 12% его вешать бессмысленно, глазу этой разницы не видно.
     Тени в правиле нет — растушёвку делает маска. */
  .has-scrim {
    transition: background-color .2s ease,
                -webkit-backdrop-filter .2s ease,
                backdrop-filter .2s ease;
  }
}

/* ------------------------------------------------------------
   03 — стеклянные плашки: факты первого экрана и полоса доверия
   ------------------------------------------------------------ */
/* Галочки у фактов первого экрана нет (в отличие от полосы доверия) — поэтому
   поля одинаковые с обеих сторон, иначе слева зияет пустота. */
.hero-facts li,
.fx-facts > li {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--fx-glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid var(--fx-glass-border);
  box-shadow: var(--fx-glass-shadow);
}

.trust-inner span {
  /* Место под галочку — логическим свойством: физический padding-left на
     иврите оставался слева, галочка уезжала вправо, и плашка становилась
     шире экрана на 8px (ловится только проверкой RTL на 390px). */
  padding: 9px 14px;
  padding-inline-start: 2.4em;
  border-radius: var(--radius-pill);
  background: var(--fx-glass-pill-bg);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid var(--fx-glass-pill-border);
  box-shadow: var(--fx-glass-pill-shadow);
}
.trust-inner span::before { inset-inline-start: 13px; }

/* ------------------------------------------------------------
   04 — живая главная кнопка
   ------------------------------------------------------------ */
.btn-cta {
  position: relative; isolation: isolate; overflow: hidden;
  box-shadow: var(--fx-cta-halo);
  transition: box-shadow .3s ease, transform .2s ease;
}
.btn-cta::before {
  content: ""; position: absolute; inset: -140%; z-index: -1;
  background: conic-gradient(from 0deg,
    transparent 0 62%,
    color-mix(in srgb, var(--color-cta) 20%, #fff) 74%,
    #fff 80%,
    transparent 92% 100%);
}
.btn-cta::after {
  content: ""; position: absolute; inset: 1.5px; z-index: -1;
  border-radius: calc(var(--radius-md) - 1px);
  background: var(--color-cta);
}
.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--fx-cta-halo-hover);
}
.btn-cta:hover::after { background: var(--color-cta-hover); }
@media (prefers-reduced-motion: no-preference) {
  .btn-cta::before { animation: kt-spin 3.4s linear infinite; }
}
@keyframes kt-spin { to { transform: rotate(1turn); } }

/* ------------------------------------------------------------
   05 — блоки появляются при прокрутке
   Разметку не трогаем: метки расставляет home-fx.js.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  [data-kt-reveal] { opacity: 0; }
  [data-kt-reveal].is-in { animation: kt-rise .7s cubic-bezier(.16, .84, .44, 1) both; }
  [data-kt-reveal].is-in:nth-child(2) { animation-delay: .08s; }
  [data-kt-reveal].is-in:nth-child(3) { animation-delay: .16s; }
  [data-kt-reveal].is-in:nth-child(4) { animation-delay: .24s; }
}
@keyframes kt-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   06 — плитка bento вместо четырёх одинаковых карточек («Зачем это нужно»)
   ------------------------------------------------------------ */
.worth .cards-2 {
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}
.worth .cards-2 > .card:nth-child(1) {
  grid-column: span 2; grid-row: span 2;
  background: linear-gradient(150deg, var(--color-brand-soft), var(--color-surface) 70%);
  /* Текста в главной плитке меньше, чем места: прижимаем его к центру,
     иначе внизу висит пустота в пол-карточки. */
  display: flex; flex-direction: column; justify-content: center;
}
.worth .cards-2 > .card:nth-child(1) h3 { font-size: var(--text-xl); }
.worth .cards-2 > .card:nth-child(2),
.worth .cards-2 > .card:nth-child(3) { grid-column: span 2; }
/* Нижняя во всю ширину: сетка из четырёх колонок не делится на «2+2+1». */
.worth .cards-2 > .card:nth-child(4) { grid-column: span 4; }
@media (max-width: 720px) {
  .worth .cards-2 { grid-template-columns: 1fr; }
  .worth .cards-2 > .card:nth-child(n) { grid-column: auto; grid-row: auto; }
}

/* ------------------------------------------------------------
   10 — мягкий переход между секциями вместо резкой границы
   ------------------------------------------------------------ */
.section { position: relative; }
.section + .section::before {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline: 12%;
  height: 1px; pointer-events: none;
  background: var(--fx-divider-line);
  box-shadow: var(--fx-divider-glow);
  opacity: var(--fx-divider-opacity);
}

/* ------------------------------------------------------------
   11 — флагманы прилипают при прокрутке и складываются друг на друга
   ------------------------------------------------------------ */
@media (min-width: 861px) {
  .flagships .flagship {
    position: sticky;
    /* липкая шапка сайта ~72px — иначе карточка уедет под неё */
    inset-block-start: 88px;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--fx-sticky-shadow);
  }
  .flagships .flagship:nth-of-type(2) { inset-block-start: 104px; }
}

/* ------------------------------------------------------------
   08 — шапка размывает страницу под собой
   На боевом сайте размытие уже есть (styles.css:173), но шапка непрозрачна на 85%
   и граница видна всегда. Здесь: стекло сильнее, границы нет, пока не листаешь,
   а при прокрутке появляется тень и полоса становится тоньше.
   ------------------------------------------------------------ */
.site-header {
  background: color-mix(in srgb, var(--color-bg) 58%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-block-end-color: transparent;
  transition: box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.site-header.is-scrolled {
  border-block-end-color: var(--color-border);
  box-shadow: var(--fx-header-shadow);
}
.site-header.is-scrolled .header-inner { padding-block: 8px; transition: padding .3s ease; }

/* ------------------------------------------------------------
   12 — подсветка под курсором на карточках
   ------------------------------------------------------------ */
.card, .flagship, .fx-card {
  position: relative; overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card::after, .flagship::after, .fx-card::after {
  content: ""; position: absolute; inset: 0;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--color-cta) 20%, transparent), transparent 70%);
}
.card:hover, .flagship:hover, .fx-card:hover { border-color: var(--color-brand); }
.card:hover::after, .flagship:hover::after, .fx-card:hover::after { opacity: 1; }
.card:hover, .fx-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

/* Зерно поверх страницы не должно перекрывать клики и всплывающие элементы */
.site-header, .hero, .fx-hero, .section, footer { position: relative; z-index: 2; }