/* Pull to refresh: an ember drops from the top, its ring fills as you pull,
   it glows when you've pulled far enough, and spins while every TV re-reads. */
html, body { overscroll-behavior-y: contain; } /* no browser reload under ours */
html { touch-action: manipulation; } /* no double-tap zoom anywhere */
.sr-only { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ptr {
  --p: 0; --pull: 0;
  position: fixed; left: 50%; top: calc(var(--safe-t) + var(--demo-bar, 0px) + 6px); z-index: 70; width: 44px; height: 44px; margin-left: -22px;
  display: grid; place-items: center; border-radius: 50%; pointer-events: none; opacity: 0;
  background: var(--body); border: 1px solid var(--body-edge); box-shadow: 0 10px 30px -10px #0008;
  transform: translateY(calc(var(--pull) * 1px - 52px)) rotate(calc(var(--p) * 270deg));
}
.ptr.show { opacity: 1; }
.ptr:not(.show) { transition: opacity .25s, transform .35s cubic-bezier(.2, .9, .2, 1); }
.ptr svg { position: absolute; inset: 6px; width: 32px; height: 32px; transform: rotate(-90deg); }
.ptr circle { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.ptr .ptr-trk { stroke: var(--body-edge); }
.ptr .ptr-arc { stroke: var(--signal); stroke-dasharray: calc(var(--p) * 100) 100; }
.ptr i { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); transform: scale(calc(.4 + var(--p) * .6)); transition: box-shadow .2s; }
.ptr.ready i { box-shadow: 0 0 0 4px var(--signal-soft), 0 0 18px var(--signal); }
.ptr.ready .ptr-arc { stroke: var(--signal); filter: drop-shadow(0 0 4px var(--signal)); }
.ptr.spin { transition: transform .3s cubic-bezier(.2, .9, .2, 1); }
.ptr.spin svg { animation: ptrspin .8s linear infinite; }
.ptr.spin .ptr-arc { stroke-dasharray: 30 100; }
@keyframes ptrspin { to { transform: rotate(270deg); } }
.ptr.done i { background: var(--led-on); box-shadow: 0 0 16px var(--led-on); }
.ptr.done .ptr-arc { stroke: var(--led-on); stroke-dasharray: 100 100; }
.ptr.fail i { background: #e2482a; }

[data-skin="aurora"] .ptr { background: #11131bdd; border-color: var(--hair); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
[data-skin="8bit"] .ptr { border-radius: 0; background: var(--lcd-2); border: 0; box-shadow: 4px 4px 0 #0c0b10; }
[data-skin="8bit"] .ptr i { border-radius: 0; background: var(--lcd-0); }
[data-skin="8bit"] .ptr .ptr-arc { stroke: var(--lcd-0); stroke-linecap: square; }
[data-skin="8bit"] .ptr .ptr-trk { stroke: var(--lcd-1); }
@media (prefers-reduced-motion: reduce) { .ptr.spin svg { animation-duration: 2.4s; } }

/* A home-screen shortcut asked for "Everything off": point at the button. */
#allOff.beckon { animation: allbeckon 1.1s ease-in-out 5; }
@keyframes allbeckon { 50% { box-shadow: 0 0 0 4px var(--signal-soft), 0 0 34px var(--signal); transform: scale(1.04); } }