/**
 * Hover lift -- a standalone utility class.
 *
 * Not ported from the design: this is a reusable effect, added so any button
 * can opt into it by carrying the class. Nothing references it implicitly, so
 * dropping the class removes the effect entirely.
 *
 * Usage: add `rc-hover-bounce` to the element's class list. In the block
 * editor that is the button's Advanced > Additional CSS class(es) field; in
 * markup it goes straight on the `<a>`, `<button>` or wrapper.
 *
 *     <a class="wp-block-button__link rc-hover-bounce" href="#">Buy now</a>
 *
 * The effect is the testimonial card's, lifted from `.rcrv__card` in
 * `testimonials.css` so the two match: the same 200ms curve, the same 4px
 * rise, the same two-layer hover shadow. Keep them in step if either moves.
 *
 * The one thing not carried over is the card's resting `inset 0 0 0 1px
 * #e8e8ed` ring. On the card that ring is its border, present before any
 * hover; putting it here would restyle every button at rest, which is not
 * what a hover utility should do. The hover ring still fades in from
 * nothing, so the effect reads the same.
 *
 * The transition sits on the base class, not on `:hover`, so it plays in
 * both directions rather than snapping back.
 *
 * `transform` has no effect on a purely inline box, so the class deliberately
 * does not force `display`: overriding it would break a flex or block button
 * that the class is dropped onto. Buttons are `inline-block` or `flex`
 * already, so the effect applies without help.
 */

.rc-hover-bounce {
	transition: transform 200ms cubic-bezier(0.22, 0.8, 0.28, 1), box-shadow 200ms ease;
}

.rc-hover-bounce:hover,
.rc-hover-bounce:focus-visible {
	transform: translateY(-4px);
	box-shadow:
		inset 0 0 0 1px #c7d2fe,
		0 18px 36px -16px rgba(15, 17, 23, 0.16);
}

@media (prefers-reduced-motion: reduce) {

	.rc-hover-bounce {
		transition: none;
	}

	.rc-hover-bounce:hover,
	.rc-hover-bounce:focus-visible {
		transform: none;
	}
}