/* ---------- Шрифты (встроены в сайт) ---------- */
@font-face {
  font-family: "Abyssinica SIL";
  src: url("../fonts/AbyssinicaSIL-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Afacad";
  src: url("../fonts/Afacad-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Токены ---------- */
:root {
  --font-text: "Abyssinica SIL", Georgia, serif;
  --font-display: "Afacad", system-ui, sans-serif;
  --fg: 255, 255, 255;     /* цвет шапки: белый → чёрный на экране контактов */
  --pad-x: 60px;           /* боковой отступ шапки */
}

*, *::before, *::after { box-sizing: border-box; }
html { background: #000; }
body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: none; }

/* ---------- Сцена: прокрутка управляет анимацией ---------- */
.scroller { position: relative; }   /* высоту задаёт JS */
.stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: rgb(var(--bg, 0, 0, 0));
}

/* Фото */
.photo { position: absolute; left: 0; top: 0; overflow: hidden; will-change: transform; }
.photo__img { position: absolute; object-fit: cover; will-change: transform; }

/* Заголовок */
.h1-wrap { margin: 0; }
.h1 { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; user-select: none; }
.h1 svg { display: block; width: 100%; height: 100%; overflow: visible; }
.h1--stack { display: none; }

/* Список кейсов */
.cases { position: absolute; inset: 0; pointer-events: none; will-change: transform, opacity; }
.case {
  position: absolute;
  left: 0; top: 0;
  display: block;
  overflow: hidden;
  background: #111;
  will-change: transform, width, height;
}
.case img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cases.is-active .case { pointer-events: auto; cursor: pointer; }
/* Ховер: изображение внутри карточки увеличивается на 10% (карточка обрезает по своим краям) */
@media (hover: hover) {
  .cases.is-active .case:hover img,
  .cases.is-active .case:focus-visible img { transform: scale(1.1); }
}

/* Стартовый логотип и имя */
.start-logo, .start-name { position: absolute; left: 50%; overflow: hidden; pointer-events: none; }
.start-logo { width: 110px; height: 55px; top: calc(50% - 52px); margin-left: -54px; }
.start-logo svg { display: block; width: 111.1px; height: 55px; }
.start-name { width: 184px; height: 24px; top: calc(50% + 30px); margin-left: -92px; text-align: center; font-size: 20px; line-height: 24px; white-space: nowrap; }
.start-name span { display: block; will-change: transform; }
.start-name__text { display: block; font-weight: 400; }

/* Почта */
.mail {
  position: absolute; left: 0; right: 0; top: 0; margin: 0;
  text-align: center;
  font: 700 72.389px/1 var(--font-display);
  color: #000;
  white-space: nowrap;
  will-change: transform;
}
.mail a { display: inline-block; }

/* Шапка */
.header { position: absolute; left: 0; top: 0; width: 100%; height: 0; color: rgb(var(--fg)); }
.header__logo, .header__name, .header__contacts { position: absolute; overflow: hidden; }
.header__logo { left: 60px; top: 45px; width: 84px; height: 42px; }
.header__logo .hl { display: block; width: 84px; height: 42px; }
/* Две копии имени для ховера по логотипу (header-hover.js) */
.hn { position: relative; }
.hn__copy { display: block; }
.hn__copy + .hn__copy { position: absolute; left: 0; top: 0; }
.header__name { left: 160px; top: 71px; height: 21px; margin: 0; font-size: 16px; line-height: 21px; white-space: nowrap; }
.header__contacts { right: 60px; top: 71px; height: 21px; font-size: 16px; line-height: 21px; white-space: nowrap; }
.header__name span, .header__contacts span { display: block; will-change: transform; }

/* Мобильная шапка — с ширины 768px и уже */
@media (max-width: 768px) {
  .header__logo { left: 20px; top: 20px; width: 64px; height: 32px; }
  .header__logo .hl { width: 64px; height: 32px; }
  .header__name { left: 100px; top: 36px; }
  .header__contacts { right: 20px; top: 36px; }
}
/* Заголовок в две строки — на узких экранах (макеты 390 и 440; на 560 — одна строка). Порог совпадает с STACK_MAX в home.js */
@media (max-width: 499px) {
  .h1--stack { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .stage * { transition: none !important; }
}

/* Активная зона ховера логотипа и имени (header-hover.js) */
html.hl-hot, html.hl-hot * { cursor: pointer; }