/*
 * Закрепление блоков.
 *
 * Каждый смысловой блок читается как один кадр: доезжаем — кадр встаёт на
 * место — прокруткой листаем его собственную анимацию — едем дальше. Секция
 * длиннее экрана ровно на удержание, содержимое держится встречным смещением,
 * и весь ход анимации приходится на то время, пока кадр стоит перед глазами.
 *
 * Без этого каждая анимация шла от положения секции в документе: начиналась за
 * экран до появления блока и заканчивалась, когда он уже ушёл, а соседние блоки
 * налезали друг на друга.
 */

:is(#marketing-v5, .uses-site-flip-viewport-portal) :is(
  #uses-game, #uses-site, #uses-video, #uses-freelance, #uses-more,
  #share, #audience, #closer
) {
  display: block;
  /* Высоту задаёт партитура (src/marketing/score) инлайном. */
  padding: 0;
  overflow-x: clip;
}

#marketing-v5[data-blocks-mounted="true"] :is(
  #uses-game, #uses-site, #uses-video, #uses-freelance, #uses-more,
  #share, #audience, #closer
) > .marketing-inner {
  opacity: var(--block-presence, 1);
  transform: translate3d(0, var(--block-pin-y, 0px), 0);
  will-change: opacity, transform;
}

/* Блока нет вообще, пока не пришёл его черёд: иначе в кадре одновременно
   оказывались хвост предыдущего и обрывки следующего. */
#marketing-v5[data-blocks-mounted="true"] [data-block-held="false"] > .marketing-inner {
  visibility: hidden;
}

/* Кадр блока — ровно один экран: заголовок и иллюстрация видны вместе. */
:is(#marketing-v5, .uses-site-flip-viewport-portal) :is(
  #uses-game, #uses-site, #uses-video, #uses-freelance, #uses-more,
  #share, #audience, #closer
) > .marketing-inner {
  display: grid;
  min-block-size: 100vh; min-block-size: 100svh;
  align-content: center;
  gap: clamp(16px, 2.6vh, 32px); gap: clamp(16px, 2.6svh, 32px);
  /* Сверху оставлено место под шапку сайта: заголовок блока вставал прямо под
     логотипом и кнопкой входа. */
  padding-block: clamp(88px, 12vh, 132px) clamp(32px, 5vh, 64px); padding-block: clamp(88px, 12svh, 132px) clamp(32px, 5svh, 64px);
}

/* Иллюстрация никогда не выше своей доли экрана: блок обязан помещаться. */
:is(#marketing-v5, .uses-site-flip-viewport-portal) :is(
  #uses-game, #uses-site, #uses-video, #uses-freelance, #uses-more, #share
) .proof-slot {
  min-height: 0;
  max-block-size: 64vh; max-block-size: 64svh;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) :is(
  #uses-game, #uses-site, #uses-video, #uses-freelance, #uses-more, #share
) .proof-slot > * {
  max-block-size: 64vh; max-block-size: 64svh;
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the geometric counter-translation: the route retains its physical
     section spans. Only ornamental reveals are disabled in reduced motion. */

  :is(#marketing-v5, .uses-site-flip-viewport-portal) :is(
    #uses-game, #uses-site, #uses-video, #uses-freelance, #uses-more,
    #share, #audience, #closer
  ) {
    min-block-size: 100vh; min-block-size: 100svh;
  }
}


/* Заголовок блока не должен съедать половину кадра: иллюстрация — главное. */
:is(#marketing-v5, .uses-site-flip-viewport-portal) :is(
  #uses-game, #uses-site, #uses-video, #uses-freelance, #uses-more, #share
) .marketing-copy h2 {
  max-width: 20ch;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.02;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) :is(
  #uses-game, #uses-site, #uses-video, #uses-freelance, #uses-more, #share
) .marketing-copy > p {
  margin-top: clamp(10px, 1.6vh, 20px); margin-top: clamp(10px, 1.6svh, 20px);
  font-size: clamp(15px, 1.2vw, 19px);
}

/* ──────────────────────────────────────────────────────────────────────────
   Кадр блока: шапка сверху, иллюстрация занимает всё оставшееся место.

   Раньше иллюстрация задавала себе высоту сама и вставала посреди экрана: над
   ней и под ней оставались огромные пустые поля, а на узких блоках половина
   кадра простаивала. Здесь у кадра две строки — шапка и остаток, — и
   иллюстрация вписывается в остаток целиком, по ширине и по высоте сразу.
   ────────────────────────────────────────────────────────────────────────── */

@media (min-width: 900px) {
  :is(#marketing-v5, .uses-site-flip-viewport-portal) :is(
    #uses-game, #uses-video, #uses-freelance
  ) > .marketing-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-more > .marketing-inner {
    grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    align-content: stretch;
  }

  /* Окно «Поделиться» воспроизводит настоящую модалку приложения и не может
     растягиваться: его ширина — размер продукта. Поэтому заголовок встаёт
     сверху, а окно — по центру остатка кадра. */
  :is(#marketing-v5, .uses-site-flip-viewport-portal) #share > .marketing-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
  }

  /* Иллюстрация вписывается в остаток кадра целиком. */
  :is(#marketing-v5, .uses-site-flip-viewport-portal) :is(
    #uses-game, #uses-video, #uses-freelance, #uses-more, #share
  ) .proof-slot,
  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-video .video-pair {
    min-height: 0;
    max-block-size: none;
    margin-top: 0;
    align-self: stretch;
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) :is(
    #uses-game, #uses-video, #uses-freelance, #uses-more, #share
  ) .proof-slot > * {
    max-block-size: none;
  }

  /* Окно приложения — вписанный прямоугольник 16:9: сколько даёт высота, столько
     берёт и ширина. Так оно занимает кадр, а не висит узкой полосой посередине. */
  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-game .proof-slot {
    display: grid;
    place-items: center;
    overflow: visible;
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-game .uses-desktop-frame {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  /* Два ролика делят остаток кадра поровну и по всей высоте. */
  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-video .video-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-video .video-slot {
    /* Ширину задаёт колонка, а не пропорция: с aspect-ratio рамка выводила
       ширину из высоты и вылезала за край кадра поверх соседней. */
    aspect-ratio: auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /* Ролик вписывается в свою половину и не выталкивает соседнюю за край кадра. */
  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-video .video-slot > *,
  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-video .video-slot video {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
  }

  /* Путь заказа разворачивается на весь остаток кадра. */
  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-freelance .uses-freelance {
    min-height: 0;
    height: 100%;
  }

  /* Направления Blender занимают свою колонку по высоте целиком. */
  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-more .proof-slot {
    display: grid;
    place-items: center;
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-more .uses-capabilities {
    height: 100%;
    display: grid;
    place-items: center;
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-more .uses-capabilities svg {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  /* Окно «Поделиться» — вписанный прямоугольник, а не половина колонки. */
  :is(#marketing-v5, .uses-site-flip-viewport-portal) #share .proof-slot {
    display: grid;
    place-items: center;
    overflow: visible;
  }
}

@media (min-width: 900px) {
  /* Путь заказа раскрывается на весь остаток кадра: раньше четыре значка
     жались в узкую полосу посередине, а над ними и под ними пустовало
     по трети экрана. */
  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-freelance .uses-freelance__path {
    height: 58%;
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-freelance .uses-freelance__mark {
    width: clamp(76px, 8vw, 124px);
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-freelance .uses-freelance__steps {
    gap: clamp(20px, 3.4vw, 60px);
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-freelance .uses-freelance__steps li {
    gap: 12px;
    font-size: clamp(16px, 1.35vw, 21px);
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-freelance .uses-freelance__steps small {
    font-size: clamp(13px, 1vw, 16px);
  }

  /* Окно «Поделиться» стоит по центру остатка кадра под заголовком. */
  :is(#marketing-v5, .uses-site-flip-viewport-portal) #share .share-proof {
    display: grid;
    width: 100%;
    align-content: center;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   «Сайт внутри сайта».

   Окно показывает не посторонний участок страницы, а ровно тот экран, на
   котором стоит читатель: живой текст этого блока уезжает внутрь окна, а его
   место в кадре занимает тот же заголовок слоем выше. Дальше окно
   разворачивается во весь экран, и читатель оказывается внутри сайта.
   ────────────────────────────────────────────────────────────────────────── */

#marketing-v5 #uses-site > .marketing-inner {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
}

/* Настоящий текст блока показывает окно, а в кадре его держит слой-заголовок. */
#marketing-v5 #uses-site .proof-layout > .marketing-copy {
  order: 0;
  visibility: hidden;
}

#marketing-v5 #uses-site .proof-slot {
  min-height: 0;
  max-block-size: none;
}

/* Окно стоит справа от заголовка и не наезжает на него. Размер — доля экрана
   по обеим осям: иначе окно и экран разной пропорции, и при развороте страница
   внутри окна растягивалась неравномерно. */
.uses-site-flip-miniature-target {
  left: 66%;
  top: 53%;
  width: 42vw;
  height: 42vh; height: 42svh;
  aspect-ratio: auto;
}

/* Внутри портала участок разложен как страница: те же поля и тот же кегль,
   поэтому в окне видно именно сайт, а не вырванный кусок разметки. */
.uses-site-flip-viewport-portal > .uses-site-flip-live {
  box-sizing: border-box;
  width: min(94vw, 1540px);
  max-width: none;
  margin-inline: auto;
  padding-top: clamp(48px, 12vh, 132px); padding-top: clamp(48px, 12svh, 132px);
}

.uses-site-flip-viewport-portal > .uses-site-flip-live h2 {
  max-width: 22ch;
  margin: 0;
  color: var(--bb-text-primary);
  font-size: clamp(40px, 5.6vw, 80px);
  font-weight: var(--bb-weight-display);
  line-height: 0.98;
  letter-spacing: var(--bb-tracking-display);
}

.uses-site-flip-viewport-portal > .uses-site-flip-live > p {
  max-width: 52ch;
  margin-top: clamp(18px, 3vh, 34px);
  color: var(--bb-text-secondary);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.58;
}

/* Слой-заголовок стоит ровно там, где стоял бы текст блока. */
.uses-site-overlay {
  width: min(94vw, 1540px);
}

/* Иллюстрация приходит следом за текстом блока, а не раньше него. */
:is(#marketing-v5, .uses-site-flip-viewport-portal) :is(
  #uses-freelance, #uses-more, #uses-video, #share
) .proof-slot,
:is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-video .video-pair {
  opacity: var(--block-progress-late, 1);
  /* Сдвиг небольшой намеренно: иллюстрация занимает кадр целиком, и на входе
     ей некуда опускаться, не вылезая за нижний край. */
  transform: translate3d(0, calc((1 - var(--block-progress-late, 1)) * 12px), 0);
}

@media (prefers-reduced-motion: reduce) {
  :is(#marketing-v5, .uses-site-flip-viewport-portal) :is(
    #uses-freelance, #uses-more, #uses-video, #share
  ) .proof-slot,
  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-video .video-pair {
    opacity: 1;
    transform: none;
  }
}

/* Установка: две карточки читаются построчно — вид, схема, название, кнопка. */
@media (min-width: 761px) {
  .offer-install__paths {
    align-items: start;
  }

  .offer-install__path {
    display: grid;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    height: 100%;
  }
}

/* Шаги стоят на самой волне: значок и подпись поднимаются и опускаются вместе
   с линией, и путь заказа читается как путь, а не как ряд иконок. */
@media (min-width: 900px) {
  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-freelance .uses-freelance {
    --freelance-lift: clamp(38px, 8.4vh, 104px); --freelance-lift: clamp(38px, 8.4svh, 104px);
    align-content: center;
    justify-items: stretch;
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-freelance .uses-freelance__steps li:nth-child(odd) {
    transform: translate3d(0, var(--freelance-lift), 0);
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-freelance .uses-freelance__steps li:nth-child(even) {
    transform: translate3d(0, calc(var(--freelance-lift) * -1), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-freelance .uses-freelance__steps li {
    transform: none;
  }
}