/* ==========================================================================
   1win Design System · СТРАНИЦЫ РАЗДАЧИ
   --------------------------------------------------------------------------
   Общий слой для четырёх промо-страниц (airdrop-a…d.html).
   Здесь только то, что специфично для формата «промо-лендинг» и не имеет
   смысла в общей библиотеке. Ни одного литерала — всё через токены.

   Подключается последним, после 1win-ui.css.
   ========================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: var(--l-scroll-offset); }
body { margin: 0; }

/* --- Каркас ---------------------------------------------------------------
   Топбар и шапка живут в потоке, а не фиксированы, — значит запас под
   фикс-шапку из .w-page не нужен, и свечение начинается от верха. */

.w-page { padding-top: 0; }

/* .w-page в базовой библиотеке обрезает свечение через overflow: hidden.
   Это создаёт контейнер прокрутки, и position: sticky у шапки перестаёт
   работать — она уезжает вместе со страницей. overflow-x: clip обрезает
   так же по горизонтали, но контейнера прокрутки не создаёт. */
.w-page { overflow: visible; overflow-x: clip; }

.w-page::before { top: 0; }
@media (min-width: 768px)  { .w-page::before { top: 0; } }
@media (min-width: 1440px) { .w-page::before { top: 0; } }

/* Шапка липнет к верху. Пока страница не прокручена, она прозрачная и
   лежит на свечении — как на проде. Как только уезжает топбар, включается
   подложка: без неё контент просвечивает сквозь шапку и текст нечитаем.
   Атрибут data-stuck ставит airdrop.js через IntersectionObserver. */
.page-header {
  position: sticky;
  top: 0;
  transition: background-color var(--l-duration-base) var(--l-ease),
              border-color var(--l-duration-base) var(--l-ease);
  z-index: 5;
}

.page-header[data-stuck] {
  backdrop-filter: blur(12px);
  background-color: var(--color-background-base-alfa-static-black-60);
  border-bottom: 1px solid var(--color-border-base-alfa-divider);
}

.page-header__inner { padding-block: var(--spacing-16); }

.page-hero { padding-block: var(--spacing-32) var(--spacing-40); }
@media (min-width: 1024px) { .page-hero { padding-block: var(--spacing-48) var(--spacing-64); } }

/* --- Герой: маскот и орбита монет в одной коробке ------------------------- */

.hero-art { display: flex; justify-content: center; position: relative; }

.hero-art__mascot {
  display: block;
  height: auto;
  position: relative;
  width: min(320px, 78%);
  z-index: 1;
}

.hero-art__coins {
  height: auto;
  inset: auto 0 0 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 2;
}

@media (min-width: 1024px) { .hero-art__mascot { width: min(380px, 100%); } }
@media (min-width: 1440px) { .hero-art__mascot { width: min(440px, 100%); } }

/* Вариант героя с одним крупным объектом вместо маскота */
.hero-art__object { display: block; height: auto; margin: 0 auto; width: min(320px, 76%); }
@media (min-width: 1024px) { .hero-art__object { width: min(400px, 100%); } }

/* --- Мелкие сквозные детали ------------------------------------------------ */

/* Строка соцдоказательства под кнопкой */
.proof { align-items: center; display: flex; gap: var(--spacing-8); }
.proof__dot {
  background-color: var(--color-solid-brand-accent-default);
  border-radius: var(--rounding-max);
  flex: none;
  height: var(--spacing-8);
  width: var(--spacing-8);
}

/* Арт в углу плитки */
.tile-art { width: 92px; }
@media (min-width: 1024px) { .tile-art { width: 116px; } }

/* Мокап телефона */
.phone { display: block; height: auto; margin: 0 auto; width: min(260px, 70%); }

/* Шкала с подписью под ней */
.pool { display: flex; flex-direction: column; gap: var(--spacing-12); }

/* Аккордеон: содержимое скрыто, пока блок закрыт */
.w-collapse:not(.w-collapse_open) .w-collapse__content { display: none; }
.w-collapse__header { cursor: pointer; }

/* Реферальная пара: две ладони-курсора и монета между ними */
.duo { align-items: center; display: flex; justify-content: center; gap: var(--spacing-8); }
.duo__hand { display: block; height: auto; width: 33%; }
.duo__hand_mirror { transform: scaleX(-1); }
.duo__coin { display: block; height: auto; width: 30%; }

/* Кольцевая диаграмма токеномики */
.donut { display: block; height: auto; margin: 0 auto; max-width: 280px; width: 100%; }
.donut-legend { display: flex; flex-direction: column; gap: var(--spacing-12); list-style: none; margin: 0; padding: 0; }
.donut-legend__item { align-items: center; display: flex; gap: var(--spacing-12); }
.donut-legend__swatch { border-radius: var(--rounding-4); flex: none; height: var(--spacing-16); width: var(--spacing-16); }
.donut-legend__label { flex: 1; font-size: var(--font-body-font-size); line-height: var(--font-body-line-height); }
.donut-legend__value {
  font-family: var(--l-display-hero-font-family);
  font-size: var(--font-display-body-font-size);
  font-weight: var(--font-decorative-font-weight);
}

/* ==========================================================================
   ГЕРОЙ: МОНЕТЫ ВОКРУГ МАСКОТА
   --------------------------------------------------------------------------
   Раньше поверх кота лежала одна картинка coin-orbit.svg с тремя монетами
   внутри. Выглядело случайно: монеты не читались как объёмная сцена, а
   крупная закрывала грудь маскота.

   Теперь это три отдельные монеты с разной глубиной:

     _far   — за спиной, ниже маскота по z, мельче и размыта;
     _mid   — перед маскотом, средняя;
     _near  — перед маскотом, крупная, ближе всех к зрителю.

   Каждая парит со своей скоростью и фазой — получается параллакс,
   а не синхронное покачивание тремя одинаковыми объектами.
   ========================================================================== */

/* Коробка сцены повторяет габарит маскота. Без неё проценты монет
   считались бы от колонки грида, а она меняет ширину вместе с текстом —
   монеты то раздувались, то съёживались. */
.hero-scene {
  position: relative;
  width: min(320px, 82%);
}

@media (min-width: 1024px) { .hero-scene { width: min(360px, 100%); } }
@media (min-width: 1440px) { .hero-scene { width: min(420px, 100%); } }

.hero-scene .hero-art__mascot { width: 100%; }

.hero-coin {
  display: block;
  height: auto;
  pointer-events: none;
  position: absolute;
  user-select: none;
}

/* Дальняя: за маскотом. Размытие и пониженная непрозрачность делают
   глубину, без них она читается как просто маленькая монета сбоку. */
.hero-coin_far {
  filter: blur(2px);
  left: -6%;
  opacity: 0.7;
  top: 14%;
  width: 30%;
  z-index: 0;
}

/* Средняя: перед маскотом, у правого плеча */
.hero-coin_mid {
  right: -8%;
  top: 26%;
  width: 38%;
  z-index: 3;
}

/* Ближняя: крупная, внизу по центру-слева, чуть повёрнута */
.hero-coin_near {
  bottom: 4%;
  left: 8%;
  width: 56%;
  z-index: 3;
}

@media (min-width: 1024px) {
  .hero-coin_far  { left: -10%; top: 12%; width: 32%; }
  .hero-coin_mid  { right: -12%; top: 24%; width: 40%; }
  .hero-coin_near { bottom: 2%; left: 4%; width: 58%; }
}

/* Параллакс: чем ближе монета, тем шире её ход.
   Наклон у ближней — чтобы сцена не выглядела выстроенной по линейке. */
.hero-coin_far  { --p-float-lift: -8px; }
.hero-coin_mid  { --p-float-lift: -14px; }
.hero-coin_near { --p-float-lift: -20px; --p-float-tilt: -6deg; }