/**
 * CircularCTA — expanding-circle fill effect.
 *
 * The pink/ink "::before" puck starts as a tiny 16px disc anchored at
 * the top-left corner of the button and expands to 2.2× the button's
 * diameter on hover. Tailwind v4 cannot express this (fixed pixel start
 * size combined with dynamic percentage end size, anchored off-center)
 * in a single utility — hence the co-located CSS file.
 *
 * Honors `prefers-reduced-motion` via a wrapper class applied by the
 * component at render time (`.circular-cta-no-motion`).
 */

.circular-cta_root__nSjX_ {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 9999px;
  transition-property: color, border-color;
  transition-duration: var(--sl-duration-base);
  transition-timing-function: var(--sl-ease-standard);
}

.circular-cta_root__nSjX_::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background-color: var(--circular-cta-fill, var(--sl-color-primary));
  transform: translate(-50%, -50%) scale(1);
  transition:
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    width 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    height 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 0;
  pointer-events: none;
}

.circular-cta_root__nSjX_:hover::before,
.circular-cta_root__nSjX_:focus-visible::before {
  width: 220%;
  height: 220%;
}

.circular-cta_root__nSjX_ > * {
  position: relative;
  z-index: 1;
}

.circular-cta_noMotion__8SJvG::before {
  transition: none;
}