/* Shared countdown progress ring.
   Drop `<div class="nuclear-progress-ring"></div>` into any position:relative
   container. Configure via inline custom properties on that element:
     --nuclear-progress-duration  (default 15000ms)
     --nuclear-progress-radius    (default 18px)
     --nuclear-progress-thickness (default 2px)
     --nuclear-progress-color     (default var(--acc-strong))
   The animation runs once, forwards, and fires a native `animationend`
   event on the element itself when the ring completes. */

@property --nuclear-progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.nuclear-progress-ring {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--nuclear-progress-radius, 18px);
  padding: var(--nuclear-progress-thickness, 2px);
  pointer-events: none;
  background: conic-gradient(var(--nuclear-progress-color, var(--acc-strong)) calc(var(--nuclear-progress) * 1%), transparent 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: nuclear-progress-ring-fill linear forwards;
  animation-duration: var(--nuclear-progress-duration, 15000ms);
}

@keyframes nuclear-progress-ring-fill {
  from { --nuclear-progress: 0; }
  to { --nuclear-progress: 100; }
}