/* ── Pull-to-Refresh — VS Brand Indicator ──────────────── */
.pull-refresh {
  --pull-distance: 0px;
  --pull-progress: 0;

  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: none;                     /* touch-only: see media query below */
  align-items: center;
  justify-content: center;
  height: 80px;
  padding-top: env(safe-area-inset-top);
  background: #17211b;
  border-bottom: 1px solid rgba(0, 198, 224, calc(var(--pull-progress) * 0.18));
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.28);
  transform: translateY(calc(-100% + var(--pull-distance)));
  contain: layout style;
}

/* ── VS mark container ─────────────────────────────────── */
.ptr-mark {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ptr-ring {
  position: absolute;
  inset: 0;
  width: 52px;
  height: 52px;
  overflow: visible;
}

/* Faint background track */
.ptr-ring-bg {
  fill: none;
  stroke: rgba(0, 198, 224, 0.12);
  stroke-width: 2;
}

/* Progress arc  ── circumference of r=21: 2π×21 ≈ 131.95 */
.ptr-ring-arc {
  fill: none;
  stroke: #00c6e0;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 131.95;
  stroke-dashoffset: calc(131.95px * (1 - var(--pull-progress)));
  transform-origin: 26px 26px;
  transform: rotate(-90deg);         /* arc starts at 12 o'clock */
  filter: drop-shadow(0 0 4px rgba(0, 198, 224, 0.45));
}

/* VS lettermark */
.ptr-vs {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  position: relative;
  z-index: 1;
  opacity: calc(0.25 + var(--pull-progress) * 0.75);
  text-shadow: 0 0 12px rgba(0, 198, 224, calc(var(--pull-progress) * 0.55));
}

/* ── Ready (threshold reached) ─────────────────────────── */
.pull-refresh.ready .ptr-ring-arc {
  stroke: #40d8ef;
  animation: ptr-ready-glow 0.75s ease-in-out infinite alternate;
}

@keyframes ptr-ready-glow {
  from { filter: drop-shadow(0 0 4px rgba(0, 198, 224, 0.4));  stroke-width: 2.5; }
  to   { filter: drop-shadow(0 0 10px rgba(64, 216, 239, 0.85)); stroke-width: 3.2; }
}

/* ── Refreshing ─────────────────────────────────────────── */
.pull-refresh.refreshing .ptr-ring-arc {
  stroke: #00c6e0;
  stroke-dashoffset: 33;             /* 25% gap → classic spinner shape */
  filter: drop-shadow(0 0 6px rgba(0, 198, 224, 0.6));
  animation: ptr-spin 0.8s linear infinite;
}

.pull-refresh.refreshing .ptr-vs {
  opacity: 1;
  animation: ptr-vs-glow 0.8s ease-in-out infinite alternate;
}

@keyframes ptr-spin {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}

@keyframes ptr-vs-glow {
  from { text-shadow: 0 0 8px rgba(0, 198, 224, 0.45); color: #fff; }
  to   { text-shadow: 0 0 18px rgba(0, 198, 224, 1);   color: #b8eef8; }
}

/* ── Snap-back transition ───────────────────────────────── */
.pull-refresh.settling,
.pull-refresh-settling .topbar,
.pull-refresh-settling .main {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Push content down while pulling ───────────────────── */
.pull-refresh-active .topbar,
.pull-refresh-active .main {
  transform: translateY(var(--pull-distance));
}

.pull-refresh-active .pull-refresh,
.pull-refresh-active .topbar,
.pull-refresh-active .main { will-change: transform; }

/* ── Touch devices only ─────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .pull-refresh { display: flex; }
  html { overscroll-behavior-y: none; }
}

/* ── Accessibility ──────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .pull-refresh.ready .ptr-ring-arc,
  .pull-refresh.refreshing .ptr-ring-arc,
  .pull-refresh.refreshing .ptr-vs { animation: none; opacity: 0.7; }
}