/* B2B Landing V1, десятая редакция — слой движения поверх девятой редакции.
   Раскладка, тексты и снимки — в page.css и page.frag.html и здесь не меняются: слой двигает только transform, opacity
   и clip-path, поэтому блоки не сдвигают друг друга.

   Одна система:
   · время  --m-state (наведение, фокус, нажатие) · --m-open (раскрытие, сообщения) · --m-enter (появление блока) ·
            --m-film (раскрытие кадра);
   · кривые — токены сайта --ease, --ease-out, --ease-soft;
   · появление блока — один раз, когда он вошёл в экран; обратно ничего не прячется.

   Что работает без JavaScript: вступление первого экрана (CSS), наведение, фокус, раскрытие вопросов средствами браузера.
   Скрытые до появления состояния включаются только классом v10-js на <html>; его ставит строка в <head> и снимает сама,
   если сценарий не загрузился. При prefers-reduced-motion класс не ставится, а вступление не объявляется. */

.v10-page {
  --m-state: .18s;
  --m-open: .34s;
  --m-enter: .78s;
  --m-film: 1.45s;
  --m-step: 90ms;
  --m-rise: 24px;
}
@media (max-width: 760px) {
  .v10-page { --m-film: 1.1s; --m-step: 70ms; --m-rise: 16px; }
}

/* кадр первого экрана: три вложенных слоя, у каждого своё движение — маска, масштаб вступления, наезд при прокрутке */
.v10-hero__photo picture { position: absolute; inset: 0; display: block; }
.v10-case figure { overflow: hidden; }

/* ---------- 1. первый экран: вступление ---------- */
/* заполнение backwards: после вступления элемент возвращается к своим стилям, и наведение на кнопки работает как раньше */
@media (prefers-reduced-motion: no-preference) {
  .v10-who { animation: v10-rise .7s var(--ease-out) .05s backwards; }

  /* строка заголовка выходит из-под собственной маски; маска держится, пока строка едет */
  .v10-h1 > span { animation: v10-mask 1.5s linear backwards; }
  .v10-h1 .v10-l { animation: v10-line 1.05s var(--ease-out) backwards; }
  .v10-h1 > span:nth-child(1) .v10-l { animation-delay: .1s; }
  .v10-h1 > span:nth-child(2) .v10-l { animation-delay: .22s; }

  .v10-hero .v10-lede { animation: v10-rise var(--m-enter) var(--ease-out) .5s backwards; }
  .v10-hero__acts .v10-main { animation: v10-rise .7s var(--ease-out) .64s backwards; }
  .v10-hero__acts .v10-second { animation: v10-rise .7s var(--ease-out) .72s backwards; }
  .v10-hero__acts .v10-note { animation: v10-rise .7s var(--ease-out) .82s backwards; }
  .v10-args { animation: v10-fade .5s linear .6s backwards; }
  .v10-args li { animation: v10-rise .7s var(--ease-out) backwards; }
  .v10-args li:nth-child(1) { animation-delay: .66s; }
  .v10-args li:nth-child(2) { animation-delay: .73s; }
  .v10-args li:nth-child(3) { animation-delay: .80s; }
  .v10-args li:nth-child(4) { animation-delay: .87s; }

  /* кадр открывается от средней линии, как кашета в кино, и одновременно отъезжает к своему масштабу */
  .v10-hero__photo { animation: v10-open 1.6s var(--ease-soft) .12s backwards; }
  .v10-hero__photo picture { animation: v10-settle 2.6s var(--ease-out) .12s backwards; }
  .v10-hero__photo .v10-tag { animation: v10-fade .5s linear 1.5s backwards; }
}
@keyframes v10-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes v10-fade { from { opacity: 0; } }
@keyframes v10-line { from { transform: translateY(125%); } }
@keyframes v10-mask { from, to { clip-path: inset(-.08em -.3em -.16em -.3em); } }
@keyframes v10-open { from { clip-path: inset(43% 0 43% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes v10-settle { from { transform: scale(1.14); } }

/* наезд на кадр при уходе первого экрана: привязан к прокрутке самим браузером, без сценария; в покое масштаб равен 1 */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .v10-hero__photo img { transform-origin: 50% 100%; animation: v10-push linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
  }
}
@keyframes v10-push { to { transform: scale(1.07); } }

/* ---------- появление блоков ---------- */
.v10-js [data-m="rise"], .v10-js [data-m="line"] {
  opacity: 0; transform: translateY(var(--m-rise));
  transition: opacity var(--m-enter) var(--ease-out) calc(var(--i, 0) * var(--m-step)), transform var(--m-enter) var(--ease-out) calc(var(--i, 0) * var(--m-step));
}
.v10-js [data-m="line"] { transform: translateY(14px); transition-duration: .62s; }
.v10-js [data-m="rise"].is-in, .v10-js [data-m="line"].is-in { opacity: 1; transform: none; }

/* заголовки разделов выходят из-под маски тем же движением, что строки первого экрана; маска снимается, когда строка встала */
.v10-h2 .v10-l { display: block; }
.v10-js [data-m="head"]:not(.is-done) { clip-path: inset(-.1em -.3em -.2em -.3em); }
.v10-js [data-m="head"] .v10-l { transform: translateY(115%); transition: transform 1.05s var(--ease-out) calc(var(--i, 0) * var(--m-step)); }
.v10-js [data-m="head"].is-in .v10-l { transform: none; }

/* ---------- 2. какой у вас проект ---------- */
/* кадр открывается снизу вверх и отъезжает к своему масштабу; подпись приходит следом */
.v10-js .v10-case[data-m] figure { clip-path: inset(100% 0 0 0); transition: clip-path var(--m-film) var(--ease-soft) calc(var(--i, 0) * 140ms); }
.v10-js .v10-case[data-m] img { transform: scale(1.16); transition: transform 1.9s var(--ease-out) calc(var(--i, 0) * 140ms); }
.v10-js .v10-case[data-m] .v10-h3, .v10-js .v10-case[data-m] .v10-case__txt {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--m-enter) var(--ease-out) calc(var(--i, 0) * 140ms + .42s), transform var(--m-enter) var(--ease-out) calc(var(--i, 0) * 140ms + .42s);
}
.v10-js .v10-case[data-m] .v10-case__txt { transition-delay: calc(var(--i, 0) * 140ms + .52s); }
.v10-js .v10-case.is-in figure { clip-path: inset(0 0 0 0); }
.v10-js .v10-case.is-in img { transform: scale(var(--s, 1)) translate3d(calc(var(--px, 0) * -1px), calc(var(--py, 0) * -1px), 0); }
.v10-js .v10-case.is-in .v10-h3, .v10-js .v10-case.is-in .v10-case__txt { opacity: 1; transform: none; }

/* компьютер: под указателем кадр приближается и чуть следует за ним, соседние слегка отступают (0,82 — ещё хорошо
   различимы на тёмном поле; 0,46 в прошлой версии было слишком темно); текст не гаснет */
@media (hover: hover) and (pointer: fine) {
  .v10-js .v10-case.is-done figure { transition: opacity .5s var(--ease); }
  .v10-js .v10-case.is-done img { transition: transform 1.1s var(--ease-out); }
  .v10-js .v10-case.is-done:hover { --s: 1.055; }
  .v10-js .v10-cases__grid:has(.v10-case.is-done:hover) .v10-case.is-done:not(:hover) figure { opacity: .82; }
}

/* ---------- 3. что задаёт проект ---------- */
.v10-js .v10-frame[data-m] .v10-frame__pic { clip-path: inset(100% 0 0 0); transition: clip-path var(--m-film) var(--ease-soft); }
.v10-js .v10-frame[data-m] .v10-frame__pic img, .v10-js .v10-frame[data-m] .v10-frame__pic canvas { transform: scale(1.12); transition: transform 1.9s var(--ease-out); }
.v10-js .v10-frame[data-m] figcaption { opacity: 0; transition: opacity .6s linear .7s; }
.v10-js .v10-frame.is-in .v10-frame__pic { clip-path: inset(0 0 0 0); }
.v10-js .v10-frame.is-in .v10-frame__pic img, .v10-js .v10-frame.is-in .v10-frame__pic canvas { transform: none; }
.v10-js .v10-frame.is-in figcaption { opacity: 1; }

/* «Боковой свет»: холст лежит точно поверх снимка и повторяет его кадрирование; без WebGL остаётся сам снимок */
.v10-frame__pic canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.v10-frame__pic canvas.is-on { opacity: 1; }
.v10-js .v10-frame.is-in .v10-frame__pic canvas { transition: opacity .5s linear, transform 1.9s var(--ease-out); }

/* ---------- 4. как идёт работа ---------- */
/* линия этапа прочерчивается слева направо, шаги включаются по мере того, как она до них доходит */
.v10-js .v10-phase[data-m] .v10-phase__h { position: relative; border-bottom-color: transparent; }
.v10-js .v10-phase[data-m] .v10-phase__h::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .95s var(--ease-soft) calc(var(--i, 0) * 170ms);
}
.v10-js .v10-phase--we[data-m] .v10-phase__h::after { background: var(--accent); transition-duration: .6s; }
.v10-js .v10-phase.is-in .v10-phase__h::after { transform: none; }
.v10-js [data-m="step"] .v10-n, .v10-js [data-m="step"] h3, .v10-js [data-m="step"] p {
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--ease-out) calc(var(--i, 0) * 170ms + 120ms), transform .7s var(--ease-out) calc(var(--i, 0) * 170ms + 120ms);
}
.v10-js [data-m="step"] .v10-n { transform: translateY(.42em); }
.v10-js [data-m="step"] h3 { transition-delay: calc(var(--i, 0) * 170ms + 200ms); }
.v10-js [data-m="step"] p { transition-delay: calc(var(--i, 0) * 170ms + 260ms); }
.v10-js [data-m="step"].is-in .v10-n, .v10-js [data-m="step"].is-in h3, .v10-js [data-m="step"].is-in p { opacity: 1; transform: none; }

/* ---------- 5. микровзаимодействия: одна система для кнопок, ссылок, раскрытий и формы ---------- */
/* кнопки: подъём при наведении — стиль сайта; нажатие возвращает кнопку на место и чуть сжимает */
.v10-root .btn:active, .v10-bar .btn:active { transform: translateY(0) scale(.985); transition-duration: .08s; }

/* ссылки в тексте: подчёркивание отходит от строки и утолщается */
.v10-rates a, .v10-faq__head a {
  text-decoration-thickness: 1px;
  transition: text-underline-offset var(--m-state) var(--ease), text-decoration-thickness var(--m-state) var(--ease);
}
.v10-rates a:hover, .v10-faq__head a:hover { text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* раскрытия — вопросы, «Данные для ведомости», «Добавить детали проекта»: строка подаётся вправо, знак поворачивается,
   высоту ведёт сценарий; без него блок открывается средствами браузера */
.v10-qa summary > span, .v10-sheet summary > span, .v10-more summary > span { transition: transform var(--m-state) var(--ease); }
.v10-sheet summary::after, .v10-qa summary::after, .v10-more summary::after { transition: transform var(--m-open) var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .v10-qa summary:hover > span, .v10-sheet summary:hover > span, .v10-more summary:hover > span:first-child { transform: translateX(6px); }
}
.v10-sheet.is-closing summary::after, .v10-qa.is-closing summary::after, .v10-more.is-closing summary::after { transform: none; }

/* поля: граница и обводка фокуса приходят плавно; у обводки меняются цвет и отступ, размеры поля те же */
.v10-f input[type="text"], .v10-f textarea, .v10-f select, .v10-f > .v10-drop, .v10-chips span, .v10-drop__btn {
  transition: border-color var(--m-state) var(--ease), background-color var(--m-state) var(--ease), color var(--m-state) var(--ease), box-shadow var(--m-state) var(--ease), outline-color var(--m-state) var(--ease), outline-offset var(--m-state) var(--ease), transform var(--m-state) var(--ease);
}
.v10-f input[type="text"], .v10-f textarea, .v10-f select { outline: 2px solid transparent; outline-offset: 6px; }
.v10-f input[type="text"]:focus-visible, .v10-f textarea:focus-visible, .v10-f select:focus-visible { outline-color: var(--accent); outline-offset: 2px; }
.v10-f > .v10-drop:hover { border-color: var(--ink); }
.v10-f > .v10-drop.is-over { border-style: solid; border-color: var(--accent); background: var(--bg); }
.v10-drop:hover .v10-drop__btn { background: var(--ink); color: var(--surface); }
.v10-chips label:hover span { border-color: var(--ink); }
.v10-chips label:active span { transform: scale(.97); }

/* сообщения формы появляются мягко и не дёргают соседние поля сильнее, чем их собственная высота */
@media (prefers-reduced-motion: no-preference) {
  .v10-err:not([hidden]), .v10-proto:not([hidden]) { animation: v10-note var(--m-open) var(--ease-out); }
}
@keyframes v10-note { from { opacity: 0; transform: translateY(-5px); } }

/* нижняя панель телефона выезжает и уезжает, а не мигает */
@media (max-width: 760px) {
  .v10-bar { transition: transform var(--m-open) var(--ease), opacity var(--m-open) var(--ease), display var(--m-open) allow-discrete; }
  .v10-bar[hidden] { transform: translateY(100%); opacity: 0; }
  @starting-style { .v10-bar:not([hidden]) { transform: translateY(100%); opacity: 0; } }
}

/* настройка «меньше движения»: класс v10-js не ставится (и снимается, если настройку включили на открытой странице),
   поэтому скрытых состояний нет; холст света убирается. Перед печатью сценарий показывает все блоки. */
@media (prefers-reduced-motion: reduce) {
  .v10-frame__pic canvas { display: none; }
}