/* Custom Features – reveal on scroll (classes in Advanced > CSS Classes: cst_motion + cst_up/down/left/right/zoom_in/zoom_out/fade, cst_sm/lg/xl, cst_fast/slow, cst_delay_1…6; cst_zoom_img for an image hover zoom).
   Elements are hidden only once the head script has marked the page (html.cst-js), so nothing stays hidden without JavaScript. */
.cst-js .cst_motion {
	--cst-dist: 24px;
	--cst-dur: 1s;
	--cst-ease: cubic-bezier(.16, 1, .3, 1);
	opacity: 0;
	transform: translateY(var(--cst-dist));
	transition: opacity var(--cst-dur) var(--cst-ease), transform var(--cst-dur) var(--cst-ease);
}
.cst-js .cst_motion.cst_up { transform: translateY(var(--cst-dist)); }
.cst-js .cst_motion.cst_down { transform: translateY(calc(var(--cst-dist) * -1)); }
.cst-js .cst_motion.cst_left { transform: translateX(var(--cst-dist)); }
.cst-js .cst_motion.cst_right { transform: translateX(calc(var(--cst-dist) * -1)); }
.cst-js .cst_motion.cst_zoom_in { transform: scale(.92); }
.cst-js .cst_motion.cst_zoom_out { transform: scale(1.08); }
.cst-js .cst_motion.cst_fade { transform: none; }

.cst-js .cst_motion.cst_sm { --cst-dist: 12px; }
.cst-js .cst_motion.cst_lg { --cst-dist: 48px; }
.cst-js .cst_motion.cst_xl { --cst-dist: 80px; }
.cst-js .cst_motion.cst_fast { --cst-dur: .6s; }
.cst-js .cst_motion.cst_slow { --cst-dur: 1.4s; }

.cst-js .cst_motion.cst_delay_1 { transition-delay: .1s; }
.cst-js .cst_motion.cst_delay_2 { transition-delay: .25s; }
.cst-js .cst_motion.cst_delay_3 { transition-delay: .4s; }
.cst-js .cst_motion.cst_delay_4 { transition-delay: .55s; }
.cst-js .cst_motion.cst_delay_5 { transition-delay: .7s; }
.cst-js .cst_motion.cst_delay_6 { transition-delay: .85s; }

.cst-js .cst_motion.cst_in,
.cst-all-in .cst_motion {
	opacity: 1;
	transform: none;
}

.cst_zoom_img { overflow: hidden; }
.cst_zoom_img img { transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.cst_zoom_img:hover img { transform: scale(1.04); }

/* the editor always shows everything */
.elementor-editor-active .cst_motion {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.cst-js .cst_motion {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.cst_zoom_img img { transition: none !important; }
}