/* ATELIER 49 — progress ring. Radius is fixed at 48 in the viewBox; only the
   stroke width varies, and --ring-sw must match the strokeWidth passed to
   setProgress() or the cap compensation is computed against the wrong r. */
.ring { width: 120px; height: 120px; overflow: visible; }

.ring circle.track {
  fill: none;
  stroke: var(--gray-4, #e4e4e7);
  stroke-width: var(--ring-sw, 10);
}

.ring circle.arc {
  fill: none;
  stroke: var(--accent-9, #e5484d);
  stroke-width: var(--ring-sw, 10);
  /* Only the dasharray animates. The linecap flips instantly at the low
     threshold, which is what you want: it is a geometry change, not motion. */
  transition: stroke-dasharray var(--spring-panel-dur, 484ms) var(--spring-panel, cubic-bezier(0.2, 0.8, 0.2, 1));
}

@media (prefers-reduced-motion: reduce) {
  .ring circle.arc { transition: none; }
}