/* fx.css · type/text-path, words run round a slowly turning circle · owner: Lizzy East · all rights reserved */

/* A badge in the block's top corner: words set on a circle (an SVG <textPath>) that
   turns slowly. The ring is decoration (aria-hidden); the same words stand beside
   it as real text. It turns only once the core runs, never with motion off, and its
   Pause button holds it where it is. The ring takes the font of its surroundings;
   on a page with two rings, give each ring's path its own id. */
[data-fx~="type/text-path"] { position: relative; }
[data-fx~="type/text-path"] > [data-fx-ambient] {
  position: absolute;
  top: var(--fx-ring-inset, clamp(1rem, 4vw, 3rem));
  right: var(--fx-ring-inset, clamp(1rem, 4vw, 3rem));
  width: var(--fx-ring-size, clamp(7.5rem, 22vw, 11rem));
  height: auto;
  pointer-events: none;
}
[data-fx~="type/text-path"] [data-fx-ambient] circle { fill: var(--fx-ring-disc, rgb(17 17 23 / 0.62)); }
[data-fx~="type/text-path"] [data-fx-ambient] text {
  fill: var(--fx-ring-ink, #ffffff);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
[data-fx~="type/text-path"] [data-fx-ambient] path:not([id]) { fill: var(--fx-ring-mark, var(--fx-ring-ink, #ffffff)); }
[data-fx~="type/text-path"] [data-fx-ambient] > g {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
html.fx-armed [data-fx~="type/text-path"] [data-fx-ambient] > g {
  animation: fx-text-path var(--fx-ring-dur, 28s) linear infinite;
}
@keyframes fx-text-path { to { transform: rotate(1turn); } }