/* =========================================================================
   ПЕРВЫЙ ЭКРАН СО СЦЕНОЙ, ШАПКА-ТАБЛЕТКИ, ЗАСТАВКА, ПЕРЕХОДЫ

   Отдельным файлом по той же причине, что hero.css и cards.css: base.css —
   чужой скомпилированный CSS из архива, править его вслепую нельзя.
   Подключается последним и переопределяет шапку.

   Сцена жила отдельной страницей /hero, и это было ошибкой: сайт один, а
   первый экран — его верхушка, а не соседний адрес. Здесь она собрана так,
   чтобы уезжать вместе со своим экраном, а не висеть фоном всей страницы.
   ========================================================================= */

/* -------------------------------------------------------------------------
   ПЕРВЫЙ ЭКРАН
   ------------------------------------------------------------------------- */
.hero3d {
  position: relative;
  min-height: 100lvh;
  display: flex;
  flex-direction: column;
  padding-inline: var(--edge3d);
  padding-bottom: var(--edge3d);
  overflow: hidden;              /* холст рисует во всё окно, режем по секции */
  isolation: isolate;
}

:root { --edge3d: 1.875rem; }
@media (max-width: 640px) { :root { --edge3d: 1.25rem } }

/* Холст АБСОЛЮТНЫЙ, а не прибитый к экрану. Разница видна только при
   прокрутке, и она принципиальная: прибитый остался бы под всеми
   разделами, и текст каждого из них лежал бы на движущейся картинке.
   Абсолютный уезжает вместе со своим экраном и отдаёт страницу чистой. */
.scene { position: absolute; inset: 0; z-index: 0; }
.scene canvas { display: block; }

/* Линия под нижней полосой — под холстом, поэтому орб и руки проходят
   перед ней. На узком экране нижняя полоса складывается в столбик, и
   линии не с чем совпадать. */
.hero3d .rule3d {
  position: absolute;
  left: var(--edge3d); right: var(--edge3d);
  bottom: 15.75rem; height: 1px;
  background: var(--color-rule);
  z-index: 0; pointer-events: none;
}
@media (max-width: 767.98px) { .hero3d .rule3d { display: none } }

/* =========================================================================
   ПОДЛОЖКА ПОД ТЕКСТ

   Сцена светится и ДВИЖЕТСЯ. Замер по кадру со скрытым текстом нашёл
   места, где яркость фона совпадает с яркостью букв в точности — буквы
   там не «бледные», а пропадающие и появляющиеся.

   Первый заход я гасил всё подряд: приглушил отражение на руках с 2.25 до
   1.40, свет с 6 до 3.2 и положил снизу плотную заливку. Текст стал
   читаться, а руки пропали — Александр спросил, куда я их дел, и был прав.
   Гасить предмет ради подписи под ним — не решение.

   Теперь наоборот: свет рукам возвращён полностью, а подложка держит
   ровно те полосы, где стоят буквы, и ослаблена там, где стоят руки.
   Нижняя ладонь живёт в правой половине кадра, поэтому левая полоса
   плотнее правой.
   ========================================================================= */
.scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* левый низ — описание и кнопки, руки сюда не достают */
    radial-gradient(46% 26% at 16% 92%,
      rgba(20,26,18,.88) 0%, rgba(20,26,18,.42) 58%, rgba(20,26,18,0) 100%),
    /* правый низ — надзаголовок и метрики; слабее, чтобы ладонь осталась */
    radial-gradient(38% 30% at 86% 84%,
      rgba(20,26,18,.72) 0%, rgba(20,26,18,.34) 56%, rgba(20,26,18,0) 100%),
    /* заголовок слева сверху */
    radial-gradient(52% 34% at 6% 14%,
      rgba(20,26,18,.66) 0%, rgba(20,26,18,0) 74%),
    /* самый низ — стык со следующим разделом, чтобы кадр не обрывался */
    linear-gradient(to top,
      rgba(20,26,18,.62) 0%, rgba(20,26,18,.20) 10%, rgba(20,26,18,0) 22%);
}

/* На телефоне текст занимает почти весь экран: раскладка складывается в
   столбик, и свободного места, где сцена видна сама по себе, почти нет.
   Здесь подложка ровная — сцена работает фоном, а не соседом. */
@media (max-width: 767.98px) {
  .scrim {
    background:
      linear-gradient(to top,
        rgba(20,26,18,.88) 0%, rgba(20,26,18,.76) 34%,
        rgba(20,26,18,.54) 62%, rgba(20,26,18,.32) 88%, rgba(20,26,18,.24) 100%);
  }
}

/* ТЕНЬ ПОД БУКВАМИ. Подложка снимает бо́льшую часть беды, но не всю:
   остаются считанные блики, которые ещё и ездят по кадру. Тень темнит
   только то, что вплотную к букве, и на тёмном фоне не видна вовсе.
   Радиус в rem — едет вместе с кеглем, а не разъезжается с ним. */
.hero3d h1, .hero3d .desc3d, .hero3d .eyebrow3d,
.hero3d .stat3d dd, .hero3d .stat3d dt, .hero3d .btn-link3d {
  text-shadow: 0 0 .6rem rgba(20,26,18,.92), 0 .06rem .2rem rgba(20,26,18,.78);
}

/* -------------------------------------------------------------------------
   СОДЕРЖИМОЕ ПЕРВОГО ЭКРАНА
   ------------------------------------------------------------------------- */
.hero3d-in {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; flex: 1;
}

.hero3d h1 {
  margin-top: 6rem; max-width: 35rem;
  font-family: var(--font-disp);
  font-size: var(--fs-hero3d);
  font-weight: 300; font-stretch: 88%;
  line-height: 1; letter-spacing: -.02em;
  text-transform: none;                   /* base.css поднимает h1 в верхний */
  color: var(--color-bone);
}
:root { --fs-hero3d: 4.5rem }
@media (max-width: 1024px) { :root { --fs-hero3d: 3.5rem } }
@media (max-width: 640px)  { :root { --fs-hero3d: 2.75rem } }

/* Слова оборачиваются отдельно, иначе строка переносилась бы по любой
   букве: у каждой inline-block, и браузер вправе рвать где угодно. */
.hero3d h1 .wd { display: inline-block; white-space: nowrap }
.hero3d h1 .ltr {
  display: inline-block; opacity: 0; filter: blur(12px);
  transition: opacity .8s var(--ease3d), filter .8s var(--ease3d);
}
.hero3d h1.on .ltr { opacity: 1; filter: blur(0) }
:root { --ease3d: cubic-bezier(.2,.8,.2,1) }

.band3d { margin-top: auto; padding-top: 4rem; display: flex; flex-direction: column; gap: 3rem }
@media (min-width: 768px) {
  .band3d { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2rem }
}

.col3d-l { max-width: 24rem }
.desc3d { font-family: var(--font-mono); font-size: .8rem; line-height: 1.7; color: var(--color-mute) }
.acts3d { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: 2rem; row-gap: 1rem }
@media (min-width: 768px) { .acts3d { margin-top: 3rem } }

.btn-fill3d {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  background: var(--color-bone); color: var(--color-ink);
  border-radius: .75rem; padding: .8rem 2rem; font-size: .64rem;
  transition: background .18s;
}
.btn-fill3d:hover { background: var(--color-neon-hi) }
.btn-link3d {
  font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-mute); text-decoration: underline; text-underline-offset: 4px;
  font-size: .64rem; transition: color .18s;
}
.btn-link3d:hover { color: var(--color-bone) }

.col3d-r { display: flex; flex-direction: column }
/* Надзаголовок и подписи метрик — на ступень светлее остальных подписей,
   и это не про вкус. Они единственные из мелкого текста стоят над правой
   ладонью, а она в кадре самая освещённая: замер по буквам дал 3.87 и
   4.61 при норме 4.5. Давить подложку сильнее значило бы снова гасить
   руку, поэтому подняли сам текст — на тёмном это стоит ничего, а
   ступень к цифрам метрик всё равно остаётся вдвое. */
.eyebrow3d {
  font-family: var(--font-mono); margin-bottom: 2rem;
  font-size: .6rem; text-transform: uppercase; letter-spacing: .15em; color: var(--color-h2c);
}
@media (min-width: 768px) { .eyebrow3d { margin-bottom: 4rem } }

.stats3d { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem }
@media (min-width: 768px) { .stats3d { gap: 3rem } }
.stat3d { border-left: 1px solid var(--color-rule-2); padding-left: 1rem }
.stat3d dd {
  font-family: var(--font-disp); font-size: 2rem; font-weight: 300; font-stretch: 88%;
  line-height: 1; color: var(--color-bone);
}
@media (max-width: 640px) { .stat3d dd { font-size: 1.75rem } }
.stat3d dt { margin-top: .75rem; font-family: var(--font-mono); font-size: .62rem; color: var(--color-h2c) }

/* -------------------------------------------------------------------------
   ШАПКА — ТРИ ТАБЛЕТКИ

   Переопределяет .nav из base.css. Сама полоса становится прозрачной:
   стекло живёт на таблетках, и вторая подложка под ними читалась бы
   полосой поперёк сцены.
   ------------------------------------------------------------------------- */
/* ШАПКА ВЫНУТА ИЗ ПОТОКА — fixed, а не sticky.

   На sticky она занимала свою высоту в потоке, и первый экран начинался
   ПОД ней: 100lvh плюс шестьдесят восемь пикселей шапки не влезают в
   окно, и нижняя строка метрик уезжала за край. Видно это было только на
   снимке целиком, в разметке всё выглядело правильно.

   Плавающая шапка ничего не занимает, экран получает всё окно, а стекло
   на самих таблетках размывает то, что под ними проходит. */
.nav {
  position: fixed !important;
  inset-inline: 0; top: 0;
  background: none !important;
  border-bottom: 0 !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  padding: .5rem;
  transition: transform .32s var(--ease3d);
  will-change: transform;
}
/* Плавающая шапка перекрывает то, что под неё уезжает, — на ленте цен это
   особенно заметно, она узкая и целиком прячется под таблетками. Поэтому
   при движении вниз шапка уходит, при движении вверх возвращается. На
   первом экране она не прячется никогда: там она часть кадра. */
.nav.hide { transform: translateY(calc(-100% - .5rem)) }
.nav .nav-in {
  max-width: none; margin: 0; padding-inline: 0;
  height: auto; align-items: stretch; gap: .5rem; position: relative;
}

.pill3d {
  display: flex; align-items: center; border-radius: .75rem;
  border: 1px solid var(--color-rule-2);
  background: rgba(220,224,198,.05);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

.brandpill { justify-content: center; padding: .85rem 2rem; gap: .6rem; flex: none }
@media (max-width: 767.98px) { .brandpill { padding: .85rem 1.1rem } }
.brandpill img { height: 1.6rem; width: auto; flex: none }

.navpill { flex: 1; justify-content: center; gap: clamp(1.6rem, 4vw, 4rem); padding-inline: 2rem }
@media (max-width: 900px) { .navpill { display: none } }
.navpill a {
  font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  font-size: .6rem; color: var(--color-mute); transition: color .18s; white-space: nowrap;
}
.navpill a:hover, .navpill a.here { color: var(--color-bone) }

/* Распорка. Ниже 900 таблетка со ссылками прячется, и без неё бургер с
   кошельком прилипли бы к знаку слева. Распорка занимает то же место,
   что занимала таблетка, и всё правое остаётся правым. */
.sp3d { flex: 1; display: none }
@media (max-width: 900px) { .sp3d { display: block } }

/* Кошелёк — та же таблетка, чтобы кнопка не выпадала из ряда. */
.nav .wl { flex: none }
.nav .wl .connect {
  border-radius: .75rem; padding: .85rem 1.4rem;
  border-color: var(--color-rule-2); color: var(--color-mute);
  background: rgba(220,224,198,.05);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  height: 100%;
}
.nav .wl .connect:hover { background: var(--color-neon); color: var(--color-ink); border-color: var(--color-neon) }
@media (max-width: 560px) { .nav .wl { display: none } }

/* Ссылка на X — значок, а не слово: канал у проекта один, и его узнают
   по знаку. Зелёная точка означает, что канал живой. */
.xpill {
  display: flex; align-items: center; gap: .5rem; flex: none;
  border: 1px solid var(--color-rule-2); background: var(--color-ink);
  border-radius: .75rem; padding: .85rem 1.4rem;
  color: var(--color-bone); transition: border-color .18s, color .18s;
}
.xpill svg { width: 1rem; height: 1rem; display: block }
.xpill:hover, .xpill.blink { border-color: var(--color-neon); color: var(--color-neon) }
.dot3d { width: .375rem; height: .375rem; border-radius: 50%; background: #4ade80; opacity: .3 }
.dot3d.beat { animation: beat3d 2400ms ease-in-out infinite }
@keyframes beat3d { 0%,100% { opacity: .3 } 50% { opacity: 1 } }

/* бургер и выпадающее меню */
.burger3d {
  display: none; align-items: center; justify-content: center;
  padding-inline: 1.1rem; cursor: pointer; background: rgba(220,224,198,.05);
  border: 1px solid var(--color-rule-2); border-radius: .75rem; flex: none;
}
@media (max-width: 900px) { .burger3d { display: flex } }
.burger3d span { position: relative; display: block; width: 1.15rem; height: 1rem }
.burger3d i {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--color-bone);
  transition: transform .35s cubic-bezier(.2,1.2,.3,1);
}
.burger3d i:nth-child(1) { transform: translateY(-.1875rem) }
.burger3d i:nth-child(2) { transform: translateY(.1875rem) }
.burger3d[aria-expanded="true"] i:nth-child(1) { transform: translateY(0) rotate(45deg) }
.burger3d[aria-expanded="true"] i:nth-child(2) { transform: translateY(0) rotate(-45deg) }

.drop3d {
  position: absolute; inset-inline: 0; top: 100%; margin-top: .5rem; padding: .5rem;
  border: 1px solid var(--color-rule-2); border-radius: .75rem;
  background: color-mix(in srgb, var(--color-ink) 82%, transparent);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  opacity: 0; transform: translateY(-.5rem); pointer-events: none; z-index: 50;
  transition: opacity .3s var(--ease3d), transform .3s var(--ease3d);
}
.drop3d.open { opacity: 1; transform: none; pointer-events: auto }
@media (min-width: 901px) { .drop3d { display: none } }
.drop3d a {
  display: block; padding: .9rem .75rem; color: var(--color-mute);
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; font-size: .66rem;
}
.drop3d li:first-child a { border-top: 0 }

/* -------------------------------------------------------------------------
   ЗАСТАВКА
   ------------------------------------------------------------------------- */
.pl { position: fixed; inset: 0; z-index: 60; overflow: hidden }
.pl-dark { position: absolute; inset: 0; background: #0F1A0C; transform: translateY(0) }
.pl-sheet { position: absolute; inset: 0; overflow: hidden; background: #EDEFDC; transform: translateY(0) }
/* Полосу сдвигаем встречно листу: лист уезжает вверх и своей нижней
   кромкой срезает её снизу, а сама полоса стоит на месте. Без встречного
   сдвига она уехала бы вместе с листом, и срезания не было бы видно. */
.pl-hold { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center }
.pl-wrap { position: relative }
.pl-ring { position: absolute; inset: -1rem; border-radius: 9999px; border: 1px solid #2A3624; pointer-events: none }
.pl-bar {
  position: relative; height: 14rem; width: 58rem; max-width: 85vw;
  border-radius: 9999px; background: #121A10; overflow: hidden;
}
.pl-fill { position: absolute; inset-block: 0; left: 0; width: 0%;
  background: linear-gradient(90deg, #3E5D34 0%, #141F10 100%) }
.pl-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-disp); font-size: 3rem; font-weight: 300; font-stretch: 88%; color: #DCE0C6;
}

/* -------------------------------------------------------------------------
   ПОЯВЛЕНИЯ

   .rv — вход после заставки, по расписанию.
   .sr — проявление раздела при подходе к нему при прокрутке.
   ------------------------------------------------------------------------- */
.rv { opacity: 0; transform: translateY(1.25rem);
  transition: opacity .8s var(--ease3d), transform .8s var(--ease3d) }
.rv.on { opacity: 1; transform: none }
.rv-hdr { opacity: 0; transform: translateY(-.75rem);
  transition: opacity .7s var(--ease3d), transform .7s var(--ease3d) }
.rv-hdr.on { opacity: 1; transform: none }

/* Прокрутка. Сдвиг маленький нарочно: длинный «вылет снизу» на странице,
   где разделов много, превращает чтение в ожидание. */
.sr { opacity: 0; transform: translateY(1.6rem);
  transition: opacity .7s var(--ease3d), transform .7s var(--ease3d) }
.sr.on { opacity: 1; transform: none }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv-hdr, .sr { opacity: 1 !important; transform: none !important; transition: none !important }
  .hero3d h1 .ltr { opacity: 1; filter: none; transition: none }
  .pl { display: none }
  .dot3d.beat { animation: none; opacity: 1 }
}


/* -------------------------------------------------------------------------
   ЯКОРЯ ПОД ЛИПКОЙ ШАПКОЙ

   Меню прыгает по разделам той же страницы, а шапка липкая: без отступа
   прокрутки заголовок раздела оказывается ровно под ней и выглядит
   пропущенным. Величина — высота таблеток плюс поле.
   ------------------------------------------------------------------------- */
#calc, #basket, #ledger { scroll-margin-top: 5.2rem }
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }