/**
 * Animation utilities. Add as "Extra class name" in any WPBakery element.
 *
 * Scroll reveal (plays once when the element enters the viewport):
 *   b3d-reveal            fade + slide up
 *   b3d-reveal-left       slide from the left
 *   b3d-reveal-right      slide from the right
 *   b3d-reveal-zoom       fade + scale
 *   b3d-reveal-fade       fade only
 *   b3d-stagger           on a row/column: its direct children reveal one after another
 * Optional delay: b3d-delay-1 ... b3d-delay-5 (100ms steps)
 *
 * Hover:
 *   b3d-hover-lift        lifts and adds a soft shadow
 *   b3d-hover-zoom        zooms the image inside
 */

/* ---------- Scroll reveal ---------- */

html.b3d-js :is(.b3d-reveal, .b3d-reveal-left, .b3d-reveal-right, .b3d-reveal-zoom, .b3d-reveal-fade, .b3d-stagger > *) {
	opacity: 0;
	transition:
		opacity var(--b3d-dur-slow) var(--b3d-ease-out),
		transform var(--b3d-dur-slow) var(--b3d-ease-out);
	transition-delay: var(--b3d-delay, 0s);
	will-change: opacity, transform;
}

html.b3d-js :is(.b3d-reveal, .b3d-stagger > *) { transform: translateY(32px); }
html.b3d-js .b3d-reveal-left { transform: translateX(-40px); }
html.b3d-js .b3d-reveal-right { transform: translateX(40px); }
html.b3d-js .b3d-reveal-zoom { transform: scale(.94); }

html.b3d-js .is-revealed:is(.b3d-reveal, .b3d-reveal-left, .b3d-reveal-right, .b3d-reveal-zoom, .b3d-reveal-fade),
html.b3d-js .b3d-stagger.is-revealed > * {
	opacity: 1;
	transform: none;
}

.b3d-delay-1 { --b3d-delay: .1s; }
.b3d-delay-2 { --b3d-delay: .2s; }
.b3d-delay-3 { --b3d-delay: .3s; }
.b3d-delay-4 { --b3d-delay: .4s; }
.b3d-delay-5 { --b3d-delay: .5s; }

/* Never hide content inside the WPBakery frontend editor. */
.compose-mode :is(.b3d-reveal, .b3d-reveal-left, .b3d-reveal-right, .b3d-reveal-zoom, .b3d-reveal-fade, .b3d-stagger > *) {
	opacity: 1 !important;
	transform: none !important;
}

/* ---------- Hover ---------- */

.b3d-hover-lift {
	transition:
		transform var(--b3d-dur) var(--b3d-ease),
		box-shadow var(--b3d-dur) var(--b3d-ease);
}
.b3d-hover-lift:hover {
	transform: translateY(-6px);
	box-shadow: var(--b3d-shadow);
}

.b3d-hover-zoom { overflow: hidden; }
.b3d-hover-zoom img { transition: transform var(--b3d-dur-slow) var(--b3d-ease-out); }
.b3d-hover-zoom:hover img { transform: scale(1.06); }

/* ---------- Accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
	html.b3d-js :is(.b3d-reveal, .b3d-reveal-left, .b3d-reveal-right, .b3d-reveal-zoom, .b3d-reveal-fade, .b3d-stagger > *) {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.b3d-hover-lift,
	.b3d-hover-zoom img { transition: none; }
}