/* Botões com preenchimento ao passar o mouse (inspirado no PillNav).
   Um círculo sobe da base do botão e o texto desliza para cima.
   Os cantos seguem o design system (retos). Para formato de pílula, use border-radius: 999px em .btn-fx. */

.btn-fx { position: relative; overflow: hidden; isolation: isolate; transition: color 320ms var(--motion-easing), border-color 320ms var(--motion-easing), transform 240ms var(--motion-easing); }
.btn-fx::before { position: absolute; z-index: -1; top: 100%; left: 50%; width: 240%; aspect-ratio: 1; border-radius: 50%; background: var(--fx-fill); transform: translate(-50%, -50%) scale(0); transition: transform 640ms var(--motion-easing); pointer-events: none; content: ""; }
.btn-fx > svg { position: relative; z-index: 1; }

.fx-label { position: relative; display: inline-block; overflow: hidden; padding-block: 0.12em; vertical-align: middle; }
.fx-label__a, .fx-label__b { display: block; transition: transform 460ms var(--motion-easing); }
.fx-label__b { user-select: none; position: absolute; inset: 0.12em 0 auto 0; text-align: center; color: var(--fx-hover-text); transform: translateY(160%); }

/* Variantes: preenchido (invertido ao passar o mouse) e contorno */
.button--primary.btn-fx, .ctc-btn.btn-fx:not(.ctc-btn--secondary) { --fx-fill: var(--color-canvas); --fx-hover-text: var(--color-text); border-color: var(--color-text); }
.button--outline.btn-fx, .ctc-btn--secondary.btn-fx { --fx-fill: var(--color-text); --fx-hover-text: var(--color-canvas); }

/* Estado ativo: foco por teclado em qualquer dispositivo, hover só com mouse */
.btn-fx:focus-visible::before { transform: translate(-50%, -50%) scale(1); }
.btn-fx:focus-visible .fx-label__a { transform: translateY(-160%); }
.btn-fx:focus-visible .fx-label__b { transform: translateY(0); }
.btn-fx:focus-visible { color: var(--fx-hover-text); }

@media (hover: hover) and (pointer: fine) {
  .btn-fx:hover:not(:disabled)::before { transform: translate(-50%, -50%) scale(1); }
  .btn-fx:hover:not(:disabled) .fx-label__a { transform: translateY(-160%); }
  .btn-fx:hover:not(:disabled) .fx-label__b { transform: translateY(0); }
  .btn-fx:hover:not(:disabled) { color: var(--fx-hover-text); }
}

/* Neutraliza os hovers antigos (cor de fundo, escala, sombra) para não competirem com o preenchimento */
.btn-fx.button--primary:is(:hover, :focus-visible), .btn-fx.ctc-btn:not(.ctc-btn--secondary):is(:hover, :focus-visible):not(:disabled) { border-color: var(--color-text); background: var(--button-primary-bg); box-shadow: none; }
.btn-fx.button--outline:is(:hover, :focus-visible), .btn-fx.ctc-btn--secondary:is(:hover, :focus-visible):not(:disabled) { border-color: var(--color-text); background: transparent; box-shadow: none; }
.btn-fx.header-action:is(:hover, :focus-visible) { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .btn-fx, .btn-fx::before, .fx-label__a, .fx-label__b { transition: none; }
}