/*
 * Shared "reveal on scroll" animation - opt-in per feature (Hero Slider,
 * Product Landing, Category Showcase, Product List each have their own
 * "Enable Animation" setting; see comw-animate.js for the trigger). Any
 * element with .comw-animate starts hidden/offset and gets .comw-is-visible
 * added once it scrolls into view (or immediately if it's already in view
 * on load, e.g. a hero banner above the fold).
 */
.comw-animate {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.comw-animate.comw-is-visible {
	opacity: 1;
	transform: none;
}

/* Direction modifiers - default (no modifier) is bottom-to-top (translateY above). Only Hero Slider exposes a direction choice today (see COMW_Hero_Slider); the other features always use the plain default. */
.comw-animate--left {
	transform: translateX(-60px);
}

.comw-animate--bottom {
	transform: translateY(28px);
}

/* Staggered entrance for a row/grid of cards - cycle 1-4 across items so a long catalog doesn't force a long wait on the last card. */
.comw-animate-delay-1 { transition-delay: 0.08s; }
.comw-animate-delay-2 { transition-delay: 0.16s; }
.comw-animate-delay-3 { transition-delay: 0.24s; }
.comw-animate-delay-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
	.comw-animate {
		opacity: 1;
		transform: none;
		transition: none;
	}
}