/* «Кошачья тропинка» — скролл-прогресс INGRIAFARM.
   Тонкая линия-маршрут у верхней кромки, по которой кот «прошагивает» страницу:
   по мере скролла позади ведущей лапки штампуются следы (попеременно
   левая/правая, с живым разбросом, носочками в сторону движения), затухающие
   по мере удаления, при скролле назад — растворяются. Ведущая лапка
   подпрыгивает в такт шагам. Продолжение мотива прелоадера «Кошачья подпись».
   Самодостаточный слой: пара к ingri-scrollprogress.js, без зависимостей,
   переносится на прод 1:1. Разметку целиком инжектит JS.
   Разделение ролей: JS владеет позицией/поворотом (--rot) и непрозрачностью
   следов; CSS — только «штамп»-баунс (--s) и переходы. */

.if-scrollprog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99990;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.if-scrollprog.is-visible {
  opacity: 1;
}

/* едва заметная подложка — «маршрут», по которому идут следы */
.if-scrollprog__track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(4, 0, 0, 0.08);
}

html.theme-dark .if-scrollprog__track {
  background: rgba(255, 255, 255, 0.09);
}

/* ------------------------------------------------------------------ */
/* Следы: позиция/поворот (--rot) и непрозрачность — из JS; здесь —     */
/* только «штамп»-баунс масштаба (--s) и его пружинистый переход        */
/* ------------------------------------------------------------------ */

.if-scrollprog__steps {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 22px;
}

.if-scrollprog__steps i {
  position: absolute;
  width: 12px;
  height: 12px;
  color: #040000;
  opacity: 0; /* JS выставляет реальную непрозрачность по расстоянию */
  --s: 1.5;
  --rot: 78deg;
  transform: scale(var(--s)) rotate(var(--rot));
  transform-origin: center;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.55, 0.5, 1),
    opacity 0.25s ease;
}

/* «штамп»: при появлении масштаб оседает 1.5 → 1 (поворот держит --rot) */
.if-scrollprog__steps i.is-on {
  --s: 1;
}

.if-scrollprog__steps i svg {
  display: block;
  width: 100%;
  height: 100%;
}

html.theme-dark .if-scrollprog__steps i {
  color: #ffffff;
}

/* ------------------------------------------------------------------ */
/* Ведущая лапка: фирменный чёрный (как пузыри/кнопки) — читается и на  */
/* оранжевой шапке, и на белом; приземлённая тень выделяет «живого»     */
/* кота на фоне плоских оставленных следов. Кликабельна — «наверх».     */
/* ------------------------------------------------------------------ */

.if-scrollprog__paw {
  position: absolute;
  top: 3px;
  left: -9px; /* центрируем 18px-лапку на кончике маршрута */
  width: 18px;
  height: 18px;
  color: #040000;
  filter:
    drop-shadow(0 2px 2px rgba(4, 0, 0, 0.28))
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
  pointer-events: auto;
  cursor: pointer;
  transition: scale 0.2s ease;
}

.if-scrollprog__paw:hover {
  scale: 1.25;
}

.if-scrollprog__paw svg {
  display: block;
  width: 100%;
  height: 100%;
}

html.theme-dark .if-scrollprog__paw {
  color: #ffffff;
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
}

@media (prefers-reduced-motion: reduce) {
  .if-scrollprog,
  .if-scrollprog__paw,
  .if-scrollprog__steps i {
    transition: none;
  }
}