/* Scroll-to-top button with a progress ring that fills as the page scrolls. */
.zf-totop {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90;
  width: 3.25rem; height: 3.25rem; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; color: var(--foreground);
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(1rem);
  transition: opacity .35s var(--ease-out-soft), transform .35s var(--ease-out-soft), visibility .35s, box-shadow .3s;
}
.zf-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.zf-totop:hover { box-shadow: var(--shadow-glow); transform: translateY(-2px); }
.zf-totop:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.zf-totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.zf-totop__ring circle { fill: none; stroke-width: 2.5; }
.zf-totop__track { stroke: var(--border); }
.zf-totop__bar { stroke: var(--primary); stroke-linecap: round; stroke-dasharray: 131.95; stroke-dashoffset: 131.95; }
.zf-totop__arrow { position: relative; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out-soft); }
.zf-totop:hover .zf-totop__arrow { transform: translateY(-2px); }
@media (max-width: 640px) { .zf-totop { right: .5rem; bottom: .5rem; width: 2.5rem; height: 2.5rem; } .zf-totop__arrow { width: 1rem; height: 1rem; } }
@media (prefers-reduced-motion: reduce) { .zf-totop, .zf-totop__arrow { transition: none; } }