/**
 * Button fill — riempimento colore dal punto del cursore
 * Versione CSS-only (::before), compatibile con markup nativo Bricks
 * (nessuno span custom richiesto: funziona su <a class="brxe-button btn-fill">).
 *
 * Il JS (button-fill.js) si limita ad aggiornare le custom property
 * --x / --y con la posizione del mouse; la transizione è gestita
 * interamente da CSS transition, perché GSAP non può animare
 * pseudo-elementi (::before non esiste nel DOM).
 */

.btn-fill {
	position: relative;
	overflow: hidden;
	isolation: isolate; /* crea un contesto di stacking isolato per il bottone */
	border-radius: 999px;
	/*border: 1px solid var(--color-primary);*/
	color: var(--color-primary);
	transition: color 0.3s ease;

	/* Valori di default: se il JS non è ancora partito, l'origine è centrata */
	--x: 50%;
	--y: 50%;
}

.btn-fill::before {
	content: '';
	position: absolute;
	top: var(--y);
	left: var(--x);
	width: 300%; /* abbastanza largo da coprire la diagonale anche su bottoni quasi quadrati */
	aspect-ratio: 1; /* forza un quadrato vero, indipendente dalle proporzioni
		del bottone: solo così border-radius:50% genera un cerchio reale
		invece di un'ellisse (che si otterrebbe ereditando le proporzioni
		larghe/basse della pillola con inset:0). */
	z-index: -1; /* dipinge PRIMA del testo inline: il testo resta sempre leggibile */
	background: var(--color-primary);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0); /* centrato sul punto (--x, --y) */
	pointer-events: none;

	/* Transizione di USCITA (quando si torna a questo stato, cioè al mouseleave):
	   curva front-loaded, crescita rapida iniziale e coda lenta —
	   è quella che dà l'effetto "ritiro elegante" che già funzionava bene. */
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-fill:hover::before,
.btn-fill:focus-visible::before {
	transform: translate(-50%, -50%) scale(1.4);

	/* Transizione di ENTRATA: curva più distesa/lineare (ease standard),
	   così la crescita resta visibile per tutta la durata invece di
	   "scattare" quasi subito a piena dimensione. */
	transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rispetta le preferenze di accessibilità: niente espansione animata */
@media (prefers-reduced-motion: reduce) {
	.btn-fill::before {
		transition: none;
	}
}