/**
 * Scroll-triggered reveals — only active after JS marks targets.
 * Directions: fade-up (bottom), slide-left, slide-right, fade, scale.
 */

html.itm-scroll-reveal [data-itm-reveal].itm-reveal-pending {
	opacity: 0;
	transform: translate3d(0, 2.75rem, 0);
	transition:
		opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

html.itm-scroll-reveal [data-itm-reveal="fade"].itm-reveal-pending {
	transform: none;
}

html.itm-scroll-reveal [data-itm-reveal="fade-up"].itm-reveal-pending,
html.itm-scroll-reveal [data-itm-reveal="slide-up"].itm-reveal-pending {
	transform: translate3d(0, 2.75rem, 0);
}

html.itm-scroll-reveal [data-itm-reveal="slide-left"].itm-reveal-pending {
	transform: translate3d(-3rem, 0.35rem, 0);
}

html.itm-scroll-reveal [data-itm-reveal="slide-right"].itm-reveal-pending {
	transform: translate3d(3rem, 0.35rem, 0);
}

html.itm-scroll-reveal [data-itm-reveal="scale"].itm-reveal-pending {
	transform: scale(0.94);
}

html.itm-scroll-reveal [data-itm-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
	transition:
		opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

html.itm-scroll-reveal [data-itm-reveal].itm-reveal-pending[style*="--itm-reveal-delay"] {
	transition-delay: var(--itm-reveal-delay, 0ms);
}

html.itm-scroll-reveal [data-itm-reveal].is-revealed {
	transition-delay: var(--itm-reveal-delay, 0ms);
}

@media (max-width: 640px) {
	html.itm-scroll-reveal [data-itm-reveal="slide-left"].itm-reveal-pending,
	html.itm-scroll-reveal [data-itm-reveal="slide-right"].itm-reveal-pending {
		transform: translate3d(0, 2rem, 0);
	}

	html.itm-scroll-reveal [data-itm-reveal].itm-reveal-pending,
	html.itm-scroll-reveal [data-itm-reveal="fade-up"].itm-reveal-pending,
	html.itm-scroll-reveal [data-itm-reveal="slide-up"].itm-reveal-pending {
		transform: translate3d(0, 1.75rem, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	html.itm-scroll-reveal [data-itm-reveal].itm-reveal-pending,
	html.itm-scroll-reveal [data-itm-reveal].is-revealed {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		will-change: auto;
	}
}