/* ============================================================
   case.css — единый ритм и общие компоненты страниц проектов.

   Подключается ПОСЛЕ встроенных стилей каждой страницы и переопределяет
   их отступы. Раньше у Arivin между блоками было 360 px пустоты
   (180 + 180), у Plants и PDA около 270, и страницы выглядели дырявыми.
   Теперь шаг один на всех: --sec сверху и снизу секции, значит между
   блоками около 170 px на 1440 и около 100 px на телефоне.
   Внутри блока зазоры меньше, чем между блоками: --blk и --blk-lg.
   ============================================================ */
:root {
  --sec: clamp(56px, 7.6vw, 112px);        /* пол-расстояния между секциями */
  --sec-pad: var(--sec);                  /* так называется у Plants и PDA */
  --block-gap: var(--blk-lg);
  --blk: clamp(40px, 4.4vw, 64px);        /* заголовок → содержимое */
  --blk-lg: clamp(56px, 6.4vw, 96px);       /* крупный блок → крупный блок внутри секции */
}

/* --- Секции: один шаг сверху и снизу ---------------------------------------- */
.c-hero { padding-block: calc(var(--sec) * 0.8) var(--sec); }
.c-state, .c-task, .c-ba, .c-fix, .ds, .c-mob, .c-live, .c-find, .c-dir, .c-resp { padding-block: var(--sec); }
.c-figures { padding-block: 0 var(--sec); }
.flow__head { padding-block: var(--sec) var(--blk); }
.flow__note { padding-block: var(--blk) var(--sec); }
/* Следующий проект — другое по смыслу, поэтому воздуха перед ним больше */

/* --- Внутри секций ------------------------------------------------------------ */
.c-hero__rig, .c-hero__mac { padding-block-start: var(--blk-lg); }
.c-ba__pairs, .c-ba__gains { padding-block-start: var(--blk-lg); }
.c-fix__grid, .ds__facts, .c-mob__row { padding-block-start: var(--blk); }

/* --- Возврат «All work»: строка над заголовком, а не часть меню --------------
   Шапка одинакова на всех страницах и содержит только меню и «Get in touch»,
   поэтому возврат к работам живёт здесь, в начале первого экрана. */
.c-back { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 0.55em; margin-block-end: var(--blk); padding: 8px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--color-line); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--color-fg); transition: background var(--dur-300) var(--ease-out), color var(--dur-300) var(--ease-out); }
.c-back span { transition: transform var(--dur-300) var(--ease-out); }
.c-back:hover, .c-back:focus-visible { background: var(--color-fg); color: var(--color-bg); }
.c-back:hover span { transform: translateX(-4px); }
.c-back:active { scale: 0.96; }

/* --- Снимки «до» и «после» одной высоты --------------------------------------
   Раньше «до» были 2000×1750, а «после» 2000×1250, и пары выходили разными.
   Теперь у всех один формат 16:10, обрезка по верху, ряд компактнее. */
.c-ba__pairs { grid-column: 2 / 12; display: grid; grid-template-columns: 1fr; gap: var(--blk-lg); }
/* Каждая пара — самостоятельный блок со своей линией и заголовком: страница
   «Science» и страница «Pipeline» не должны сливаться в одно полотно. */
.pairrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--blk) var(--space-32); padding-block-start: var(--blk); border-block-start: 1px solid var(--color-line); }
.pairrow__t { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--space-24); }
.pairrow__t .label { flex: none; }
@media (max-width: 900px) { .pairrow { grid-template-columns: 1fr; } }
.pair img { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }

/* --- Мобильные макеты: Dynamic Island внутри экрана и поле статус-бара --------
   Остров стоял на самой кромке рамки, выше, чем на настоящем iPhone, а
   скриншоты начинались вплотную к нему. Теперь остров отступает от кромки
   на 11 px, а под ним лежит полоса статус-бара цвета самого скриншота. */
.c-mob__row { grid-column: 3 / 11; gap: var(--space-32); }
/* Только телефоны Arivin (.c-mob). У Plants и PDA рамка устроена иначе, и общие
   правила ломали их мобильные экраны: меню уезжало, кадры оказывались со сдвигом. */
.c-mob .phone__pill { inset-block-start: 20px; inline-size: 66px; block-size: 20px; }
.c-mob .phone__screen { display: flex; flex-direction: column; padding-block-start: 11%; background: var(--scr, #fff); }
.c-mob .phone__screen img { flex: 1 1 auto; min-block-size: 0; block-size: auto; inline-size: 100%; object-fit: cover; object-position: 50% 0; }

/* --- Спецификация дизайн-системы: снимок и текст — две разные вещи --------------
   Раньше снимок и абзац сливались в серую кашу. Теперь это сетка 5/7 с
   настоящим зазором, снимок в рамке, у текста свой заголовок и своя кнопка. */
.ds__out { grid-template-columns: 5fr 7fr; gap: var(--blk-lg); align-items: start; }
.ds__out figure { max-inline-size: 440px; }
.ds__out img { box-shadow: 0 0 0 1px var(--panel-line), 0 30px 60px rgba(13, 13, 12, 0.14); }
.ds__out > div { padding-block-start: var(--space-16); max-inline-size: 52ch; }
.ds__out .t-title { padding-block-end: var(--space-16); }
.ds__out p { font-size: 1rem; line-height: 1.55; padding-block: 0 var(--space-32); }

@media (max-width: 900px) {
  :root { --sec: clamp(64px, 17vw, 88px); --blk: 40px; --blk-lg: 56px; }
  .c-ba__pairs { grid-column: 1 / -1; }
  .c-mob__row { grid-column: 1 / -1; gap: var(--space-32); }
  .ds__out { grid-template-columns: 1fr; }
  .ds__out figure { max-inline-size: 320px; }
}

/* --- Ноутбук: основание не шире окна ------------------------------------------
   У Plants основание было 112 % ширины и давало 50 px горизонтальной прокрутки;
   у PDA исправили до 104 %. Теперь одинаково у всех. */
.mac__base { inline-size: 104%; margin-inline-start: -2%; }

/* Под ноутбуком Arivin уже лежит отражение, лишний отступ не нужен */
.c-hero:has(.rig) { padding-block-end: calc(var(--sec) * 0.3); }

/* --- Разделение блоков: нейтральные плашки на всю ширину ----------------------
   Блоки с классом .band чередуются с обычными. Плашка серая, не розовая: белый
   с малой долей на фоне страницы. Заливка — тенью на всю ширину окна, обрезанной
   по высоте секции, поэтому горизонтальной прокрутки нет. */
:root { --band: #151518; --band-strong: #212126; }
.band { background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
/* «Следующий кейс»: самая светлая нейтральная плашка, линии сверху и снизу и вдвое больше воздуха */
.c-nextcase.wrap { background: var(--band-strong); box-shadow: 0 0 0 100vmax var(--band-strong); clip-path: inset(0 -100vmax); padding-block: calc(var(--sec) * 2); }

/* --- Следующий проект: один вид на всех страницах -------------------------------
   Порядок везде один: PDA → Arivin → Studio Leaf → AONG. У AONG страницы ещё
   нет, поэтому блок показывает неактивное состояние «In progress». */
.c-nextcase__in { grid-column: 1 / -1; }
.c-nextcase__label { font-size: clamp(1.75rem, 4.2vw, 3.5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; text-transform: uppercase; }
.c-nextcase__link { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); margin-block-start: var(--space-32); padding-block: var(--space-24); border-block-start: 1px solid var(--color-line); }
.c-nextcase__link::after { content: ''; position: absolute; inset-block-start: -1px; inset-inline-start: 0; inline-size: 100%; block-size: 1px; background: var(--color-fg); transform: scaleX(0); transform-origin: right; transition: transform 800ms var(--ease-smooth); }
a.c-nextcase__link:hover::after, a.c-nextcase__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.c-nextcase__name { font-size: clamp(1.25rem, 2.2vw, 1.875rem); font-weight: 500; letter-spacing: -0.028em; transition: transform 700ms var(--ease-smooth); }
a.c-nextcase__link:hover .c-nextcase__name, a.c-nextcase__link:focus-visible .c-nextcase__name { transform: translateX(12px); }
.c-nextcase__go { flex: none; inline-size: 54px; block-size: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 1.125rem; box-shadow: inset 0 0 0 1px var(--color-line); transition: background-color 450ms var(--ease-smooth), color 450ms var(--ease-smooth), transform 700ms var(--ease-smooth); }
a.c-nextcase__link:hover .c-nextcase__go, a.c-nextcase__link:focus-visible .c-nextcase__go { background: var(--color-fg); color: var(--color-bg); transform: translateX(6px); }
.c-nextcase__hint { padding-block-start: var(--space-16); max-inline-size: 60ch; }
/* Проект в работе: видно, но нажать нельзя */
.c-nextcase__link.is-off { cursor: not-allowed; color: var(--color-fg-muted); }
.c-nextcase__soon { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--color-line); font-size: 0.9375rem; font-weight: 600; }
.c-nextcase__dots { display: inline-flex; gap: 3px; }
.c-nextcase__dots i { inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; animation: wip-dot 1.2s ease-in-out infinite; }
.c-nextcase__dots i:nth-child(2) { animation-delay: 0.2s; }
.c-nextcase__dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes wip-dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .c-nextcase__dots i { animation: none; opacity: 0.6; } }

/* --- Границы цвета: воздуха столько же, сколько между блоками одного цвета ----
   Между двумя тёмными секциями пустота читается как 2×sec, а на стыке с белой
   панелью глаз видит только свою половину и принимал её за «маленькие
   промежуточки». Поэтому у всех, кто граничит с панелью, отступ у границы
   больше. */
.panel .c-task, .panel .ds { padding-block: calc(var(--sec) * 1.5); }
.panel + section, .panel + .flow .flow__head { padding-block-start: calc(var(--sec) * 1.5); }
section:has(+ .panel) { padding-block-end: calc(var(--sec) * 1.5); }
.panel + .flow { padding-block-start: 0; }
.flow:has(+ .panel) .flow__note { padding-block-end: calc(var(--sec) * 1.5); }

/* --- Спецификация системы: отделена линией и воздухом от того, что выше -------- */
.ds__out { margin-block-start: var(--blk-lg); padding-block-start: var(--blk-lg); border-block-start: 1px solid var(--panel-line); }

/* --- Мобильные экраны: компактнее ---------------------------------------------
   У Arivin телефоны уже, а у Plants шесть экранов по 432×935 стали по ~270 px:
   раньше каждый занимал почти целый экран по высоте. */
.c-mob__row { grid-column: 4 / 10; }
.resp__row { grid-column: 3 / 11; gap: var(--blk-lg) var(--space-32); padding-block-start: var(--blk); }
.resp__rules { padding-block-start: var(--blk-lg); }
@media (max-width: 900px) { .c-mob__row, .resp__row { grid-column: 1 / -1; } }

/* Поток без заключительной заметки (у Plants) не имел нижнего отступа, и следующий
   блок вплотную подходил к концу прокрутки. */
.flow:not(:has(.flow__note)) { padding-block-end: var(--sec); }

/* --- Было и стало: кадр целиком в окне и можно остановиться -----------------------
   Кадр ≤ 62 % высоты окна (раньше был почти во всю ширину и не помещался), а секция
   закрепляет его на путь прокрутки в 130 % окна: сначала «до» стоит, потом идёт срез,
   потом стоит «после». Без движения (?static, reduced-motion, телефон) всё как обычная
   страница: оба кадра видны, срез на середине. */
.c-ba__stage { --cut-h: min(62dvh, 560px); grid-column: 1 / -1; margin-block-start: var(--blk); }
.c-ba__stick { inline-size: min(100%, calc(var(--cut-h) * 1.6)); margin-inline: auto; }
.c-ba__stick .c-ba__cut { grid-column: auto; margin: 0; }
.c-ba__stick .turn__legend { grid-column: auto; }
.has-motion .c-ba__stage { block-size: calc(var(--cut-h) + 70px + 90dvh); }
/* кадр стоит посередине окна, а не прижат к шапке */
.has-motion .c-ba__stick { position: sticky; inset-block-start: max(calc(var(--bar-h) + 16px), calc(50dvh - (var(--cut-h) + 70px) / 2)); }
@media (max-width: 900px) {
  .has-motion .c-ba__stage { block-size: auto; }
  .has-motion .c-ba__stick, .c-ba__stick { position: static; inline-size: 100%; }
}

/* --- «Предыдущий проект» рядом со «Следующим»: две колонки, у первого кейса слева «All work» --- */
.c-nextcase__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--blk) var(--space-48); }
.c-nextcase__col--prev { padding-inline-end: var(--space-48); border-inline-end: 1px solid var(--color-line); }
.c-nextcase__col--prev .c-nextcase__link { justify-content: flex-start; gap: var(--space-24); }
.c-nextcase__go--back { order: -1; }
a.c-nextcase__link:hover .c-nextcase__go--back, a.c-nextcase__link:focus-visible .c-nextcase__go--back { transform: translateX(-6px); }
.c-nextcase__col--prev a.c-nextcase__link:hover .c-nextcase__name { transform: translateX(-12px); }
@media (max-width: 900px) { .c-nextcase__in { grid-template-columns: 1fr; } .c-nextcase__col--prev { padding-inline-end: 0; border-inline-end: 0; } }

/* --- Поток экранов: все экраны одной лентой в одной рамке (flow-strip.js) ----------- */
.flow__scroller.is-strip .flow__stage { position: sticky; }
.frame__body .flow__strip { position: absolute; inset-block-start: 0; inset-inline: 0; will-change: transform; }
.frame__body .flow__strip img { position: static; display: block; inline-size: 100%; block-size: auto; }
/* Рамка-лента выше: сайт читают, прокручивая, а не разглядывая миниатюру */
.flow__scroller.is-strip .flow__screens { aspect-ratio: auto; block-size: min(76dvh, 700px); }

/* --- Предыдущий / следующий проект: компактнее и в цвете проекта-цели ----------------
   Цвет у каждого проекта свой (терракота PDA, бирюза Arivin, зелень Studio Leaf, лайм AONG):
   он только в линии, стрелке и наведении, текст остаётся нейтральным. */
.c-nextcase.wrap { padding-block: calc(var(--sec) * 1.5); }
.c-nextcase__label { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: none; color: var(--color-fg-muted); line-height: 1.4; }
.c-nextcase__link { margin-block-start: var(--space-12); padding-block: var(--space-16); border-block-start-color: var(--proj, var(--color-line)); }
.c-nextcase__link::after { background: var(--proj, var(--color-fg)); }
.c-nextcase__name { font-size: clamp(1rem, 1.5vw, 1.25rem); letter-spacing: -0.02em; }
.c-nextcase__go { inline-size: 40px; block-size: 40px; font-size: 1rem; color: var(--proj, var(--color-fg)); box-shadow: inset 0 0 0 1.5px var(--proj, var(--color-line)); }
a.c-nextcase__link:hover .c-nextcase__go, a.c-nextcase__link:focus-visible .c-nextcase__go { background: var(--proj, var(--color-fg)); color: #0d0d0c; }
a.c-nextcase__link:hover .c-nextcase__name, a.c-nextcase__link:focus-visible .c-nextcase__name { color: var(--proj, var(--color-fg)); }
.c-nextcase__hint { padding-block-start: var(--space-8); font-size: 0.8125rem; }
.c-nextcase__soon { padding: 6px 14px; font-size: 0.8125rem; box-shadow: inset 0 0 0 1.5px var(--proj, var(--color-line)); color: var(--proj, inherit); }
.c-nextcase__link.is-off { color: var(--color-fg-muted); }

/* --- Дизайн-система Arivin: просторно, каждый блок — слева что это, справа образец -----------
   Раньше блоки шли подряд с отступом около 76 px и сливались. Теперь между блоками
   ~150 px пустоты и тонкая линия, заголовок и пояснение стоят в левых четырёх колонках,
   образец — в правых восьми. Образцы больше не тянутся на всю страницу. */
.ds__show { grid-column: 1 / -1; margin: var(--blk-lg) 0 0; padding: clamp(40px, 7vw, 104px) var(--space-32) var(--space-32); border-radius: 20px; background: #eef2fb; display: grid; justify-items: center; gap: clamp(32px, 4vw, 56px); }
.ds__show img { inline-size: min(100%, 520px); block-size: auto; display: block; }
.ds__show figcaption { font-size: 0.8125rem; color: var(--panel-muted); text-align: center; max-inline-size: 52ch; }
.ds__facts { padding-block-start: calc(var(--sec) * 1.6); }
.ds__block { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: auto auto auto 1fr; align-items: start; margin-block-start: calc(var(--sec) * 1.8); padding-block-start: var(--blk-lg); border-block-start: 1px solid var(--panel-line); }
.ds__block > .label { grid-column: 1 / 5; grid-row: 1; padding-block-end: var(--space-12); }
.ds__block > h3 { grid-column: 1 / 5; grid-row: 2; font-size: clamp(1.25rem, 1.9vw, 1.625rem); line-height: 1.2; letter-spacing: -0.025em; padding-inline-end: var(--space-24); }
.ds__block > .ds__note { grid-column: 1 / 5; grid-row: 3; padding-block-start: var(--space-16); padding-inline-end: var(--space-24); font-size: 0.875rem; max-inline-size: 38ch; }
.ds__block > .ds__spec { grid-column: 5 / -1; grid-row: 1 / 5; padding-block-start: 0; }
/* Образцы */
.ds__surf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.surf { min-block-size: 150px; }
.ds__type { gap: var(--space-24); }
.ty { grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-24); padding-block-start: var(--space-16); }
.ds__space { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: var(--space-8); align-items: end; }
.sp { justify-items: center; }
.sp__bar { inline-size: min(100%, 28px); }
.ds__mod { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--space-48); }
.ds__mod svg { background: #eef2fb; border-radius: 16px; padding: var(--space-24); }
.ds__rules { grid-template-columns: 1fr; gap: var(--space-24); }
/* Спецификация: снимок и текст — два самостоятельных блока, а не один */
.ds__out { margin-block-start: calc(var(--sec) * 1.8); padding-block-start: var(--blk-lg); grid-template-columns: 5fr 7fr; gap: var(--blk-lg); align-items: center; }
.ds__out figure { max-inline-size: 420px; display: grid; gap: var(--space-12); }
.ds__out figcaption { font-size: 0.8125rem; color: var(--panel-muted); }
.ds__card { background: #f4f4f2; border-radius: 20px; padding: clamp(32px, 4vw, 56px); max-inline-size: none; }
.ds__out > .ds__card { padding-block-start: clamp(32px, 4vw, 56px); max-inline-size: none; }
.ds__card .t-title { padding-block-end: var(--space-16); }
@media (max-width: 1100px) { .ds__space { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: var(--space-24); } }
@media (max-width: 900px) {
  .ds__block { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 0; }
  .ds__block > .label, .ds__block > h3, .ds__block > .ds__note, .ds__block > .ds__spec { grid-column: 1; grid-row: auto; }
  .ds__block > .ds__spec { padding-block-start: var(--space-32); }
  .ds__mod { grid-template-columns: 1fr; }
  .ty { grid-template-columns: 1fr; gap: var(--space-8); }
  .ds__surf { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .ds__facts { grid-template-columns: 1fr 1fr; gap: var(--space-32) var(--space-16); padding-block-start: var(--blk-lg); }
  .ds__block { margin-block-start: calc(var(--sec) * 1.4); }
  .ds__show { padding-block-start: var(--space-48); }
  .ds__out { grid-template-columns: 1fr; }
}

/* --- «See the whole thing running»: розовая плашка — главное действие блока -----------
   Единственный цветной блок на странице проекта, чтобы кнопка перехода на живой сайт
   не терялась среди серых. */
.c-live.wrap { background: var(--color-accent); color: #fff; box-shadow: 0 0 0 100vmax var(--color-accent); clip-path: inset(0 -100vmax); padding-block: calc(var(--sec) * 1.6); }
.c-live .muted, .c-live .live-note { color: rgba(255, 255, 255, 0.84); }
.c-live .visit { background: #fff; color: #0d0d0c; }
.c-live .visit::before { background: #0d0d0c; }
.c-live .visit:hover .visit__label span, .c-live .visit:focus-visible .visit__label span,
.c-live .visit:hover .visit__arrow span, .c-live .visit:focus-visible .visit__arrow span { color: #fff; }

/* Подписи «Before» / «After» на самом кадре: левая остаётся, пока виден кадр «до», правая
   открывается вместе с «после». Раньше было непонятно, где что. */
.turn__layer::before { content: attr(data-label); position: absolute; z-index: 2; inset-block-start: var(--space-16); padding: 7px 14px; border-radius: 999px; background: rgba(13, 13, 12, 0.82); color: #fff; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; }
.turn__layer--before::before { inset-inline-start: var(--space-16); }
.turn__layer--after::before { inset-inline-end: var(--space-16); background: var(--color-accent); }
.c-ba__cut::after { inline-size: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(13,13,12,0.4); }

/* --- Блоки «до/после» внутри секции — отдельные, с большим воздухом ------------------ */
.c-ba__say { padding-block-start: calc(var(--sec) * 1.4); }
.c-ba__pairs { padding-block-start: calc(var(--sec) * 2.4); gap: calc(var(--sec) * 2); }
.pairrow { padding-block-start: calc(var(--sec) * 0.9); gap: var(--blk-lg) var(--space-48); }
.pairrow__t .t-title { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.03em; }
.c-ba__gains { padding-block-start: calc(var(--sec) * 2.4); }

/* --- Спецификация Arivin: один цельный блок, снимок и текст рядом в одной карточке ----- */
.ds__out { background: #f4f4f2; border-radius: 24px; padding: clamp(32px, 4vw, 64px); border-block-start: 0; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; justify-content: space-between; }
.ds__out > .ds__card { background: none; padding: 0; border-radius: 0; }
.ds__out figure { max-inline-size: none; }
@media (max-width: 900px) { .ds__out { grid-template-columns: 1fr; } }

/* Полоса между страницами в ленте Plants: видно, что это другой экран, а не продолжение */
.flow__sep { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: 0 var(--space-24); block-size: 64px; background: #24241f; color: rgba(242,242,240,0.6); font-size: 0.75rem; letter-spacing: 0.04em; }
.flow__sep b { font-weight: 500; color: #fff; letter-spacing: 0; }


/* Закреплённые рамки потоков не ловят указатель: курсор над ними не должен влиять на анимацию */
.flow__stage { pointer-events: none; }

/* --- Название проекта над заголовком первого экрана ------------------------------------
   На странице проекта должно быть сразу видно, чей это кейс: мелкая подпись в строке меток
   этого не делает. */
.c-hero__name { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.4em; font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; padding-block-end: var(--space-24); }
.c-hero__name::before { content: ''; flex: none; inline-size: 0.34em; block-size: 0.34em; border-radius: 50%; background: var(--color-accent); }

/* Фото в парах «до/после» не обрезаются: страница показана целиком */
.pair img { aspect-ratio: auto; object-fit: initial; block-size: auto; }
.pair img[style] { object-position: initial !important; }
.pairrow { align-items: start; }
.has-motion .c-ba__stage { block-size: calc(var(--cut-h) + 70px + 72dvh); }

/* «See the whole thing running»: компактнее */
.c-live.wrap { padding-block: calc(var(--sec) * 0.85); }
.c-live__h { font-size: clamp(1.75rem, 3.2vw, 2.75rem); }
.c-live .live-note { font-size: 0.8125rem; max-inline-size: 46ch; }

/* --- Previous / Next на телефоне: две одинаковые строки, название слева, стрелка справа ---- */
@media (max-width: 900px) {
  .c-nextcase.wrap { padding-block: calc(var(--sec) * 1.2); }
  .c-nextcase__in { gap: var(--space-48); }
  .c-nextcase__col { display: grid; gap: 0; }
  .c-nextcase__link, .c-nextcase__col--prev .c-nextcase__link { justify-content: space-between; gap: var(--space-16); padding-block: var(--space-16); }
  .c-nextcase__go--back { order: 2; }
  .c-nextcase__col--prev .c-nextcase__name { order: 1; }
  .c-nextcase__name { font-size: 1.125rem; line-height: 1.25; }
  .c-nextcase__hint { padding-block-start: var(--space-4); }
}

/* Ссылка на проект в разработке: активная, рядом со стрелкой плашка «In progress» */
.c-nextcase__end { flex: none; display: inline-flex; align-items: center; gap: var(--space-16); }
.c-nextcase__link .c-nextcase__soon { padding: 5px 12px; font-size: 0.75rem; color: var(--color-fg-muted); box-shadow: inset 0 0 0 1px var(--color-line); }
.c-nextcase__col--prev .c-nextcase__link .c-nextcase__soon { margin-inline-start: auto; }
@media (max-width: 900px) {
  .c-nextcase__col--prev .c-nextcase__link .c-nextcase__soon { order: 2; margin-inline-start: auto; }
  .c-nextcase__go--back { order: 3; }
  .c-nextcase__soon { padding: 4px 10px; font-size: 0.6875rem; }
}

/* --- Поток без привязки к прокрутке (анимация логотипа Arivin) -------------------------------
   Раньше рама закреплялась и кадры проявлялись по прокрутке; блок мигал и дёргался. Теперь это
   обычный блок: слева три шага, справа настоящая запись входа на сайт. */
.flow.is-plain .flow__scroller { block-size: auto; }
.flow.is-plain .flow__stage { position: static; block-size: auto; padding-block: var(--blk); pointer-events: auto; overflow: visible; }
.flow.is-plain .flow__step { opacity: 1; }
.flow.is-plain .flow__step b { color: var(--color-fg); }
.flow.is-plain .flow__card { position: absolute; inset: 0; opacity: 1 !important; transform: none !important; }

/* Анимация логотипа Arivin: «до» (оригинальный загрузчик из брендфайлов) и «после» (новый вход) рядом */
.flow.is-plain .flow__inner { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.flow.is-plain .flow__screens { aspect-ratio: auto; inline-size: 100%; justify-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32); align-items: start; }
.flow.is-plain .flow__fig { margin: 0; display: grid; gap: var(--space-16); }
.flow.is-plain .flow__card { position: relative; inset: auto; aspect-ratio: 16 / 10; }
.flow__loader { display: grid; place-items: center; background: #fff; }
.flow__loader img { inline-size: 46%; block-size: auto; max-block-size: 86%; display: block; }
.flow__cap { font-size: 0.8125rem; line-height: 1.55; color: var(--color-fg-muted); }
.flow__cap b { display: block; color: var(--color-fg); font-weight: 500; padding-block-end: 4px; }
@media (max-width: 1100px) { .flow.is-plain .flow__inner { grid-template-columns: 1fr; } .flow.is-plain .flow__screens { grid-template-columns: 1fr; } }
.flow.is-plain .flow__inner { gap: var(--space-48); }
.flow.is-plain .flow__screens, .flow.is-plain .flow__fig, .flow.is-plain .flow__card { min-inline-size: 0; max-inline-size: 100%; }
.flow.is-plain .frame, .flow.is-plain .frame__body, .flow.is-plain .frame__vid { max-inline-size: 100%; }
/* Кадры «до» и «после» одной высоты в любом режиме (в ?static видео раньше становилось блочным и вытягивало рамку) */
.flow.is-plain .frame { position: absolute; inset: 0; display: flex; flex-direction: column; }
.flow.is-plain .frame__body { position: relative; flex: 1 1 auto; block-size: auto; min-block-size: 0; }
.flow.is-plain .frame__vid { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; aspect-ratio: auto; object-fit: cover; }

/* ============================================================================================
   Живость: мягкая реакция на наведение у картинок, карточек и образцов на всех страницах проектов.
   Используются отдельные свойства translate и scale, чтобы не конфликтовать с transform у GSAP
   (проявление блоков). Только для мыши и без reduce-motion.
   ============================================================================================ */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* картинки и макеты: чуть приподнимаются и увеличиваются */
  .pair img, .dir img, .fx__card img, .fx__stage--sheet .frame, .fx__stage--word, .ds__out img, .ds__show img, .gain, .fig, .fix, .dsfact, .rule, .fmap, .pcard,
  .mac, .rig, .phone, .stub__stage img, .pds-brand__chip, .pds-surf, .pds-rad span, .pds-stroke span, .pds-elev span, .pds-mot, .pds-btn, .pds-fchip, .sp, .surf, .tint__chip, .dsbtn, .ty {
    transition: translate 520ms var(--ease-smooth), scale 520ms var(--ease-smooth), box-shadow 520ms var(--ease-smooth), background-color 520ms var(--ease-smooth);
  }
  .pair img:hover, .dir img:hover, .fx__card img:hover, .ds__out img:hover, .ds__show img:hover, .stub__stage img:hover { translate: 0 -6px; scale: 1.025; box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35); }
  .fx__stage--sheet .frame:hover, .mac:hover, .rig:hover { translate: 0 -6px; scale: 1.012; }
  .phone:hover { translate: 0 -8px; scale: 1.02; }
  .fx__stage--word:hover { scale: 1.015; }
  /* карточки текста: приподнимаются */
  .gain:hover, .fig:hover, .fix:hover, .dsfact:hover, .rule:hover, .fmap:hover { translate: 0 -5px; }
  .pcard:hover { translate: 0 -6px; }
  /* образцы дизайн-систем */
  .pds-brand__chip:hover, .pds-surf:hover, .surf:hover, .tint__chip:hover { translate: 0 -6px; scale: 1.03; }
  .pds-rad span:hover, .pds-stroke span:hover { scale: 1.12; }
  .pds-elev span:hover { translate: 0 -8px; }
  .pds-mot:hover { translate: 0 -5px; background: #efece6; }
  .pds-btn:hover, .pds-fchip:hover, .dsbtn:hover { scale: 1.05; }
  .sp:hover { translate: 0 -4px; }
  .ty:hover, .pds-ty:hover { translate: 6px 0; }
  /* нижние блоки перехода: плашка подсвечивается и стрелка тянется */
  .c-nextcase__col { transition: translate 520ms var(--ease-smooth); }
  .c-nextcase__col:hover { translate: 0 -4px; }
  /* кнопки и ссылки возврата */
  .c-back, .c-live .visit { transition: translate 400ms var(--ease-smooth), scale 260ms var(--ease-smooth), background 300ms var(--ease-out), color 300ms var(--ease-out); }
  .c-back:hover { translate: -4px 0; }
}

.flow__scroller.is-strip .flow__screens { inline-size: 100%; }

/* ============================================================================================
   Телефон (≤ 900 px): общие правила для страниц проектов
   ============================================================================================ */
.c-back { white-space: nowrap; }
@media (max-width: 900px) {
  /* первый экран: всё в одну колонку (раньше текст и таблица стояли рядом и сжимались) */
  .c-hero__name, .c-hero__eyebrow, .c-hero__title, .c-hero__lead, .c-hero__spec, .c-hero__cta, .c-hero__mac, .c-hero__rig, .stub__status { grid-column: 1 / -1; }
  .c-hero__spec { padding-block-start: var(--space-32); }
  .c-hero__cta { padding-block-start: var(--space-24); }
  .c-hero__name { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .c-hero__title { padding-block: var(--space-16) var(--space-24); }
  .spec-rows { grid-template-columns: minmax(84px, auto) minmax(0, 1fr); }
  /* подписи «Before / After» на кадрах не растягиваются */
  .turn__layer--after::before { inset-inline-start: auto; }
  .turn__layer::before { padding: 6px 12px; font-size: 0.75rem; }
  /* блоки текста и образцов не слипаются */
  .sec__h, .ds__h, .c-live__h { padding-block-end: var(--space-8); }
  .sec__lead, .ds__lead { padding-block-start: var(--space-16); }
  .c-fix__grid, .c-ba__gains { gap: var(--space-40, 40px) var(--space-24); }
  .fix, .gain { padding-block-start: var(--space-24); }
  .c-ba__say { padding-block-start: var(--space-48); gap: var(--space-32); }
  .pairrow { gap: var(--space-40, 40px); }
  .c-nextcase.wrap { padding-block: 72px; }
  .c-live.wrap { padding-block: 64px; }
  img, video, svg { max-inline-size: 100%; }
}

/* ============================================================================================
   Телефон: ленты экранов не растягиваются на тысячи пикселей, отклик на касание
   ============================================================================================ */
@media (max-width: 900px) {
  .flow__card .frame__body { max-block-size: 560px; overflow: hidden; position: relative; }
  .flow__card .frame__body img { position: static; }
  .flow__card .frame__body::after { content: ''; position: absolute; inset: auto 0 0 0; block-size: 90px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35)); pointer-events: none; }
  .flow__rail { padding-block-end: var(--space-16); }
  .flow__screens { gap: var(--space-32); }
}
/* Касание: карточки и образцы слегка вжимаются, как кнопки */
@media (hover: none) {
  .pair img, .dir img, .fx__card img, .gain, .fig, .fix, .dsfact, .rule, .fmap, .pcard, .phone, .pds-brand__chip, .pds-surf, .pds-mot, .pds-btn, .pds-fchip, .sp, .surf, .tint__chip, .dsbtn, .c-nextcase__col, .stub__stage img { transition: scale 260ms var(--ease-smooth), translate 260ms var(--ease-smooth); }
  .pair img:active, .dir img:active, .fx__card img:active, .gain:active, .fig:active, .fix:active, .dsfact:active, .rule:active, .fmap:active, .pcard:active, .phone:active, .pds-brand__chip:active, .pds-surf:active, .pds-mot:active, .pds-btn:active, .pds-fchip:active, .sp:active, .surf:active, .tint__chip:active, .dsbtn:active, .c-nextcase__col:active, .stub__stage img:active { scale: 0.97; }
}
/* На телефоне (нет наведения) макеты слегка покачиваются сами, чтобы страница не была неподвижной (без reduce-motion) */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  @keyframes phone-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
  .resp__row .phone, .c-mob__row .phone, .stub__stage img:nth-child(2) { animation: phone-bob 5.5s ease-in-out infinite; }
  .resp__row .phone:nth-child(2n), .c-mob__row .phone:nth-child(2n) { animation-delay: -2.2s; }
}

/* Телефон: любой прямой потомок сетки занимает всю ширину. Раньше у части блоков (панель задачи
   PDA, вердикт направлений и др.) оставались десктопные колонки, и текст сжимался в полоску. */
@media (max-width: 900px) {
  .grid > * { grid-column: 1 / -1 !important; }
  .grid > .c-task__body, .grid > .c-task__aside { padding-block-start: var(--space-32); }
  .c-dir__row { gap: var(--space-48) !important; }
  .c-dir__verdict { padding-block-start: var(--space-48); }
}

/* Телефон: образцы кеглей в Arivin уменьшены, чтобы «Future-Proof therapies» не занимало три строки */
@media (max-width: 560px) {
  .ty__s[style*="font-size:62px"] { font-size: 36px !important; }
  .ty__s[style*="font-size:54px"] { font-size: 32px !important; }
  .ty__s[style*="font-size:36px"] { font-size: 26px !important; }
}

/* Телефон: фильтр-демо Plants в две колонки, карточки компактнее */
@media (max-width: 560px) {
  .demo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 14px !important; }
  .pcard__name { font-size: 0.9375rem !important; line-height: 1.25 !important; }
  .pcard__price { font-size: 0.9375rem !important; }
  .pcard__meta { display: none !important; }
}