/**
 * AT Elementor Elements — Creative Interaction Styles
 *
 * Scoped styling for Magnetic, 3D Tilt, Spotlight, and Pointer interactions.
 *
 * @package AT_Elementor_Elements
 * @version 3.0.0
 */

/* Magnetic Interaction Container */
[data-at-magnetic] {
	display: inline-flex;
	position: relative;
	will-change: transform;
	touch-action: manipulation;
}

.at-magnetic-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	will-change: transform;
}

/* 3D Tilt Card Interaction Container */
[data-at-tilt] {
	position: relative;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	perspective: 1000px;
	-webkit-perspective: 1000px;
	will-change: transform;
}

.at-tilt-parallax {
	transform: translateZ(30px);
	-webkit-transform: translateZ(30px);
}

/* Tilt Glare Effect */
.at-tilt-glare {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	border-radius: inherit;
	z-index: 5;
}

.at-tilt-glare-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200%;
	height: 200%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
	opacity: 0;
	will-change: transform, opacity;
}

/* Spotlight Card Interaction */
[data-at-spotlight] {
	position: relative;
	overflow: hidden;
}

[data-at-spotlight]::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.35s ease;
	background: radial-gradient(
		var(--at-spotlight-size, 350px) circle at var(--at-spotlight-x, 50%) var(--at-spotlight-y, 50%),
		var(--at-spotlight-color, rgba(99, 102, 241, 0.15)),
		transparent 80%
	);
	border-radius: inherit;
}

[data-at-spotlight]:hover::before,
[data-at-spotlight].at-spotlight-active::before {
	opacity: 1;
}

/* Cursor Follow / Proximity Target */
.at-pointer-proximity {
	position: relative;
}

/* Touch & Coarse Pointer Safe Fallbacks */
@media (hover: none) and (pointer: coarse) {
	[data-at-magnetic],
	.at-magnetic-inner {
		transform: none !important;
	}

	[data-at-tilt] {
		transform: none !important;
	}

	.at-tilt-glare {
		display: none !important;
	}

	[data-at-spotlight]::before {
		display: none !important;
	}
}