/* ==========================================================================
   sprof27.ru — дизайн-система «B1-PRO Глубина»
   Токены. Единственный источник значений для цвета, типографики, сетки,
   пластики и движения. Ядро motion.js читает --amp-* и --t-amb-* из :root,
   поэтому переопределение на любом контейнере меняет и CSS, и JS-генератор.
   ========================================================================== */

:root {
  /* --- Цвет: текст и графика ------------------------------------------- */
  --ink: #17211d;          /* основной текст */
  --mut: #7d8a84;          /* служебный, подписи */
  --line: #e3e8e4;         /* волосяные линии */

  /* --- Цвет: поверхность и глубина ------------------------------------- */
  --w1: #ffffff;           /* поверхность */
  --w2: #f7f9f7;
  --w3: #eef2ef;           /* мелководье */
  --w4: #e0e7e2;
  --d3: #cbd8d2;           /* глубина: тон 1 */
  --d4: #a9bdb6;           /* глубина: тон 2 */
  --d5: #7d8a84;           /* глубина: тон 3 */
  --deep: #17211d;         /* тёмная вода: секции «глубина», служебные страницы */
  --deep-2: #20302a;
  --paper: #f4f6f4;        /* фон документа */

  /* --- Цвет: действие и статус (зелёный больше нигде) ------------------ */
  --green: #3f9d35;
  --green-d: #2e7d27;
  --green-h: #256b21;      /* hover */
  --green-soft: #eaf4e8;   /* фон статуса */

  /* --- Свет ------------------------------------------------------------ */
  --caustic: rgba(255, 255, 255, .5);        /* каустика: пятно света на воде */
  --caustic-d: rgba(203, 216, 210, .35);     /* каустика в глубине */
  --glass: rgba(255, 255, 255, .72);         /* стекло меню */
  --glass-solid: rgba(255, 255, 255, .94);   /* стекло мега-меню */
  --blur-menu: 14px;
  --blur-panel: 16px;

  /* --- Типографика ----------------------------------------------------- */
  /* Tenor Sans — утверждённый H1-шрифт (2026-09-22): один вес 400,
     элегантный тонкий гротеск. Акцентное слово в заголовках набирается
     Onest 600 — контраст «другого голоса» вместо несуществующего жира. */
  --font-display: 'Tenor Sans', 'Trebuchet MS', sans-serif;
  --font-text: 'Onest', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --fs-hero: clamp(32px, 4.6vw, 76px);   /* ударная строка первого экрана */
  --fs-h1: clamp(30px, 4.2vw, 60px);
  --fs-h2: clamp(26px, 3.4vw, 52px);
  --fs-h3: clamp(18px, 1.6vw, 24px);
  --fs-lead: clamp(16px, 1.25vw, 20px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-mono: 11px;

  --lh-tight: 1.02;
  --lh-head: 1.12;
  --lh-body: 1.6;

  --ls-mono: .1em;          /* трекинг служебных подписей */
  --ls-display: -.01em;     /* Tenor Sans: лёгкое уплотнение крупного кегля */

  /* --- Сетка и пространство -------------------------------------------- */
  --shell: 1240px;                          /* ширина контентной колонки */
  --gut: clamp(16px, 4vw, 48px);            /* поля страницы */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 20px;
  --sp-4: 32px;
  --sp-5: 52px;
  --sp-6: 64px;
  --sp-7: clamp(56px, 7vw, 96px);           /* вертикальный ритм секций */

  /* --- Радиусы --------------------------------------------------------- */
  --r-organic: 52% 48% 46% 54% / 48% 44% 56% 52%;   /* капля */
  --r-jelly: 50% 50% 44% 44% / 58% 58% 36% 36%;     /* колокол медузы */
  --r-card: 18px;
  --r-plate: 22px;
  --r-leaf: 22px 22px 34px 34px;
  --r-wave: 26px 26px 40px 40px / 26px 26px 60px 60px;
  --r-pill: 100px;

  /* --- Тени (альфа ≤ .14 — правило системы) ---------------------------- */
  --sh1: 0 6px 18px rgba(30, 45, 38, .06);
  --sh2: 0 18px 40px rgba(30, 45, 38, .10);
  --sh3: 0 34px 70px rgba(30, 45, 38, .14);
  --sh-lift: 0 26px 60px rgba(30, 45, 38, .13);     /* подъём при магнитном отклике */

  /* --- Движение: длительности интерфейса ------------------------------- */
  --t-fast: 280ms;   /* hover, фокус */
  --t-mid: 520ms;    /* появление секции, морф пилюль */
  --t-slow: 900ms;   /* крупный морф, раскрытие мега-меню */

  /* --- Движение: дыхание (периоды намеренно некратны) ------------------ */
  /* Подобрано 2026-09-22 по замерам: при 9/14/23 с фаза за 2–3 с взгляда
     проходила слишком малую долю цикла, и движение не читалось. 6.5/10.5/17
     — всё ещё «дыхание», но заметная его часть укладывается в взгляд. */
  --t-amb: 6.5s;     /* основная частота */
  --t-amb-2: 10.5s;  /* вторая частота */
  --t-amb-3: 17s;    /* редкая, только для самых крупных объектов */
  --t-drift: 16s;    /* дрейф положения */

  /* --- Движение: кривые ------------------------------------------------- */
  --e-soft: cubic-bezier(.2, .8, .2, 1);
  --e-breathe: cubic-bezier(.45, 0, .55, 1);
  --e-ripple: cubic-bezier(.16, 1, .3, 1);

  /* --- Движение: амплитуды деформации контура -------------------------- */
  /* Подняты 2026-09-22: замер давал 31 px хода кромки за 3 с — «не дышит».
     Значения держат инвариант капсул (allowed ≈ .104 при data-text="27,27"). */
  --amp-1: .085;    /* спокойная: капли с текстом */
  --amp-2: .15;     /* средняя: волна первого экрана */
  --amp-3: .21;     /* заметная: декоративные объекты без текста */

  /* --- Движение: пределы отклика --------------------------------------- */
  --mag-pull: 6px;      /* смещение магнитной кнопки */
  --form-pull: 14px;    /* максимальное смещение живой формы за курсором */
  --text-safe: 12px;    /* минимальный зазор от контура до текста (проверяется в motion.js) */

  /* --- Слои ------------------------------------------------------------- */
  --z-wave: 1;
  --z-content: 2;
  --z-menu: 40;
  --z-lightbox: 80;
}

/* ==========================================================================
   Появление секций
   ========================================================================== */

/* Скрытие до появления в кадре — только когда JS точно работает
   (класс js ставит инлайн-скрипт в <head>): без JS контент обязан быть видим. */
html.js .reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

html.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-mid) var(--e-soft), transform var(--t-mid) var(--e-soft);
}

/* ==========================================================================
   Точки покоя: статичные «острова» под текст.
   Живая форма никогда не несёт текст сама — текст стоит на плите.
   ========================================================================== */

.static-plate {
  position: relative;
  z-index: var(--z-content);
  background: var(--w1);
  border-radius: var(--r-plate);
  padding: var(--sp-4);
  /* безопасная зона: контур живой формы не подходит ближе --text-safe */
  isolation: isolate;
}

/* ==========================================================================
   Доступность: prefers-reduced-motion.
   Правка 2026-09-22: живая геометрия НЕ отключается по системной опции —
   аудитория сайта (рабочие ПК) часто ходит с выключенной анимацией Windows,
   и «замершая вода» лишала сайт сути. Движение здесь медленное и некинетозное
   (без параллакса, больших смещений и вспышек), поэтому остаётся для всех.
   Из уважения к опции оставлено: плавный скролл по клику не включается.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   База
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--w1);
  color: var(--ink);
  font: 400 var(--fs-body) / var(--lh-body) var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-display);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* Акцентное слово в заголовке: Onest 600 — Tenor Sans не имеет жира,
   синтетический bold на антикве/гротеске выглядит неопрятно */
h1 b, h2 b, h3 b {
  font-family: var(--font-text);
  font-weight: 600;
  letter-spacing: 0;
}

p { margin: 0 0 var(--sp-3); }

/* Кадр изображения задаётся контейнером (aspect-ratio + object-fit), а не
   атрибутами width/height: жёсткие 480×360 сплющивали портретные фото
   кабинета (грабли /o-tsentre, 2026-09-23). */
img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-color: var(--d4);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--green-d);
  outline-offset: 3px;
  border-radius: 4px;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--mut);
}

.shell {
  width: min(100% - var(--gut) * 2, var(--shell));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}