/* Потянуть вниз — обновить (js/pull.js). Зверёк выглядывает из-за верхнего края в просвет, который оставляет
   уехавшая страница: спит с «z», дотянул — просыпается, грузится — бежит в пыли, готово — прыжок и вверх.
   Без подложки: стоит прямо на фоне страницы, цвета — его токены, идёт за темой сам. */

/* The browser's own pull-to-reload would reload the whole page over ours (Chrome on Android). */
@media (pointer: coarse) {
  html, body { overscroll-behavior-y: none; }
}

.pull {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 50%;
  z-index: var(--z-overlay);
  width: 44px;
  height: 44px;
  translate: -50% calc(-100% - 4px + var(--pull-y, 0px));
  pointer-events: none;
  visibility: hidden;
}
.pull.is-pulling, .pull.is-back, .pull.is-busy, .pull.is-done { visibility: visible; }
.pull.is-back { transition: translate 420ms var(--ease-spring-soft, var(--ease-out)); }

.pull__pet { display: block; line-height: 0; transform-origin: 50% 100%; }

/* Asleep while pulled: a slow sway, two «z» drift up from his head. */
.pull.is-pulling:not(.is-armed) .pull__pet { animation: pull-sway 1.6s ease-in-out infinite; }
.pull__z {
  position: absolute;
  top: -2px;
  right: -14px;
  display: none;
  font: 800 11px/1 var(--font-ui);
  color: var(--text-2);
}
.pull__z i { position: absolute; font-style: normal; opacity: 0; animation: pull-z 1.6s ease-out infinite; }
.pull__z i:nth-child(2) { animation-delay: 0.8s; font-size: 8px; }
.pull.is-pulling:not(.is-armed) .pull__z { display: block; }

/* Far enough: he wakes with a hop and waits, bobbing, as long as the finger holds. */
.pull.is-armed .pull__pet { animation: pull-hop 380ms var(--ease-out), pull-wait 1.1s ease-in-out 380ms infinite; }

/* Running for the data: the legs run in the SVG, the body jogs, pixel dust flies from under his feet. */
.pull.is-busy .pull__pet { animation: pull-jog 260ms steps(2, jump-none) infinite; }
.pull__dust { position: absolute; left: 50%; bottom: 1px; display: none; }
.pull__dust i {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--text-3, var(--text-2));
  opacity: 0;
  animation: pull-dust-l 520ms steps(4, jump-none) infinite;
}
.pull__dust i:nth-child(2) { animation-name: pull-dust-r; animation-delay: 130ms; }
.pull__dust i:nth-child(3) { animation-delay: 260ms; width: 2px; height: 2px; }
.pull__dust i:nth-child(4) { animation-name: pull-dust-r; animation-delay: 390ms; width: 2px; height: 2px; }
.pull.is-busy .pull__dust { display: block; }

/* Done: one big hop, then he rides back up with the page. */
.pull.is-done .pull__pet { animation: pull-hop 420ms var(--ease-out); }

@keyframes pull-sway { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
@keyframes pull-z {
  0% { opacity: 0; translate: 0 0; }
  25% { opacity: 1; }
  100% { opacity: 0; translate: 6px -14px; }
}
@keyframes pull-hop {
  0% { translate: 0 0; scale: 1 1; }
  30% { translate: 0 -9px; scale: 0.92 1.1; }
  60% { translate: 0 0; scale: 1.08 0.9; }
  100% { translate: 0 0; scale: 1 1; }
}
@keyframes pull-wait { 50% { translate: 0 -2px; } }
@keyframes pull-jog { 0% { translate: 0 0; } 100% { translate: 0 -2px; } }
@keyframes pull-dust-l {
  0% { opacity: 0.9; translate: -6px 0; }
  100% { opacity: 0; translate: -22px -6px; }
}
@keyframes pull-dust-r {
  0% { opacity: 0.9; translate: 3px 0; }
  100% { opacity: 0; translate: 19px -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .pull.is-back { transition: none; }
  .pull .pull__pet, .pull__z i, .pull__dust i { animation: none !important; }
  .pull__z i:first-child { opacity: 1; }
}
@media print { .pull { display: none; } }