/*
 * Улей — лендинг. Базовый слой: шрифты, токены, стекло, утилиты.
 *
 * Токены портированы 1-в-1 из дизайн-системы приложения
 * (frontend/src/styles/tokens.css): холодный лавандово-серый холст, почти
 * чёрные чернила, матовое стекло и мёд как единственный акцент. Светлая тема —
 * та же, что в приложении, поэтому лендинг и продукт читаются как одна вещь.
 */

/* ── Шрифты ───────────────────────────────────────────────────────────────
   Montserrat — весь текст (как в приложении).
   Rubik SemiBold — только логотип «УЛЕЙ» (как в приложении, con.md).        */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/rubik-600-cyrillic.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/rubik-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2192, U+2212, U+2215;
}

:root {
  /* ── База: холодный лавандово-серый (tokens.css §1.1) ── */
  --bg-0: #c2c8d0;
  --bg-1: #d4d9df;
  --bg-2: #e4e8ed;
  --bg-3: #c9ced5;

  /* ── Материал стекла (tokens.css §1.2). Единственное место, где крутится
     вид всех матовых поверхностей лендинга. ── */
  --glass-tint: rgba(231, 237, 245, 0.55);
  --glass-sheen: linear-gradient(150deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.08) 40%,
      rgba(255, 255, 255, 0) 62%);
  --glass-blur: 12px;
  --glass-sat: 130%;
  --glass-edge: rgba(255, 255, 255, 0.45);
  --glass-inset:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.85),
    inset 0 -1px 1px rgba(255, 255, 255, 0.16),
    inset 0 0 12px 4px rgba(255, 255, 255, 0.06),
    inset 0 0 40px 6px rgba(255, 255, 255, 0.04);
  --shadow-glass: 0 4px 20px rgba(20, 24, 33, 0.14);

  --hairline: rgba(23, 25, 30, 0.08);
  --hairline-lit: rgba(23, 25, 30, 0.16);
  --accent-soft: rgba(23, 25, 30, 0.05);

  /* ── Чернила (tokens.css §1.3). --ink-2 заметно темнее, чем в приложении
     (#8c8c8c → #5a5d63): здесь им набран мелкий текст прямо на светлом
     холсте, а #8c8c8c на #d4d9df даёт 2.6:1. Сейчас 4.65:1 на холсте и
     5.6:1 на стекле. --ink-3 остаётся только для декора (© в подвале). ── */
  --ink-0: #1a1a1a;
  --ink-1: #262626;
  --ink-2: #5a5d63;
  --ink-3: #a8a8a8;

  /* ── Мёд и тревога (tokens.css §1.4) ──
     Мёд как ЗАЛИВКА — фирменный #ffa600. Мёд как ТЕКСТ на светлом читается
     плохо (#ffa600 даёт ~1.8:1), поэтому для букв два отдельных токена:
     `--honey-deep` — мелкий текст (4.8:1), `--honey-display` — только
     крупные заголовки, где порог 3:1 (3.7:1). Акцент приложения #b8650b
     не проходит по мелкому тексту (3.0:1) и здесь не используется. */
  --honey: #ffa600;
  --honey-hi: #ffb733;
  --honey-deep: #8a4a08;
  --honey-display: #a35a09;
  --honey-line: rgba(255, 166, 0, 0.22);
  --honey-line-lit: rgba(255, 166, 0, 0.5);
  --honey-fill: rgba(255, 166, 0, 0.14);
  --honey-grad: linear-gradient(160deg, var(--honey-hi), var(--honey));
  --on-honey: #1a1a1a;
  --alert: #d15d51;

  /* ── Радиусы, ритм, кривые (tokens.css §1.5) ── */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Кривая приложения — для «жилых» переходов состояний. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Сильный ease-out: всё, что появляется/уходит. Встроенных CSS-кривых не
     хватает — они смазывают именно тот момент, на который смотрит глаз. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* Движение по экрану (морфинг, параллакс). */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --press-scale: 0.96;
  --inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --inset-soft: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --elevation: 0 24px 50px -20px rgba(20, 24, 33, 0.3);
  --shadow-media: 0 24px 50px -30px rgba(20, 24, 33, 0.4);
  --scrim: rgba(24, 27, 34, 0.42);
  --hatch: repeating-linear-gradient(135deg, var(--accent-soft) 0 2px, transparent 2px 10px);

  --header-h: 84px;
  --content-w: 1180px;

  --font-body: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-logo: "Rubik", "Montserrat", system-ui, sans-serif;

  /* Осмысленная шкала z-index — никаких 999 (ср. приложение §5.2). */
  --z-bg: 0;
  --z-content: 1;
  --z-header: 30;
  --z-menu: 40;
  --z-modal: 60;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  /* Место под скроллбар зарезервировано всегда. Модалка заявки на время показа
     ставит overflow:hidden — без этой строки скроллбар исчезал, вьюпорт
     становился шире на свою ширину, и ВСЁ уезжало вправо: соты и шапка (они
     fixed — считаются от вьюпорта) и центрованный контент. Там, где скроллбар
     наложенный (macOS, тач), строка ничего не меняет. */
  scrollbar-gutter: stable;
  /* Гасим цепной overscroll/pull-to-refresh: в in-app браузерах (Telegram)
     оттягивание страницы вверх открывает панель и «съедает» скролл. */
  overscroll-behavior-y: none;
  /* Без scroll anchoring: при ресайзе браузер сам сдвигал scrollTop,
     компенсируя перестройку секций, — страница «ехала» сама. */
  overflow-anchor: none;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

::selection {
  background: rgba(255, 166, 0, 0.3);
  color: var(--ink-0);
}

/* Фоновая подсветка холста: очень слабый мёд по углам, чтобы плоский
   лавандово-серый не читался как «серый лист». Фиксированный слой — не
   перерисовывается при скролле. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 100lvh;
  z-index: var(--z-bg);
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 78% -8%, rgba(255, 166, 0, 0.14), transparent 60%),
    radial-gradient(1100px 800px at 12% 108%, rgba(255, 166, 0, 0.07), transparent 55%);
}

main,
.site-header,
.site-footer {
  position: relative;
  z-index: var(--z-content);
}

/* ── Рецепт стекла ────────────────────────────────────────────────────────
   Единственное определение матовой поверхности: заливка + диагональный блик
   поверх неё, световая кромка и тень. Ровно как `.u-glass` в приложении. */
.glass {
  position: relative;
  background: var(--glass-sheen), var(--glass-tint);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-inset), var(--shadow-glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* Тач-устройства: живой backdrop-filter мерцает и перерисовывается каждый
   кадр. Гасим блюр и делаем стекло непрозрачным. */
@media (hover: none) and (pointer: coarse) {

  .glass,
  .pill {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #e8edf4 !important;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ── Появление при скролле ────────────────────────────────────────────────
   Содержимое видимо по умолчанию и лишь СМЕЩЕНО: если JS не сработал или
   IntersectionObserver не выстрелил (скрытая вкладка, headless-рендер), текст
   всё равно на месте — `.no-js` возвращает его сразу. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* Сокращённое движение: оставляем проявление, убираем сдвиг. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition-duration: 220ms;
    transform: none;
  }
}