/* LAND GTA — анимации при прокрутке. Логика в assets/js/anim.js.
   Элемент получает класс .a (исходное состояние) и .in (когда виден).
   --i — номер элемента среди соседей, для каскадной задержки.
   Варианты: zoom-neon (основной) = наезд + неон, zoom, neon, none. */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --stagger: 70ms;
}

/* ---------- Полоса прогресса прокрутки ---------- */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-deep), var(--blue-hi)); transform: scaleX(0); transform-origin: 0 50%; box-shadow: 0 0 8px var(--blue); }

/* ---------- Наезд камеры: блоки приближаются из размытия ---------- */
:is([data-anim="zoom"], [data-anim="zoom-neon"]) .a {
  opacity: 0; transform: scale(.88); filter: blur(10px);
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out), filter .9s ease;
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
:is([data-anim="zoom"], [data-anim="zoom-neon"]) .a.in { opacity: 1; transform: none; filter: none; }

/* ---------- Неон: появление без сдвига (только для чистого варианта) ---------- */
[data-anim="neon"] .a { opacity: 0; transition: opacity .5s ease; transition-delay: calc(var(--i, 0) * var(--stagger)); }
[data-anim="neon"] .a.in { opacity: 1; }

/* ---------- Неон: вспышка заголовков и рамок ---------- */
:is([data-anim="neon"], [data-anim="zoom-neon"]) :is(.in :is(h1, h2, .hero-word), .in:is(h1, h2, .page-title)) {
  animation: neon-flicker 1.4s linear both;
}
/* в сочетании с наездом вспышка начинается, когда блок уже почти в фокусе */
[data-anim="zoom-neon"] :is(.in :is(h1, h2, .hero-word), .in:is(h1, h2, .page-title)) { animation-delay: calc(var(--i, 0) * var(--stagger) + .25s); }

:is([data-anim="neon"], [data-anim="zoom-neon"]) .in:is(.tile, .spot, .pack, .srv, .steps > li, .pay, .gun-stage, .car, .skin-card, .board, .price-list) {
  animation: neon-edge 1.6s ease-out both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
[data-anim="zoom-neon"] .in:is(.tile, .spot, .pack, .srv, .steps > li, .pay, .gun-stage, .car, .skin-card, .board, .price-list) {
  animation-delay: calc(var(--i, 0) * var(--stagger) + .35s);
}

@keyframes neon-flicker {
  0%, 12%, 16%, 30% { text-shadow: none; opacity: .35; }
  10%, 14%, 22%, 40% { opacity: 1; text-shadow: 0 0 6px var(--blue-hi), 0 0 22px var(--blue), 0 0 48px var(--blue); }
  100% { opacity: 1; text-shadow: 0 0 1px rgba(90, 163, 255, .5), 0 0 24px rgba(49, 139, 255, .35); }
}
@keyframes neon-edge {
  0% { box-shadow: inset 0 0 0 1px rgba(90, 163, 255, 0), 0 0 0 rgba(49, 139, 255, 0); }
  30% { box-shadow: inset 0 0 0 1px var(--blue-hi), 0 0 40px rgba(49, 139, 255, .55); }
  100% { box-shadow: inset 0 0 0 1px rgba(90, 163, 255, .18), 0 0 0 rgba(49, 139, 255, 0); }
}

/* ---------- Без анимации ---------- */
[data-anim="none"] .a { opacity: 1; transform: none; filter: none; }

/* ---------- Панель выбора варианта (режим просмотра) ---------- */
.anim-panel {
  position: fixed; left: 16px; bottom: 16px; z-index: 70;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: rgba(5, 13, 28, .96); border: 1px solid var(--line-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  font-size: 14px;
}
.anim-panel label { color: var(--muted); font: 600 12px var(--mono); text-transform: uppercase; }
.anim-panel select { background: var(--night); color: var(--text); border: 1px solid var(--line-2); padding: 8px 10px; font: 600 14px var(--body); min-height: 40px; }
.anim-panel button { background: none; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; width: 32px; height: 32px; }
.anim-panel button:hover { color: var(--text); }
@media (max-width: 860px) { .anim-panel { bottom: 76px; left: 8px; right: 8px; } .anim-panel a { display: none; } .anim-panel select { flex: 1; } }

@media (prefers-reduced-motion: reduce) {
  .a { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .a * { animation: none !important; }
}