/* Главная: первый экран — компьютер (С5, дизайн.md инвариант 2) и телефон (С6, раскладка 2, инвариант 1).
   Значения — только из assets/css/tokens.css. 900px = --bp-desktop: переменные в media query не работают.
   Закрепление фасада и смена облицовки — facade.css и src/js/facade.js (С8). */
main { padding: 0; }
body { overflow-x: clip; }  /* полоса border-image выходит за края блока — без горизонтальной прокрутки */
.home-top { padding: 0 var(--gutter); }

/* Логотип заставки — тот же файл шрифта, но без подмены запасным: при свопе крупное слово заметно меняло ширину на первом
   экране (разбор движения 05.11). Пока шрифт едет, логотипа нет; файл один, второй загрузки нет */
@font-face {
  font-family: 'Inter Tight Mark';
  font-weight: 100 900;
  font-display: block;
  src: url('../fonts/inter-tight-normal-latin.woff2') format('woff2');
}

/* Заставка (сборка 31.10, как у R24): на входе — только глубокий цвет и логотип крупно, фасада не видно.
   С первой прокруткой фасад проявляется в рамке буквы Z логотипа (под ней) и растёт до полного экрана;
   заголовок — прямо на фото, без плашки (владелец 31.10). --p (0…1), рамка окна --win-* и его прозрачность --win-o
   ставит src/js/motion.js; без JS — фасад сразу на весь экран */
.intro { position: relative; --p: 1; background: var(--c-deep); color: var(--c-on-deep); }
.has-motion .intro { height: calc(100svh + var(--intro-scroll)); }
.intro__stage { position: sticky; top: 0; display: grid; grid-template: 100% / 100%; height: 100svh; overflow: hidden; }
.intro__mark {
  grid-area: 1 / 1;
  place-self: center;
  position: relative;
  z-index: 2;  /* буква Z лежит поверх окна; логотип гаснет, пока окно растёт */
  margin: 0;
  max-width: none;
  font: 600 var(--fs-mark) / 0.8 'Inter Tight Mark', var(--font-display);
  letter-spacing: -0.04em;
  white-space: nowrap;
  opacity: var(--mark-o, 0);
}
.intro__win {
  grid-area: 1 / 1;
  position: relative;
  clip-path: inset(var(--win-t, 0) var(--win-r, 0) var(--win-b, 0) var(--win-l, 0));
  opacity: var(--win-o, 1);
}
.intro__win picture { display: block; height: 100%; }
.intro__win img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - var(--p) * 0.12)); }
.intro__win::after {  /* затемнение низа фото под заголовком */
  content: '';
  position: absolute;
  inset: 0;
  /* снизу — под заголовок, сверху — под закреплённую шапку */
  /* под шапку; под текстом — .intro__text::before */
  background: linear-gradient(var(--c-scrim-hdr) var(--header-h), transparent calc(var(--header-h) + var(--scrim-ramp)));
  opacity: var(--p);
}
.intro__text {
  position: absolute;
  z-index: 1;
  inset: auto var(--gutter) var(--sp-10);
  display: grid;
  gap: var(--sp-5);
  justify-items: start;
  color: var(--c-on-panel);
  transform: translateY(calc((1 - var(--p)) * 48px));
}
/* совсем низкое окно: без абзаца, иначе верх заголовка уходит под шапку и не открывается прокруткой; материалы названы ниже (ревью Codex 07.11) */
@media (height < 340px) { .hero__lead { display: none; } }
/* только когда окно почти на весь экран: заголовок по словам (reveal.css), за ним абзац и кнопка */
.intro h1:not(.rv) { opacity: clamp(0, calc((var(--p) - 0.82) * 5.5), 1); }
/* затемнение привязано к высоте текста, а не к доле фото: в длинном заголовке (RU, 320 px) контраст падал до 1,6:1 */
.intro__text::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--scrim-ramp)) calc(-1 * var(--gutter)) calc(-2 * var(--sp-10));
  background: linear-gradient(to top, var(--c-scrim-text) calc(100% - var(--scrim-ramp)), transparent);
  opacity: var(--p);
}
.hero__lead { opacity: clamp(0, calc((var(--p) - 0.9) * 10), 1); }
.intro .btn { opacity: clamp(0, calc((var(--p) - 0.95) * 20), 1); }
.intro h1 { margin: 0; max-width: 16ch; text-wrap: balance; }
.hero__lead { margin: 0; max-width: var(--measure-lead); font-size: var(--fs-lead); color: var(--c-on-panel); }
.intro :focus-visible { outline-color: var(--c-focus-dark); }

/* печать и PDF: заставка без запаса прокрутки, фасад на весь лист, текст виден */
@media print {
  .has-motion .intro { height: auto; }
  .mat__photo { --g: 1 !important; }
  .intro { --p: 1 !important; --win-o: 1 !important; --mark-o: 0 !important;
    --win-t: 0px !important; --win-r: 0px !important; --win-b: 0px !important; --win-l: 0px !important; }
}

/* Предложение сразу за фасадом (владелец 05.11): заголовок слева, текст справа; на телефоне — друг под другом */
.offer { padding: var(--section-y) var(--gutter) 0; }
.offer h2 { margin: 0; max-width: 20ch; }
.offer p { max-width: var(--measure); margin: var(--sp-4) 0 0; }
@media (width >= 900px) {
  .offer { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--gutter); align-items: end; }
  .offer p { margin: 0; }
}

/* Фраза капсом (как у R20): названия пяти материалов, слова появляются по мере прокрутки (reveal.js) */
.say { padding: var(--section-y) var(--gutter); }
.say__text {
  margin: 0;
  max-width: none;
  font: var(--fw-display) var(--fs-say) / 1 var(--font-display);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Телефон: первый экран — заставка; фасад дальше только закреплённой полосой над блоками (facade.css) */
@media (width < 900px) {
  .intro h1 { font-size: var(--fs-hero-phone); }
  .intro__text { bottom: var(--sp-8); gap: var(--sp-4); }
  .home-top { display: grid; padding: 0; }
  .home-top > .facade-rail { display: none; }
}

@media (width >= 900px) {
  .home-top {
    display: grid;
    grid-template-columns: var(--home-columns);
    column-gap: var(--sp-14);
  }
  .intro__text { bottom: var(--sp-14); }
}

/* «Finished facades» (владелец 01.11 — вариант 2 из 8, лист checks/фасад-композиция-варианты.jpg): после блоков материалов,
   вне колонок — закреплённый фасад уходит вверх вместе с ними, фото объектов на всю ширину (подписи плиток — sections.css) */
main > .projects { padding: var(--section-y) var(--gutter); }
main > .projects h2 { margin-bottom: var(--sp-3); }
@media (width >= 900px) {
  .home-top { padding-bottom: 0; }
  main > .projects .projects__intro { margin: 0 0 var(--sp-10); }
  main > .projects .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}