/* Shared hover effects for icon chips.
 *
 * One sheet for the Social Icons and Social Share rows, which are the same
 * shape of thing — a small chip a pointer lands on — and had grown their own
 * fixed hover each. Written per widget they would have drifted, the way the
 * carousel controls did before `shared/carousel.css` collected them.
 *
 * Prefix-neutral on purpose: a widget adds `vora-fx` to each chip and
 * `vora-fx--<effect>` to the row, so nothing here has to know what the widget
 * calls its own elements. Any other widget with a chip can opt in the same way.
 *
 * Only `transform` and `opacity` are animated. Both are compositor properties,
 * so a row of a dozen chips does not cost a layout pass on every pointer move. */

.vora-fx {
	transition:
		transform 0.18s ease,
		opacity 0.18s ease;
}

/* --- Lift ---------------------------------------------------------------- */

.vora-fx--lift .vora-fx:hover,
.vora-fx--lift .vora-fx:focus-visible {
	transform: translateY(-3px);
}

/* --- Grow ---------------------------------------------------------------- */

.vora-fx--grow .vora-fx:hover,
.vora-fx--grow .vora-fx:focus-visible {
	transform: scale(1.12);
}

/* --- Tilt ---------------------------------------------------------------- */

.vora-fx--tilt .vora-fx:hover,
.vora-fx--tilt .vora-fx:focus-visible {
	transform: rotate(-8deg) scale(1.06);
}

/* --- Fade ---------------------------------------------------------------- */

.vora-fx--fade .vora-fx:hover,
.vora-fx--fade .vora-fx:focus-visible {
	opacity: 0.7;
}

/* --- Pulse --------------------------------------------------------------- */

/* Runs once rather than looping. A chip that keeps beating under the pointer
   competes with whatever the reader is actually trying to click. */
.vora-fx--pulse .vora-fx:hover,
.vora-fx--pulse .vora-fx:focus-visible {
	animation: vora-fx-pulse 0.45s ease;
}

@keyframes vora-fx-pulse {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.16); }
	100% { transform: scale(1); }
}

/* --- None ---------------------------------------------------------------- */

/* Stated rather than implied, so choosing "None" also drops the transition and
   the chip does not ease between two identical states. */
.vora-fx--none .vora-fx {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.vora-fx {
		transition: none;
	}

	.vora-fx--lift .vora-fx:hover,
	.vora-fx--lift .vora-fx:focus-visible,
	.vora-fx--grow .vora-fx:hover,
	.vora-fx--grow .vora-fx:focus-visible,
	.vora-fx--tilt .vora-fx:hover,
	.vora-fx--tilt .vora-fx:focus-visible {
		transform: none;
	}

	.vora-fx--pulse .vora-fx:hover,
	.vora-fx--pulse .vora-fx:focus-visible {
		animation: none;
	}
}