/**
 * BV Interactions - Cursor Tilt
 *
 * The JS writes only custom properties (--bv-tilt-rx / --bv-tilt-ry /
 * --bv-tilt-scale), never the transform itself. That means you can compose
 * your own transform on top without the script clobbering it, e.g.
 *
 *   .my-card {
 *       transform: translateY(-4px)
 *                  perspective(var(--bv-tilt-perspective))
 *                  rotateX(var(--bv-tilt-rx))
 *                  rotateY(var(--bv-tilt-ry));
 *   }
 */

.bv-tilt {
	--bv-tilt-rx: 0deg;
	--bv-tilt-ry: 0deg;
	--bv-tilt-scale: 1;
	--bv-tilt-perspective: 1000px;

	transform:
		perspective(var(--bv-tilt-perspective))
		rotateX(var(--bv-tilt-rx))
		rotateY(var(--bv-tilt-ry))
		scale(var(--bv-tilt-scale));
	transform-style: preserve-3d;
}

/* No hover state to speak of on touch — leave the element flat. */
@media (hover: none), (pointer: coarse) {
	.bv-tilt {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bv-tilt {
		transform: none;
	}
}