/* ============================================================
   Финальная строка «Все существующее когда-то было всего лишь гипотезой» –
   последний блок страницы. Перенос анимации .mwg_landing4 с madewithgsap.com: строка проезжает
   по экрану от прокрутки, а буквы влетают справа со случайным сдвигом и
   наклоном и упруго встают на место. Разбор оригинала – в каталоге анимаций,
   demos/marquee.html.

   Тон – тон страницы (#1f1e1f), текст – тон панели кейсов (#f5f5f5):
   стыка между блоками не видно, фон продолжается без границы.
   ============================================================ */

.outro {
  position: relative; z-index: 2;      /* выше вейла перехода (z-index 1) */
  background: #1f1e1f;
  /* Строку надо обрезать – она длиннее экрана. ИМЕННО clip, а не hidden:
     hidden у предка убивает position: sticky, и залипание не работает вовсе */
  overflow: clip;
  /* высоту ставит js/outro.js: экран + длина проезда */
}

/* залипающий экран: пока строка едет, он стоит на месте. К нему привязана
   нижняя строка сайта: sticky – тоже позиционированный элемент, отдельный
   relative не нужен. На узких экранах pin становится static, и строка
   привязывается к самой секции – она relative, низ у них общий */
.outro__pin {
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center;
  pointer-events: none;
}

.outro__text {
  display: flex; width: max-content; white-space: nowrap;
  /* отбивка по 101vw с каждой стороны, как в оригинале: в начале и в конце
     проезда экран пуст */
  padding: 0 101vw; margin: 0;
  color: #f5f5f5;
  font-family: "Inter Tight", -apple-system, "Helvetica Neue", sans-serif;
  /* Кегль оригинала 250px при 21 знаке. Наша фраза длиннее (51 знак), и главное –
     она ЗАКАНЧИВАЕТ страницу: последний кадр должен показывать ее целиком, а не
     обрывок. Поэтому кегль такой, чтобы строка укладывалась в ширину окна:
     живой замер на 1512 – при 3.7vw (55.9 px) строка выходит 1366 px, это 0.90
     ширины окна, по 73 px поля с каждой стороны */
  font-size: min(72px, 3.7vw);
  line-height: .8; letter-spacing: -.04em; font-weight: 500;
  will-change: transform;
}
/* слова – цельные блоки: на узких экранах строка переносится, и без обертки
   слов браузер рвал бы их между любыми буквами */
.outro__word { display: flex; white-space: nowrap; }
.outro__space { display: inline-block; }
.outro__letter { display: inline-block; will-change: transform; }

/* ---------- нижняя строка сайта ----------
   Повтор строки первого экрана (.hero__row в css/style.css): тот же набор слов,
   тот же кегль 1.3rem, трекинг .045em и разрядка по ширине через space-between.
   Лежит внутри залипающего экрана – именно он и есть последний кадр страницы.
   От низа отбита заметно (не прижата к краю), тон берет от общей инверсии
   сайта (переменные --tone-* в css/about.css) */
.outro__meta {
  position: absolute; left: 0; right: 0; bottom: clamp(56px, 9svh, 110px);
  margin: 0; padding: 0 1.2rem;
  display: flex; justify-content: space-between;
  color: var(--tone-fg, #f5f5f5);
  transition: color .55s ease;
  pointer-events: none; user-select: none;
}
.outro__meta span {
  font-size: 1.3rem; font-weight: 400;
  /* как на первом экране: русские капслоки без разрядки слипаются */
  letter-spacing: 0.045em; word-spacing: 0.22em;
  white-space: nowrap;
}
/* граница 900px – та же, что у .hero__row: строка перестает разъезжаться по
   ширине и складывается по центру */
@media (max-width: 900px) {
  .outro__meta {
    padding: 0 1rem; gap: .6rem;
    flex-wrap: wrap; justify-content: center;
  }
  .outro__meta span { font-size: 12px; }
}

/* Узкие экраны: проезда нет (в оригинале секция там вообще скрыта) – фраза
   стоит по центру в несколько строк, буквы влетают по очереди */
@media (max-width: 768px) {
  .outro { height: auto !important; }
  .outro__pin {
    position: static; min-height: 100svh;
    justify-content: center; padding: 12vh clamp(16px, 5vw, 32px);
  }
  .outro__text {
    flex-wrap: wrap; justify-content: center; width: 100%;
    padding: 0; white-space: normal; text-align: center;
    font-size: min(64px, 12.5vw); line-height: .95;
  }
}

/* текст для скринридера: буквы разложены по спанам и читаются вразнобой,
   поэтому сама строка помечена aria-hidden, а здесь – обычная фраза */
.outro .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0, 0, 0, 0);
}

/* Без движения: проезда нет, фраза просто стоит по центру экрана – буквы
   никуда не влетают. Раскладка та же, что на узких экранах: строка остается
   flex-ом с переносом, иначе слова-обертки встают каждое на свою строку */
@media (prefers-reduced-motion: reduce) {
  .outro { height: auto !important; }
  .outro__pin {
    position: static; min-height: 100svh;
    justify-content: center; padding: 12vh clamp(16px, 5vw, 32px);
  }
  .outro__text {
    flex-wrap: wrap; justify-content: center; width: 100%;
    padding: 0; text-align: center;
    font-size: min(84px, 7vw); line-height: .95;
  }
  .outro__letter { transform: none !important; }
}


/* ============================================================
   Правки по списку клиента (2026-08-09, вечер).
   ============================================================ */

/* Фраза: чуть мельче, разрядка больше, капс – как строка первого экрана. */
.outro__text {
  font-size: min(52px, 2.7vw) !important;
  letter-spacing: .035em !important;
  text-transform: uppercase;
  /* Буквы белые и БЕЗ своего смешивания. Смешивается не текст, а слой вокруг
     него – .outro__pin ниже. Смешивание на самой строке ничего не давало:
     фон у строки прозрачный, смешивать не с чем, и буквы просто белели. */
  color: #fff;
}

/* ---------- заливка букв фоном сцены: прием первого экрана ----------
   На первом экране смешивается не текст, а СЛОЙ: .hero__ink – черная подложка
   во весь экран с mix-blend-mode: exclusion (css/style.css), строка внутри
   обычная белая. Черный в exclusion сцену не меняет (B(x,0)=x), а белые буквы
   поверх дают инверсию того, что под ними: над светлыми долями сцены буквы
   темнеют, над темными – светлеют. Здесь тот же слой – залипающий экран, он
   уже обертка всего содержимого блока.

   Условие [data-scene="on"] обязательно: подложка непрозрачна только для
   exclusion, и лишь пока под ней есть непрозрачный слой – полотно сцены. Пока
   сцена не сделала первый кадр (data-scene="wait") или ее нет вовсе ("off"),
   у .outro при признаке data-outro фон снят, под подложкой прозрачность – и
   черный лег бы плашкой во весь блок, то есть вернул бы ту самую полосу на
   стыке. Признак ставит js/outro-scene.js ровно тогда, когда проявляется
   полотно, так что слой чернил и полотно живут и гаснут вместе.

   ВНИМАНИЕ: position у .outro__pin здесь НЕ меняется – родное значение sticky,
   именно им строка держится в центре экрана, пока блок проезжает. Смешивание
   само делает слой (mix-blend-mode создает контекст наложения), геометрии не
   касается. */
.outro[data-scene="on"] .outro__pin {
  background: #000;
  mix-blend-mode: exclusion;
}
@media (max-width: 900px) {
  .outro__text { font-size: min(28px, 6.2vw) !important; }
}

/* ---------- межстрочный интервал, когда фраза переносится ----------
   Замер по шагам от 320 до 1512 (кегль min(28px, 6.2vw), капс, трекинг .035em):
     до 510  – три строки (320: 288 px строки при 320 окна, 480: 432, 500: 450);
     520-768 – две строки (520: 468, 768: 704);
     от 769  – ОДНА строка: там проезд, у строки white-space: nowrap.
   Родной .95 сжимал строки вплотную (на 390 шаг был 22.97 px при кегле 24.18) –
   клиент: «все слеплено». Ставим читаемый интервал ровно там, где перенос есть,
   и не касаемся ширин с одной строкой: на них межстрочный ничего не решает, а
   высота строки участвует в расчете проезда. */
/* Без движения проезда нет и фраза переносится на любой ширине, но кегль тот же
   (min(52px, 2.7vw) с !important выше), а он дает строку в 0.90 ширины окна –
   от 901 px фраза все равно ложится в одну строку. Перенос там начинается с
   900 и ниже (на 900 кегль скачком становится 28 px), поэтому и правило до 900.
   Идет ПЕРВЫМ: ниже стоят правила по ширине, и на телефоне побеждают они */
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .outro__text { line-height: 1.18 !important; }
}
@media (max-width: 768px) {
  /* две строки */
  .outro__text { line-height: 1.18 !important; }
}
@media (max-width: 510px) {
  /* три строки – воздуха нужно чуть больше */
  .outro__text { line-height: 1.2 !important; }
}

/* Нижняя строка сайта – вдвое мельче и по центру, ниже фразы (просьба клиента).
   Была разложена по ширине как на первом экране, но клиент просит собрать по
   середине именно здесь. */
.outro__meta {
  justify-content: center !important;
  gap: clamp(14px, 2.4vw, 38px);
  bottom: clamp(28px, 4.5svh, 56px) !important;
}
/* «в два раза меньше» от 1.3rem – это .65rem, но при мелком корневом кегле дает
   6px, а такой текст сама клиент запретила. Держим вдвое мельче, но не ниже
   10px – читаемость важнее буквальной половины. */
.outro__meta span { font-size: max(10px, .65rem) !important; }
@media (max-width: 900px) {
  .outro__meta span { font-size: 10px !important; }
}

/* Шапки в последнем блоке нет – ни кролика, ни меню, ни имени: первый экран
   устроен так же, и клиент просит здесь того же покоя. Прячем на время, пока
   блок занимает экран (признак ставит js/outro-top.js). */
:root[data-outro="on"] .site-nav { opacity: 0; visibility: hidden; pointer-events: none; }

/* «Наверх» – на месте имени в шапке: тот же угол, тот же кегль и трекинг */
.outro__top {
  position: absolute;
  top: max(clamp(20px, 2.6vw, 39px), env(safe-area-inset-top));
  right: clamp(20px, 2.5vw, 38px);
  z-index: 3;
  pointer-events: auto;
  font-family: var(--font-ui, "Inter Tight"), sans-serif;
  font-size: clamp(11px, .8vw, 12px);
  line-height: 14.885px;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--tone-fg, #f5f5f5);
  transition: color .55s ease, opacity .2s ease;
}
.outro__top:hover { opacity: .7; }
.outro__top:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }