/*
 * Обновление жестом «потянуть вниз» и неподвижные шапки (js/n1-ptr.js).
 * Разметку знака создаёт модуль: свои теги neo-ptr*, чтобы правила вида
 * «… > div > div» с чужих экранов их не задевали.
 * Переменные ставит модуль: --n1ptr-ct (отступ прокрутки сверху),
 * --n1ptr-pl/-pr (боковые отступы), --n1ptr-bh (где начинается содержимое),
 * --n1ptr-bg (цвет фона), --n1ptr-ht (родное место шапки), --n1ptr-cs (поправка
 * прилипания держателя, обычно 0), --n1ptr-dur и --n1ptr-ease (переход рёбер),
 * --n1ptr-faza (с какого места огонёк продолжает круг у перерисованного экрана).
 */

/* Шапка вкладки прилипает РОВНО на своём месте (top = её отступ в прокрутке),
   поэтому не двигается никогда: ни при прокрутке, ни при оттягивании.
   Выше подложки (30), ниже навбара (1000) и всех экранов. */
.n1ptr-head {
  position: sticky !important;
  top: var(--n1ptr-ht, 0px) !important;
  z-index: 31 !important;
}

/* Держатель: первый в прокрутке, нулевой высоты, прилипает к своему месту —
   подложка и знак не уезжают вместе с прокруткой. */
neo-ptr.n1ptr {
  display: block;
  position: sticky;
  top: var(--n1ptr-cs, 0px);   /* от края содержимого прокрутки: держатель и так первый */
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  z-index: 30;
  pointer-events: none;
  --n1ptr-lime: var(--n1-lime, #b2fe12);
}
neo-ptr.n1ptr > * { display: block; position: absolute; pointer-events: none; }

/* Подложка цвета фона: от верха экрана до начала содержимого. Содержимое
   уходит под шапку и не светится под часами. Только у вкладок. */
neo-ptr.n1ptr > neo-ptr-bd {
  display: none;
  left: calc(-1 * var(--n1ptr-pl, 0px));
  right: calc(-1 * var(--n1ptr-pr, 0px));
  top: calc(-1 * var(--n1ptr-ct, 0px));
  height: var(--n1ptr-bh, 0px);
  background: var(--n1ptr-bg, #262626);
  z-index: 2;
}
/* Мягкий край под подложкой: виден, только когда под шапкой есть содержимое. */
neo-ptr.n1ptr > neo-ptr-fade {
  display: none;
  left: calc(-1 * var(--n1ptr-pl, 0px));
  right: calc(-1 * var(--n1ptr-pr, 0px));
  top: calc(var(--n1ptr-bh, 0px) - var(--n1ptr-ct, 0px));
  height: 18px;
  background: linear-gradient(to bottom, var(--n1ptr-bg, #262626), rgba(38, 38, 38, 0));
  opacity: 0;
  transition: opacity .22s ease;
  z-index: 2;
}
neo-ptr.n1ptr--head > neo-ptr-bd,
neo-ptr.n1ptr--head > neo-ptr-fade { display: block; }
neo-ptr.n1ptr.is-under > neo-ptr-fade { opacity: 1; }

/* Знак: в зазоре между шапкой и содержимым, выходит из-под подложки. */
neo-ptr.n1ptr > neo-ptr-ind {
  left: 50%;
  top: 0;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  z-index: 1;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
neo-ptr-pop {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  transition: opacity .16s ease;
}
/* Список пролистали, пока идёт обновление: знак не висит над содержимым. */
neo-ptr.n1ptr.is-skryt neo-ptr-pop { opacity: 0; }
neo-ptr-pop svg { display: block; width: 100%; height: 100%; overflow: visible; }
neo-ptr-pop path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Рёбра посылки: пока тянешь — светлые, дорисовываются долей пути.
   Толщины по старшинству: контур, рёбра, лента. Прозрачность — у группы:
   у каждого ребра своя дала бы светлые точки на стыках. */
.n1ptr .n1ptr-rebra { opacity: .6; transition: opacity .16s ease; }
.n1ptr .n1ptr-e {
  stroke: #fff;
  stroke-width: 1.8;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke .16s ease;
}
.n1ptr .n1ptr-y,
.n1ptr .n1ptr-t { stroke-width: 1.5; }
/* Порог пройден (лента сошлась) — посылка лаймовая: отпустишь, и обновится. */
.n1ptr.is-armed .n1ptr-rebra,
.n1ptr.is-done .n1ptr-rebra { opacity: 1; }
.n1ptr.is-armed .n1ptr-e,
.n1ptr.is-done .n1ptr-e { stroke: var(--n1ptr-lime); }
/* Возврат без обновления: рёбра стираются вместе с уходом знака. Кривую
   модуль подменяет (--n1ptr-ease), когда продолжает возврат с середины. */
.n1ptr.is-anim .n1ptr-e {
  transition: stroke .16s ease, stroke-dashoffset var(--n1ptr-dur, 0ms) var(--n1ptr-ease, cubic-bezier(.32, .72, 0, 1));
}

.n1ptr .n1ptr-kryshka,
.n1ptr .n1ptr-lenta { fill: var(--n1ptr-lime); stroke: none; opacity: 0; }
.n1ptr .n1ptr-ogon,
.n1ptr .n1ptr-hvost { stroke: var(--n1ptr-lime); opacity: 0; }
.n1ptr .n1ptr-ogon { stroke-dasharray: .16 .84; stroke-width: 2.4; }
.n1ptr .n1ptr-hvost { stroke-dasharray: .34 .66; stroke-width: 1.8; }

/* Обновление: контур приглушён, по нему по часовой бежит огонёк с хвостом. */
.n1ptr.is-busy .n1ptr-rebra { opacity: .34; }
.n1ptr.is-busy .n1ptr-ogon { opacity: 1; animation: n1ptrOgon .9s linear infinite; }
.n1ptr.is-busy .n1ptr-hvost { opacity: .45; animation: n1ptrHvost .9s linear infinite; }
/* Экран перерисовали посреди обновления: огонёк продолжает круг с того же
   места (модуль ставит отрицательную задержку). */
.n1ptr.is-busy .n1ptr-ogon,
.n1ptr.is-busy .n1ptr-hvost { animation-delay: var(--n1ptr-faza, 0ms); }
@keyframes n1ptrOgon { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }
/* хвост на .18 позади огонька, передний край общий */
@keyframes n1ptrHvost { from { stroke-dashoffset: .18; } to { stroke-dashoffset: -.82; } }

/* Готово: посылка лаймовая, крышка вспыхивает и гаснет, лента заливается
   и остаётся — посылка запечатана, как на её 3D-значке. */
.n1ptr.is-done .n1ptr-kryshka { animation: n1ptrKryshka .5s ease-out forwards; }
.n1ptr.is-done .n1ptr-lenta { animation: n1ptrLenta .42s ease-out forwards; }
@keyframes n1ptrKryshka { 0% { opacity: 0; } 35% { opacity: .32; } 100% { opacity: 0; } }
@keyframes n1ptrLenta { from { opacity: 0; } to { opacity: 1; } }
/* Экран перерисовали во время «готово» или после: у нового знака вспышка
   и заливка идут дальше с того же места (модуль ставит отрицательную
   задержку), рёбра встают в свой цвет без перехода (is-srazu — на один
   пересчёт стилей). */
.n1ptr.is-done .n1ptr-kryshka,
.n1ptr.is-done .n1ptr-lenta { animation-delay: var(--n1ptr-gfaza, 0ms); }
.n1ptr.is-srazu .n1ptr-e,
.n1ptr.is-srazu .n1ptr-rebra { transition: none; }

/* Щелчок знака на пороге и в конце. */
.n1ptr.is-pop neo-ptr-pop { animation: n1ptrPop .3s cubic-bezier(.3, .7, .4, 1); }
@keyframes n1ptrPop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* Кто выключил анимации: без бега, вспышек и щелчков; обновление — ровная
   лаймовая посылка, готово — сразу с залитой лентой. Сдвиги модуль тогда
   делает без переходов. */
@media (prefers-reduced-motion: reduce) {
  .n1ptr.is-busy .n1ptr-ogon,
  .n1ptr.is-busy .n1ptr-hvost { animation: none; opacity: 0; }
  .n1ptr.is-busy .n1ptr-rebra { opacity: .75; }
  .n1ptr.is-done .n1ptr-kryshka { animation: none; opacity: 0; }
  .n1ptr.is-done .n1ptr-lenta { animation: none; opacity: 1; }
  .n1ptr.is-pop neo-ptr-pop { animation: none; }
  .n1ptr .n1ptr-e,
  .n1ptr .n1ptr-rebra,
  .n1ptr.is-anim .n1ptr-e,
  neo-ptr-pop,
  neo-ptr.n1ptr > neo-ptr-fade { transition: none; }
}