/* Кружок обновления. Выезжает сверху по центру, пока тянут экран вниз.

   Живёт в каркасе, а не в экране: экран прокручивается, и кружок
   уехал бы вместе с содержимым. Нажатия пропускает сквозь себя —
   он показывает состояние, а не ждёт касания. */

.pull {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 35;
  width: var(--sp-10);
  height: var(--sp-10);
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 6px 20px var(--sheet-shadow);
  transform: translate(-50%, 0);
  opacity: 0;
  pointer-events: none;
}

/* Дотянули до срабатывания — кольцо золотится целиком. Это ответ
   на вопрос «уже хватит или ещё тянуть». */
.pull.is-ready { border-color: var(--accent-dim); }

.pull__spin {
  width: 52%;
  height: 52%;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
}

.pull.is-ready .pull__spin { border-top-color: var(--accent-hi); }

/* Отпустили — кружок крутится сам, пока страница перечитывается. */
.pull.is-live .pull__spin {
  animation: pull-spin .7s linear infinite;
}

@keyframes pull-spin {
  to { transform: rotate(360deg); }
}