/**
 * Estilos del botón «Mis favoritos» y remate de la animación.
 * La desintegración en sí se pinta en canvas desde like-animation.js.
 */

/**
 * Arreglo del emoji.
 *
 * img.emoji hereda `max-width:100%` del reset de Hello Elementor y su padre
 * .elementor-button-text es display:block con 5,59px de ancho, así que el emoji
 * quedaba aplastado a una astilla. `max-width` gana a `width` aunque este lleve
 * !important, por eso el `width:1em !important` de WordPress no se aplicaba.
 */
#mis-favoritos img.emoji {
	max-width: none;
}

/**
 * Arreglo de la caja del widget.
 *
 * #mis-favoritos es un flex item del header con `flex: 0 1 auto`, y el navegador
 * lo encogía a 18,9px mientras el <a> de dentro seguía midiendo 60,6px: el botón
 * se desbordaba 41,7px de su propia caja. Eso descuadraba el hueco del header y
 * descentraba cualquier transform. Medido: con esto, wrapper = pill = 60,6px.
 */
#mis-favoritos {
	flex: 0 0 auto;
	width: auto;
}

/**
 * Destello de "materializado", al terminar de reensamblarse el polvo.
 * Sin `transform`: escalar el wrapper desplazaba el botón lateralmente.
 */
#mis-favoritos.fav-glow {
	animation: favGlow 0.45s ease-out forwards;
}

@keyframes favGlow {
	0% {
		filter: brightness(2.4) drop-shadow(0 0 14px rgba(255, 215, 0, 0.9));
	}
	55% {
		filter: brightness(1.3) drop-shadow(0 0 8px rgba(255, 215, 0, 0.45));
	}
	100% {
		filter: brightness(1) drop-shadow(0 0 0 transparent);
	}
}

/**
 * Reacción del propio botón de like, en CADA clic (no solo al cruzar de 0 a 1
 * favoritos, que es lo único que dispara la desintegración de #mis-favoritos).
 *
 * Se anima el <a>, no el wrapper: el wrapper lleva el pulso `pulsoCorazon` del
 * Customizer y no queremos pisarlo. El <a> sobrevive al `.html()` con el que el
 * plugin de likes repinta el contenido del botón; sus hijos no.
 */
.oacs-spl-like-button.av-like-pop {
	animation: avLikePop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.oacs-spl-like-button.av-like-drop {
	animation: avLikeDrop 0.45s ease-in-out;
}

@keyframes avLikePop {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.3); }
	55%  { transform: scale(0.93); }
	100% { transform: scale(1); }
}

@keyframes avLikeDrop {
	0%   { transform: scale(1) rotate(0); }
	40%  { transform: scale(0.78) rotate(-6deg); }
	100% { transform: scale(1) rotate(0); }
}

/* Respeta la preferencia del sistema: sin destello ni rebote. */
@media (prefers-reduced-motion: reduce) {
	#mis-favoritos.fav-glow,
	.oacs-spl-like-button.av-like-pop,
	.oacs-spl-like-button.av-like-drop {
		animation: none;
	}
}