/* GC Tilt — shared direction-aware hover tilt for card widgets.
   A widget opts in by rendering gencore_tilt_attrs() on its root: the JS then
   tags its cards with .gc-tilt and drives --gct-rx / --gct-ry from the pointer.
   Sizing comes from the widget's own controls through the --gct-* contract. */

/* No lift by default: the tilt is the effect. A widget adds one only if its
   Lift control asks for it, so switching tilt on never moves a card. */
.gc-tilt-on {
	--gct-persp: 1100px;
	--gct-lift: 0px;
}

@media (hover: hover) {
	.gc-tilt-on .gc-tilt {
		--gct-rx: 0deg;
		--gct-ry: 0deg;
		transform: perspective(var(--gct-persp)) rotateX(var(--gct-rx)) rotateY(var(--gct-ry));
		transform-style: preserve-3d;
	}
	.gc-tilt-on .gc-tilt:hover,
	.gc-tilt-on .gc-tilt:focus-visible,
	.gc-tilt-on .gc-tilt:focus-within {
		transform: perspective(var(--gct-persp)) rotateX(var(--gct-rx)) rotateY(var(--gct-ry)) translate3d(0, var(--gct-lift), 0);
	}
	.gc-tilt-on .gc-tilt.is-tilting {
		transition: transform .12s ease-out;
		will-change: transform;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gc-tilt-on .gc-tilt,
	.gc-tilt-on .gc-tilt:hover,
	.gc-tilt-on .gc-tilt:focus-visible,
	.gc-tilt-on .gc-tilt:focus-within {
		transform: none;
		transition: none;
	}
}