/* =========================================================
   Zambezi Utilities — scroll reveal
   ---------------------------------------------------------
   Mirrors the [data-reveal] system in the reference site:
   translate + fade, eased with cubic-bezier(.22,1,.36,1),
   released by an IntersectionObserver adding .zcu-revealed.

   The hidden state is scoped to .zcu-js, which is set by an
   inline script in <head>. Without JavaScript the class never
   appears, so content renders fully visible and unanimated.
   ========================================================= */

.zcu-js [data-zcu-reveal] {
	opacity: 0;
	transition:
		opacity var(--zcu-reveal-duration, 900ms) var(--zcu-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		transform var(--zcu-reveal-duration, 900ms) var(--zcu-ease, cubic-bezier(0.22, 1, 0.36, 1));
	transition-delay: var(--zcu-reveal-delay, 0ms);
	will-change: opacity, transform;
}

.zcu-js [data-zcu-reveal="fade-up"] {
	transform: translateY(34px);
}

.zcu-js [data-zcu-reveal="fade-in"] {
	transform: none;
}

.zcu-js [data-zcu-reveal="slide-left"] {
	transform: translateX(-44px);
}

.zcu-js [data-zcu-reveal="slide-right"] {
	transform: translateX(44px);
}

.zcu-js [data-zcu-reveal="scale-in"] {
	transform: scale(0.94);
}

/* Revealed state. */
.zcu-js [data-zcu-reveal].zcu-revealed {
	opacity: 1;
	transform: none;
}

/* Once the animation has finished, drop the compositor hint. */
.zcu-js [data-zcu-reveal].zcu-reveal-done {
	will-change: auto;
}

/*
 * Opted out on small screens. The observer also skips these, but declaring it
 * in CSS means the element is never hidden in the first place.
 */
@media (max-width: 781px) {
	.zcu-js [data-zcu-reveal][data-zcu-reveal-no-mobile] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Motion preference always wins. */
@media (prefers-reduced-motion: reduce) {
	.zcu-js [data-zcu-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* In the editor, never hide blocks — the author must always see their content. */
.editor-styles-wrapper [data-zcu-reveal] {
	opacity: 1 !important;
	transform: none !important;
}