/*
 * Efeitos ao passar o mouse, 100% CSS, compartilhados por todos os módulos
 * (banners, eventos, classificados, serviços e benefícios).
 *
 * Cada efeito é uma classe no elemento que se move (cartão, linha ou slide):
 *   sirecom-hover-crescer, sirecom-hover-quicar-in, sirecom-hover-quicar-out,
 *   sirecom-hover-balancar-h, sirecom-hover-balancar-v, sirecom-hover-vibrar
 *
 * A classe é acrescentada automaticamente pelo efeito escolhido em
 * Configurações de cada módulo, ou pode ser digitada no campo "Classe CSS"
 * de um item específico.
 *
 * Intensidade do "crescer" e do "quicar": --sirecom-hover-scale (padrão 1.05).
 * Só em aparelhos com mouse.
 */
@media ( hover: hover ) {
	/* :where() = especificidade zero: a transição própria de um módulo (ex.: o fade dos banners) sempre prevalece. */
	:where( .sirecom-hover-crescer ) {
		--sirecom-hover-t: transform 0.3s ease-out;
		transition: var( --sirecom-hover-t );
	}

	:where( .sirecom-hover-quicar-in, .sirecom-hover-quicar-out ) {
		--sirecom-hover-t: transform 0.5s cubic-bezier( 0.47, 2.02, 0.31, -0.36 );
		transition: var( --sirecom-hover-t );
	}

	.sirecom-hover-crescer:hover,
	.sirecom-hover-quicar-in:hover {
		transform: scale( var( --sirecom-hover-scale, 1.05 ) );
	}

	.sirecom-hover-quicar-out:hover {
		transform: scale( calc( 2 - var( --sirecom-hover-scale, 1.05 ) ) );
	}

	.sirecom-hover-balancar-h:hover {
		animation: sirecom-wobble-h 1s ease-in-out 1;
	}

	.sirecom-hover-balancar-v:hover {
		animation: sirecom-wobble-v 1s ease-in-out 1;
	}

	.sirecom-hover-vibrar:hover {
		animation: sirecom-buzz-out 0.75s linear 1;
	}
}

@keyframes sirecom-wobble-h {
	16.65% { transform: translateX( 8px ); }
	33.3%  { transform: translateX( -6px ); }
	49.95% { transform: translateX( 4px ); }
	66.6%  { transform: translateX( -2px ); }
	83.25% { transform: translateX( 1px ); }
	100%   { transform: translateX( 0 ); }
}

@keyframes sirecom-wobble-v {
	16.65% { transform: translateY( 8px ); }
	33.3%  { transform: translateY( -6px ); }
	49.95% { transform: translateY( 4px ); }
	66.6%  { transform: translateY( -2px ); }
	83.25% { transform: translateY( 1px ); }
	100%   { transform: translateY( 0 ); }
}

@keyframes sirecom-buzz-out {
	10% { transform: translateX( 3px ) rotate( 2deg ); }
	20% { transform: translateX( -3px ) rotate( -2deg ); }
	30% { transform: translateX( 3px ) rotate( 2deg ); }
	40% { transform: translateX( -3px ) rotate( -2deg ); }
	50% { transform: translateX( 2px ) rotate( 1deg ); }
	60% { transform: translateX( -2px ) rotate( -1deg ); }
	70% { transform: translateX( 2px ) rotate( 1deg ); }
	80% { transform: translateX( -2px ) rotate( -1deg ); }
	90% { transform: translateX( 1px ) rotate( 0 ); }
	100% { transform: translateX( -1px ) rotate( 0 ); }
}