/* Токены дизайн-системы NOCTA — «Ночной перламутр».
   Каждое значение снято с источника (Seasats — главный, Sobha и DB Longbow — цвета направления,
   Butter, Avion, Sobha-обложка — механики из reference/<механика>/MECHANIC.md) или выведено для проекта
   с причиной. Откуда что — в design-system.md. Палитра временная: логотипа нет, до него — надпись-знак.
   Размеры — сначала телефон, ниже — компьютер (≥1024 px: та же граница, что у Seasats). */

:root {
  /* ── Цвета по ролям ─────────────────────────────────────────────────────────── */
  --color-bg: #000000;            /* фон страницы и цвет «вырезов»: рамка хиро, плашки подписей, панель моделей — Sobha */
  --color-surface: #1a1919;       /* поля формы, служебные плашки, наведение в панели — Sobha */
  --color-surface-hover: #2a2a2a; /* плашка при наведении и нажатии: поверхность + 16 % текста, как линии Seasats */
  --color-text: #fffdfd;          /* основной текст; он же «бумага» обложки — Seasats #fffdfd, жемчужный, не стерильный */
  --color-muted: #888c8f;         /* второстепенный текст на фоне страницы, 6,2:1 — DB Longbow */
  --color-muted-scene: #c4c6cc;   /* второстепенный текст на тонах моделей и на фото: #888c8f на «Тумане» даёт 2,6 */
  --color-accent: #ffffff;        /* главное действие — один акцент, белый свет диода — Sobha + «белый свет диодов» */
  --color-on-accent: #000000;     /* текст и квадрат стрелки на акценте, 21:1 */
  --color-border: #2a2a2a;        /* разделители: текст 16 % на чёрном — у Seasats линии строк 16 % цвета текста */
  --color-control-border: #6b6f78;/* контур поля: 4,2:1 к фону — у Seasats поле без контура, на чёрном его не видно */
  --color-error: #e8855c;         /* ошибка, только с текстом: медь Seasats #bf5114, осветлённая до 7,9:1 */
  --color-accent-hover: #ffffff;  /* у источника кнопка при наведении цвет не меняет: катятся буквы и стрелка */
  --color-accent-active: #e6e4e4; /* нажатие: акцент на 10 % темнее — у источника состояния нет, добавлено */
  --opacity-disabled: .4;
  --opacity-dim: .5;              /* приглушённая строка-караоке, крупный текст — Seasats 0,5 */
  --opacity-dim-text: .64;        /* мелкий приглушённый текст: номера меню, подписи над кругом — Avion 64 % */
  --opacity-inactive: .5;         /* неактивная колонка реакции: у Avion 24 %, у нас 50 % — текст читается, 5,3:1 */
  --overlay-hover: rgba(255, 253, 253, .2); /* подсветка плашки меню при наведении — Seasats 20 % */
  --overlay-media: rgba(0, 0, 0, .5);       /* место картинки, пока она грузится — Seasats rgba(0,0,0,.5) */
  --line-on-scene: rgba(255, 253, 253, .16);/* разделители на тонах моделей и на фото: те же 16 % текста, но прозрачные */

  /* Тона моделей — с фотографий клиента, средние по областям (Pillow) */
  --tone-sky: #2a3a61;            /* Nocta 7 · «Небо синего часа» — hero-rest.png, x 1115–1672, y 0–235 */
  --tone-water: #191f2e;          /* Nocta 9 · «Вода» — hero-rest.png, x 1115–1672, y 705–941 */
  --tone-fog: #46495d;            /* Nocta 12 · «Туман» — fly-5-fog.png, x 279–836, y 352–470 */
  /* Градиенты сцен — устройство Seasats (тон сверху, к низу темнее), цвета наши */
  --scene-sky: linear-gradient(180deg, var(--tone-sky) 0%, var(--tone-sky) 28%, var(--color-bg) 100%);
  --scene-water: linear-gradient(180deg, var(--tone-water) 0%, var(--tone-water) 28%, var(--color-bg) 100%);
  --scene-fog: linear-gradient(180deg, var(--tone-fog) 0%, var(--tone-fog) 28%, var(--color-bg) 100%);
  /* Подложка под кадрами пролёта, пока кадр не нарисован: 4 точки неба и воды — правый край hero-rest.png */
  --scene-underlay: linear-gradient(180deg, #253964 0%, #293657 25%, #121d32 70%, #050f1f 100%);

  /* ── Шрифты по ролям (fonts/fonts.css) ──────────────────────────────────────── */
  --font-display: 'Roboto Serif', serif;  /* название, тезис, строки сцены, меню — вместо seasonMix */
  --font-body: 'Roboto Flex', sans-serif; /* текст и надпись-знак — вместо seasonSans */
  --font-ui: 'Geist Mono', monospace;     /* кнопки, подписи, метки, числа — вместо supplyMono */
  --case-ui: uppercase;                   /* у Seasats интерфейс капсом: 28 правил text-transform */
  --tracking-ui: 0;                       /* у источника 0 */
  --tracking-display: -.01em;             /* у источника −0,01em на крупных */
  --weight-display: 300;                  /* Roboto Serif 300 по толщине штриха = seasonMix 400 */
  --weight-heading: 450;                  /* мелкие заголовки и меню — вместо seasonMix 500 */
  --weight-body: 400;
  --weight-ui: 400;
  --weight-wordmark: 700;
  --stretch-display: 95%;                 /* ширина «Ocean Autonomy» 946 px против 928 у источника */
  --stretch-wordmark: 151%;               /* надпись-знак широким гротеском, как слово SEASATS */

  /* ── Шкала размеров — телефон (Seasats при ≤519 px, 1rem ≈ 9,9 px) ─────────── */
  --text-display: 64px;  --lh-display: 1;     /* хиро и название модели */
  --text-h1: 36px;       --lh-h1: 1;          /* заголовок секции */
  --text-h2: 32px;       --lh-h2: 1;          /* заявление, финальная фраза */
  --text-h3: 24px;       --lh-h3: 1.2;        /* подзаголовок, «Вкратце», ссылки подвала */
  --text-lead: 20px;     --lh-lead: 1.2;      /* строки-караоке, текст под названием */
  --text-body-l: 16px;   --lh-body-l: 1.4;    /* крупный текст абзаца */
  --text-body: 16px;     --lh-body: 1.4;      /* основной текст и поля */
  --text-small: 14px;    --lh-small: 1.4;     /* сообщение об ошибке, сноски */
  --text-menu: 18px;     --lh-menu: 1.3;      /* пункты меню-колонки */
  --text-ui: 14px;       --lh-ui: .9;         /* кнопка, подпись карточки, значения таблицы */
  --text-label: 12px;    --lh-label: .9;      /* метки капсом, подписи полей, панель моделей */
  --text-number: 32px;   --lh-number: .9;     /* живые числа подвала */

  /* ── Отступы: шаг 8, мелкие зазоры 4 ────────────────────────────────────────── */
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --space-9: 128px;
  --gutter: 12px;        /* зазор колонок: 1,2rem у Seasats (3 × 4) */
  --margin-page: 16px;   /* поле страницы: 1,6rem у Seasats на телефоне */
  --columns: 8;          /* сетка: 8 колонок на телефоне, 24 на компьютере — Seasats */

  /* ── Геометрия — как у Seasats ──────────────────────────────────────────────── */
  --radius-control: 8px; /* кнопка, поле, панель моделей, группа фильтров — --radius .8rem */
  --radius-inner: 4px;   /* кнопка внутри панели, квадрат стрелки — .4rem */
  --radius-frame: 12px;  /* углы рамки хиро и колонки меню — --nav-maskRadius 1,2rem */
  --radius-block: 0px;   /* карточки пролёта, кадры, обложка — без скругления */
  --border-width: 1px;
  --control-height: 48px;/* одна высота кнопки и поля: у источника кнопка 38 px, поле ≈ 53 px; 48 — под палец */
  --control-pad: 4px;    /* поле плашки вокруг квадрата стрелки и кнопок панели — .4rem */
  --tag-pad: 6px 12px;   /* плашка подписи — 6px 12px, как у Seasats */
  --frame-size: 8px;     /* рамка хиро: .8rem на телефоне, 1rem на компьютере */
  --menu-width: 220px;   /* колонка меню — 22rem */
  --menu-strip: 6px;     /* свёрнутое меню — полоса прогресса 6 px */
  --focus-width: 2px;    /* у источника 1 px; на тёмной сцене с фото 1 px теряется */
  --focus-offset: 2px;   /* как у источника */
  --card-width: clamp(240px, 33.7vw, 485px); /* карточка пролёта — 48,5rem у Seasats (33,7 % окна) */
  --fly-perspective: 250px;  /* пролёт: perspective 250px, карточка из глубины −500px, ход 700px — Seasats */
  --fly-depth: -500px;
  --fly-travel: 700px;
  --dial-size: clamp(67px, 6.68vw, 120px); /* круг-шкала реакций — Avion */
  --icon-size: 24px;     /* значок из точек: сетка 9 × 9, точка ≈ 1,7 px — как диод кожи */
  --icon-size-l: 48px;
  --arrow-size: 14px;    /* стрелка в квадрате кнопки */
  --diode-ui: 4px;       /* диоды загрузки в кнопке */
  --len-dot: 2px;        /* точки длины модели в переключателе: 7, 9, 12 */
  --pin-size: 6px;       /* точка места на карте */
  --progress-height: 2px;/* дорожка прогресса сцены */
  /* Размеры блоков в образцах и на странице */
  --stage-max: 860px;    /* вид сверху в реакциях */
  --brief-width: 300px;  /* колонка «Вкратце» в сцене моделей */
  --progress-max: 240px; /* дорожка прогресса пролёта */

  /* ── Свет и оптика: только диоды. Без свечения текста, без полос, без бликов ── */
  --diode-color: #ffffff;  /* свет диода — белый (переписка 02:08: «давай делать белый свет диодов») */
  --diode-step: 7px;       /* шаг сетки диодов — dot-skin spacing 7 */
  --diode-size: 1.6px;     /* диаметр точки — dot-skin dot 1,6 */
  --diode-base: .06;       /* спящие точки — dot-skin base 0,06 */
  --diode-dim: .18;        /* негорящие точки значков и поля прелоадера */
  --diode-halo: 3.5;       /* гало в 3,5 раза больше точки, яркость 12 % — dot-skin halo, haloGain */
  --diode-halo-gain: .12;
  --diode-radius: 140px;   /* пятно под курсором — dot-skin radius */
  --diode-decay: 1.8s;     /* след курсора гаснет до 5 % — dot-skin decay */
  --blend-light: plus-lighter; /* свет складывается с фото */

  /* ── Фактура и среда: поле точек, других фактур нет ────────────────────────── */
  --field-step: 7px;       /* поле точек прелоадера и подвала — тот же шаг, что у кожи */
  --field-dot: 1.6px;

  /* ── Движение: время и кривые механик (reference/<механика>/MECHANIC.md и seasats-live.json) ── */
  --ease-css: cubic-bezier(.25, .1, .25, 1);        /* CSS ease: меню и рамка хиро, строки списка */
  --ease-out: cubic-bezier(0, 0, .58, 1);           /* CSS ease-out: яркая строка, картинка карточки */
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1); /* кнопка: появление, перекат букв */
  --ease-in-cubic: cubic-bezier(.55, .055, .675, .19);/* прелоадер: буквы уходят вверх */
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);   /* строки текста и каскад подвала (power4.out) */
  --ease-butter: cubic-bezier(0, 0, 0, 1);          /* слова заголовка — outFast у Butter */
  --ease-sine-inout: cubic-bezier(.37, 0, .63, 1);  /* смена фона модели — sine.inOut */
  --ease-quad-inout: cubic-bezier(.455, .03, .515, .955); /* обложка — easeInOutQuad (power1.inOut) */
  --ease-power2-inout: cubic-bezier(.645, .045, .355, 1); /* шторка перехода к модели — power2.inOut (кубическая) */
  --ease-power2-in: cubic-bezier(.55, .055, .675, .19);  /* шторка гаснет — power2.in */
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);     /* затухание пролёта 1 − t² — power1.in */
  --ease-material: cubic-bezier(.4, 0, .2, 1);      /* смена параметра — Avion */
  --ease-swing: cubic-bezier(.85, 0, .15, 1);       /* поворот шкалы — Avion */
  --ease-param-in: cubic-bezier(.22, 1, .36, 1);    /* значения параметров выезжают — Avion, как в источнике */

  --dur-hover: 300ms;          /* подсветка плашки меню, кнопка модели */
  --dur-icon: 500ms;           /* стрелка кнопки меняется */
  --dur-letter: 600ms;         /* перекат буквы: 600 − 12 × букв мс */
  --step-letter: 12ms;
  --dur-frame: 800ms;          /* колонка меню, потом рамка — 2 × 800 мс */
  --dur-button-in: 800ms;  --delay-button-in: 600ms;  --step-button-in: 150ms;
  --dur-line: 1600ms;      --delay-line: 200ms;       --step-line: 120ms;  /* строки текста */
  --line-skew: 5deg;
  --dur-karaoke-in: 600ms; --step-karaoke: 80ms;      --karaoke-shift: 75%;
  --dur-karaoke: 300ms;                               /* яркая строка 0,5 ↔ 1 */
  --dur-word: 1000ms;      --dur-word-fade: 660ms;    --step-word: 50ms;   --word-shift: 60%; /* Butter */
  --dur-line-butter: 600ms; --step-line-butter: 100ms;/* Butter, вариант строк: абзац под заголовком */
  --dur-media-in: 400ms;                              /* картинка карточки после загрузки */
  --dur-bg: 750ms;                                    /* смена фона: 0,75 экрана; в образце — 750 мс */
  --dur-curtain: 800ms;    --dur-curtain-out: 400ms;
  --dur-panel-in: 600ms;   --dur-panel-out: 300ms;
  --dur-param: 500ms;      --dur-param-icon: 300ms;
  --dur-cascade: 1600ms;   --delay-cascade: 200ms;    --step-cascade: 120ms;
  --cascade-shift: 40px;   --cascade-skew: 3deg;
  --dur-pre-letter: 400ms; --step-pre-letter: 50ms;   --dur-pre-out: 600ms; --delay-pre-out: 1000ms;
  --dur-cover: 2000ms;                                /* обложка: 1 экран прокрутки; в образце — 1 экран = 2 с */
  --screen-ms: 2000ms;    /* в образцах прокрутку заменяет время: 1 экран = 2 с, спокойный темп колесом (на сайте — прокрутка) */
  --dur-param-in: 700ms;  --delay-param-in: 150ms;   --step-param-in: 120ms; /* значения реакций — Avion */
  --dur-dial: 800ms;      /* поворот шкалы на 90° по клику; у Avion поворот привязан к прокрутке */
  --dur-hover-card: 300ms;/* наведение на карточку — White Desert 0,3 с */
  /* Свет диодов — пресеты dot-skin (library/dot-skin/README.md): значки, загрузка, прелоадер, точки карты */
  --dur-pulse: 1200ms;    /* тревога: вся кожа пульсирует, период 1,2 с */
  --dur-ring: 1300ms;     /* волна: кольцо расходится за 1,3 с */
  --dur-step: 500ms;      /* шаг: следы через 0,5 с */
  --dur-wind: 1600ms;     /* ветер: пульс по стрелке, период 1,6 с */
  --dur-mode-fade: 500ms; /* ветер и тревога включаются и гаснут за 0,5 с */
  --dur-idle: 2600ms;     /* покой: слабая волна от носа к корме за 2,6 с, раз в 6 с */
  --dur-reveal: 1200ms;   /* прелоадер dot-skin: reveal() — точки вне силуэта гаснут, проявляется фото */

  /* Общие имена заготовки — через механики выше */
  --duration-fast: var(--dur-hover);
  --duration-ui: var(--dur-frame);
  --duration-enter: var(--dur-line);
  --delay-stagger: var(--step-line);
  --ease-ui: var(--ease-css);
  --ease-enter: var(--ease-out-quint);
  --reveal-distance: var(--cascade-shift);
}

/* Шкала размеров — компьютер (Seasats ≥1024 px, 1rem = 10 px на 1440) */
@media (min-width: 1024px) {
  :root {
    --text-display: clamp(64px, 14vh, 124px); --lh-display: .9; /* clamp(6.4rem, 14vh, 12.4rem) */
    --text-h1: 80px;
    --text-h2: 64px;
    --text-h3: 24px;
    --text-lead: 28px;
    --text-body-l: 19px;  --lh-body-l: 1.3;
    --text-menu: 14px;
    --margin-page: 32px;  /* 3,2rem */
    --columns: 24;
    --frame-size: 10px;   /* 1rem */
  }
}

/* Уменьшение движения: без сдвигов, наклонов и фоновых циклов; состояния — сразу */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hover: 0ms; --dur-icon: 0ms; --dur-letter: 0ms; --step-letter: 0ms; --dur-frame: 0ms;
    --dur-button-in: 0ms; --delay-button-in: 0ms; --step-button-in: 0ms;
    --dur-line: 0ms; --delay-line: 0ms; --step-line: 0ms; --line-skew: 0deg;
    --dur-karaoke-in: 0ms; --step-karaoke: 0ms; --karaoke-shift: 0%; --dur-karaoke: 0ms;
    --dur-word: 0ms; --dur-word-fade: 0ms; --step-word: 0ms; --word-shift: 0%;
    --dur-media-in: 0ms; --dur-bg: 0ms; --dur-curtain: 0ms; --dur-curtain-out: 0ms;
    --dur-panel-in: 0ms; --dur-panel-out: 0ms; --dur-param: 0ms; --dur-param-icon: 0ms;
    --dur-cascade: 0ms; --delay-cascade: 0ms; --step-cascade: 0ms; --cascade-shift: 0px; --cascade-skew: 0deg;
    --dur-pre-letter: 0ms; --step-pre-letter: 0ms; --dur-pre-out: 0ms; --delay-pre-out: 0ms; --dur-cover: 0ms;
    --dur-param-in: 0ms; --delay-param-in: 0ms; --step-param-in: 0ms; --dur-dial: 0ms; --dur-hover-card: 0ms; --dur-mode-fade: 0ms; --dur-line-butter: 0ms; --step-line-butter: 0ms;
  }
}
.reduce-motion {
  --dur-hover: 0ms; --dur-icon: 0ms; --dur-letter: 0ms; --step-letter: 0ms; --dur-frame: 0ms;
  --dur-button-in: 0ms; --delay-button-in: 0ms; --step-button-in: 0ms;
  --dur-line: 0ms; --delay-line: 0ms; --step-line: 0ms; --line-skew: 0deg;
  --dur-karaoke-in: 0ms; --step-karaoke: 0ms; --karaoke-shift: 0%; --dur-karaoke: 0ms;
  --dur-word: 0ms; --dur-word-fade: 0ms; --step-word: 0ms; --word-shift: 0%;
  --dur-media-in: 0ms; --dur-bg: 0ms; --dur-curtain: 0ms; --dur-curtain-out: 0ms;
  --dur-panel-in: 0ms; --dur-panel-out: 0ms; --dur-param: 0ms; --dur-param-icon: 0ms;
  --dur-cascade: 0ms; --delay-cascade: 0ms; --step-cascade: 0ms; --cascade-shift: 0px; --cascade-skew: 0deg;
  --dur-pre-letter: 0ms; --step-pre-letter: 0ms; --dur-pre-out: 0ms; --delay-pre-out: 0ms; --dur-cover: 0ms;
  --dur-param-in: 0ms; --delay-param-in: 0ms; --step-param-in: 0ms; --dur-dial: 0ms; --dur-hover-card: 0ms; --dur-mode-fade: 0ms; --dur-line-butter: 0ms; --step-line-butter: 0ms;
}