/* ============================================================================
   ISELLPOWER · hband.css  (v320)
   Горизонтальная лента: «В дорогу» → «Абсолютная темнота» → «Искусственный
   интеллект». Три раздела лежат в одной дорожке; пока лента держится на
   экране, дорожка едет справа налево — обычной прокруткой колеса, без
   перехвата. Пара к assets/hband.js.

   Устройство. Внешняя коробка .hband высотой в N экранов даёт запас
   прокрутки. Внутри .hb-stage прилипает к верху на все эти экраны, а .hb-track
   сдвигается по X. Сдвиг считает скрипт и пишет одной трансформацией — это
   работа видеокарты, раскладка не пересчитывается.

   Все правила живут под html.hb-on: если скрипт не загрузился, разделы
   остаются обычными и просто идут друг за другом сверху вниз.
   ============================================================================ */

html.hb-on .hband{
  position:relative;
  /* высоту ставит скрипт: N экранов, где N — число разделов в ленте */
}

html.hb-on .hb-stage{
  position:-webkit-sticky; position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;              /* обрезка на самом липком слое стикинг не ломает */
  background:#050506;
  /* скругление и тень наезда живут здесь, а не на .hband: положить overflow
     на внешнюю коробку нельзя — она станет для .hb-stage полосой прокрутки
     и прилипание сломается */
  border-radius:
    calc(var(--tsn-r, 0px) * (1 - var(--in, 1)))
    calc(var(--tsn-r, 0px) * (1 - var(--in, 1))) 0 0;
}

html.hb-on .hb-track{
  display:flex;
  height:100%;
  will-change:transform;
}

/* Панель = ровно один экран. Раздел внутри перестаёт быть высоким блоком
   и становится кадром. */
html.hb-on .hb-track > section{
  flex:0 0 100vw;
  width:100vw;
  height:100%;
  min-height:0 !important;
  margin:0 !important;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  /* внутри ленты собственный z-index разделов не нужен и мешает */
  z-index:auto !important;
}
html.hb-on .hb-track > section > .wrap{width:100%}

/* Содержимое подгоняется по высоте: разделы верстались под свободную высоту,
   а тут у них ровно экран. Множитель считает скрипт и кладёт в --hbk, ужимая
   от центра — состав и кегли остаются авторскими. */
html.hb-on .hb-track > section .hb-fit{
  transform:scale(var(--hbk,1));
  transform-origin:50% 50%;
}

/* «В дорогу»: корпус и текст в этом разделе позиционируются от секции,
   поэтому достаточно снять вертикальные отступы */
html.hb-on #travel{padding:0 !important}
html.hb-on #travel .travel-inner{padding-top:0;padding-bottom:0}

/* «Абсолютная темнота» */
html.hb-on #obsidian{padding:0 !important}
html.hb-on #obsidian .obsi-inner{padding-top:0;padding-bottom:0}

/* «Искусственный интеллект» */
html.hb-on #ai{padding:0 !important}

/* Подсказка «листайте дальше» — тонкая полоса прогресса по низу ленты.
   Показывает, сколько ещё ехать, иначе непонятно, почему страница «стоит». */
html.hb-on .hb-bar{
  position:absolute;left:0;right:0;bottom:0;height:2px;z-index:8;
  background:rgba(255,255,255,.08);pointer-events:none
}
html.hb-on .hb-bar i{
  display:block;height:100%;width:100%;
  transform-origin:0 50%;
  transform:scaleX(var(--hbp,0));
  background:linear-gradient(90deg,var(--accent),var(--accent2))
}

/* ── Телефон ──────────────────────────────────────────────────────────────
   Горизонтальную ленту на узком экране не делаем: раздел, ужатый до высоты
   экрана телефона, становится нечитаемым. Разделы просто идут сверху вниз,
   как и раньше. */
@media(max-width:860px){
  html.hb-on .hband{height:auto !important}
  html.hb-on .hb-stage{position:static;height:auto;overflow:visible;border-radius:0}
  html.hb-on .hb-track{display:block;transform:none !important;width:auto}
  html.hb-on .hb-track > section{
    flex:none;width:auto;height:auto;display:block;overflow:hidden
  }
  html.hb-on .hb-track > section .hb-fit{transform:none}
  /* v387 · ПРОБЕЛЫ МЕЖДУ РАЗДЕЛАМИ УЖАТЫ. Замер на 390x844: от кнопки
     «Origin Mini подробнее» до плашки «Специальная серия» было 154px, от
     кнопки «Obsidian подробнее» до плашки «Искусственный интеллект» — 192px.
     Каждый раздел давал по 90px с обеих сторон, и они складывались. Верхние
     90px у «В дорогу» оставляем (сверху к нему подходит «Производительность»),
     режем только стыки: низ travel, обе стороны Obsidian (они заданы в
     index.html — там селектор тяжелее) и верх AI. */
  html.hb-on #travel,html.hb-on #obsidian{padding:90px 0 !important}
  html.hb-on #travel{padding-bottom:52px !important}
  html.hb-on #ai{padding:14px 0 90px !important}
  html.hb-on .hb-bar{display:none}
}

/* ── «Меньше движения»: лента разворачивается в обычную колонку ── */
@media(prefers-reduced-motion:reduce){
  html.hb-on .hband{height:auto !important}
  html.hb-on .hb-stage{position:static;height:auto;overflow:visible;border-radius:0}
  html.hb-on .hb-track{display:block;transform:none !important;width:auto}
  html.hb-on .hb-track > section{flex:none;width:auto;height:auto;display:block}
  html.hb-on .hb-track > section .hb-fit{transform:none}
  html.hb-on #travel,html.hb-on #obsidian{padding:90px 0 !important}
  html.hb-on #travel{padding-bottom:52px !important}
  html.hb-on #ai{padding:14px 0 90px !important}
  html.hb-on .hb-bar{display:none}
}