/* Improvement Plugin — Interactivity module.
 * Hover motion is pure CSS (no JS needed for these); scroll-reveal is
 * handled in interactivity.js via GSAP. Elements start hidden via
 * [data-reveal] so there's no flash-of-unanimated-content before JS runs —
 * interactivity.js removes the attribute if GSAP fails to load, so content
 * never stays invisible.
 */

[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
}

.im-loader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

.im-loader-hide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.im-loader-ring {
	width: 72px;
	height: 72px;
	border: 3px solid rgba(233, 155, 19, 0.15);
	border-top-color: #e99b13;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: im-spin 1s linear infinite;
}

.im-loader-logo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	animation: im-pulse 1.4s ease-in-out infinite;
}

@keyframes im-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes im-pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.08);
	}
}

.lf-item,
.improvement-card {
	transition: transform 0.25s ease;
}

.lf-item:hover,
.lf-item:focus-within,
.improvement-card:hover {
	transform: translateY(-4px);
}

.lf-item .lf-background {
	transition: transform 0.4s ease;
}

.lf-item:hover .lf-background {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.im-loader,
	.im-loader-ring,
	.im-loader-logo,
	.lf-item,
	.lf-item .lf-background,
	.improvement-card {
		transition: none !important;
		animation: none !important;
	}

	[data-reveal] {
		opacity: 1;
		transform: none;
	}
}