/* ═══════════════════════════════════════════════════════════════════
   base.css — агент A. Глобальный слой: токены, reset, типографика,
   .chrome-text, кнопки, шапка с нимбом-прогрессом, мобильное меню,
   футер, фокус и доступность.
   Секции (.s-*) НЕ трогаем — это файл sections.css (агент B).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Токены (пишутся ТОЛЬКО здесь, значения — из контракта) ───── */
:root{
  --bg:#050508; --bg-2:#0b0b12; --ink:#f2f2f7; --muted:#9a9aad;
  --chrome-hi:#ffffff; --chrome-mid:#c9c9da; --chrome-lo:#6f6f86;
  --blood:#ff2e3c;                 /* акцент демонов — скупо: ховеры, редкие детали */
  --line:rgba(200,200,220,.14);
  --font-display:'Unbounded';      /* заголовки, 300–900 */
  --font-text:'Manrope';           /* текст, 400–700 */
  --font-fraktur:'UnifrakturMaguntia'; /* ТОЛЬКО латиница — элементы [data-latin] */
  --nav-h:72px;
  --ease-out:cubic-bezier(.22,1,.36,1);
}

/* ── 2. Reset ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  background:var(--bg);
  /* clip, а не hidden: hidden превращает html/body в scroll-контейнер
     и ломает sticky/фиксированные пины; clip просто отрезает вылеты */
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scrollbar-width:thin;
  scrollbar-color:#26262f var(--bg);
}

body{
  overflow-x:clip;
  min-height:100svh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-text),system-ui,sans-serif;
  /* 16px на телефоне → 18px на десктопе */
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
/* Курсивных начертаний в fonts.css нет — гасим фальшивый браузерный наклон */
em,i,cite{font-style:normal}

/* Атрибут hidden обязан работать всегда, что бы ни задал display выше */
[hidden]{display:none!important}

/* Якоря не должны нырять под фиксированную шапку */
section{scroll-margin-top:calc(var(--nav-h) + 12px)}

/* body.is-loading — состояние до старта JS. Что прятать в hero, решает
   sections.css; глобальному слою здесь делать нечего, класс не трогаем. */

/* ── 3. Выделение, скроллбар, фокус ──────────────────────────────── */
::selection{background:var(--chrome-mid);color:#08080c;text-shadow:none}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#26262f;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#3a3a48}

/* Видимая рамка фокуса — доступность, не отключать нигде ниже */
:focus{outline:none}
:focus-visible{outline:2px solid var(--chrome-mid);outline-offset:3px}

/* ── 4. Типографика ──────────────────────────────────────────────────
   Экстремальный контраст: гигантский display против микро-лейблов. */
h1,h2{
  font-family:var(--font-display),sans-serif;
  font-weight:700;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:-.02em; /* Unbounded широкий — сжимаем */
  text-wrap:balance;
}
h1{
  font-size:clamp(3rem,10vw,8.5rem);
  font-weight:900;
  letter-spacing:-.04em;
}
h2{font-size:clamp(2rem,5.5vw,4.25rem)}
/* h3 — рабочий уровень (названия карточек и т.п.), без display-пафоса */
h3{font-family:var(--font-text),sans-serif;font-weight:700;font-size:1rem;line-height:1.35}

p{max-width:65ch} /* строки длиннее не читаются; секции переопределят где надо */

/* Микро-лейбл — вторая половина контраста. Утилита для всех агентов. */
.u-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Счётчики манифеста крутит JS — цифры одной ширины, чтобы не дёргалось */
[data-count]{font-variant-numeric:tabular-nums}

/* ── 5. [data-latin] — готические подписи ────────────────────────────
   UnifrakturMaguntia содержит ТОЛЬКО латиницу, поэтому класс вешается
   в html лишь на латинские строки. Uppercase запрещён: заглавная
   фрактура нечитаема, а капс мог прийти по наследству. */
[data-latin]{
  font-family:var(--font-fraktur),serif;
  font-weight:400;
  font-size:1.05em;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--muted);
}

/* ── 6. .chrome-text — жидкое серебро ────────────────────────────────
   Градиент, обрезанный по буквам, + медленный блик анимацией
   background-position (дёшево: без filter, композитор не страдает).
   Свечение — статичный text-shadow: прозрачные глифы тень отбрасывают.

   ГЛАВНОЕ ПРО СТОПЫ. background-size:200% 200% при background-position
   0% 0% показывает боксу ровно ПЕРВУЮ ПОЛОВИНУ градиента (t 0…0.5), а
   буквам внутри бокса — примерно участок t 0.12…0.40. Всё, что стоит
   после 50%, у статичных заголовков не рисуется НИКОГДА: прежние стопы
   55/75/100% были мёртвыми, и четыре заголовка выходили ровной светло-
   серой заливкой без металла. Поэтому горизонт и второй блик перенесены
   внутрь видимого окна, а стопы после 45% остались для двух анимированных
   заголовков — к ним блик доезжает, когда позиция уходит в 100% 100%.
   Менять background-size нельзя: на нём держится анимация блика.

   --chrome-band — самая тёмная точка градиента, 4.15:1 на фоне #050508.
   Класс живёт только на крупных заголовках (25px+), где порог 3:1, так
   что запас есть. Темнее (например #4c4c60, 2.43:1) — запрещено; для
   мелкого текста переменную надо поднимать до 4.5:1 (#7d7d95). */
.chrome-text{
  --chrome-band:var(--chrome-lo);
  background-image:linear-gradient(155deg,
    var(--chrome-hi)    0%,   /* блик на входе                       */
    var(--chrome-mid)  12%,
    var(--chrome-band) 20%,   /* тёмный горизонт — литая тень металла */
    var(--chrome-band) 27%,
    var(--chrome-hi)   30%,   /* резкий скачок в белый: у металла переход жёсткий */
    var(--chrome-hi)   35%,
    var(--chrome-mid)  45%,
    var(--chrome-band) 56%,   /* второй горизонт — для уехавшего блика */
    var(--chrome-hi)   61%,
    var(--chrome-mid)  74%,
    var(--chrome-hi)   88%,
    var(--chrome-mid) 100%);
  background-size:200% 200%;
  background-position:0% 0%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow:0 0 18px rgba(214,214,232,.12);
  /* background-clip:text красит только внутри бокса, а плотный line-height
     оставляет диакритику (точки Ё, кратку Й) за его верхней границей —
     буквы выходили с «отрезанными» точками. Расширяем закрашиваемую зону
     вверх и компенсируем отступ, макет не сдвигается. margin-top на
     инлайновых элементах игнорируется — им правка не мешает. */
  padding-top:.18em;
  margin-top:-.18em;
}
@keyframes chrome-sheen{
  from{background-position:0% 0%}
  to{background-position:100% 100%}
}
/* Блик живёт ТОЛЬКО на заголовке hero и имени в футере. Когда он крутился
   на всех восьми хром-заголовках сразу, страница теряла ~7 fps: каждый кадр
   перерисовывает текст с background-clip. Остальным хватает статичного
   градиента — на глаз разницы нет, они и так почти всегда вне экрана. */
.hero-title.chrome-text,
.footer-name.chrome-text{
  animation:chrome-sheen 9s ease-in-out infinite alternate;
}

/* ── 7. Кнопки ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  min-height:48px;               /* честная зона нажатия */
  padding:1em 2em;
  border:1px solid transparent;
  border-radius:2px;
  font-family:var(--font-text),sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:
    transform .3s var(--ease-out),
    border-color .3s var(--ease-out),
    background-position .5s var(--ease-out),
    background-color .3s var(--ease-out),
    box-shadow .3s var(--ease-out),
    color .3s var(--ease-out);
}
.btn:active{transform:translateY(1px)}

/* Серебряная заливка: тёмный жирный текст на хроме (контраст ~12:1) */
.btn-chrome{
  background-image:linear-gradient(155deg,
    var(--chrome-hi) 0%,
    var(--chrome-mid) 30%,
    var(--chrome-lo) 55%,
    var(--chrome-hi) 80%,
    var(--chrome-mid) 100%);
  background-size:220% 100%;
  background-position:0% 50%;
  color:#08080c;
  font-weight:700;
}

/* Призрачная: рамка из тонкой линии, при ховере серебрится */
.btn-ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--ink);
}

.btn-big{
  padding:1.3em 3em;
  font-size:14px;
}

/* Ховеры — только там, где есть настоящий курсор (на таче не залипают) */
@media (hover:hover) and (pointer:fine){
  .btn-chrome:hover{
    background-position:95% 50%;   /* блик перетекает по кнопке */
    transform:translateY(-2px);
    box-shadow:0 8px 28px rgba(201,201,218,.28);
  }
  .btn-ghost:hover{
    border-color:var(--chrome-mid);
    transform:translateY(-1px);
  }
}
.btn-chrome:active{transform:translateY(1px);box-shadow:none}

/* ── 8. Шапка ────────────────────────────────────────────────────── */
.site-nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  height:var(--nav-h);
  padding:0 clamp(1rem,4vw,2.5rem);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:
    transform .45s var(--ease-out),
    background-color .35s var(--ease-out),
    border-color .35s var(--ease-out);
}
/* Подложка под шапкой: на первом экране пункты меню ложатся на светлый диск
   луны и тонут. Мягкая тёмная вуаль сверху возвращает им контраст, при этом
   не читается как «панель» (статичный градиент, композитору бесплатно). */
.site-nav::before{
  content:'';
  position:absolute;
  left:0; right:0; top:0;
  height:calc(var(--nav-h) + 28px);
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(180deg, rgba(5,5,8,.82) 0%, rgba(5,5,8,.55) 55%, rgba(5,5,8,0) 100%);
  transition:opacity .35s var(--ease-out);
}
/* когда шапка стала стеклом — вуаль больше не нужна */
.site-nav.is-scrolled::before{opacity:0;}
/* После первого скролла — тонированное стекло.
   backdrop-filter здесь не кадровый цикл: считается один раз на композите. */
.site-nav.is-scrolled{
  background-color:rgba(5,5,8,.72);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
@supports not (backdrop-filter:blur(1px)){
  .site-nav.is-scrolled{background-color:rgba(5,5,8,.94)}
}
.site-nav.is-hidden{transform:translateY(-100%)}

/* Бренд: нимб + имя */
.nav-brand{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  min-height:44px;
}
.nav-title{
  font-family:var(--font-display),sans-serif;
  font-weight:500;
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Нимб-прогресс: эмблема в кольце, кольцо заполняет JS через dashoffset */
.nav-halo{
  position:relative;
  flex:0 0 auto;
  width:44px;
  height:44px;
}
.nav-halo img{
  position:absolute;
  top:50%;left:50%;
  width:32px;height:32px;
  transform:translate(-50%,-50%);
  border-radius:50%;
}
.nav-halo svg{
  position:absolute;
  inset:0;
  width:100%;height:100%;
}
.halo-track,.halo-fill{fill:none;stroke-width:2}
.halo-track{stroke:var(--line)}
.halo-fill{
  stroke:var(--chrome-mid);      /* градиент в stroke не положить — ровное серебро */
  stroke-linecap:round;
  stroke-dasharray:119.4;        /* 2π·19 — длина окружности r=19 */
  stroke-dashoffset:119.4;       /* старт: кольцо пустое, дальше рулит motion.js */
  transform:rotate(-90deg);      /* заполнение идёт с «полуночи» */
  transform-box:fill-box;
  transform-origin:center;
}

/* Ссылки разделов */
.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(1.1rem,2.5vw,2.2rem);
}
.nav-links a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.2em .1em;
  font-size:12px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .3s var(--ease-out);
}
/* Подчёркивание рисуется слева направо */
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:8px;
  height:1px;
  background:var(--chrome-mid);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s var(--ease-out);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,
.nav-links a:focus-visible::after{transform:scaleX(1)}
/* Активный раздел — серебро (класс ставит motion.js по вьюпорту) */
.nav-links a.is-active{color:var(--chrome-hi)}
.nav-links a.is-active::after{transform:scaleX(1)}

/* CTA в шапке — компактный хром, без подчёркивания-линии */
.nav-links .nav-cta{
  min-height:40px;
  padding:.7em 1.4em;
  border-radius:2px;
  background-image:linear-gradient(155deg,
    var(--chrome-hi) 0%,var(--chrome-mid) 30%,
    var(--chrome-lo) 55%,var(--chrome-hi) 80%,var(--chrome-mid) 100%);
  background-size:220% 100%;
  background-position:0% 50%;
  color:#08080c;
  font-weight:700;
  transition:background-position .5s var(--ease-out),transform .3s var(--ease-out);
}
.nav-links .nav-cta::after{display:none}
@media (hover:hover) and (pointer:fine){
  .nav-links .nav-cta:hover{background-position:95% 50%;transform:translateY(-1px)}
}

/* Бургер: на десктопе скрыт, две линии складываются в крест */
.nav-burger{
  display:none;
  position:relative;
  width:44px;
  height:44px;
  flex:0 0 auto;
}
.nav-burger span{
  position:absolute;
  left:11px;
  top:50%;
  width:22px;
  height:2px;
  margin-top:-1px;
  background:var(--ink);
  transition:transform .35s var(--ease-out);
}
.nav-burger span:nth-child(1){transform:translateY(-4px)}
.nav-burger span:nth-child(2){transform:translateY(4px)}
.nav-burger.is-open span:nth-child(1){transform:rotate(45deg)}
.nav-burger.is-open span:nth-child(2){transform:rotate(-45deg)}

/* ── 9. Мобильное меню ───────────────────────────────────────────────
   Оверлей под шапкой (z 40 < 50 — бургер остаётся кликабельным).
   JS снимает hidden и следующим кадром вешает .is-open — тогда
   срабатывают переходы. */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(var(--nav-h) + 1rem) 1.5rem 2rem;
  background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 70%);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s var(--ease-out);
}
.mobile-menu.is-open{
  opacity:1;
  pointer-events:auto;
}
.mobile-menu nav{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.4em;
}
.mobile-menu nav a{
  position:relative;          /* якорь для метки активного раздела */
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding-left:18px;          /* место под метку активного; в px — чтобы пункты
                                 разного кегля начинались по одной вертикали */
  font-family:var(--font-display),sans-serif;
  font-weight:700;
  font-size:clamp(1.9rem,8vw,3.2rem);
  line-height:1.1;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0;
  transform:translateY(26px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),color .3s var(--ease-out);
}
/* Внешняя ссылка (канал) — тише остальных */
.mobile-menu nav a[target]{
  font-family:var(--font-text),sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.15em;
  color:var(--muted);
  margin-top:1.2em;
}
.mobile-menu nav a:active{color:var(--blood)} /* редкий алый — только на нажатии */

/* Где я сейчас: в бургер-меню это была единственная непонятная точка —
   раздел не подсвечивался ничем. Серебро + вертикальная черта слева.
   Черта растёт по scaleY (transform, композитор), место под неё занято
   padding-left у ВСЕХ пунктов — активный не толкает соседей.
   .is-active вешает motion.js; [aria-current] — тот же вид, если разметка
   пометит раздел сама. */
.mobile-menu nav a::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:4px; height:1.15em;
  margin-top:-.575em;
  border-radius:2px;
  background:linear-gradient(180deg,var(--chrome-hi),var(--chrome-mid));
  box-shadow:0 0 16px rgba(201,201,218,.6);
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .4s var(--ease-out);
}
.mobile-menu nav a.is-active,
.mobile-menu nav a[aria-current]{color:var(--chrome-hi)}
/* Одного белого мало: обычный пункт и так почти белый (--ink #f2f2f7).
   Пока активный раздел известен, остальные уходят в серебро — разница
   видна с одного взгляда. Нет активного — ничего не меняется. Внешняя
   ссылка на канал остаётся приглушённой, она не раздел. */
.mobile-menu:has(a.is-active) nav a:not(.is-active):not([target]),
.mobile-menu:has(a[aria-current]) nav a:not([aria-current]):not([target]){
  color:var(--chrome-mid);
}
.mobile-menu nav a.is-active::before,
.mobile-menu nav a[aria-current]::before{transform:scaleY(1)}
/* Внешняя ссылка разделом не бывает — метку ей не рисуем */
.mobile-menu nav a[target]::before{content:none}
/* Поочерёдное появление: задержки живут только в открытом состоянии,
   закрытие происходит разом */
.mobile-menu.is-open nav a{opacity:1;transform:translateY(0)}
.mobile-menu.is-open nav a:nth-child(1){transition-delay:.05s}
.mobile-menu.is-open nav a:nth-child(2){transition-delay:.12s}
.mobile-menu.is-open nav a:nth-child(3){transition-delay:.19s}
.mobile-menu.is-open nav a:nth-child(4){transition-delay:.26s}
.mobile-menu.is-open nav a:nth-child(5){transition-delay:.33s}

/* ── 10. Футер ───────────────────────────────────────────────────── */
.site-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.4rem;
  padding:6rem 1rem;
  border-top:1px solid var(--line);
  text-align:center;
}
.footer-emblem{
  width:72px;height:72px;
  border-radius:50%;
  box-shadow:0 0 44px rgba(201,201,218,.25); /* лунное свечение, статично */
}
.footer-name{
  font-family:var(--font-display),sans-serif;
  font-weight:700;
  font-size:clamp(1.4rem,4.5vw,2.4rem);
  letter-spacing:-.02em;
  text-transform:uppercase;
  line-height:1.05;
}
.footer-tag{font-size:1.15em} /* готическая строка чуть крупнее, стиль даёт [data-latin] */
.footer-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}
.footer-links a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.4rem .9rem;
  font-size:12px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .3s var(--ease-out);
}
.footer-links a:hover{color:var(--ink)}
/* Разделители-точки: хвостом ПОСЛЕ ссылки, а не перед следующей —
   иначе при переносе строка начиналась с одинокой «·» (mob-9) */
.footer-links a:not(:last-child)::after{
  content:"·";
  margin-left:.9rem;
  color:var(--muted);
}
.footer-fine{
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted);
}

/* ── 11. Адаптив шапки ───────────────────────────────────────────── */
@media (max-width:820px){
  .nav-links{display:none}
  .nav-burger{display:block}
}
@media (min-width:821px){
  .nav-burger{display:none}
  .mobile-menu{display:none!important} /* открытое меню не переживает разворот окна */
}
@media (max-width:380px){
  .nav-title{font-size:.72rem}
}
/* На узком экране ссылки футера всё равно встают столбиком, и точка-хвост
   повисает в конце строки одна. Убираем разделители совсем, воздух между
   ссылками задаём gap — иначе строки слипаются. */
@media (max-width:560px){
  .footer-links{gap:.2rem .6rem}
  .footer-links a:not(:last-child)::after{content:none}
}

/* ── 12. Reduced motion ──────────────────────────────────────────────
   Точечно, без глобального «*»: декоративное выключаем совсем,
   функциональное (шапка, меню, бургер) оставляем, но мгновенным —
   иначе меню перестанет открываться, а шапка прятаться. */
@media (prefers-reduced-motion:reduce){
  .chrome-text{animation:none;background-position:50% 50%} /* блик замер на середине */
  .btn,.btn-chrome,.btn-ghost,.nav-links a,.nav-links a::after,.nav-links .nav-cta,
  .site-nav,.nav-burger span,.mobile-menu,.mobile-menu nav a,
  .mobile-menu nav a::before,.footer-links a{
    transition-duration:.01ms;
    transition-delay:0ms;
  }
  .btn:hover,.btn:active,.btn-chrome:hover,.btn-ghost:hover,.nav-links .nav-cta:hover{
    transform:none;
  }
}