/* «Включи систему» — токены фирменного стиля.
   Подключать вместе с Golos Text + JetBrains Mono. */

/* Шрифты лежат у нас — без блокирующего запроса к Google Fonts и двух сторонних соединений.
   Оба файла вариативные (wght 400–700). Подмножество: латиница, кириллица, пунктуация, ₽ № → ≤
   (собрано через параметр text= у Google Fonts; набор символов — в tools/fonts-charset.txt). */
@font-face {
  font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('assets/fonts/golos-text.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('assets/fonts/jetbrains-mono.woff2') format('woff2');
}
/* Фолбэк с метриками Golos: пока файл едет, строки занимают то же место, и подмена шрифта не даёт
   перескока. Замер в Chrome (canvas, 6.25rem): Golos шире Arial на 5,9 % при весе 400 и равен Arial Bold
   при 600; шире Roboto на 4,7 %; верхний/нижний выносные Golos — 98 % / 22 %. Системный шрифт без
   подгонки уже Golos на 7–11 %. У моноширинных шаг одинаковый (0,6em) — им подгонка не нужна. */
@font-face { font-family: 'Golos Fallback'; font-weight: 400 500; src: local('Arial'); size-adjust: 105.9%; ascent-override: 92.5%; descent-override: 20.8%; line-gap-override: 0%; }
@font-face { font-family: 'Golos Fallback'; font-weight: 600 700; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 100%; ascent-override: 98%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: 'Golos Fallback Android'; src: local('Roboto'); size-adjust: 104.7%; ascent-override: 93.6%; descent-override: 21%; line-gap-override: 0%; }

:root {
  /* Цвет */
  --holo: #5EC8F8;
  --holo-bright: #9FDFFF;
  --holo-panel: rgba(8, 16, 30, 0.55);
  --holo-border: rgba(94, 200, 248, 0.4);
  --holo-bracket: rgba(159, 224, 255, 0.8);
  --holo-fill: rgba(94, 200, 248, 0.07);

  --cta: #0F6FD8;
  --cta-hover: #1E7EE6;
  --alert: #FF5C66;
  --helmet: #F97316;          /* только каска Кузьмича */

  --ink: #0B1220;
  --ink-2: #101B2E;
  --text: #E9EFF8;
  --text-dim: #B6C5DB;
  --mono-dim: #7E93B4;

  --concrete: #F6F7F9;
  --surface: #FFFFFF;
  --line: #D8E0EA;
  --text-dark: #12203A;
  --text-dark-2: #4C5C72;
  --line-holo-light: rgba(15, 111, 216, 0.5);

  /* Шрифт */
  --font-sans: 'Golos Text', 'Golos Fallback', 'Golos Fallback Android', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --track-mono: 0.2em;

  /* Радиусы: три роли поверхностей */
  --r-panel: 0.25rem;             /* HUD-метка   · брекет 8  */
  --r-card: 0.75rem;             /* карточка    · брекет 10 */
  --r-plate: 1rem;            /* плита       · брекет 14 */
  --r-bubble: 0.75rem;           /* пузырь речи · без брекетов, хвост 4 */
  --r-cta: 0.5625rem;
  --scene-ratio: 1656 / 931;

  /* Движение: три скорости и одно easing */
  --t-micro: .18s;            /* ховер, цвет, обводка */
  --t-base: .32s;             /* раскрытие, подсветка строки, чипы */
  --t-scene: .6s;             /* смена ниши, этаж, появление секции */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Вертикальный ритм: базовый шаг 8 */
  --step: 0.5rem;
  --gap-card: 1.5rem;           /* зазор карточек и их padding */
  --gap-row: 2rem;            /* между рядами внутри блока */
  --gap-head: 3rem;           /* шапка блока → контент */
  --pad-sec: 6rem;            /* поле секции по вертикали */
}

/* Адаптивная rem-сетка. Все размеры сайта — в rem (scripts/website-px-to-rem.py), поэтому корневой
   размер задаёт масштаб целиком: композиция экранов не меняется, сайт «зумится» под ширину.
   Опора — 1rem на 1440 (в этом размере макет рисовался): выше — крупнее ступенями, ниже — мельче;
   на планшете и телефоне — плавно от ширины, с полом, ниже которого текст не мельчает. */
/* px-to-rem:off */
html { font-size: 16px; }
@media (min-width: 1700px) { html { font-size: 17px; } }
@media (min-width: 2000px) { html { font-size: 18px; } }
@media (min-width: 2400px) { html { font-size: 19px; } }
@media (max-width: 1350px) { html { font-size: 15px; } }
@media (max-width: 1200px) { html { font-size: 14px; } }
@media (max-width: 1000px) { html { font-size: clamp(13px, 10px + 0.4vw, 15px); } }
@media (max-width: 700px)  { html { font-size: clamp(14px, 8px + 1.6vw, 16px); } }
@media (max-width: 430px)  { html { font-size: clamp(13px, 9px + 1.6vw, 15px); } }
/* px-to-rem:on */

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--holo); text-decoration: none; transition: color var(--t-micro) var(--ease); }
a:hover { color: var(--holo-bright); }

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  text-transform: lowercase;   /* заголовки строчными */
}
h1 { font-size: 2.9375rem; line-height: 1.14; }
h2 { font-size: 2rem; line-height: 1.2; }
h3 { font-size: 1.5rem; line-height: 1.25; }

.mono {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--mono-dim);
}

/* HUD-панель с уголками-брекетами: <div class="hud"><i></i><i></i><i></i><i></i> … */
.hud {
  position: relative;
  background: var(--holo-panel);
  border: 1px solid var(--holo-border);
  backdrop-filter: blur(0.5rem);
  border-radius: var(--r-panel);
  padding: 0.5rem 1rem;
  color: #D6EEFD;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  white-space: nowrap;
}
.hud > i {
  position: absolute; width: 0.5rem; height: 0.5rem; border: 0 solid var(--holo-bracket);
}
.hud > i:nth-child(1) { top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; }
.hud > i:nth-child(2) { top: -1px; right: -1px; border-top-width: 1.5px; border-right-width: 1.5px; }
.hud > i:nth-child(3) { bottom: -1px; left: -1px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.hud > i:nth-child(4) { bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* На светлом HUD не светится */
.hud--light {
  background: var(--surface);
  border-color: var(--line);
  backdrop-filter: none;
  color: var(--cta);
}
.hud--light > i { border-color: var(--line-holo-light); }

.cta {
  display: inline-block;
  background: var(--cta);
  color: #FFF;
  font-size: 1rem; font-weight: 600;
  padding: 1rem 2rem;
  border-radius: var(--r-cta);
  transition: background var(--t-micro) var(--ease);
}
.cta:hover { background: var(--cta-hover); color: #FFF; }

/* Сцена: фото и голограмма живут в одном боксе */
.scene { position: relative; width: 100%; aspect-ratio: var(--scene-ratio); overflow: hidden; }
.scene > img,
.scene > .holo { position: absolute; top: 0; bottom: 0; height: 100%; }
.scene > img { object-fit: cover; }
.scene > .holo { overflow: hidden; pointer-events: none; }
/* left/width задаются попарно и одинаково для img и .holo */
.scene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* у svg: viewBox="0 0 1656 931" preserveAspectRatio="xMidYMid slice" */

@keyframes wf { from { transform: scaleY(0.3) } to { transform: scaleY(1) } }
@keyframes dotPulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.3 } }   /* точка «живых данных» */
@keyframes draw { to { stroke-dashoffset: 0 } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes labelIn { from { opacity: 0; transform: translateY(0.375rem) } to { opacity: 1; transform: none } }
@keyframes holoFlicker {
  0%, 86.5%, 89%, 100% { opacity: 1 }
  87% { opacity: 0.78 } 88% { opacity: 0.96 } 93% { opacity: 0.88 }
}
@keyframes scanY { 0% { transform: translateY(-8.75rem) } 100% { transform: translateY(43.75rem) } }

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