/* ============================================================
   css/fsi-ds.css — дизайн-система FSI Studio (V3).
   Источник истины: эскиз Figma (Expert V3).

   Палитра снята с эскиза пиксельно:
     главный акцент     #8E53E1  hsl(265 70% 60%)
     осветлённый акцент #B892EC  hsl(265 70% 75%)
     тёмный акцент      #231041  hsl(265 20% 30%)
     фон                #1D152C  hsl(261 35% 13%)
     панель             #30293E  hsl(260 20% 20%)

   Эффекты из эскиза:
     матовое стекло — blur 30px, белый 10%
     свечение       — тень акцентом, 50px блюра

   Всё с префиксом .fsi-* / --fsi-* — не конфликтует со
   стилями существующих страниц.
   ============================================================ */

:root {
  /* --- поверхности --- */
  --fsi-bg:        #1D152C;
  --fsi-bg-deep:   #150F21;
  --fsi-panel:     #30293E;
  --fsi-panel-2:   #251E36;

  /* --- акценты --- */
  --fsi-acc:       #8E53E1;
  --fsi-acc-lt:    #B892EC;
  --fsi-acc-dk:    #231041;
  --fsi-acc-rgb:   142, 83, 225;

  /* --- текст --- */
  --fsi-tx:        #F2EEFB;
  --fsi-tx-dim:    #ADA2C4;
  --fsi-tx-mut:    #7A6F92;

  /* --- стекло (blur 30 / белый 10%) --- */
  --fsi-glass:     rgba(255, 255, 255, .10);
  --fsi-glass-2:   rgba(255, 255, 255, .06);
  --fsi-glass-br:  rgba(255, 255, 255, .14);
  --fsi-blur:      30px;

  /* --- свечение (50px, акцент) --- */
  --fsi-glow:      0 0 50px rgba(142, 83, 225, .85);
  --fsi-glow-soft: 0 0 34px rgba(142, 83, 225, .45);

  /* --- геометрия --- */
  --fsi-r-xs: 7px;
  --fsi-r-s:  10px;
  --fsi-r-m:  13px;
  --fsi-r-l:  17px;
  --fsi-r-pill: 999px;

  /* --- движение --- */
  --fsi-e:      cubic-bezier(.22, .9, .32, 1);
  --fsi-e-out:  cubic-bezier(.16, 1, .3, 1);
  --fsi-fast:   .18s;
  --fsi-mid:    .32s;
  --fsi-slow:   .55s;

  /* --- шрифты (уже подключены глобально) --- */
  --fsi-disp:  'Geologica', system-ui, sans-serif;
  --fsi-head:  'Wix Madefor Display', system-ui, sans-serif;
  --fsi-sans:  'Onest', system-ui, sans-serif;
  --fsi-mono:  'JetBrains Mono', ui-monospace, monospace;
}

/* ============================================================
   ЭФФЕКТЫ (по инструкции из эскиза)
   ============================================================ */

.fsi-glass {
  background: var(--fsi-glass);
  backdrop-filter: blur(var(--fsi-blur));
  -webkit-backdrop-filter: blur(var(--fsi-blur));
  border: 1px solid var(--fsi-glass-br);
}

.fsi-glow      { box-shadow: var(--fsi-glow); }
.fsi-glow-soft { box-shadow: var(--fsi-glow-soft); }

/* ============================================================
   КНОПКА — три состояния из эскиза:
     обычная — акцентная заливка
     hover   — тёмный акцент + свечение вокруг
     клик    — белая вспышка пробегает слева направо
   ============================================================ */

.fsi-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border: 0;
  border-radius: var(--fsi-r-s);
  background: var(--fsi-acc);
  color: #fff;
  font-family: var(--fsi-sans);
  font-weight: 700;
  font-size: .96rem;
  line-height: 1;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--fsi-mid) var(--fsi-e),
    box-shadow var(--fsi-mid) var(--fsi-e),
    transform var(--fsi-fast) var(--fsi-e),
    color var(--fsi-mid) var(--fsi-e);
}

.fsi-btn:hover {
  background: var(--fsi-acc-dk);
  box-shadow: var(--fsi-glow);
  color: #fff;
}

.fsi-btn:active { transform: scale(.975); }

.fsi-btn:focus-visible {
  outline: 2px solid var(--fsi-acc-lt);
  outline-offset: 3px;
}

/* Вспышка при нажатии (эскиз: «анимация после нажатия»).
   Свет идёт слева направо и в середине кадра ПОЛНОСТЬЮ заливает
   кнопку — цветом главного акцента, а не белым. Ширина слоя 300%,
   поэтому яркая середина успевает накрыть кнопку целиком. */
.fsi-btn::after {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  width: 300%;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(142, 83, 225, 0) 0%,
    rgba(166, 111, 240, .95) 22%,
    #B892EC 38%,
    #C9A9F5 50%,
    #B892EC 62%,
    rgba(166, 111, 240, .95) 78%,
    rgba(142, 83, 225, 0) 100%);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}
.fsi-btn.is-flash::after { animation: fsiFlash var(--fsi-slow) cubic-bezier(.3, .1, .3, 1); }
/* сама кнопка на пике вспышки светится акцентом */
.fsi-btn.is-flash { animation: fsiFlashGlow var(--fsi-slow) ease-out; }

@keyframes fsiFlash {
  0%   { transform: translateX(-100%); opacity: 0; }
  15%  { opacity: 1; }
  50%  { transform: translateX(-33.3%); opacity: 1; }   /* яркая середина накрывает кнопку */
  85%  { opacity: 1; }
  100% { transform: translateX(33.3%);  opacity: 0; }
}
@keyframes fsiFlashGlow {
  0%   { box-shadow: 0 0 0 rgba(142, 83, 225, 0); }
  45%  { box-shadow: 0 0 46px rgba(142, 83, 225, .95); }
  100% { box-shadow: 0 0 0 rgba(142, 83, 225, 0); }
}

/* второстепенная — контур */
.fsi-btn.ghost {
  background: transparent;
  border: 1px solid var(--fsi-glass-br);
  color: var(--fsi-tx);
}
.fsi-btn.ghost:hover {
  background: var(--fsi-acc-dk);
  border-color: transparent;
  box-shadow: var(--fsi-glow-soft);
}

/* стеклянная */
.fsi-btn.glassy {
  background: var(--fsi-glass);
  backdrop-filter: blur(var(--fsi-blur));
  -webkit-backdrop-filter: blur(var(--fsi-blur));
  border: 1px solid var(--fsi-glass-br);
  color: var(--fsi-tx);
}
.fsi-btn.glassy:hover {
  background: var(--fsi-acc-dk);
  box-shadow: var(--fsi-glow-soft);
}

.fsi-btn.lg  { padding: 16px 34px; font-size: 1.02rem; border-radius: var(--fsi-r-m); }
.fsi-btn.sm  { padding: 10px 18px; font-size: .875rem; }
.fsi-btn .fi { flex: 0 0 auto; }

/* ============================================================
   КАРТОЧКА
   ============================================================ */

.fsi-card {
  position: relative;
  background: var(--fsi-panel-2);
  border: 1px solid var(--fsi-glass-br);
  border-radius: var(--fsi-r-m);
  padding: clamp(20px, 2.6vw, 30px);
  transition:
    border-color var(--fsi-mid) var(--fsi-e),
    transform var(--fsi-mid) var(--fsi-e),
    box-shadow var(--fsi-mid) var(--fsi-e);
}
.fsi-card:hover {
  border-color: rgba(var(--fsi-acc-rgb), .55);
  transform: translateY(-3px);
  box-shadow: var(--fsi-glow-soft);
}

/* карточка-стекло */
.fsi-card.glassy {
  background: var(--fsi-glass);
  backdrop-filter: blur(var(--fsi-blur));
  -webkit-backdrop-filter: blur(var(--fsi-blur));
}

/* ============================================================
   ТИПОГРАФИКА
   ============================================================ */

.fsi-h1 {
  font-family: var(--fsi-disp);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0;
}
.fsi-h2 {
  font-family: var(--fsi-disp);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
}
.fsi-h3 {
  font-family: var(--fsi-head);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  line-height: 1.25;
  margin: 0;
}
.fsi-lede {
  color: var(--fsi-tx-dim);
  font-size: clamp(.96rem, 1.15vw, 1.06rem);
  line-height: 1.65;
  margin: 0;
}
.fsi-kicker {
  font-family: var(--fsi-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fsi-acc-lt);
}
/* акцентное слово в тексте */
.fsi-em { color: var(--fsi-acc-lt); font-weight: 600; }

/* заголовок в акцентной рамке — приём из эскиза */
.fsi-framed {
  display: inline-block;
  border: 2px solid var(--fsi-acc);
  border-radius: var(--fsi-r-m);
  padding: clamp(14px, 1.8vw, 22px) clamp(18px, 2.2vw, 28px);
}

/* ============================================================
   ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ (js/fsi-ui.js добавляет .in)
   ============================================================ */

.fsi-rv {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .7s var(--fsi-e-out),
    transform .7s var(--fsi-e-out);
}
.fsi-rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fsi-rv { opacity: 1; transform: none; transition: none; }
  .fsi-btn.is-flash::after { animation: none; }
}

/* ============================================================
   СЕТКА / РАСКЛАДКА
   ============================================================ */

.fsi-wrap {
  width: min(1360px, 100% - clamp(28px, 5vw, 80px));
  margin-inline: auto;
}
.fsi-sec { padding-block: clamp(56px, 8vw, 108px); }
.fsi-grid { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.fsi-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.fsi-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.fsi-grid.c4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
  .fsi-grid.c3, .fsi-grid.c4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .fsi-grid.c2, .fsi-grid.c3, .fsi-grid.c4 { grid-template-columns: 1fr; }
}

/* иконка Phosphor наследует цвет и выравнивается по тексту */
.fi { display: block; flex: 0 0 auto; }

/* ============================================================
   ФОНОВАЯ ПЛИТКА (bkg-tile.webp) — первая рабочая версия.
   Плитка бесшовна по вертикали, по ширине растягивается.
   Размытие 18px висит на КОНТЕЙНЕРЕ — то есть на уже собранном
   повторением полотне (если размыть сам файл, его края уходят в
   прозрачность и стыки становятся видны). Слой расширен за края,
   чтобы затухание блюра не попадало в кадр.
   absolute (не fixed) — фон едет вместе со скроллом.
   ============================================================ */
.fsi-bg {
  position: absolute;
  /* РОВНО по документу (высоту ставит js/fsi-ui.js). */
  top: 0; left: 0; right: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
  /* Размытие держит .fsi-bg-blur внутри — здесь второго фильтра не нужно.
     Маски тоже нет: она гасила первые ~600px и плитка «начиналась»
     только после прокрутки. Зона героя есть лишь на главной, а там
     работает свой слой .fsi-tiles со своей маской. */
}
.fsi-bg-layer,
.fsi-bg-seg {
  position: absolute;
  left: 0; right: 0;
  background-image: url('/img/bkg-tile.webp');
  background-repeat: repeat-y;
  background-position: center top;
  /* масштаб 1:1, как в исходнике — не увеличиваем */
  background-size: 100% auto;
}
/* обычные страницы — полотно сразу на месте */
/* размытие держит обёртка, а не файл: у размытого файла края уходят
   в прозрачность и на стыках повторов видны швы */
.fsi-bg-blur {
  /* top:0 — узор начинается ровно с верха страницы. С выносом наверх
     первые пиксели уходили за край и плитка «стартовала» ниже. */
  position: absolute; inset: -70px; top: 0;
  filter: blur(18px);
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
.fsi-bg-layer { top: 0; bottom: 0; opacity: .24; }   /* как на главной */

/* главная — полотно «достраивается» сверху вниз по мере прокрутки */
.fsi-bg-seg {
  opacity: 0;
  /* заметнее: идёт сверху дальше и разворачивается по высоте */
  transform: translateY(-72px) scaleY(.86);
  transform-origin: top center;
  transition: opacity 1.1s cubic-bezier(.33, 1, .28, 1),
              transform 1.1s cubic-bezier(.33, 1, .28, 1);
}
.fsi-bg-seg.in { opacity: .42; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fsi-bg-seg { opacity: .42; transform: none; transition: none; }
}

/* слой плитки отключён: фон главной теперь .fsi-canvas (fixed) */
/* Фон страницы держит html, а не body.
   Причина: фон body в порядке отрисовки идёт ПОСЛЕ потомков с
   отрицательным z-index, а слой плитки лежит на z-index:-2. При этом
   body высотой в один экран — поэтому плитка пропадала в первом экране
   и «начиналась» только ниже, где body заканчивался. */
html { background-color: #1D152C; }
/* Без !important: страницы со своим фоном (например body.sl у
   SoundLine Center) должны сохранить его — к нему подогнаны переходы
   секций на фото. Нам достаточно, чтобы фон не перекрывал плитку. */
body { background-color: transparent !important; }

/* Фон-плитка на всех страницах. На главной своя сборка (.fsi-tiles),
   здесь — готовое полотно из fsi-ui.js.
   Мобильные: слой во всю высоту документа при DPR 2 упирается в лимит
   текстуры GPU (8192px) и размытый слой браузер выбрасывает — поэтому
   там берём предразмытый файл, а runtime-фильтр не включаем. */
@media (max-width: 900px) {
  .fsi-bg-blur { filter: none; }
  .fsi-bg-layer, .fsi-bg-seg { background-image: url('/img/tile-blur.webp'); }
}
body.home .fsi-bg { display: none !important; }   /* у главной свой слой */