/* Break The Loop · the loop mark
   A ring whose stroke fades from nothing (tail) to full gold (head), with a round head cap.
   Spins clockwise so the bright head leads and the tail dissolves behind it.
   Usage: <span class="loop" style="--size:24px; --w:3px"></span> */

.loop {
  --size: 24px;
  --w: 3px;
  --loop-color: var(--gold, oklch(86% 0.15 88));
  --loop-speed: 2.4s;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(from 0turn, transparent 0turn 0.06turn, var(--loop-color) 1turn);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--w) - 0.5px), #000 calc(100% - var(--w)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--w) - 0.5px), #000 calc(100% - var(--w)));
  animation: loop-spin var(--loop-speed) linear infinite;
}
/* round head cap, sits at 12 o'clock where the gradient hits full strength */
.loop::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--w);
  height: var(--w);
  margin-left: calc(var(--w) / -2);
  border-radius: 50%;
  background: var(--loop-color);
}
.loop--slow { --loop-speed: 9s; }

@keyframes loop-spin { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
  .loop { animation: none; }
}