/*
 * Scroll animations (Story 1395), loaded only on the home page and the
 * solution pages (pages built from [go-section] blocks): sections, cards and picture and text rows
 * fade in and rise once as they enter the screen. The script
 * (assets/js/go-motion.js) adds .go-reveal to an element that is still below
 * the screen and .go-in when it arrives, then removes both, so nothing here
 * outlives the animation. Without the script nothing is ever hidden.
 *
 * The five values below are the whole look. Layout only: colours, radii and
 * shadows stay the theme's.
 */

:root {
	--go-motion-distance: 32px;  /* how far an element rises */
	--go-motion-side: 40px;      /* how far a picture or text column travels sideways */
	--go-motion-duration: 700ms;
	--go-motion-stagger: 100ms;  /* one card after the one before it */
	--go-hover-lift: -6px;
	--go-motion-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 767.98px) {
	:root {
		--go-motion-distance: 16px;
		--go-motion-side: 0px;   /* phones: rise only, never sideways */
	}
}

@media (prefers-reduced-motion: no-preference) {

	/* ---- As the visitor scrolls ---- */

	.go-reveal {
		opacity: 0 !important;
		transform: translate3d(calc(var(--go-motion-side) * var(--go-dir, 0)), var(--go-motion-distance), 0) !important;
		transition: none !important;
	}

	.go-reveal.go-reveal-side {
		transform: translate3d(calc(var(--go-motion-side) * var(--go-dir, 0)), 0, 0) !important;
	}

	/* Phones: the columns are stacked, so they rise like everything else. */
	@media (max-width: 767.98px) {
		.go-reveal.go-reveal-side {
			transform: translate3d(0, var(--go-motion-distance), 0) !important;
		}
	}

	.go-reveal.go-in {
		opacity: 1 !important;
		transform: none !important;
		transition:
			opacity var(--go-motion-duration) var(--go-motion-ease) calc(var(--go-i, 0) * var(--go-motion-stagger)),
			transform var(--go-motion-duration) var(--go-motion-ease) calc(var(--go-i, 0) * var(--go-motion-stagger)) !important;
	}

	/* A column on its way in from the side must not widen the page. */
	.go-motion .go-band,
	.go-motion .free-plan {
		overflow-x: clip;
	}
}

/* ---- Cards lift under the mouse ---- */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.go-band .five-box .card,
	.go-band .box-list {
		transition: transform .25s ease, box-shadow .25s ease;
	}

	.go-band .five-box .card:hover,
	.go-band .box-list:hover {
		transform: translateY(var(--go-hover-lift));
		box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 18%, transparent);
	}

	.go-no-motion .card:hover,
	.go-no-motion .box-list:hover {
		transform: none;
	}
}