/* ===== Секция «Внедрение» — слайды 8/9/10 в одной линейке =====
     РЕДИЗАЙН 2026-08-07. Пришёл на смену трём независимым слайдам
     (css/slide7-whyus.css + css/slide8-howitworks.css + css/slide9-demo.css).

     Figma: 2945:1963 / 2945:2057 / 2945:2135 (три состояния аккордеона слайда
     8), 2898:1120 (слайд 9), 2898:1225 (слайд 10).

     ЧТО ИЗМЕНИЛОСЬ ПО СУТИ. Раньше каждый из трёх слайдов ехал отдельной
     позицией трека со своим контентом. Теперь во всех пяти кадрах Figma лежит
     ОДИН И ТОТ ЖЕ фрейм `listing` (x:105, y:334, 736×340, gap 16), а разница
     между кадрами — только в том, какой его элемент раскрыт. Значит это одна
     непрерывная линейка, и переход между слайдами — не проезд трека, а морф
     этой линейки: раскрытая плашка схлопывается в кружок, соседний кружок
     разворачивается в плашку, весь ряд едет влево.

     Поэтому позиции трека 7/8/9 делят ОДНУ вертикальную полосу (см.
     trackSlot() в js/slides.js и fitStage в js/stage.js) — трек между ними
     физически не двигается. Индексы, TOTAL=11, хеш-роутинг и группы меню при
     этом не тронуты: слайды 9 и 10 остаются полноценными позициями, просто с
     нулевым проездом.

     ГЕОМЕТРИЯ ЛИНЕЙКИ — двухуровневая, размер задаётся РАССТОЯНИЕМ до
     активного (то же правило, что было у аккордеона, только теперь на двух
     уровнях сразу):
       верхний уровень (слоты 8 / 9 / 10):   активный — свой размер,
                                             сосед — кружок 24, дальний — 12;
       нижний уровень (3 карточки внутри 8): 600 / 24 / 12.
     Ширина слота 8 при этом 668 (когда раскрыта 1-я или 3-я карточка) или 680
     (когда 2-я) — так в макете, левый край ряда фиксирован.

     Числа состояний живут в js/section-rollout.js (STEPS) — здесь только
     статика. */

  /* Все три секции стоят на ОДНОЙ высоте трека, поэтому #slide-9/#slide-10
     физически удалены из разметки, а весь контент секции живёт в #slide-8.
     Позиции трека 8 и 9 существуют логически (goTo/меню/хеш), но собственных
     DOM-секций у них больше нет. */
  #slide-8{ top:5320px; }

  /* ----- Заголовки ---------------------------------------------------------
     Три штуки на одном месте (left:194, top:146 — 1:1 из кадров 8-3/9/10;
     в кадре 8-1 макета осталось старое 166, это неубранный хвост). Меняются
     построчным роллапом: каждая строка сидит в своей маске (.sec-line),
     внутри — .sec-line__in, которому GSAP двигает yPercent. Маска нужна
     именно построчная, а не одна на весь заголовок: иначе вторая строка
     выезжала бы из-под первой. */
  /* ⚠️ КООРДИНАТЫ ОТСЧИТЫВАЮТСЯ ОТ .sec-listing, А НЕ ОТ СЛАЙДА (2026-08-08).
     Заголовки физически переехали ВНУТРЬ .sec-listing и встали каждый перед
     своим слотом — ради порядка чтения: раньше в разметке шли подряд три
     заголовка, а потом подряд три блока контента, и в версии для чтения
     получалось «три заголовка, а под ними непонятно что». Теперь пары
     заголовок→контент идут как читаются.
     На раскладку это не влияет: элемент абсолютно спозиционирован, значит из
     flex-потока .sec-listing выпадает и на ширины слотов не влияет вовсе. Но
     точка отсчёта сменилась со слайда на .sec-listing (она position:absolute
     на 105,334) — поэтому 194→89 и 146→−188. Суммы прежние: 105+89=194,
     334−188=146. Менять left/top у .sec-listing теперь нельзя, не поправив
     эти два числа. */
  .sec-heading{
    position:absolute; left:89px; top:-188px; width:993px; margin:0;
    pointer-events:none;
    /* Контейнер — <h2> (2026-08-07), а браузер вешает на заголовок свои
       font-size:1.5em и font-weight:bold. Сейчас это ни на что не влияет:
       кегль и начертание задаёт .sec-line__in. Но наследуется-то браузерное —
       и любой текст, дописанный сюда в будущем, молча приехал бы 24-м жирным.
       Возвращаем наследование от родителя, чтобы тег остался чисто
       семантическим. */
    font-size:inherit; font-weight:inherit;
  }
  /* display:block — потому что .sec-heading стал <h2>, а внутрь заголовка по
     стандарту нельзя класть <div>; строки переехали на <span> (2026-08-07,
     расстановка уровней заголовков). У инлайнового бокса overflow не
     работает — без display:block маска бы просто исчезла и строки поехали бы
     друг из-под друга. Класс и вся механика роллапа не тронуты. */
  .sec-line{ display:block; overflow:hidden; }
  .sec-line__in{
    display:block; will-change:transform;
    font-family:'Unbounded',sans-serif; color:#1A1A1C; white-space:pre;
  }
  /* Слайды 8 и 9 — крупный заголовок в две строки, 64/600, leading-none. */
  .sec-heading--whyus .sec-line, .sec-heading--rollout .sec-line{ height:64px; }
  .sec-heading--whyus .sec-line__in, .sec-heading--rollout .sec-line__in{
    font-weight:600; font-size:64px; line-height:64px;
  }
  /* Слайд 10 — составной: две строки помельче (32/500) и крупный акцент
     (52/600) под ними. Высоты строк 1:1 из макета: 84 на первые две (по 42)
     и 52 на третью, суммарно ровно до top:286. */
  .sec-heading--demo .sec-line--sm{ height:42px; }
  .sec-heading--demo .sec-line--sm .sec-line__in{
    font-weight:500; font-size:32px; line-height:42px;
  }
  .sec-heading--demo .sec-line--lg{ height:56px; margin-top:4px; }
  .sec-heading--demo .sec-line--lg .sec-line__in{
    font-weight:600; font-size:52px; line-height:56px;
  }

  /* ----- Иллюстрация-«сцена» -----------------------------------------------
     Фрейм 750×750 @720,48 — 1:1 из макета (в отличие от прежних .whyus-image/
     .howitworks-image/.demo-image, которым приходилось считать пропорциональное
     сжатие: те картинки вылезали за 1440×760 канвас, эта вписывается ровно).

     Структура повторяет макет послойно, и это не педантизм — именно она даёт
     переход: кружки лежат ОТДЕЛЬНО от персонажа (поэтому могут перелетать на
     новые позиции), персонаж сидит в клипе по эллиптической дуге (поэтому
     может уйти вниз ЗА подставку и не торчать ногами), подставка рисуется
     поверх (поэтому выглядит как край сцены, из-за которого выныривает
     следующий герой). */
  .sec-illus{
    position:absolute; left:720px; top:48px; width:750px; height:750px;
    pointer-events:none;
  }
  /* Декоративные кружки — ОБЩИЙ пул из 8 штук, а не три отдельных набора:
     размеры/позиции/цвета им твинит JS (CIRCLES в js/section-rollout.js).
     Так они перелетают между состояниями, а не мигают кроссфейдом. Восьмой
     на слайде 8 не нужен — уезжает в scale:0. */
  /* Базовые 100×100 — не «примерно нужный» размер, а точка отсчёта: реальный
     диаметр задаётся scale (см. CIRCLE_BASE в js/section-rollout.js), потому
     что анимировать width/height у восьми элементов — это восемь reflow на
     кадр, а transform уходит на композитор. */
  .sec-circle{
    position:absolute; left:0; top:0; width:100px; height:100px; border-radius:50%;
    will-change:transform; transform-origin:50% 50%; z-index:1;
  }
  /* Клип по «Ellipse 61» из макета (1414×820 @ -332,-131 внутри фрейма 750):
     центр 375,279, радиусы 707×410 — нижняя точка дуги приходится ровно на
     y:689, туда же садится верх подставки. Персонажу этого достаточно, чтобы
     уйти «под сцену» без единого лишнего элемента. */
  /* z-index:2 — между кружками (1) и подставкой (3). Он нужен ещё и для того,
     чтобы один кружок мог оказаться ПОВЕРХ персонажа: на слайде 10 малый
     малиновый в макете вынесен за masking-illustration, и JS поднимает ему
     слой до 3 (см. Z_OVER в js/section-rollout.js). */
  .sec-illus__clip{
    position:absolute; inset:0; overflow:hidden; z-index:2;
    clip-path:ellipse(707px 410px at 375px 279px);
  }
  .sec-char{
    position:absolute; left:0; top:0; width:750px; height:750px;
    object-fit:contain; will-change:transform,opacity;
  }
  /* Подставка («Subtract» в макете) — тонкий серп под ногами. У слайдов 8 и 9
     она одна и та же (526.571×29.373 @111.714,659.627), у слайда 10 шире и
     выше (725.38×57.988 @12.31,631.012) — поэтому два элемента с кроссфейдом,
     а не один морфящийся path (морфинг path требовал бы платного MorphSVG). */
  .sec-stand{ position:absolute; display:block; z-index:3; }
  .sec-stand--narrow{ left:111.714px; top:659.627px; width:526.571px; height:29.373px; }
  .sec-stand--wide{ left:12.31px; top:631.012px; width:725.38px; height:57.988px; }

  /* ----- Линейка -----------------------------------------------------------
     ГЛАВНАЯ ТОНКОСТЬ: ровно ТРИ элемента верхнего уровня, всегда. Соблазн
     положить в один flex-ряд все пять карточек (3 от слайда 8 + 9 + 10)
     разбивается о `gap`: у схлопнутого в ноль элемента зазор всё равно
     остаётся, и ряд оказывается на 32px шире, чем в макете. Поэтому три
     карточки слайда 8 обёрнуты в свой слот — он и есть тот «кружок», в
     который сворачивается весь слайд 8 целиком. */
  .sec-listing{
    position:absolute; left:105px; top:334px; height:340px;
    display:flex; align-items:center; gap:16px;
    z-index:5;
  }
  .sec-slot{
    position:relative; flex:none; height:340px; width:12px;
    background:#fff; overflow:hidden; border-radius:32px;
    will-change:width,height;
  }
  /* Слот слайда 8 — свой внутренний ряд. align-items:center, чтобы при
     схлопывании слота в кружок карточки внутри не «выпадали» вверх.
     Фон ПРОЗРАЧНЫЙ, пока слот раскрыт, и белый, когда он схлопнут в кружок —
     этим занимается JS. Белый фон «всегда», как у остальных слотов, залил бы
     зазоры между тремя карточками, и вместо раскрытой карточки с двумя
     полосками рядом получался бы один сплошной белый прямоугольник на 668px
     (поймано на первом же прогоне в браузере). */
  .sec-slot--group{
    display:flex; align-items:center; gap:16px;
    background:rgba(255,255,255,0);
  }

  /* Карточка. padding у самой карточки быть НЕ МОЖЕТ: при box-sizing:border-box
     он задаёт нижнюю границу ширины, и схлопнутая карточка вместо 12px
     замирает на 64 (32+32) — поймано вживую на прошлом редизайне, см. память
     проекта. Отступы живут на внутренней обёртке. */
  .sec-card{
    position:relative; flex:none; height:340px; width:12px;
    background:#fff; border-radius:32px; overflow:hidden; padding:0;
  }
  /* Обёртка ФИКСИРОВАННОЙ ширины 600 (=ширина раскрытой карточки). Без неё
     текст переливался бы в одну букву на строку, пока карточка сжимается —
     а так он просто уезжает под обрезку, сохраняя раскладку. Гасится по
     opacity, иначе из-под скругления выглядывают обрезки букв. */
  .sec-card__inner{
    width:600px; flex:none; box-sizing:border-box; padding:32px;
    display:flex; flex-direction:column; gap:32px;
  }
  .sec-card__title{
    margin:0; font-family:'Unbounded',sans-serif; font-weight:500;
    font-size:40px; line-height:1; color:#1A1A1C;
  }
  .sec-card__list{ display:flex; flex-direction:column; gap:24px; overflow:hidden; }
  /* align-items по умолчанию flex-start (иконка по ВЕРХУ текста — верно для
     пунктов с переносом), модификатор --center только на однострочных. */
  .sec-card__item{ display:flex; align-items:flex-start; gap:16px; }
  .sec-card__item--center{ align-items:center; }
  .sec-check{
    flex:none; width:32px; height:32px; border-radius:100px; background:#1A1A1C;
    display:flex; align-items:center; justify-content:center;
  }
  .sec-check svg{ width:20px; height:15px; display:block; }
  .sec-check svg polyline{ fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  .sec-card__item p{
    margin:0; flex:1 1 auto;
    font-family:'Unbounded',sans-serif; font-weight:400; font-size:16px; line-height:1.3;
    color:#1A1A1C;
  }
  /* Карточка слайда 10 — не чек-лист, а абзац 24/500 и кнопка по центру.
     Кнопка в макете 268×52 @166,240; 166+268/2 = 300 = центр 600-й карточки,
     поэтому align-self:center вместо фиксированного left. Ширина — по
     содержимому с padding, не фиксированная: подобранная под текст в одном
     браузере переполняется в другом при иных метриках шрифта (тот же довод,
     что у .connect-cta). */
  .sec-card__text{
    margin:0; font-family:'Unbounded',sans-serif; font-weight:500;
    font-size:24px; line-height:1.3; color:#1A1A1C;
  }
  .sec-cta{
    align-self:center; margin-top:21px; height:52px; padding:0 24px;
    display:flex; align-items:center; justify-content:center;
    background:#1A1A1C; border:none; border-radius:26px; cursor:pointer;
  }
  .sec-cta__text{
    margin:0; font-family:'Source Sans Pro',sans-serif; font-weight:600; font-size:16px;
    letter-spacing:0.7143px; text-transform:uppercase; color:#fff; white-space:nowrap;
  }

  /* Кружки-индикаторы кликабельны (выбор пользователя): весь ряд ловит
     события, отдельные карточки — нет, чтобы попадание считалось от РЕАЛЬНЫХ
     границ, а не от вложенных элементов (та же схема хит-зон, что у прежнего
     аккордеона, см. pickSlot в js/section-rollout.js). */
  .sec-listing{ pointer-events:auto; cursor:default; }
  .sec-listing *{ pointer-events:none; }
  .sec-cta{ pointer-events:auto; }