// Circular text (reactbits port). Each char is absolutely positioned at
// the spinner's centre, then transformed `rotate() translateY(-radius)`
// so it lands on the perimeter of a circle of constant radius. The host
// itself is static; the inner `__spin` element drives the rotation via
// the Web Animations API (see component for the why). Hover-mode `scale`
// lives on the host so it never fights the rotation.

.wr-circular-text {
  --wr-circular-text-size: 12rem;
  --wr-circular-text-radius: calc(var(--wr-circular-text-size) / 2);

  position: relative;
  display: inline-block;
  width: var(--wr-circular-text-size);
  height: var(--wr-circular-text-size);
  border-radius: 50%;
  font-weight: 700;
  text-align: center;
  user-select: none;
  transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4);

  &__spin {
    position: absolute;
    inset: 0;
    will-change: transform;
  }

  &__char {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    // Pre-shift by -50% so the char's centre sits at the spinner centre
    // before the per-char `rotate translateY(-radius)` runs.
    margin-left: -0.5em;
    margin-top: -0.5em;
    line-height: 1;
  }

  // Bonkers — scale the whole host on hover (rotation lives on inner,
  // so the transforms never fight each other).
  &--bonkers:hover {
    transform: scale(0.8);
  }
}