/* ─── Entrance Animation ──────────────────────────────────────────────── */
.xtool-motion {
	opacity: 0;
	will-change: opacity, transform, filter;
	transition-property: opacity, transform, filter;
	transition-timing-function: ease-out;
}

.xtool-motion.is-visible {
	opacity: 1;
	transform: none;
	filter: none;
}

.xtool-motion[data-xtool-effect='fade-up'] {
	transform: translateY(30px);
}

.xtool-motion[data-xtool-effect='fade-down'] {
	transform: translateY(-30px);
}

.xtool-motion[data-xtool-effect='fade-left'] {
	transform: translateX(-40px);
}

.xtool-motion[data-xtool-effect='fade-right'] {
	transform: translateX(40px);
}

.xtool-motion[data-xtool-effect='zoom-in'] {
	transform: scale(0.85);
}

.xtool-motion[data-xtool-effect='zoom-out'] {
	transform: scale(1.15);
}

.xtool-motion[data-xtool-effect='flip-in'] {
	transform: perspective(800px) rotateX(80deg);
	transform-origin: top center;
}

.xtool-motion[data-xtool-effect='rotate-in'] {
	transform: rotate(-12deg) scale(0.9);
}

.xtool-motion[data-xtool-effect='bounce-in'] {
	transform: scale(0.4);
	transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
	.xtool-motion {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}

/* ─── Scrolling Effects (parallax) ───────────────────────────────────────── */
.xtool-scrollfx {
	will-change: transform, opacity, filter;
}

@media (prefers-reduced-motion: reduce) {
	.xtool-scrollfx {
		transform: none !important;
		opacity: 1 !important;
		filter: none !important;
	}
}

/* ─── Mouse Effects ───────────────────────────────────────────────────── */
.xtool-mousefx--track {
	will-change: transform;
	transition: transform 0.15s ease-out;
}

.xtool-mousefx--tilt {
	will-change: transform;
	transition: transform 0.15s ease-out;
	transform-style: preserve-3d;
}

@media (prefers-reduced-motion: reduce) {
	.xtool-mousefx--track,
	.xtool-mousefx--tilt {
		transform: none !important;
	}
}

/* ─── Sticky ──────────────────────────────────────────────────────────── */
.xtool-motion-sticky--top {
	position: sticky;
	top: var(--xtool-sticky-offset, 0px);
	z-index: 100;
}

.xtool-motion-sticky--bottom {
	position: sticky;
	bottom: var(--xtool-sticky-offset, 0px);
	z-index: 100;
}

.xtool-motion-sticky--shadow.is-stuck {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	transition: box-shadow 0.2s ease;
}