/* ══════════════════════════════════════════════════════════════════════════
   БензоЯкутск · общий слой движения для страниц сайта (/, /reklama)

   Здесь три вещи, и все три — про один образ: бак, который наполняется.
     1. Полоса прокрутки — столбик топлива, а не серая системная планка.
     2. Индикатор прочитанного: на компьютере канистра в углу доливается по
        мере прокрутки, на телефоне — тонкая топливная линия сверху.
     3. Появление блоков при прокрутке. Без JavaScript всё видно сразу:
        прячем только когда скрипт точно работает (класс .fx на <html>).

   Анимируются только transform и opacity — их считает видеокарта, и
   страница не дёргается даже на дешёвом телефоне.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Полоса прокрутки ─────────────────────────────────────────────────
   Firefox умеет только цвета, Chrome/Edge/Safari — форму. На телефонах
   полоса системная и поверх контента: там её роль играет линия сверху.  */
html { scrollbar-color: #1f8fd6 #030a1c; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track {
  background: #030a1c;
  box-shadow: inset 1px 0 0 #0f2449;
}
::-webkit-scrollbar-thumb {
  /* Столбик топлива: светлая поверхность сверху, густой цвет у дна */
  background: linear-gradient(180deg, #8beeff 0%, #29d3ff 18%, #0f86cc 100%);
  border: 3px solid #030a1c;
  border-radius: 10px;
  background-clip: padding-box;
  min-height: 48px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #b6f4ff 0%, #4fdcff 18%, #1797dd 100%);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: #030a1c; }

/* ── 2а. Топливная линия сверху (телефон и узкие окна) ───────────────── */
.fuelline {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #0f86cc, #29d3ff 70%, #8beeff);
  box-shadow: 0 0 12px rgba(41, 211, 255, .55);
  will-change: transform;
}

/* ── 2б. Канистра в углу (широкие экраны с мышью) ──────────────────────
   Та же канистра, что на заставке: человек видел её при загрузке, и здесь
   она продолжает ту же историю — бак наполняется, пока вы читаете.
   Нажатие возвращает наверх.                                             */
.fuelcan {
  position: fixed; right: 22px; bottom: 22px; z-index: 45;
  width: 54px; height: 66px; padding: 0; border: 0; background: none;
  cursor: pointer; display: none;
  opacity: 0; transform: translateY(14px) scale(.92);
  transition: opacity .35s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
}
.fuelcan.on { opacity: 1; transform: none; }
.fuelcan:hover { transform: translateY(-3px); }
.fuelcan svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fuelcan .shell { fill: rgba(7, 21, 58, .82); stroke: #adc3e8; stroke-width: 4; stroke-linejoin: round; }
.fuelcan .cap { fill: none; stroke: #adc3e8; stroke-width: 4; stroke-linejoin: round; }
.fuelcan .rib { fill: none; stroke: #6d86b4; stroke-width: 2.4; opacity: .45; stroke-linecap: round; }
.fuelcan .lvl { transform: translateY(118px); will-change: transform; }
.fuelcan .surf { animation: canSlosh 2.4s linear infinite; animation-play-state: paused; }
.fuelcan.moving .surf { animation-play-state: running; }
.fuelcan.full .shell { stroke: #29d3ff; }
.fuelcan .tip {
  position: absolute; right: 64px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font: 700 12px/1 "Manrope", sans-serif; color: #eef4ff;
  background: #0c2150; border: 1px solid #16305f; border-radius: 999px; padding: 7px 11px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.fuelcan:hover .tip, .fuelcan:focus-visible .tip { opacity: 1; }
.fuelcan:focus-visible { outline: 2px solid #29d3ff; outline-offset: 4px; border-radius: 12px; }
@keyframes canSlosh { from { transform: translateX(0); } to { transform: translateX(-30px); } }

@media (min-width: 900px) and (hover: hover) {
  .fuelcan { display: block; }
  .fuelline { display: none; }
}

/* ── 3. Появление блоков ─────────────────────────────────────────────────
   Один и тот же мягкий подъём для всего, что помечено data-rv. Задержка
   внутри группы ставится скриптом: соседи выходят друг за другом, как
   цифры на табло колонки, а не все разом.                               */
.fx [data-rv] {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2, .75, .2, 1);
  transition-delay: var(--rv-d, 0ms);
}
.fx [data-rv].in { opacity: 1; transform: none; }
.fx [data-rv="fade"] { transform: none; }
.fx [data-rv="left"] { transform: translate3d(-26px, 0, 0); }
.fx [data-rv="left"].in { transform: none; }

/* Заголовок первого экрана выходит по словам, из-под «маски» */
.fx .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.fx .split .w > span {
  display: inline-block; transform: translate3d(0, 105%, 0);
  transition: transform .9s cubic-bezier(.2, .8, .15, 1);
  transition-delay: calc(var(--i, 0) * 55ms + 120ms);
}
.fx .split.in .w > span { transform: none; }

/* Табло: цифры «загораются», как индикатор на колонке */
.fx .ignite .v { opacity: .15; }
.fx .ignite.in .v { animation: ignite .9s steps(1, end) forwards; animation-delay: var(--rv-d, 0ms); }
@keyframes ignite {
  0% { opacity: .15; } 18% { opacity: 1; } 26% { opacity: .35; } 40% { opacity: 1; }
  48% { opacity: .6; } 60%, 100% { opacity: 1; }
}

/* Полоски месяцев «наливаются», как уровень в баке */
.fx .fill-x { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--rv-d, 0ms) + 200ms); }
.fx .fill-y { transform: scaleY(0); transform-origin: 50% 100%; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--rv-d, 0ms) + 200ms); }
.fx .in .fill-x, .fx .in.fill-x { transform: scaleX(1); }
.fx .in .fill-y, .fx .in.fill-y { transform: scaleY(1); }

/* Главная кнопка: блик проходит по ней раз в несколько секунд — только у
   той, что в первом экране, и только пока человек ничего не нажал. */
.btn-main { position: relative; overflow: hidden; isolation: isolate; }
.btn-main.sheen::after {
  content: ""; position: absolute; inset: -2px auto -2px -40%; width: 34%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg) translateX(0); animation: sheen 5.5s ease-in-out 1.6s infinite;
}
@keyframes sheen { 0%, 62% { transform: skewX(-18deg) translateX(0); } 100% { transform: skewX(-18deg) translateX(520%); } }
@media (hover: hover) {
  .btn { transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease; }
  .btn-main:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(41, 211, 255, .35), 0 0 0 1px rgba(41, 211, 255, .4); }
  .btn-ghost:hover { transform: translateY(-2px); border-color: #29d3ff; }
}

/* Живая точка: расходящееся кольцо — «это данные прямо сейчас» */
.live-ring { position: relative; }
.live-ring::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 2px solid currentColor; opacity: 0; animation: ring 2.4s ease-out infinite;
}
@keyframes ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.8); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fx [data-rv], .fx .split .w > span, .fx .fill-x, .fx .fill-y { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fx .ignite .v { opacity: 1; animation: none !important; }
  .btn-main.sheen::after, .live-ring::after { display: none; }
  .fuelcan .surf { animation: none; }
}