/* =========================================================
   noumy.ai — блок 5 «Как меняется процесс»:
   «Тот же результат, только быстрее»

   Размеры сняты с макета (Figma, секция 38:4867 —
   десктоп «макет» 38:4868, 1440px). Кадры анимации —
   фреймы «1»…«4» той же секции.

   Пока свёрстан ТОЛЬКО десктоп 1440 (решение от 8 сентября
   2026). Мобильный макет Настя пришлёт отдельно — под него
   заведём медиазапрос, сетку и упрощённый таймлайн.

   ЧТО ЗДЕСЬ ПРОИСХОДИТ
   Двенадцать «кубиков» стоят в четырёх колонках, все
   выровнены по одной нижней линии и в сумме дают ровный
   прямоугольник 1360 × 672. Слева серая группа «Обычное
   интервью», справа синяя «ИИ-аватар», между группами 24px.
   Внутри группы колонки разделены зазором в 2px — сквозь
   него видно фон страницы, и именно поэтому «перемычки»
   читаются как перемычки: это полоски цвета кубика,
   перекрывающие зазор в стыке.

   АНИМАЦИЯ (запускается один раз, см. claude/process.js)
   Кубики растут снизу вверх, как столбцы графика, пятью
   тактами по два кубика (левая и правая половины идут
   зеркально синхронно):
     такт 0 — нижние кубики левых колонок обеих групп
     такт 1 — верхние кубики левых колонок
     такт 2 — нижние кубики правых колонок
     такт 3 — средние кубики правых колонок
     такт 4 — верхние кубики правых колонок
   Такты идут внахлёст с шагом --p-step: следующая пара
   стартует, не дожидаясь конца предыдущей.

   Растёт именно height, а не scaleY, поэтому текст внутри
   не деформируется. Содержимое обрезается (overflow: hidden),
   крупное значение прибито к низу кубика и стоит на месте,
   мелкий лейбл прибит к верхней кромке и проявляется
   opacity, когда кубик дорос.

   Перемычки появляются последними, все восемь одновременно,
   и не просто проявляются, а прорастают от одного края:
   горизонтальные — слева направо, вертикальные — снизу вверх.

   Заголовочные карточки со скруглением («Обычное интервью
   без ИИ-аватара» и «ИИ-аватар») статичны и видны сразу.
   Их форма — не SVG, а обычный border-radius с разными
   радиусами углов: 16/120/120/16 у серой (правый радиус
   ровно в половину высоты, отсюда полукруг) и 16/144/144/128
   у синей. Значения совпадают с путями из Фигмы один в один.
   ========================================================= */

.process {
  position: relative;
  background: var(--bg);

  /* ЕДИНИЦА МАКЕТА — как в блоках 3 и 4: макетный размер S
     пишется как calc(S * var(--u)). В отличие от соседей
     здесь --u ограничена сверху 1px: сетка блока абсолютная,
     и на окнах шире 1440 её нельзя раздувать за max-width.
     --u — это длина (как и у соседей), поэтому в min() второй
     аргумент тоже длина: min(1, …) было бы невалидно и уронило
     бы все calc в блоке. */
  --u: min(1px, (100vw - 80px) / 1360);

  /* цвета блока: серая половина и синяя половина */
  --p-dark: #353535;          /* = var(--ink), фон серых кубиков */
  --p-dark-label: #9F9F9F;    /* мелкий лейбл на сером */
  --p-accent: #0F3DF2;        /* = var(--accent), фон синих кубиков */
  --p-accent-label: #AFC0EA;  /* мелкий лейбл на синем */

  /* ТАЙМИНГИ — вся скорость анимации настраивается отсюда.
     --p-grow  — сколько растёт один кубик
     --p-step  — сдвиг между тактами (такты идут внахлёст)
     --p-label — когда внутри кубика проявляется мелкий лейбл,
                 отсчитывается от старта своего такта
     --p-bridge-delay считается сам: последний такт стартует
                 через 4 шага, ему нужен ещё --p-grow на рост —
                 и ровно в этот момент, без паузы, включаются
                 перемычки. Получается чуть раньше, чем на
                 последних кубиках доедет мелкий лейбл, и это
                 намеренно: перемычки идут сразу за ростом.
     Замедлены вдвое против первой версии (правка от 8 сентября
     2026: на первом варианте столбики успевали отыграть, пока
     блок только въезжает в кадр). */
  --p-grow: 1240ms;
  --p-step: 300ms;
  --p-label: 920ms;
  --p-label-fade: 640ms;
  --p-bridge-delay: calc(4 * var(--p-step) + var(--p-grow));
  --p-bridge: 880ms;
  /* Разгон и мягкое торможение без отскока. Кривая ровнее,
     чем была вначале: у первой версии (.22, 1, .36, 1) к
     четверти времени столбик проходил три четверти пути и
     это читалось как рывок. Здесь к четверти времени —
     примерно половина.
     Соседи, если захочется подвинуть: (.33, 1, .68, 1) —
     резче, ближе к первой версии; (.5, 1, .89, 1) — ещё
     ровнее и с более долгим доездом. */
  --p-ease: cubic-bezier(.4, .8, .35, 1);
}

.process__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 40px;
}

/* «/ Как меняется процесс» — Inter Regular 20/1.3, трекинг
   -0.4px, синий. Отступ до заголовка 32px, как в блоках 2–4. */
.process__eyebrow {
  margin: 0 0 32px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* Шапка блока: заголовок слева, подзаголовок справа, оба
   начинаются на одной высоте. Колонки 668 + 24 + 668 —
   те же, что у групп кубиков ниже, поэтому подзаголовок
   стоит ровно над синей половиной. */
.process__head {
  display: grid;
  grid-template-columns: calc(668 * var(--u)) calc(668 * var(--u));
  gap: calc(24 * var(--u));
  align-items: start;
  margin: 0 0 calc(105 * var(--u));
}

/* Inter Medium 64px, интерлиньяж 1.0, трекинг -2.56px.
   Ширина колонки 668 сама переносит строку после «результат,». */
.process__title {
  margin: 0;
  font-size: clamp(40px, calc(64 * var(--u)), 64px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--ink);
}

/* Inter Regular 20/1.3, трекинг -0.8px, ширина 553 из макета. */
.process__sub {
  margin: 0;
  max-width: calc(553 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: var(--ink);
}

/* ============================ СЕТКА ============================
   Абсолютная раскладка: все кубики привязаны к нижней кромке
   поля (bottom), поэтому рост height двигает только верхнюю
   кромку — ровно то, что нужно «столбику графика».
   --l / --b / --w / --h — макетные координаты в пикселях. */

.process__chart {
  position: relative;
  width: 100%;
  height: calc(672 * var(--u));
}

.pcell {
  position: absolute;
  left: calc(var(--l) * var(--u));
  bottom: calc(var(--b) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}

/* --- заголовочные карточки: только обводка и скругление --- */

.pcell--head {
  border: 1px solid var(--muted);
  border-radius: calc(16 * var(--u)) calc(120 * var(--u))
                 calc(120 * var(--u)) calc(16 * var(--u));
}

.pcell--head.pcell--accent {
  border-color: var(--p-accent);
  border-radius: calc(16 * var(--u)) calc(144 * var(--u))
                 calc(144 * var(--u)) calc(128 * var(--u));
}

/* Inter Regular 32/1.1, трекинг -1.6px. У серой карточки
   текст начинается на 14px от верха, у синей на 16px —
   так в макете.

   Ширина взята с запасом (в макете 236): переносы здесь
   расставлены руками через <br>, а широкая коробка страхует
   от лишнего переноса, если Inter не успел догрузиться и
   строку меряет более широкий системный шрифт. */
.pcell__head-text {
  position: absolute;
  left: calc(16 * var(--u));
  top: calc(14 * var(--u));
  width: calc(280 * var(--u));
  margin: 0;
  font-size: calc(32 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.05em;
  color: var(--ink);
}

.pcell--accent .pcell__head-text {
  top: calc(16 * var(--u));
  width: auto;
  color: var(--p-accent);
}

/* --- растущие кубики --- */

.pbar {
  overflow: hidden;
  background: var(--p-dark);
  /* до запуска высота нулевая; финальная высота приезжает
     из --h, когда на блок повесят .is-run */
  height: 0;
  transition: height var(--p-grow) var(--p-ease);
  transition-delay: calc(var(--step) * var(--p-step));
}

.pbar--accent { background: var(--p-accent); }

.process__chart.is-run .pbar { height: calc(var(--h) * var(--u)); }

/* Мелкий лейбл прибит к верхней кромке кубика: он едет вверх
   вместе с ней, но виден становится только когда кубик дорос. */
.pbar__label {
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  top: calc(24 * var(--u));
  margin: 0;
  font-size: calc(20 * var(--u));
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--p-dark-label);
  opacity: 0;
  transition: opacity var(--p-label-fade) ease;
  /* проявляется к концу роста своего кубика */
  transition-delay: calc(var(--step) * var(--p-step) + var(--p-label));
}

.pbar--accent .pbar__label { color: var(--p-accent-label); }

.process__chart.is-run .pbar__label { opacity: 1; }

/* Крупное значение прибито к низу и во время роста стоит
   на месте — его просто открывает поднимающаяся кромка.
   Inter Regular 40/0.93, трекинг -2.4px. */
.pbar__value {
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  bottom: calc(24 * var(--u));
  margin: 0;
  font-size: calc(40 * var(--u));
  line-height: 0.93;
  letter-spacing: -0.06em;
  color: var(--white);
}

/* три значения в макете стоят в одну строку и переносить
   их нельзя — иначе кубик станет ниже своего содержимого */
.pbar__value--nowrap { white-space: nowrap; }

/* ============================ ПЕРЕМЫЧКИ ============================
   Полоска 10px цвета кубика, перекрывающая 2px зазор в стыке.
   Лежат поверх кубиков (позже в потоке) — цвет тот же, поэтому
   видна только та часть, что попала в зазор.
   Появляются все разом, прорастая от одного края. */

.pbridge {
  position: absolute;
  left: calc(var(--l) * var(--u));
  bottom: calc(var(--b) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  background: var(--p-dark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--p-bridge) var(--p-ease);
  transition-delay: var(--p-bridge-delay);
}

.pbridge--accent { background: var(--p-accent); }

/* вертикальные перемычки в зазорах между колонками
   прорастают снизу вверх */
.pbridge--v {
  transform: scaleY(0);
  transform-origin: center bottom;
}

.process__chart.is-run .pbridge { transform: scaleX(1); }
.process__chart.is-run .pbridge--v { transform: scaleY(1); }

/* ==================================================================
   ДО 1200: РАСКЛАДКА СТРОКАМИ

   Ниже 1200 макет другой (кадры «1200-900», «900-760», «760-360»):
   две колонки по пять строк, блобов с обводкой нет — заголовки
   колонок просто текст, перемычек нет совсем.

   Порядок строк задан переменной --row прямо в разметке, поэтому
   один и тот же DOM раскладывается и в четыре колонки на десктопе
   (абсолютом), и в пять строк здесь (гридом) — переставлять
   элементы местами не нужно.

   Строки растут вширь, слева направо, обе карточки строки стартуют
   одновременно и каждая от своего левого края. Рост сделан через
   clip-path, а не через width: ширина карточки остаётся полной, и
   текст внутри не переверстывается на каждом кадре — его просто
   открывает уезжающая вправо кромка. Тайминги те же, что на
   десктопе: --p-grow на строку, --p-step между строками.

   Переносы строк, проставленные руками для десктопа, здесь
   отключаются (.brk) — на широких карточках текст переносится сам,
   как в макете.
   ================================================================== */

.phead-mini { display: none; }

/* метка первой строки для наблюдателя, см. claude/process.js */
.prow-anchor { display: none; }

@media (max-width: 1199.98px) {

  .process {
    /* поля и сетка */
    --p-pad: 40px;
    --p-padtop: 80px;
    --p-padbot: 56px;
    --p-gap: 16px;          /* между колонками */
    --p-rowgap: 16px;       /* между строками */
    --p-rowh: 154px;        /* высота строки */
    --p-cardpad: 24px;

    /* кегли */
    --p-eyebrow-size: 20px;
    --p-eyebrow-gap: 32px;
    --p-title-size: 50px;
    --p-sub-gap: 20px;      /* работает, когда подзаголовок под заголовком */
    --p-head-size: 32px;
    --p-head-lh: 1.1;
    --p-label-size: 20px;
    --p-value-size: 32px;
  }

  /* ручные переносы десктопа выключены — текст переносится сам */
  .process .brk { display: none; }

  .process__inner {
    padding: var(--p-padtop) var(--p-pad) var(--p-padbot);
  }

  .process__eyebrow {
    margin-bottom: var(--p-eyebrow-gap);
    font-size: var(--p-eyebrow-size);
  }

  /* заголовок слева, подзаголовок справа — как в кадре «1200-900» */
  .process__head {
    grid-template-columns: 1.42fr 1fr;
    gap: 24px;
    margin-bottom: 64px;
  }

  .process__title { font-size: var(--p-title-size); }

  .process__sub {
    max-width: none;
    font-size: 16px;
  }

  /* ---------- сетка: две колонки, шапка в первой строке ---------- */

  .process__chart {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--p-gap);
    row-gap: var(--p-rowgap);
    align-items: start;
    width: auto;
    height: auto;
  }

  .process__chart .pcell--head {
    position: static;
    grid-row: 1;
    grid-column: 1;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    /* до первой строки в макете на 8px больше, чем между строками */
    margin-bottom: 8px;
  }

  .process__chart .pcell--head.pcell--accent { grid-column: 2; }

  .process__chart .pcell__head-text {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    font-size: var(--p-head-size);
    line-height: var(--p-head-lh);
  }

  /* ---------- карточки строк ---------- */

  .process__chart .pbar {
    position: static;
    grid-row: var(--row);
    grid-column: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: auto;
    height: var(--p-rowh);
    padding: var(--p-cardpad);
    /* закрыта справа налево, открывается слева направо */
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--p-grow) var(--p-ease);
    transition-delay: calc((var(--row) - 2) * var(--p-step));
  }

  .process__chart .pbar--accent { grid-column: 2; }

  .process__chart.is-run .pbar {
    height: var(--p-rowh);
    clip-path: inset(0 0 0 0);
  }

  .process__chart .pbar__label,
  .process__chart .pbar__value {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
  }

  .process__chart .pbar__label {
    font-size: var(--p-label-size);
    transition-delay: calc((var(--row) - 2) * var(--p-step) + var(--p-label));
  }

  .process__chart .pbar__value {
    font-size: var(--p-value-size);
    /* значение важнее лейбла: если на узком экране лейбл вдруг
       займёт на строку больше, чем в макете, ужмётся и обрежется
       он, а крупное значение останется на месте и целиком */
    flex: 0 0 auto;
  }

  .process__chart .pbar__label {
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  /* метка первой строки: лежит в ячейке второй строки, высоту грида
     не меняет (карточки там ровно такой же высоты), ничего не рисует */
  .process__chart .prow-anchor {
    display: block;
    grid-row: 2;
    grid-column: 1 / -1;
    height: var(--p-rowh);
    pointer-events: none;
  }

  /* перемычек в этой раскладке нет */
  .process__chart .pbridge { display: none; }
}

/* ---------- 760…900: те же строки, поля 16, подзаголовок под заголовок ---------- */

@media (max-width: 899.98px) {
  .process {
    --p-pad: 16px;
    --p-padtop: 50px;
    --p-padbot: 50px;
  }

  .process__head {
    grid-template-columns: 1fr;
    gap: var(--p-sub-gap);
  }
}

/* ---------- ниже 760: мобильный кадр ---------- */

@media (max-width: 759.98px) {
  .process {
    --p-pad: 12px;
    --p-gap: 12px;
    --p-rowgap: 8px;
    --p-rowh: 115px;
    --p-cardpad: 12px;

    --p-eyebrow-size: 16px;
    --p-eyebrow-gap: 24px;
    --p-title-size: 40px;
    --p-sub-gap: 16px;
    --p-head-size: 24px;
    --p-head-lh: 1.03;
    --p-label-size: 16px;
    --p-value-size: 20px;
  }

  /* в макете на мобильном другая формулировка, короче */
  .process .phead-wide { display: none; }
  .process .phead-mini { display: inline; }
}

/* ============================ ДОСТУПНОСТЬ ============================
   При reduced-motion показываем сразу финальное состояние — и в
   колоночной раскладке, и в строчной. Блок стоит последним, чтобы
   перебивать оба варианта выше. */

@media (prefers-reduced-motion: reduce) {
  .process__chart .pbar,
  .process__chart .pbar__label,
  .process__chart .pbridge { transition: none; }

  .process__chart .pbar { clip-path: none; }
  .process__chart .pbar__label { opacity: 1; }
  .process__chart .pbridge { transform: none; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1200px) {
  .process__chart .pbar { height: calc(var(--h) * var(--u)); }
}