/*
 * Reveal on scroll.
 *
 * This file always loads, even with motion switched off in the Customizer: it
 * also carries the reduced-motion rules, and those have to apply whether or not
 * the effect is on. With motion off, `body` has no .va-motion class and nothing
 * below matches, so the cost is an unused stylesheet rather than a broken one.
 *
 * Elements are revealed by theme.js adding .is-visible. Nothing here hides
 * content on its own: if the script never runs, the .va-reveal class is never
 * applied either and everything is visible.
 *
 * The travel is small — 12px and a fade. A catalogue that slides in from the
 * side on every scroll is a catalogue nobody scrolls twice.
 */

.va-motion .va-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s var(--va-ease), transform 0.6s var(--va-ease);
	transition-delay: var(--va-reveal-delay, 0ms);
}

.va-motion .va-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* The rail's own snapping already moves; a reveal on top of it reads as a
   stutter, so the cards in it are excluded and the rail itself is what fades. */
.va-motion .va-rail.va-reveal {
	transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.va-motion .va-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.va-card__image,
	.va-line-card__media img,
	.va-line-card__arrow {
		transition: none;
	}

	.va-rail ul.products {
		scroll-behavior: auto;
	}
}