/**
 * Highrise scroll animations.
 *
 * Styles for assets/js/scroll-animations.js, which picks the blocks to
 * animate and adds the classes used here. Nothing in this file applies
 * until the script has added a class, so pages look normal without it.
 *
 * Settings, which can be changed here or overridden on any block:
 * --highrise-reveal-duration  How long each block takes to move into place.
 * --highrise-reveal-distance  How far below its place a block starts.
 * --highrise-reveal-stagger   The gap between blocks arriving together.
 * --highrise-reveal-easing    The speed curve: fast at first, then settling.
 *
 * Movement uses the translate property rather than transform, so it never
 * clashes with a transform a block already has, such as the button lift.
 *
 * Everything is inside a reduced motion check. The script also does
 * nothing for those visitors, so this is a second safety net.
 */

:root {
	--highrise-reveal-duration: 0.7s;
	--highrise-reveal-distance: 1.5rem;
	--highrise-reveal-stagger: 0.09s;
	--highrise-reveal-easing: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

	/* Waiting below the fold: hidden and slightly lower than its place. */
	.highrise-reveal {
		opacity: 0;
		translate: 0 var(--highrise-reveal-distance);
		transition:
			opacity var(--highrise-reveal-duration) var(--highrise-reveal-easing),
			translate var(--highrise-reveal-duration) var(--highrise-reveal-easing);

		/* The script numbers blocks arriving together 0, 1, 2 and so on. */
		transition-delay: calc(var(--highrise-reveal-order, 0) * var(--highrise-reveal-stagger));
	}

	/* Status table rows slide in from the left instead of rising. */
	tr.highrise-reveal {
		translate: calc(var(--highrise-reveal-distance) * -1) 0;
	}

	/* Scrolled into view: back in place. */
	.highrise-reveal.is-in-view {
		opacity: 1;
		translate: none;
	}

	/*
	 * SVG images wait hidden until the script has reloaded them, so their
	 * own animation starts in view. A short fade stops them popping in.
	 */
	.wp-block-image img {
		transition: opacity 0.3s ease;
	}

	.wp-block-image img.highrise-svg-wait {
		opacity: 0;
	}
}