/* =====================================================================
   КРАСНЫЙ КАДР — ПЕРВЫЙ ЭКРАН. Только координаты: чем элементы являются,
   написано в components.css, значения — в tokens.css.
   Координаты — из Figma, система сцены 1440×841.
   «Desktop - 27» (159:1741) и «Desktop - 28» (159:1788).

   ФОТОГРАФИИ И ФАКТУРЫ взяты не исходниками, а рендерами самих слоёв
   из Figma: у них там режим CROP, повороты 90° / −180° / −1,52° и своя
   матрица кадрирования. Рендер слоя уже содержит и обрезку, и поворот,
   и обрез краем фрейма, поэтому ложится в свой прямоугольник один в один
   и не требует повторять эту математику в CSS.
   ===================================================================== */

/* --- координаты рукописи по версиям ---
   Гарнитура, трекинг, кегль и красный лежат в tokens.css — они нужны
   и ките. Здесь только то, что относится к первому экрану: где стоит
   и на сколько повёрнуто. */
:root {
  --hand-name-x: 653.1px; --hand-name-y: 331.9px; --hand-name-rot: -6.08deg;
  --hand-surname-x: 333px; --hand-surname-y: 347.4px; --hand-surname-rot: -6.08deg;
}
:root[data-v="2"] {
  --hand-name-x: 659.4px; --hand-name-y: 342.8px; --hand-name-rot: -7.92deg;
  --hand-surname-x: 345px; --hand-surname-y: 342.6px; --hand-surname-rot: -7.41deg;
}

/* ---------------------------------------------------------------------
   ФАКТУРА БУМАГИ — самый нижний слой (прозрачность и режим — в токенах).
   --------------------------------------------------------------------- */
.paper { left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); }

/* ---------------------------------------------------------------------
   КРАСНЫЕ ПЛАШКИ
   --------------------------------------------------------------------- */
.bar--corner  { left: 0;      top: -3px;  width: var(--corner-w); height: var(--corner-h); }  /* угловой блок слева сверху */
/* .bar--button убрана 05.09: плашка кнопки теперь сама кнопка, см. .cta ниже. */
.bar--bottom  { left: 0;      top: calc(822px - var(--squeeze, 0px)); width: 1009px;          height: var(--stripe-h);}  /* нижняя полоса */
.bar--bottom2 { left: 1254px; top: calc(822px - var(--squeeze, 0px)); width: 186px;           height: var(--stripe-h);}  /* её правый обрывок */

/* Короткий градиентный кусок между полосами — из линейного градиента Figma */
/* Ограничено первым экраном. .bar--gradient — это в ките ЗАЛИВКА
   (components.css), а здесь у неё ещё и координаты; голое правило
   ставило чужие полосы в точку 970/822 своей сцены. Поймано 05.09 на
   блоке «Вопросы»: красная полоса вылезла посреди текста. */
.stage--hero .bar--gradient { left: 970px; top: calc(822px - var(--squeeze, 0px)); width: 134px; height: var(--stripe-h); }

/* ---------------------------------------------------------------------
   ИЗОБРАЖЕНИЯ. Каждое стоит в габаритах своего слоя (уже с учётом
   обреза краем фрейма), поэтому object-fit: fill точен.
   --------------------------------------------------------------------- */
/* КАДРЫ КОЛЛАЖА СТЫКУЮТСЯ ВПЛОТНУЮ. Из Figma они приехали почти
   встык, но не совсем: верхний кончался на 399.9, нижний начинался с
   400, левые кромки стояли на 60 и 61, ширины отличались на полпикселя.
   На дробном масштабе это давало светлую щель между кадрами и заметный
   уступ по левому краю. Теперь левая кромка и ширина у обоих общие, а
   верхний заходит на нижний ровно на пиксель — щели не остаётся ни при
   каком масштабе. */
.pic--collage-top    { left: 60px;  top: 110px; width: 378px; height: 291px; }
.pic--collage-bottom { left: 60px;  top: 400px; width: 378px; height: 260px; }
/* ФИГУРА ЛЕЖИТ ПОВЕРХ ШАПКИ, НО МЫШЬ ЧЕРЕЗ НЕЁ ПРОХОДИТ.

   Портрет занимает весь правый край листа и в разметке стоит позже меню
   и кнопки — значит рисуется поверх них, и это так и задумано: Валентин
   должен быть впереди красной плашки, а не за ней.

   Но пока он принимал мышь на себя, всё, что оказалось под ним, было
   мёртвым: кнопка «Связаться» не нажималась вовсе, «Отзывы» и «Вопросы»
   не наводились. Сначала я подняла их слоем выше фигуры — и они ожили,
   но плашка полезла Валентину на плечо.

   pointer-events: none решает обе задачи разом: фигура остаётся сверху
   ГЛАЗУ и исчезает для МЫШИ. Нажатия проходят сквозь неё к кнопке и
   ссылкам, порядок слоёв при этом не тронут.

   ЧТО ПРИ ЭТОМ НЕ ТЕРЯЕТСЯ. Своей реакции у портрета нет: зона
   .portrait-hit («подпиши Валентина») убрана 05.09, и метку
   data-face-hover с тех пор не ставит никто — в interactive.js это
   место под `if (hit)`, а hit там null. Отбирать у фигуры нечего. */
/* ВЕРНУТ НА 28 (10 → 28). Кратко: 05.09 фигуру подняли на 18, чтобы у
   первого экрана появилось нижнее поле. Заказчица посмотрела вживую и
   решила иначе: красная полоса должна лежать ПО НИЖНЕЙ КРОМКЕ ЭКРАНА,
   без просвета под ней, а фигура — опускаться вместе с полосой. Просвет
   до блока 02 делает теперь сам блок 02 своим верхним полем (36 вместо
   18, см. section-events.css) — стык на глаз тот же, а первый экран
   кончается полосой, а не полем. */
/* ВЫСОТА СЧИТАЕТСЯ ОТ ПОДЖИМА, А НЕ ЗАШИТА ЧИСЛОМ.
   Было 813 намертво. При коротком окне скрипт ужимает первый экран
   (--squeeze до 90), вместе с ним поднимается красная полоса и нижнее
   поле листа — а фигура оставалась прежней высоты и накрывала собой
   и полосу, и белое поле, а на самых низких окнах вылезала в блок 02.
   Ровно это и было видно: ноги поверх полосы и поверх просвета.

   Теперь низ фигуры = 28 + (813 − поджим) = 841 − поджим, то есть
   ровно нижняя кромка первого экрана при любой высоте окна — там же,
   где кончается красная полоса. Ниже фигура не уходит никогда.

   object-fit: cover вместо общего fill: при уменьшении высоты кадр
   ОБРЕЗАЕТСЯ снизу, а не сплющивается. Обрезается низ брюк — то, что
   и так уходило за кромку листа. */
.pic--portrait       { left: 755px; top: 28px;  width: 685px;
                       height: calc(813px - var(--squeeze, 0px));
                       object-fit: cover;
                       object-position: 50% 0;
                       pointer-events: none; }

/* Зерно кладётся не в край, а с отступом 18px — так в макете */
/* ЗЕРНО С ПОЛЕМ 18 СО ВСЕХ ЧЕТЫРЁХ СТОРОН — как у всех прочих блоков.
   Раньше здесь стояло left/top 18, а ширина 1422 и высота 823, то есть
   справа и снизу зерно доходило до самой кромки: поле было только слева
   и сверху. Отсюда и брался вопрос «почему справа нет отступа» — он там
   и правда был только с одной стороны.
   Проценты вместо чисел: высота листа теперь меняется (см. --squeeze),
   и зашитые 823 от неё отставали бы. */
.grain { left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); }

/* ---------------------------------------------------------------------
   ШАПКА И ТЕКСТОВЫЕ СЛОИ
   --------------------------------------------------------------------- */
.logo { left: var(--edge-text); top: 29px; }

/* Пункты шапки стоят по ЦЕНТРАМ слов из макета, а не по левому краю:
   тогда смена кегля не разъезжает шапку — слово ужимается к своему центру.
   Центры взяты из макета: 570 / 729 / 877, у кнопки — центр её плашки 1283. */
/* Ссылки шапки выключены по центру своей координаты, отсюда сдвиг на
   половину ширины. Правило ОБЯЗАНО быть ограничено первым экраном:
   класс .nav носят все, кому нужен кегль 16 — в том числе кнопка
   «отправить заявку» в бланке, и голое правило уводило её за левый
   край листа ровно на половину её ширины. */
.stage--hero .nav { transform: translateX(-50%); }

/* Меню — одна строка, ПРИВЯЗАННАЯ К ПРАВОМУ КРАЮ, а не к левому.

   Сначала строка стояла от 531 с заданной шириной и промежутками
   «поровну». В Chrome ложилась точно, а в Safari тот же моноширинный
   набирается шире — «Вопросы» вылезали за правый край строки и уезжали
   под красную кнопку.

   Теперь у строки закреплён ПРАВЫЙ край (1133 — за 40px до кнопки), а
   промежутки заданы числом. Наберётся шире — строка отрастёт ВЛЕВО, в
   пустое поле шапки, и в кнопку не попадёт ни при каком наборе. Левый
   край при нашем наборе приходится примерно на 547 — там же, где стояла
   прежняя «Главная». */
/* Меню стоит ПО СЕРЕДИНЕ ПРОСВЕТА между логотипом и кнопкой и растёт от
   неё в обе стороны.

   Логотип кончается на 274, кнопка начинается на 1173 — середина 724.
   Прежде строка была прижата к правому краю (1133) и её середина
   приходилась на 840: справа было тесно, слева пусто.

   ПОЧЕМУ ИМЕННО ОТ СЕРЕДИНЫ, А НЕ ОТ КРАЯ. В Safari тот же моноширинный
   набирается шире, чем в Chrome, и строка, закреплённая краем, ползёт в
   одну сторону — к кнопке. От середины она растёт симметрично: чтобы
   достать до кнопки, набор должен раздуться почти вдвое (585 → 898), а
   такого расхождения между браузерами не бывает. */
.nav-row {
  left: 724px;
  transform: translateX(-50%);
  top: 37px;
  display: flex;
  gap: 62px;
  align-items: baseline;
}

.nav-item {
  font-size: var(--nav-fs);
  line-height: var(--nav-lh);
  white-space: nowrap;
}

/* Кнопка стоит по координатам БЫВШЕЙ ПЛАШКИ (1186/12), а не по
   координатам бывшего текста (1283/33): плашка и была кнопкой, текст
   лишь стоял по её середине. Габарит и красный приходят из .btn. */
.cta {
  /* ПРАВОЕ ПОЛЕ 73 — ТО ЖЕ, ЧТО У БЛОКОВ НИЖЕ (--edge-r). Кнопка стояла
     на 1186 и кончалась на 1380, то есть в 60 от кромки листа: у первого
     экрана поле было своё, уже общего. Сдвинута на 1173 — правый край
     встал на 1367, ровно как у всех прочих разворотов. */
  left: 1173px;
  top: 12px;

  /* КЕГЛЬ ЗАДАН ЗДЕСЬ, А КЛАСС nav С КНОПКИ СНЯТ. Он давал не только
     кегль: правило .stage--hero .nav в interactive.css выключает пункты
     меню по их середине (translateX(-50%)) и катает их в параллаксе.
     Кнопке не нужно ни то, ни другое — с ним она уезжала на пол-ширины
     влево и продолжала ездить за мышью даже после снятия своего
     параллакса. Кегль тот же, что у меню. */
  font-size: var(--nav-fs);
  line-height: var(--nav-lh);
}

/* Гео-подпись под коллажем. Стоит жёстко: под ней кончается коллаж,
   и вслед за поджимом она уезжает на фотографию. */
.geo { left: 159px; top: 670px; }

/* ---------------------------------------------------------------------
   СПИСОК С КРАСНЫМИ ТОЧКАМИ
   В Figma это шесть отдельных групп «точка + слово», разбросанных
   лесенкой, поэтому каждая строка стоит по своим координатам.
   Внутри сцены слова абсолютны — точка и так считается от слова.
   --------------------------------------------------------------------- */
.stage .tag { position: absolute; }

.tag--vedushiy { left: 613px; top: 496px; }
.tag--sobytiy  { left: 667px; top: 530px; }
.tag--tantsuyu { left: 551px; top: 596px; }
.tag--poyu     { left: 778px; top: 629px; }
.tag--raduyus  { left: 693px; top: 668px; }
.tag--zhivu    { left: 805px; top: 716px; }

/* ---------------------------------------------------------------------
   РУКОПИСНАЯ ПОДПИСЬ. Имя чёрное, фамилия красная — в Figma у слоя
   фамилии две заливки, верхняя красная, по факту виден красный.
   --------------------------------------------------------------------- */
.hand--name {
  z-index: 3;                 /* та же причина, что у фамилии ниже */
  line-height: 1.3;           /* см. объяснение у фамилии; здесь вылет
                                 меньше по кеглю, но природа та же */
  padding: 12px 8px 0 0;
  left: var(--hand-name-x);
  top: calc(var(--hand-name-y) - 18px);
  font-size: var(--hand-name-fs);
  transform: rotate(var(--hand-name-rot));
}

/* Фамилия — красная. В Figma у слоя две заливки: чёрная и поверх неё
   красная, то есть по факту виден красный. Имя выше остаётся чёрным. */
.hand--surname {
  /* СЛОЙ. Без него подпись уходила ПОД коллаж при наведении. В разметке
     она стоит после фотографий, то есть по порядку рисуется поверх, —
     но у цветного дубля кадра (.pic--color в interactive.css) стоит
     z-index: 2, и на наведении дубль проявлялся и накрывал «Веркин».
     Тройка ставит подпись выше дубля и ниже списка качеств (9). */
  z-index: 3;

  /* ВЕРХ ПОДПИСИ СРЕЗАЛСЯ В SAFARI. Замерено 05.09: короб строки
     начинается на 269, а чернила — на 264, то есть выносной штрих
     выходит за кегельную площадку на 5px. Chrome такой вылет рисует,
     Safari — обрезает по границе слоя, и у штриха появлялся плоский
     срез. Ровно та же болячка уже лечилась в этом проекте дважды:
     см. line-height у .note в section-events.css и у .pack__hand в
     section-povod.css — там в комментариях то же слово «срезался».

     ЛЕЧИТСЯ ИНТЕРЛИНЬЯЖЕМ, А НЕ ПЕРЕНОСОМ. При normal короб равен 325;
     при 1.3 он становится 358, и лишние 33px делятся поровну сверху и
     снизу — 16.5px запаса над чернилами вместо пяти недостающих.

     ЧИСЛА ИЗ FIGMA НЕ ТРОНУТЫ. Полстроки, добавленные сверху, опустили
     бы подпись, поэтому top компенсирован на те же 17px прямо здесь,
     а переменная --hand-surname-y осталась ровно такой, какой её
     отмерили по макету. */
  line-height: 1.3;

  /* ОДНОГО ИНТЕРЛИНЬЯЖА НЕ ХВАТИЛО. Перемерила без поворота — в
     собственных координатах элемента чернила выходят за короб на 11px
     сверху и 8px справа (короб 326…613, чернила 315…594). Первый замер
     дал пять, потому что мерился ПОВЁРНУТЫЙ короб, а он больше своего
     содержимого и вылет прятал.

     Поэтому короб расширен отступами: 30px сверху и 20px справа — с
     запасом к измеренным одиннадцати и восьми. Фона у подписи нет,
     отступы невидимы. top компенсирован на те же 30px, чтобы чернила
     остались ровно там, где стояли. */
  padding: 30px 20px 0 0;

  left: var(--hand-surname-x);
  top: calc(var(--hand-surname-y) - 47px);
  font-size: var(--hand-surname-fs);
  transform: rotate(var(--hand-surname-rot));
  color: var(--hand-red);
}

/* ---------------------------------------------------------------------
   СОЦСЕТИ И СНОСКА — только в версии 2 (в первой их в макете нет).
   --------------------------------------------------------------------- */
/* ТРИ СТРОКИ ЛЕВОГО НИЗА ВЫКЛЮЧЕНЫ ПО ОДНОМУ ПРАВОМУ КРАЮ — 440, по
   концу строки «Рязань. Москва. Весь мир.». Раньше каждая кончалась где
   придётся: гео на 440, INST на 427, сноска на 425; правый край
   выглядел рваным. Соцсети сдвинуты на 13 вправо, сноска выключена по
   правому краю. */
.soc--tg   { left: 309px; top: calc(760px - var(--squeeze, 0px)); }
.soc--vk   { left: 359px; top: calc(760px - var(--squeeze, 0px)); }
.soc--inst { left: 408px; top: calc(760px - var(--squeeze, 0px)); }

/* ОГРАНИЧЕНО СВОЕЙ СЦЕНОЙ. Правило стояло голым и утаскивало бы в
   координаты первого экрана любую сноску с этим классом на другом
   листе. Пятый случай той же болезни за день — см. ЗАМЕТКИ 05.09. */
.stage--hero .disclaimer {
  left: auto;
  right: 1000px;              /* правый край на 440, как у гео и соцсетей */
  top: calc(787px - var(--squeeze, 0px));
  text-align: right;
}

:root:not([data-v="2"]) .only-v2 { display: none; }

/* ---------------------------------------------------------------------
   ЗАГЛУШКИ ССЫЛОК
   --------------------------------------------------------------------- */
.stub-note {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 20;
  transform: translateX(-50%);
  padding: 9px 14px;
  border-radius: 8px;
  background: #1a1a1a;
  color: #fff;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}

.stub-note[data-shown] { opacity: 1; }

/* ---------------------------------------------------------------------
   ПЕРЕКЛЮЧАТЕЛЬ ВЕРСИЙ — разметка убрана 02.09, когда выбрали версию 2.
   Координаты оставлены на случай, если сравнение снова понадобится:
   свободная площадка между списком качеств и полосой, x 460…740.
   --------------------------------------------------------------------- */
.switcher--in-scene {
  position: absolute;
  left: 470px;
  top: 750px;
  bottom: auto;
}


/* ---------------------------------------------------------------------
   ПРАВКИ ОКСАНЫ 05.09

   1. КЕГЛЬ 16 У СПИСКА КАЧЕСТВ И СОЦСЕТЕЙ.
   Шапка и «Рязань. Москва. Весь мир.» и так стояли на 16 — их не
   трогаем. А список качеств наследовал основной моно 20, соцсети —
   свои 20. Теперь и то и другое подписным кеглем.

   Точка списка поднята с 9px до 7px: она отмерялась от верха строки в
   26px, а строка стала 21px, и точка съезжала ниже слова.

   2. СПИСОК КАЧЕСТВ ВЫШЕ ПОДПИСИ.
   Росчерк «подпиши Валентина» стоит на 7-м слое и занимает x 900…1380,
   y 244…564 — то есть накрывает хвост строки «100+ событий в год».
   Текст обязан оставаться сверху: подпись украшает лист, а качества
   его читают. 9 — выше росчерка (7) и выше прозрачной зоны портрета
   (8); с самой зоной по горизонтали качества не пересекаются, клик по
   портрету не пострадает.
   --------------------------------------------------------------------- */
.stage--hero .tag {
  font-size: var(--caption-fs);
  line-height: var(--caption-lh);
  --dot-rise: 7px;
  z-index: 9;
}

.stage--hero .soc--tg,
.stage--hero .soc--vk,
.stage--hero .soc--inst {
  font-size: var(--caption-fs);
  line-height: var(--caption-lh);
}