/**
 * Travelscape scroll animations.
 *
 * Hidden state is gated on html.ts-anim-on so content stays visible if JS never runs.
 * Editors add classes via block Advanced → Additional CSS class(es):
 *   ts-fade-up | ts-fade-down | ts-fade-left | ts-fade-right
 *   ts-slide-up | ts-slide-down | ts-slide-left | ts-slide-right
 */

html.ts-anim-on [class*="ts-fade-"],
html.ts-anim-on [class*="ts-slide-"] {
	transition:
		opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--ts-anim-delay, 0ms);
	will-change: opacity, transform;
}

/* Fade — opacity + 24px */
html.ts-anim-on .ts-fade-up:not(.ts-inview) {
	opacity: 0;
	transform: translateY(24px);
}

html.ts-anim-on .ts-fade-down:not(.ts-inview) {
	opacity: 0;
	transform: translateY(-24px);
}

html.ts-anim-on .ts-fade-left:not(.ts-inview) {
	opacity: 0;
	transform: translateX(24px);
}

html.ts-anim-on .ts-fade-right:not(.ts-inview) {
	opacity: 0;
	transform: translateX(-24px);
}

/* Slide — opacity + 48px */
html.ts-anim-on .ts-slide-up:not(.ts-inview) {
	opacity: 0;
	transform: translateY(48px);
}

html.ts-anim-on .ts-slide-down:not(.ts-inview) {
	opacity: 0;
	transform: translateY(-48px);
}

html.ts-anim-on .ts-slide-left:not(.ts-inview) {
	opacity: 0;
	transform: translateX(48px);
}

html.ts-anim-on .ts-slide-right:not(.ts-inview) {
	opacity: 0;
	transform: translateX(-48px);
}

html.ts-anim-on .ts-fade-up.ts-inview,
html.ts-anim-on .ts-fade-down.ts-inview,
html.ts-anim-on .ts-fade-left.ts-inview,
html.ts-anim-on .ts-fade-right.ts-inview,
html.ts-anim-on .ts-slide-up.ts-inview,
html.ts-anim-on .ts-slide-down.ts-inview,
html.ts-anim-on .ts-slide-left.ts-inview,
html.ts-anim-on .ts-slide-right.ts-inview {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.ts-anim-on [class*="ts-fade-"],
	html.ts-anim-on [class*="ts-slide-"] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		will-change: auto;
	}
}