/**
 * Aguafy — Estilos del minicarrito.
 *
 * Se encola desde `assets-carrito.php` con `filemtime()` como versión, así que
 * el navegador lo cachea de forma indefinida y solo lo vuelve a pedir cuando el
 * archivo cambia de verdad.
 *
 * @version 1.0
 */

/* =========================================================================
 * Globo contador
 * ========================================================================= */

.cart-count-badge {
	/**
	 * `transform` NO se aplica a elementos `display: inline`, y un <span> es
	 * inline por defecto. Sin esto la animación no se ve — y no da ningún error,
	 * que es lo que la hace difícil de diagnosticar.
	 *
	 * Si tu CSS global ya define el display del globo, BORRA estas tres líneas
	 * en vez de duplicar la declaración en dos sitios.
	 */
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* El escalado sale del centro del globo, no de su esquina. */
	transform-origin: center center;
}

/**
 * La clase `is-bumping` la pone y la quita `cart-core.js`, solo cuando el
 * número SUBE.
 */
@keyframes aguafy-badge-pop {
	0% {
		transform: scale(1);
	}

	35% {
		transform: scale(1.45);
	}

	70% {
		transform: scale(0.92);
	}

	100% {
		transform: scale(1);
	}
}

.cart-count-badge.is-bumping {
	/* La curva sobrepasa el 1 al final: es lo que da la sensación de rebote. */
	animation: aguafy-badge-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/**
 * Quien haya pedido menos movimiento en su sistema no debería recibir el
 * rebote. El número se actualiza igual.
 */
@media (prefers-reduced-motion: reduce) {
	.cart-count-badge.is-bumping {
		animation: none;
	}
}