.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

.btn--primary {
  background-color: var(--color-ink);
  color: var(--color-white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-ink-soft);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: var(--color-ink);
  color: var(--color-white);
}

/* Underline lives on ::after, not border-bottom or text-decoration, so it
   can be transform-animated independently of the box. border-bottom stays
   at the same 1px but goes transparent — keeping it (rather than removing
   it) preserves the exact box height .btn established (border-box sizing
   means a removed border shrinks the element by 1px). The pseudo-element
   sits at bottom: -1px, landing exactly on the outer edge the visible
   border used to occupy — same position, same thickness, same color. */
.btn--text {
  position: relative;
  padding: var(--space-1) 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  text-transform: none;
  letter-spacing: var(--tracking-normal);
}

/* Hidden at rest — grows in left-to-right on hover/focus, then collapses
   away to the right on exit. transform-origin is deliberately left out of
   the transition list: it snaps instantly the moment :hover/:focus-visible
   starts or stops, while transform animates smoothly from whichever origin
   is now active, giving each direction its own distinct wipe rather than a
   single state simply reversing itself. */
.btn--text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-base) var(--ease-standard);
}

.btn--text:hover::after,
.btn--text:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Active/current state (mirrors nav.css's [aria-current="page"] pattern)
   keeps its underline permanently, independent of hover — the extra
   attribute selector outweighs the bare .btn--text::after rule above so
   moving away doesn't collapse it back to hidden. */
.btn--text[aria-current="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  .btn--text::after {
    transition: none;
  }
}

/* ---- Persistent-underline variant ----
   Pairs with .btn--text where the underline should be visible at rest
   rather than hover-revealed (panel CTAs, footer "Make an enquiry"/"Join")
   — these are the primary or only action in their context, so the
   affordance shouldn't depend on a hover to be noticed. Hover/focus still
   gives motion feedback: the underline sweeps away and redraws using the
   same left/right origin swap as the base hover-reveal above, just as a
   one-shot animation instead of a hover-state transition. */
.btn--text.btn--underline::after {
  transform: scaleX(1);
  transform-origin: left;
}

.btn--text.btn--underline:hover::after,
.btn--text.btn--underline:focus-visible::after {
  animation: btn-underline-sweep calc(var(--duration-base) * 2) var(--ease-standard);
}

@keyframes btn-underline-sweep {
  0% {
    transform: scaleX(1);
    transform-origin: right;
  }
  50% {
    transform: scaleX(0);
    transform-origin: right;
  }
  50.01% {
    transform-origin: left;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn--text.btn--underline:hover::after,
  .btn--text.btn--underline:focus-visible::after {
    animation: none;
  }
}

.btn:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}