/* =====================================================================
   КОМПОНЕНТЫ. Общий слой для всех блоков сайта.

   Здесь описано, ЧЕМ элемент является: гарнитура, кегль, цвет, габарит,
   режим наложения. Здесь НЕТ ни одной координаты — где элемент стоит,
   решает блок (hero.css и дальше по секциям).

   Значения приходят из tokens.css. Правишь токен — меняется везде,
   включая первый экран. Витрина всего этого: ui-kit/index.html.
   ===================================================================== */

/* ---------------------------------------------------------------------
   ТЕКСТ
   Три роли, больше в макете нет. Моноширинный — весь интерфейс;
   Inter — служебная мелочь (соцсети, сноска); рукопись — только имя.
   --------------------------------------------------------------------- */
.mono {
  font-family: var(--font-mono);
  font-size: var(--mono-fs);
  line-height: var(--mono-lh);
  letter-spacing: var(--mono-ls);
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

/* Логотип: две строки, выключка ПО ЦЕНТРУ в блоке фиксированной ширины —
   без неё вторая строка уезжает влево. */
.logo {
  width: var(--logo-w);
  font-size: var(--logo-fs);
  line-height: var(--logo-lh);
  text-align: center;
  white-space: pre-line;
}

/* Шапка: пункты меню и кнопка «Связаться» — мельче основного моно. */
.nav {
  font-size: var(--nav-fs);
  line-height: var(--nav-lh);
}

/* Подпись под фото. */
.geo {
  font-size: var(--caption-fs);
  line-height: var(--caption-lh);
}

/* Служебная мелочь — Inter, отрицательный трекинг. */
.ui {
  font-family: var(--font-ui);
  font-size: var(--ui-fs);
  line-height: var(--ui-lh);
  letter-spacing: var(--ui-ls);
  color: var(--ink);
  white-space: nowrap;
}

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

/* Рукопись. Углы поворота в Figma идут против часовой — в CSS знак
   обратный. Гарнитура, трекинг и красный различаются по версиям кадра,
   поэтому приходят переменными (см. hero.css). */
.hand {
  font-family: var(--hand-font);
  letter-spacing: var(--hand-ls);
  line-height: normal;
  color: var(--ink);
  white-space: nowrap;
  transform-origin: 0 0;
}

/* ---------------------------------------------------------------------
   СПИСОК КАЧЕСТВ: слово + красная точка слева
   Точка стоит на 12px левее слова и на 9px ниже верха строки.
   --------------------------------------------------------------------- */
.tag {
  position: relative;
  line-height: var(--mono-lh);
}

.tag::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--dot-gap));
  top: var(--dot-rise);
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--red);
}

/* ---------------------------------------------------------------------
   КРАСНЫЕ ПЛАШКИ
   Габариты задаёт блок; здесь — только заливка и типовые размеры.
   --------------------------------------------------------------------- */
.bar { background: var(--red); }

/* Градиентный обрывок нижней полосы. */
.bar--gradient { background: var(--red-gradient); }

/* ---------------------------------------------------------------------
   КНОПКА — сборный компонент для новых блоков.
   На первом экране кнопка перенесена из Figma двумя слоями (плашка
   .bar--button + текст .cta), потому что там это два отдельных слоя.
   В новых блоках берите .btn: та же плашка 194×64 и тот же моно-текст,
   но одним элементом и с живой областью клика.
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--btn-w);
  height: var(--btn-h);
  padding: 0 24px;
  background: var(--red);
  color: var(--on-red);
  border: 0;
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   ФОТО
   Кадры вырезаны в габарит своего слоя (обрезка и поворот уже внутри
   картинки), поэтому object-fit: fill точен и ничего не тянет.
   --------------------------------------------------------------------- */
.pic { object-fit: fill; }

/* ---------------------------------------------------------------------
   ФАКТУРЫ. Обе — со своими режимами наложения из Figma: без них бумага
   становится плоской, а зерно — грязно-серым пятном.
   --------------------------------------------------------------------- */
.paper {
  opacity: var(--paper-opacity);
  mix-blend-mode: var(--paper-blend);

  /* Смешивание считается заново на каждый кадр прокрутки, и на слоях
     во весь разворот это стоит дорого: страница переставала слушаться
     колеса, хотя клавишами прыгала нормально. Слой выносится на свой
     композиционный уровень, чтобы браузер пересчитывал его отдельно
     от остальной страницы. */
  will-change: transform;
  transform: translateZ(0);
}

.grain {
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  pointer-events: none;

  /* ЗЕРНО ЗАМОЩАЕТСЯ, А НЕ РАСТЯГИВАЕТСЯ. Раньше это была одна картинка
     на весь лист, и её тянуло под высоту каждого блока. Сглаживание
     съедало треть амплитуды (5.71 по макету доезжало как 3.80), а
     запрет сглаживания давал рябь: браузер дублировал одни пиксели и
     терял другие.
     Теперь плитка 180×180 из настоящего зерна макета кладётся один к
     одному, без всякого масштаба. Ни потери амплитуды, ни артефактов,
     и файл вместо 774 КБ весит десятки. Швов не видно: зерно
     попиксельное, у него нет структуры, по которой глаз нашёл бы стык. */
  background-image: url("../assets-local/grain-figma.png");
  background-repeat: repeat;
  will-change: transform;
  transform: translateZ(0);
}


/* ---------------------------------------------------------------------
   ВИДЕО-СЛОТ

   Место под ролик, которое работает ещё до того, как ролик появился:
   сейчас в нём лежит фотография, потом на её месте играет видео.
   Замена — один атрибут в разметке:

     <figure class="reel" data-video="">            <!-- пока фото -->
     <figure class="reel" data-video="assets/video/showreel.mp4">

   Пока data-video пуст, JS не трогает слот вовсе: браузер грузит только
   фотографию. Как только путь появился, тот же слот сам заводит video,
   ставит фотографию постером и играет без звука по кругу; звук
   включается по клику — беззвучный автозапуск иначе запрещён браузерами.

   Пропорции задаются переменной, чтобы вертикальный ролик с телефона
   и горизонтальный кадр жили в одном компоненте:
     style="--ratio: 9 / 16"
   --------------------------------------------------------------------- */
.reel {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  aspect-ratio: var(--ratio, 16 / 9);
}

.reel__poster,
.reel__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);   /* тот же чёрно-белый язык, что у фото */
  transition: filter 0.55s ease, opacity 0.4s ease;
}

.reel__video { position: absolute; inset: 0; opacity: 0; }

/* Кадр наливается цветом под курсором — как остальные фотографии */
.reel:hover .reel__poster,
.reel:hover .reel__video { filter: grayscale(0) contrast(1.02) saturate(1.04); }

/* Ролик подключён и играет — фотография уходит */
.reel[data-state="playing"] .reel__video { opacity: 1; }
.reel[data-state="playing"] .reel__poster { opacity: 0; }

/* Кнопка запуска со звуком: красная плашка в углу кадра, как метки
   первого экрана. Появляется только когда ролик реально есть. */
.reel__sound {
  position: absolute;
  left: 0;
  bottom: 0;
  display: none;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 0;
  background: var(--red);
  color: var(--on-red);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--mono-ls);
  text-transform: uppercase;
  cursor: pointer;
}

.reel[data-state="playing"] .reel__sound { display: inline-flex; }
.reel__sound:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Пока ролика нет, слот честно говорит об этом — но только своим,
   в режиме разработки: на боевом сайте метка не показывается. */
.reel__stub {
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px 10px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--mono-ls);
  text-transform: uppercase;
}

.reel[data-video=""] .reel__stub { display: block; }
.reel:not([data-video=""]) .reel__stub { display: none; }

html:not([data-dev]) .reel__stub { display: none !important; }