/* Блок «86 криптовалют» в черной части главной: надзаголовок, крупное число, подпись и три ряда
   монет, которые бесконечно и плавно едут в разные стороны. Разметка: src/components/coins-marquee.mjs.
   Движение ведет site.js (data-coins): копирует ряд под ширину экрана и двигает копии через
   Web Animations, только transform (GPU, 120 Гц, без пересчета раскладки). Главные монеты
   (USDT, GRAM, TRX, SOL, BTC, ETH) в первом кадре стоят в центре. Без скрипта ряды стоят по центру.
   При «уменьшить движение» в системе ряды едут медленно, без покачивания: неподвижный кадр
   выглядит так же собранно, как живой. Классы со своей приставкой: .coin занят шагом «Пополните кошелек». */

.coins {
  --coin: 60px;          /* монета вместе со стеклянным ободком */
  --coin-ring: 4px;      /* толщина ободка */
  --coin-gap: 12px;      /* между монетами в ряду */
  --coin-row-gap: 12px;  /* между рядами */
  --coins-fade: 15%;     /* мягкое затухание у краев */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}
/* мягкое синее свечение за рядами: монеты всплывают из глубины, а не из плоского черного.
   Стоит на секции (ряды под маской срезали бы его краем), центр на середине рядов,
   closest-side гасит свет до нуля раньше края, поэтому полос и ступенек нет */
.coins::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: calc(var(--sec-y) + 1.5 * var(--coin) + var(--coin-row-gap) + 10px);
  width: min(1700px, 190%);
  height: calc(var(--coin) * 5); /* половина высоты меньше расстояния до низа секции: свет гаснет до края */
  transform: translate(-50%, 50%);
  background: radial-gradient(closest-side, rgb(52 123 246 / .24), rgb(52 123 246 / .08) 52%, rgb(52 123 246 / 0));
  pointer-events: none;
}

/* ---------- Заголовок ---------- */
.coins-head { text-align: center; }
.coins-eyebrow { margin-bottom: 18px; color: var(--blue-hi); }
.coins-title { margin: 0; font-weight: 500; }
/* число крупно, как у Tangem: вес 500, плотный трекинг, мягкий спуск от белого к серому */
.coins-num {
  display: block;
  width: max-content;
  margin: 0 auto;
  /* отрицательный трекинг сдвигает последнюю цифру за край строки, а градиент рисуется только
     внутри строки: справа запас, чтобы «6» не обрезалась; слева меньше, чтобы число стояло по центру */
  padding: 0 .09em 0 .025em;
  font-size: clamp(148px, 46vw, 196px);
  line-height: .8;
  letter-spacing: -.065em;
  color: #fff;
  background: linear-gradient(180deg, #fff 18%, #c7c9d1 58%, #6f7380 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.coins-cap {
  display: block;
  margin-top: 10px;
  font-size: clamp(34px, 9.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.045em;
  color: var(--s-fg);
}
.coins-lead { margin: 18px auto 0; max-width: 21em; text-wrap: balance; }
.coins-lead b { display: block; }

/* ---------- Ряды ---------- */
.coins-marquee {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* ряд шириной с блок, а не с дорожку монет */
  gap: var(--coin-row-gap);
  max-width: 2400px;
  margin: 44px auto 0;
  padding: 10px 0; /* место для покачивания монет */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--coins-fade), #000 calc(100% - var(--coins-fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--coins-fade), #000 calc(100% - var(--coins-fade)), transparent);
}
.coins-row { position: relative; }
.coins-track {
  display: flex;
  width: max-content;
  /* без скрипта: ряд по центру, второй ряд сдвинут на полмонеты, как соты */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.coins-row--rev .coins-track { transform: translateX(calc(-50% + (var(--coin) + var(--coin-gap)) / 2)); }
/* со скриптом дорожку ставит site.js, копии ряда едут через Web Animations */
.coins-marquee.is-live .coins-track { left: 0; transform: none; }
.coins-marquee.is-live .coins-set { will-change: transform; backface-visibility: hidden; }

.coins-set {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Монета: просто логотип, без ободков и бликов (просьба владельца) */
.coins-set > li {
  position: relative;
  flex: none;
  width: var(--coin);
  height: var(--coin);
  margin-right: var(--coin-gap); /* отступ у каждой монеты, а не gap: ширина ряда ровно шаг монеты на их число */
  transition: transform .5s var(--ease);
}
.coins-set svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
@media (hover: hover) and (pointer: fine) {
  .coins-set > li:hover { transform: scale(1.12); }
}

/* Живость: несколько монет плавно покачиваются, знак чуть поворачивается */
@keyframes coin-bob { from { transform: translate3d(0, -3px, 0); } to { transform: translate3d(0, 3px, 0); } }
@keyframes coin-tilt { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.coins-i--f1 { animation: coin-bob 3.4s var(--ease-io) infinite alternate; }
.coins-i--f1 svg { animation: coin-tilt 5.6s var(--ease-io) infinite alternate; }
.coins-i--f2 { animation: coin-bob 4.2s var(--ease-io) -1.6s infinite alternate; }
.coins-i--f2 svg { animation: coin-tilt 6.4s var(--ease-io) -3.1s infinite alternate-reverse; }
.coins-i--f3 { animation: coin-bob 3.8s var(--ease-io) -2.5s infinite alternate-reverse; }
.coins-i--f3 svg { animation: coin-tilt 4.8s var(--ease-io) -.9s infinite alternate; }
/* вне экрана покачивание на паузе (класс ставит site.js) */
.coins.is-off .coins-set > li, .coins.is-off .coins-set svg { animation-play-state: paused; }

/* ---------- Шире ---------- */
@media (min-width: 600px) {
  .coins { --coin: 68px; --coin-gap: 14px; --coin-row-gap: 14px; }
  .coins-marquee { margin-top: 52px; }
}
@media (min-width: 1024px) {
  .coins {
    --coin: 84px;
    --coin-ring: 5px;
    --coin-gap: 20px;
    --coin-row-gap: 20px;
    --coins-fade: 18%;
  }
  .coins-num { font-size: 248px; }
  .coins-cap { margin-top: 14px; }
  .coins-lead { margin-top: 22px; }
  .coins-marquee { margin-top: 64px; }
}

/* ---------- Без движения в системе: без покачивания и увеличения (медленный ход рядов в site.js) ---------- */
@media (prefers-reduced-motion: reduce) {
  .coins-set > li, .coins-set svg { animation: none !important; transition: none !important; }
  .coins-set > li:hover { transform: none; }
}