/* =====================================================================
   ИНТЕРАКТИВ: маркер, подпись, рисование, параллакс.

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

   Настройки времени и силы живут в js/interactive.js → CONFIG.
   ===================================================================== */

/* ---------------------------------------------------------------------
   МАРКЕР ВМЕСТО КУРСОРА
   Системный курсор прячем только там, где есть настоящая мышь:
   тач и клавиатурная навигация остаются нетронутыми.
   --------------------------------------------------------------------- */
.marker {
  /* ПЕРО ВМЕСТО ТОЧКИ. До 05.09 курсором была красная точка 9px; теперь
     это перо из assets-local/pen.svg — тот же красный E03342, что и
     везде, плюс чёрное остриё.

     ГЕОМЕТРИЯ СЧИТАЕТСЯ ОТ ОДНОГО ЧИСЛА. Правишь ширину — высота и
     вынос пересчитываются сами; числа 215 и 186.427 взяты из самого
     файла: это высота viewBox и y острия. Остриё лежит на левом краю
     (x = 0), поэтому влево ничего не сдвигаем.

     ПОЧЕМУ ОСТРИЁ, А НЕ ЦЕНТР. След чернил рисуется по координате
     указателя, и перо должно писать концом, а не серединой корпуса.
     Корпус уходит вверх-вправо — так перо лежит в правой руке. */
  --pen-w: 38px;
  --pen-h: calc(var(--pen-w) * 215 / 166);
  --pen-tip: calc(var(--pen-w) * 186.427 / 166);

  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: var(--pen-w);
  height: var(--pen-h);
  margin: calc(var(--pen-tip) * -1) 0 0 0;
  background: url("../assets-local/pen.svg") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s, width 0.18s, height 0.18s, margin 0.18s, background 0.18s;
  will-change: transform;
}

.marker[data-visible] { opacity: 1; }

/* ПЕРО ВСЕГДА ЧЁРНОЕ. brightness(0) гасит в чёрное всю картинку разом —
   и красный корпус пера, и крестик над ссылкой, который нарисован
   градиентами внутри того же элемента. Заводить второй файл ради этого
   не нужно, и красный в pen.svg остаётся нетронутым: захочется вернуть
   красное перо — снимается одна строка.

   Раньше перо было красным и чернело только на красном, по цвету под
   курсором. Приём работал, но на подписи «Веркин» — красных чернилах на
   светлой бумаге — упирался в то, чего браузер не сообщает: попал ли
   курсор в сам штрих или в просвет между штрихами. Чёрное перо видно
   везде и вопроса не создаёт. */
.marker { filter: brightness(0); }

/* Над ссылкой или кнопкой точка превращается в маленький крестик —
   тот же маркер, только «нацеленный». */
.marker[data-shape="cross"] {
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 0;
  background-image:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red));
  background-size: 100% 1.6px, 1.6px 100%;
  background-position: center, center;
  background-repeat: no-repeat;
  transform-origin: 50% 50%;
}

html[data-marker] body { cursor: none; }

/* Пока ведётся линия, выделение выключено по всему листу. Метку ставит
   и снимает startDrawing/stopDrawing. Одного preventDefault на нажатии
   мало: Safari возобновляет выделение, когда курсор уходит за край окна
   и возвращается. Правило живёт только на время рисования — обычное
   выделение текста мышью остаётся доступным. */
html[data-drawing] body {
  user-select: none;
  -webkit-user-select: none;
}
html[data-marker] a,
html[data-marker] button { cursor: none; }

/* ---------------------------------------------------------------------
   ПОДЧЁРКИВАНИЕ ССЫЛОК ПРИ НАВЕДЕНИИ

   Ссылки на листе ничем не отличались от набора: ни цветом, ни линией.
   Понять, что слово нажимается, можно было только по курсору. Теперь под
   наведённой ссылкой ПРОВОДЯТ МАРКЕРОМ — тем же красным штрихом, каким
   на этом сайте помечают всё остальное.

   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 20 4, 42 9, 62 6 C 82 3, 102 8, 118 4' fill='none' stroke='%23E03342' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") НЕ ПРЯМОЙ, А ВОЛНОЙ. Прямая линия — это подчёркивание из
   браузера, чужой знак. Здесь тот же жест, что у .scribble под «написать
   и назвать дату» в «Поводе»: рука ведёт неровно. Волна лежит картинкой
   внутри правила, отдельного файла ей не нужно.

   ПРОЯВЛЯЕТСЯ СЛЕВА НАПРАВО И НЕ ТЯНЕТСЯ. Открывается не ширина, а
   clip-path: будь это ширина, волна на ходу сжималась бы и разжималась,
   как резиновая. Здесь штрих нарисован целиком и просто открывается —
   так его и проводят.

   КРАСНЫЙ ВПИСАН ЧИСЛОМ, А НЕ ТОКЕНОМ: это картинка, и переменные CSS
   внутрь неё не попадают. Значение то же, что у --red (E03342); меняешь
   токен — поменяй и здесь.

   КОГО НЕ КАСАЕТСЯ. Кнопка «Связаться» — у неё своя красная плашка, и
   штрих под ней был бы вторым знаком об одном. Строки «написать и
   назвать дату» и категории в блоке 02 уже имеют свой отклик, свой у
   каждой; их не трогаем, чтобы не отвечать дважды.
   --------------------------------------------------------------------- */
.nav-item { position: relative; }

.nav-item::after,
.soc--tg::after, .soc--vk::after, .soc--inst::after,
.e__link::after,
.colophon--right::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -5px;
  height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 20 4, 42 9, 62 6 C 82 3, 102 8, 118 4' fill='none' stroke='%23E03342' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
  pointer-events: none;
}

.nav-item:hover::after,      .nav-item:focus-visible::after,
.soc--tg:hover::after,       .soc--tg:focus-visible::after,
.soc--vk:hover::after,       .soc--vk:focus-visible::after,
.soc--inst:hover::after,     .soc--inst:focus-visible::after,
.e__link:hover::after,       .e__link:focus-visible::after,
.colophon--right:hover::after, .colophon--right:focus-visible::after {
  clip-path: inset(0 0 0 0);
}

/* СОЦСЕТИ — ШТРИХ ПРИЖАТ БЛИЖЕ. У них свой интерлиньяж (--ui-lh 20 при
   кегле 16), и под буквами остаётся лишний просвет: штрих на общем
   отступе отходил от «TG / VK / INST» и начинал читаться как черта под
   сноской про Meta, которая стоит следом. */
.soc--tg::after, .soc--vk::after, .soc--inst::after { bottom: -2px; }

/* Клавиатуре — та же черта, что и мыши, плюс своя рамка: штрих отвечает
   «сюда можно нажать», рамка — «фокус сейчас здесь». */
.nav-item:focus-visible,
.soc--tg:focus-visible, .soc--vk:focus-visible, .soc--inst:focus-visible,
.e__link:focus-visible, .colophon--right:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* ---------------------------------------------------------------------
   ХОЛСТ ЧЕРНИЛ
   Один холст на след курсора и на рисование. Событий не ловит никогда —
   поэтому кнопки и ссылки под ним работают как ни в чём не бывало.
   --------------------------------------------------------------------- */
/* ХОЛСТ ЛЕЖИТ НА ЛИСТЕ, А НЕ НА ОКНЕ (переделано 05.09).

   БЫЛО: position: fixed, и нарисованное держалось на месте только тем,
   что каждый кадр перерисовывалось со сдвигом на window.scrollY. При
   инерционной прокрутке этот сдвиг отстаёт на кадр, и линия плавала за
   бумагой — «немного двигается», как это и выглядело.

   СТАЛО: холст absolute, то есть его двигает сам браузер вместе со
   страницей, а не наш код. Отставать больше нечему: между кадрами
   картинка вообще не меняется. Холст высотой в три окна и переставляется
   только когда прокрутка подходит к его краю — раз в экран, а не
   ежекадрово; координаты в нём считаются от его собственной верхушки. */
.ink-canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 55;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   РУКОПИСНЫЕ ПОДСКАЗКИ
   Те же чернила, что и в подписи «Веркин»: гарнитура рукописи, красный,
   лёгкий наклон. Появляются и уходят растворением.
   --------------------------------------------------------------------- */
.hint {
  font-family: var(--hand-font);
  color: var(--red-hand);
  letter-spacing: var(--hand-ls);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

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

/* Подсказка у фигуры — внутри сцены, поэтому в координатах макета */
.hint--sign {
  left: 1012px;
  top: 214px;
  z-index: 6;
  font-size: 40px;
  transform: rotate(-6deg) translateY(6px);
}

.hint--sign[data-shown] { transform: rotate(-6deg) translateY(0); }

/* Подсказка про рисование — в координатах окна, у нижнего края */
.hint--draw {
  position: fixed;
  left: 50%;
  bottom: 46px;
  z-index: 58;
  margin: 0;
  font-size: 34px;
  transform: translateX(-50%) rotate(-3deg) translateY(8px);
}

.hint--draw[data-shown] { transform: translateX(-50%) rotate(-3deg) translateY(0); }

/* ---------------------------------------------------------------------
   ПОДПИСЬ НА ФОТОГРАФИИ
   Блок стоит в координатах сцены поверх фигуры — так, как расписался бы
   человек прямо на журнальной странице.
   --------------------------------------------------------------------- */
.sign {
  left: 900px;
  top: 244px;
  width: 480px;
  height: 320px;
  z-index: 7;
  pointer-events: none;
}

.sign__ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sign__ink path {
  fill: none;
  stroke: var(--red-hand);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

/* Росчерк, стрелка и её наконечник рисуются одинаково: длина линии
   выдаётся в CSS-переменную --len из JS, дальше едет dashoffset. */
.sign__stroke, .sign__arrow, .sign__arrow-head {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
}

.sign[data-step] .sign__stroke {
  opacity: 1;
  transition: stroke-dashoffset var(--t-stroke, 900ms) cubic-bezier(0.33, 0.9, 0.5, 1);
  stroke-dashoffset: 0;
}

.sign[data-step="3"] .sign__arrow,
.sign[data-step="3"] .sign__arrow-head {
  opacity: 1;
  transition: stroke-dashoffset var(--t-arrow, 700ms) ease-out;
  stroke-dashoffset: 0;
}

.sign__arrow-head { transition-delay: 260ms; }

/* Имя проявляется слева направо — как будто его сейчас пишут */
.sign__name {
  position: absolute;
  left: 8px;
  top: 22px;
  font-size: 56px;
  color: var(--red-hand);
  transform: rotate(-5.4deg);
  transform-origin: 0 50%;
  clip-path: inset(0 100% 0 0);
}

.sign[data-step="2"] .sign__name,
.sign[data-step="3"] .sign__name {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--t-name, 900ms) cubic-bezier(0.4, 0.8, 0.4, 1);
}

/* Мелкий текст ложится на светлый шарф — единственное место на фигуре,
   где мелкий красный читается уверенно. */
.sign__meta {
  position: absolute;
  left: 300px;
  top: 150px;
  font-size: 13px;
  line-height: 18px;
  color: var(--red-hand);
  opacity: 0;
  transform: translateY(5px);
}

.sign__meta--2 { top: 170px; }

.sign[data-step="3"] .sign__meta {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.sign[data-step="3"] .sign__meta--2 { transition-delay: 0.12s; }

/* Уход подписи — растворением, без движения */
.sign[data-leaving] {
  opacity: 0;
  transition: opacity var(--t-leave, 800ms) ease;
}

/* ---------------------------------------------------------------------
   ЗОНА ФИГУРЫ
   Прямоугольник картинки шире самой фигуры: слева от Валентина пустая
   бумага, и если ловить весь прямоугольник, подсказка выскакивает
   в пустоте. Зона обрезана по фигуре.
   --------------------------------------------------------------------- */
.portrait-hit {
  left: 1000px;
  top: 40px;
  width: 420px;
  height: 800px;
  z-index: 8;
  padding: 0;
  border: 0;
  background: transparent;
}

.portrait-hit:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ---------------------------------------------------------------------
   РЕАКЦИЯ КОМПОЗИЦИИ

   ПАРАЛЛАКС УБРАН 05.09. Здесь стояли шесть пар переменных --px-* /
   --py-*, которые писал JS, и правила, по которым бумага, набор, фото,
   рукопись и фигура уезжали за мышью. Ничего на листе больше не
   плавает: композиция стоит, а отвечает только то, на что навели.

   Правила ниже сохранены ровно в той части, которая НЕ была плаванием:
   выключка по середине у меню, поворот у рукописи, крен и укрупнение
   кадров при наведении. Из каждого transform вынут только сдвиг.
   --------------------------------------------------------------------- */
.stage .tag {
  transform: scale(var(--tag-scale, 1));
  transform-origin: 0 60%;
  transition: color 0.35s ease, transform 0.35s ease;
}

/* Слово, которое обвели маркером, откликается: краснеет и чуть растёт */
.stage .tag[data-marked] { color: var(--red); --tag-scale: 1.06; }

/* Выключка ссылок шапки по их середине. Ограничено первым экраном:
   класс .nav носят все, кому нужен кегль 16, и голое правило уводило бы
   за левый край листа, например, кнопку бланка. Сдвига за мышью здесь
   больше нет — осталась только выключка. */
.stage--hero .nav { transform: translateX(-50%); }

/* КНОПКА НЕ УЧАСТВУЕТ В ПАРАЛЛАКСЕ (05.09, решение Оксаны). Раньше
   плашка и текст были разными элементами и каждый ехал за мышью сам:
   на движении текст отставал от красного, и кнопка переставала читаться
   кнопкой. Теперь это один элемент, но и он не едет вовсе: единственное
   действие первого экрана должно стоять на месте, чтобы в него можно
   было попасть, а не целиться. С 05.09 параллакса нет и у остальных
   слоёв — на листе не двигается вообще ничего, кроме отклика на
   наведение. */

/* ОТКЛИК КНОПКИ — ТОЛЬКО ЦВЕТОМ. Под курсором краска ложится плотнее:
   плашка темнеет на восьмую часть, текст и габарит не трогаются. Это
   единственное, что кнопке позволено делать, — двигаться ей нельзя, из
   этого и вышла прежняя история с дрожанием.

   Цвет выведен из --red, а не вписан вторым красным: заведи здесь своё
   число — и оно разойдётся с токеном при первой же правке. Перед
   color-mix стоит обычный цвет-подстраховка, как это уже сделано с
   бумагой в отзывах: браузер, не знающий color-mix, возьмёт его.

   Наведение и фокус отвечают одинаково: с клавиатуры кнопка должна
   вести себя так же, как под мышью. */
.cta {
  transition: background-color 0.22s ease,
              transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Растёт ОТ СВОЕЙ СЕРЕДИНЫ. От угла — и плашка поползёт в сторону, а
     это ровно то дрожание, которое с кнопки убирали. */
  transform-origin: 50% 50%;
}

.cta:hover,
.cta:focus-visible {
  background: #c52d3a;
  background: color-mix(in srgb, var(--red) 88%, #000);

  /* 2.5 % — это плюс пять пикселей по ширине и полтора по высоте.
     Больше нельзя: кнопка стоит вплотную к правому полю и к меню,
     заметный рост читался бы как скачок, а не как отклик. */
  transform: scale(1.025);
}

/* СДВИГ КНОПКИ ПРИ НАВЕДЕНИИ УБРАН 05.09 по решению Оксаны. Была задумка
   «печать легла не идеально ровно»: плашка уезжала на 3/−2, текст на
   1/−1, и они расходились. На деле кнопка выглядела подрагивающей, а
   единственная на первом экране кнопка дрожать не должна.
   Метку data-cta-hover больше никто не ставит — слушатели в
   interactive.js сняты вместе с этими правилами. Параллакс кнопки
   тоже снят — на листе больше ничего не плавает. */

/* Фотографии слева: отклик на наведение — чуть крупнее, чуть повёрнута,
   чуть контрастнее. Чёрно-белыми остаются всегда. Постоянного сдвига за
   мышью больше нет: кадр стоит, пока на него не навели. */
.pic--collage-top, .pic--collage-bottom {
  transform:
    rotate(var(--tilt, 0deg))
    scale(var(--scale, 1));
  transform-origin: 50% 50%;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.5s ease;
}

.pic--collage-top:hover, .pic--collage-bottom:hover {
  --tilt: -0.7deg;
  --scale: 1.022;
  filter: grayscale(1) contrast(1.07) brightness(1.02);
}

.pic--collage-bottom:hover { --tilt: 0.6deg; }

/* Цветной дубль кадра: лежит ровно поверх чёрно-белого и проявляется,
   когда на тот навели. Событий не ловит — курсор работает с нижним. */
.pic--color {
  opacity: 0;
  pointer-events: none;
  object-fit: fill;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
  z-index: 2;
}

.pic--collage-bottom:hover + .pic--color { opacity: 1; }

/* цветной слой отвечает вместе с чёрно-белым: тот же наклон и
   тот же масштаб при наведении */
.pic--collage-bottom:hover + .pic--color {
  --tilt: 0.6deg;
  --scale: 1.022;
}

/* Портрет: при наведении — едва заметный подъём над бумагой. Не
   3D-карточка: только масштаб и мягкая тень. Стоит на месте. */
.pic--portrait {
  transform: scale(var(--face-scale, 1));
  transform-origin: 60% 55%;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.55s ease;
}

.stage[data-face-hover] .pic--portrait {
  --face-scale: 1.018;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.16));
}

.stage[data-signing] .pic--portrait {
  --face-scale: 1.035;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.2));
}

/* ПАРАЛЛАКС ПОДПИСЕЙ — ДВУМЕРНЫМ СДВИГОМ, А НЕ translate3d. Третья
   координата просит у браузера отдельный слой, и Safari режет по его
   границе всё, что вылезло за короб, — у «Веркин» отрезало верх
   выносного штриха. Смещение здесь в пределах десятка пикселей, ради
   него отдельный слой не нужен. Остальные слои параллакса трогать не
   стали: там нет текста с выносными элементами. */
/* Подписям остался только их макетный поворот. Сдвиг за мышью снят
   вместе со всем параллаксом; заодно ушёл и повод для отдельного
   композитного слоя, из-за которого Safari срезал верх «Веркин». */
.hand--name    { transform: rotate(var(--hand-name-rot)); }
.hand--surname { transform: rotate(var(--hand-surname-rot)); }

/* Во время подписи остальная композиция уходит на полшага назад */
.stage[data-signing] .logo,
.stage[data-signing] .nav,
.stage[data-signing] .tag,
.stage[data-signing] .geo,
.stage[data-signing] .pic--collage-top,
.stage[data-signing] .pic--collage-bottom,
.stage[data-signing] .hand,
.stage[data-signing] .soc--tg,
.stage[data-signing] .soc--vk,
.stage[data-signing] .soc--inst,
.stage[data-signing] .disclaimer {
  opacity: 0.42;
}

.stage .logo, .stage .nav, .stage .tag, .stage .geo,
.stage .pic--collage-top, .stage .pic--collage-bottom, .stage .hand,
.stage .soc--tg, .stage .soc--vk, .stage .soc--inst, .stage .disclaimer {
  transition: opacity 0.6s ease;
}

/* ---------------------------------------------------------------------
   ТАЧ И КЛАВИАТУРА
   На телефоне и планшете ничего из мышиного не включается — это делает
   JS. Здесь только страховка: если вдруг подсказка про рисование
   отрисуется, на узком экране её не будет.
   --------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .hint--draw { display: none; }
  .marker { display: none; }
}

/* ---------------------------------------------------------------------
   СПОКОЙНЫЙ РЕЖИМ
   Пользователь попросил меньше движения — оставляем только появление
   и исчезновение, без рисования линий и параллакса.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sign__ink path { opacity: 1; stroke-dashoffset: 0; transition: none; }
  .sign__name { clip-path: inset(0 0 0 0); transition: none; }
  .sign__meta { opacity: 1; transform: none; transition: none; }
  .pic--collage-top, .pic--collage-bottom, .pic--portrait,
  .cta { transition: none; }
}