/* ═══ База: сброс, типографика, переливающийся фон ═════════════════════ */

/* Цвета перламутра — зарегистрированные свойства: тогда смена страницы плавно
   перетекает одним цветом в другой, а не щёлкает (переход — только на .aurora). */
@property --a1 { syntax: '<color>'; inherits: true; initial-value: #8f86bd; }
@property --a2 { syntax: '<color>'; inherits: true; initial-value: #7d90bd; }
@property --a3 { syntax: '<color>'; inherits: true; initial-value: #6fa4a7; }
@property --a4 { syntax: '<color>'; inherits: true; initial-value: #b59d88; }

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--bg);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, video, svg, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }

::selection { background: rgba(207, 200, 232, 0.3); color: #fff; }

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Полосы прокрутки — тонкие и тёмные, чтобы не рвать чёрный фон. */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.24); }
::-webkit-scrollbar-track { background: transparent; }

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: calc(var(--z-toast) + 1);
    padding: 10px 16px;
    border-radius: var(--r-pill);
    background: var(--text);
    color: var(--bg);
    font-weight: var(--fw-semibold);
    transform: translateY(-160%);
    transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ── Стеклянное переливание (фон) ─────────────────────────────────────── */
/* «Прикольное стеклянное переливание» (владелец 26.09): тёмная основа, поверх
   неё — перламутр, как свет сквозь матовое стекло.
   Как рисуется (переделка 26.09 — на Mac процесс GPU Safari стоял на 100 %):
   раньше было девять слоёв с режимом screen, и каждый кадр прокрутки менял
   наследуемое --turn — браузер заново смешивал огромные слои. Теперь
   слои готовые: каждый рисуется ОДИН раз, дальше видеокарта их только
   двигает (transform/opacity). Ни mix-blend-mode, ни filter: blur —
   мягкость даёт сам радиальный градиент. Слои снизу вверх:
     • .aurora — тёмная основа; в ней же (z-index: -1, без отдельного слоя)
       .aurora-grain::before — слабые каустики, неподвижные;
     • .aurora-orbit.o1 > .aurora-blob.b1 — «поле»: пятна --a1, --a3, --a4
       одной текстурой. Обёртку .o1 поворачивает app.js при прокрутке
       (style.transform, только пока догоняет), само поле медленно плывёт;
       ::after поля — кольцо перламутра (только главная);
     • .aurora-orbit.o2 > .aurora-blob.b2 — пятно --a2, плывёт навстречу,
       прокрутка его не крутит: цвета расходятся и перетекают;
     • .aurora::before — медленный диагональный блик по стеклу;
     • .aurora::after — затемнение краёв и низа + зерно (без зерна большие
       градиенты «бандингуют»).
   Три движущихся слоя, остальное неподвижно. Орбиты o3/o4 и .aurora-swirl
   из разметки больше не нужны (кольцо — в ::after поля) и скрыты.
   Вкладка скрыта — всё на паузе (html.is-tab-hidden, app.js);
   prefers-reduced-motion — фон стоит. */
.aurora {
    position: fixed;
    inset: 0;
    z-index: var(--z-bg);
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    background:
        radial-gradient(130% 80% at 50% -8%, #0e0e15 0%, #09090d 45%, #050507 100%),
        var(--bg);
    /* Смена страницы: цвета перетекают только здесь. Переход на body заставлял
       каждый кадр пересчитывать стиль ВСЕЙ страницы (свойства наследуемые). */
    transition: --a1 1.2s ease, --a2 1.2s ease, --a3 1.2s ease, --a4 1.2s ease;
}

.aurora-orbit {
    position: absolute;
    inset: 0;
}
.aurora-orbit.o1 { will-change: transform; }
.aurora-orbit.o3, .aurora-orbit.o4, .aurora-swirl { display: none; }

.aurora-blob {
    position: absolute;
    will-change: transform;
}
/* Поле: квадрат 152vmax с центром в центре окна — при любом повороте его
   край не заходит в окно (полудиагональ окна ≤ 71vmax). Пятна стоят там же,
   где стояли отдельные кружки прежней версии (координаты — от центра окна). */
.aurora-blob.b1 {
    left: calc(50% - 76vmax);
    top: calc(50% - 76vmax);
    width: 152vmax;
    height: 152vmax;
    opacity: 0.24;   /* без color-mix (старый Safari): общая прозрачность */
    background:
        radial-gradient(circle 36vmax at calc(90vmax - 50vw) calc(74vmax - 50vh), var(--a1), transparent 74%),
        radial-gradient(30vmax 19vmax at calc(106vmax - 32vw) calc(95vmax - 32vh), var(--a3), transparent 72%),
        radial-gradient(circle 36vmax at calc(50vw + 40vmax) calc(50vh + 88vmax), var(--a4), transparent 72%);
    animation: aurora-field 64s var(--ease-in-out) infinite alternate;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    /* У каждого пятна своя плотность (как у прежних кружков: 0.3 / 0.18 / 0.18). */
    .aurora-blob.b1 {
        opacity: 1;
        background:
            radial-gradient(circle 36vmax at calc(90vmax - 50vw) calc(74vmax - 50vh), color-mix(in srgb, var(--a1) 31%, transparent), color-mix(in srgb, var(--a1) 13%, transparent) 45%, transparent 74%),
            radial-gradient(30vmax 19vmax at calc(106vmax - 32vw) calc(95vmax - 32vh), color-mix(in srgb, var(--a3) 19%, transparent), transparent 72%),
            radial-gradient(circle 36vmax at calc(50vw + 40vmax) calc(50vh + 88vmax), color-mix(in srgb, var(--a4) 19%, transparent), transparent 72%);
    }
}
/* Кольцо перламутра (только главная): четыре мягких облака цветов страницы
   по кругу. Внутри поля — крутится вместе с ним, отдельного слоя нет. На
   остальных страницах не рисуется (visibility). */
.aurora-blob.b1::after {
    content: '';
    position: absolute;
    left: calc(50% - 55vmax);
    top: calc(50% - 55vmax - 6vh);
    width: 110vmax;
    height: 110vmax;
    opacity: 0;
    visibility: hidden;
    background:
        radial-gradient(24% 22% at 50% 25%, var(--a1), transparent),
        radial-gradient(22% 20% at 76% 50%, var(--a2), transparent),
        radial-gradient(24% 22% at 50% 75%, var(--a3), transparent),
        radial-gradient(21% 19% at 24% 50%, var(--a4), transparent);
    transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
body[data-page="explore"] .aurora-blob.b1::after {
    opacity: 0.2;
    visibility: visible;
    transition: opacity 1.2s ease, visibility 0s;
}
.aurora-blob.b2 {
    top: -42vmax;
    right: -26vmax;
    width: 72vmax;
    height: 72vmax;
    border-radius: 50%;
    opacity: 0.26;
    background: radial-gradient(closest-side, var(--a2), transparent 74%);   /* без color-mix (старый Safari) */
    background: radial-gradient(closest-side, var(--a2), color-mix(in srgb, var(--a2) 40%, transparent) 45%, transparent 74%);
    animation: aurora-b 52s var(--ease-in-out) infinite alternate;
}

/* Поле плывёт медленно и недалеко (запас квадрата — 5vmax): поворот и сдвиг. */
@keyframes aurora-field {
    0%   { transform: rotate(-7deg) translate3d(-2.5vmax, -1.5vmax, 0); }
    50%  { transform: rotate(3deg) translate3d(2vmax, 1.5vmax, 0); }
    100% { transform: rotate(9deg) translate3d(-1vmax, 2.5vmax, 0); }
}
@keyframes aurora-b {
    0%   { transform: translate3d(0, 0, 0) scale(1.05); }
    50%  { transform: translate3d(-16vw, 9vh, 0) scale(0.93); }
    100% { transform: translate3d(-6vw, 4vh, 0) scale(1.12); }
}

/* Каустики — сетка тонких бликов из feTurbulence (тип turbulence: около нуля
   шума — тонкие линии). Неподвижны и лежат в слое основы (z-index: -1):
   рисуются один раз, маска применяется при отрисовке, а не каждый кадр. */
.aurora-grain {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.aurora-grain::before {
    content: '';
    position: absolute;
    inset: -25%;
    opacity: 0.038;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='c' x='0' y='0' width='100%' height='100%'><feTurbulence type='turbulence' baseFrequency='.0075 .011' numOctaves='1' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  -6 0 0 0 1'/><feComponentTransfer><feFuncA type='gamma' exponent='6'/></feComponentTransfer><feGaussianBlur stdDeviation='1'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>");
    background-size: 900px 900px;
    -webkit-mask: radial-gradient(80% 70% at 66% 24%, #000 15%, transparent 78%);
    mask: radial-gradient(80% 70% at 66% 24%, #000 15%, transparent 78%);
}

/* Диагональный блик по стеклу: широкая мягкая полоса перламутра (сирень →
   барвинок → вода → тёплый жемчуг), в ней тонкая светлая черта — как отблеск
   на кромке стекла, и третья, совсем слабая. Плывут сами (46 с туда-обратно). */
.aurora::before {
    content: '';
    position: absolute;
    inset: -30% -45%;
    z-index: 1;
    background:
        linear-gradient(118deg, transparent 30%, rgba(200, 190, 240, 0.055) 38%, rgba(190, 212, 240, 0.075) 43%, rgba(200, 235, 230, 0.07) 47%, rgba(245, 228, 208, 0.06) 51%, transparent 58%),
        linear-gradient(118deg, transparent 44.6%, rgba(255, 255, 255, 0.055) 45.6%, transparent 46.8%),
        linear-gradient(118deg, transparent 63%, rgba(255, 255, 255, 0.03) 65.5%, transparent 68%);
    will-change: transform;
    animation: aurora-sheen 46s var(--ease-in-out) infinite alternate;
}
@keyframes aurora-sheen {
    0%   { transform: translate3d(-12%, -4%, 0); opacity: 0.75; }
    50%  { opacity: 1; }
    100% { transform: translate3d(12%, 4%, 0); opacity: 0.8; }
}

/* Края и низ темнее: перламутр живёт в середине и сверху, текст на стеклянных
   панелях читается. Нижний фон этого слоя — зерно: обычное наложение со
   слабой непрозрачностью вместо прежнего overlay (режим наложения на весь
   экран стоил полного прохода смешивания каждый кадр). */
.aurora::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(120% 90% at 50% 0%, transparent 0%, transparent 44%, rgba(0, 0, 0, 0.42) 74%, rgba(0, 0, 0, 0.9) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, transparent 28%, transparent 58%, rgba(0, 0, 0, 0.6) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .02 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Вкладка скрыта — фон не тикает (app.js ставит класс по visibilitychange). */
.is-tab-hidden .aurora-blob,
.is-tab-hidden .aurora::before,
.is-tab-hidden .af-field i,
.is-tab-hidden .af::after { animation-play-state: paused; }

/* Бесконечные анимации вне экрана стоят (app.js помечает секции страницы
   атрибутом data-offscreen через IntersectionObserver). */
[data-offscreen],
[data-offscreen]::before,
[data-offscreen]::after,
[data-offscreen] *,
[data-offscreen] *::before,
[data-offscreen] *::after { animation-play-state: paused !important; }

/* ── Каркас страницы ───────────────────────────────────────────────────── */
.page-root {
    position: relative;
    z-index: var(--z-content);
    min-height: calc(100dvh - var(--nav-h));
    outline: none;
}

.container {
    width: 100%;
    max-width: var(--content-w);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ── Типографика ───────────────────────────────────────────────────────── */
.display {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-wrap: balance;
}
.display-hero { font-size: var(--fs-hero); letter-spacing: -0.03em; }
.h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-3xl);
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.h3 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.lead { font-size: var(--fs-lg); color: var(--text-2); line-height: 1.5; text-wrap: pretty; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.tabular { font-variant-numeric: tabular-nums; }
.eyebrow {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* Переливающийся текст: градиент медленно и непрерывно течёт вдоль строки.
   Градиент замкнут (--aurora-flow), плитка шириной 200%, за цикл сдвигаемся ровно
   на одну плитку (позиция 0% → 200% при размере 200% = сдвиг на 2 ширины) — стыка
   и скачка в момент повтора нет. */
.text-aurora {
    background: var(--aurora-flow);
    background-size: 200% 100%;
    background-repeat: repeat-x;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: aurora-flow 14s linear infinite;
}
@keyframes aurora-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Появление содержимого страницы: подъём + проявление, лесенкой. */
.reveal {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    animation: reveal 520ms var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .reveal { opacity: 1; transform: none; }
    .aurora-blob, .aurora::before { animation: none !important; }
    .aurora-orbit { transform: none !important; }
}

/* ── Шрифты: свои файлы, без Google Fonts (PERF-12) ────────────────────
   Раньше первый кадр ждал чужую таблицу стилей fonts.googleapis.com (свой
   DNS и TLS), а файлы шрифтов находились только когда заголовок уже
   рисовался. Теперь файлы лежат рядом (static/site/fonts/, переменные по
   толщине: один файл на алфавит), нужные index.html заранее подгружает
   (preload). Наборы и unicode-range — как у Google: браузер берёт только
   алфавиты, которые есть на странице. Onest 400–700, Unbounded 500–800. */
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/site/fonts/onest-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/site/fonts/onest-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/site/fonts/onest-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/site/fonts/onest-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('/static/site/fonts/unbounded-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('/static/site/fonts/unbounded-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('/static/site/fonts/unbounded-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('/static/site/fonts/unbounded-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}