/**
 * Teducas Native Elementor Animations
 *
 * GPU-accelerated micro-animations for native Elementor elements
 * (button, heading, image, container). All continuous animations honour
 * `prefers-reduced-motion` and drive per-instance tuning through CSS
 * custom properties emitted by the Elementor controls.
 *
 * @package Teducas\Core
 */

/* Registered custom property so the conic-gradient angle can be animated
 * by @keyframes (unsupported browsers simply keep the static gradient). */
@property --ted-border-glow-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

/* ── Button: Shimmer sweep ─────────────────────────────────────────── */

.teducas-anim-btn--shimmer-hover .elementor-button,
.teducas-anim-btn--shimmer-infinite .elementor-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.teducas-anim-btn--shimmer-hover .elementor-button::after,
.teducas-anim-btn--shimmer-infinite .elementor-button::after {
	content: '';
	position: absolute;
	top: 0;
	left: -150%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		105deg,
		transparent 0%,
		var(--ted-shimmer-color, rgba(255, 255, 255, 0.45)) 50%,
		transparent 100%
	);
	transform: translate3d(0, 0, 0) skewX(-20deg);
	pointer-events: none;
	z-index: 1;
}

.teducas-anim-btn--shimmer-hover .elementor-button:hover::after {
	animation: teducas-shimmer-sweep var(--ted-shimmer-duration, 2s) ease-in-out;
}

.teducas-anim-btn--shimmer-infinite .elementor-button::after {
	animation: teducas-shimmer-sweep var(--ted-shimmer-duration, 2s) ease-in-out infinite;
}

@keyframes teducas-shimmer-sweep {
	0% {
		left: -150%;
	}

	100% {
		left: 150%;
	}
}

/* ── Button: Pulse glow ────────────────────────────────────────────── */

.teducas-anim-btn--pulse-glow .elementor-button {
	--ted-glow-color: #7f5af0;
	--ted-glow-blur: 16px;
	--ted-glow-speed: 1.5s;
	will-change: box-shadow;
	animation: teducas-pulse-glow var(--ted-glow-speed, 1.5s) ease-in-out infinite;
}

@keyframes teducas-pulse-glow {
	0%,
	100% {
		box-shadow: 0 0 calc(var(--ted-glow-blur, 16px) / 2) var(--ted-glow-color, #7f5af0);
	}

	50% {
		box-shadow: 0 0 var(--ted-glow-blur, 16px) var(--ted-glow-color, #7f5af0);
	}
}

/* ── Button: Magnetic (JS-driven translate, smooth settle) ─────────── */

.teducas-anim-btn--magnetic .elementor-button {
	--ted-magnetic-strength: 0.3;
	will-change: transform;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Heading: Animated gradient ────────────────────────────────────── */

.teducas-anim-heading--gradient .elementor-heading-title {
	--ted-gradient-start: #7f5af0;
	--ted-gradient-mid: #2cb67d;
	--ted-gradient-end: #ff8906;
	--ted-gradient-angle: 90deg;
	--ted-gradient-flow-speed: 4s;
	background: linear-gradient(
		var(--ted-gradient-angle, 90deg),
		var(--ted-gradient-start, #7f5af0),
		var(--ted-gradient-mid, #2cb67d),
		var(--ted-gradient-end, #ff8906),
		var(--ted-gradient-start, #7f5af0)
	);
	background-size: 300% 300%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	will-change: background-position;
	animation: teducas-gradient-flow var(--ted-gradient-flow-speed, 4s) ease infinite;
}

@keyframes teducas-gradient-flow {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

/* ── Heading: Marker draw ──────────────────────────────────────────── */

.teducas-anim-heading--marker {
	position: relative;
}

.teducas-anim-heading--marker .elementor-heading-title {
	position: relative;
	display: inline-block;
}

.teducas-anim-heading--marker .elementor-heading-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0.05em;
	width: 100%;
	height: var(--ted-marker-thickness, 12px);
	background: var(--ted-marker-color, #ffd166);
	opacity: var(--ted-marker-opacity, 60%);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.teducas-anim-heading--marker.teducas-anim-marker--drawn .elementor-heading-title::after {
	transform: scaleX(1);
}

/* ── Image: Gentle float ───────────────────────────────────────────── */

.teducas-anim-img--float img {
	--ted-float-distance: 10px;
	--ted-float-duration: 4s;
	--ted-float-delay: 0s;
	will-change: transform;
	animation: teducas-gentle-float var(--ted-float-duration, 4s) ease-in-out var(--ted-float-delay, 0s) infinite;
}

@keyframes teducas-gentle-float {
	0%,
	100% {
		transform: translate3d(0, 0, 0);
	}

	50% {
		transform: translate3d(0, calc(var(--ted-float-distance, 10px) * -1), 0);
	}
}

/* ── Container: Rotating border glow ───────────────────────────────── */

.teducas-anim-box--border-glow {
	--ted-border-glow-color: #7f5af0;
	--ted-border-glow-speed: 5s;
	--ted-border-glow-thickness: 2px;
	position: relative;
	isolation: isolate;
}

.teducas-anim-box--border-glow::before {
	content: '';
	position: absolute;
	inset: 0;
	padding: var(--ted-border-glow-thickness, 2px);
	border-radius: inherit;
	background: conic-gradient(
		from var(--ted-border-glow-angle, 0deg),
		transparent 0deg,
		var(--ted-border-glow-color, #7f5af0) 60deg,
		transparent 140deg,
		transparent 360deg
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
	z-index: -1;
	animation: teducas-border-glow-spin var(--ted-border-glow-speed, 5s) linear infinite;
}

@keyframes teducas-border-glow-spin {
	0% {
		--ted-border-glow-angle: 0deg;
	}

	100% {
		--ted-border-glow-angle: 360deg;
	}
}

/* ── Motion safety: disable all continuous animations ──────────────── */

@media (prefers-reduced-motion: reduce) {
	.teducas-anim-img--float img,
	.teducas-anim-btn--pulse-glow .elementor-button,
	.teducas-anim-btn--shimmer-infinite .elementor-button::after,
	.teducas-anim-heading--gradient .elementor-heading-title,
	.teducas-anim-box--border-glow::before {
		animation: none !important;
		transform: none !important;
	}

	.teducas-anim-heading--marker .elementor-heading-title::after {
		transition: none !important;
		transform: scaleX(1) !important;
	}

	.teducas-anim-btn--magnetic .elementor-button {
		transition: none !important;
		transform: none !important;
	}

	.teducas-anim-btn--shimmer-hover .elementor-button:hover::after {
		animation: none !important;
	}
}