/*
 * WP Agent Builder scroll effects (StyleEngine\ScrollEffects): parallax,
 * text moving sideways, word-by-word reveal, stacked sticky cards, footer
 * reveal. Loaded only on pages that render such a block, never in the editors.
 *
 * CSS scroll-driven animations first (animation-timeline: view()). Browsers
 * without them get the same motion from assets/js/scroll-effects.js, which
 * marks <html class="wpab-sfx-js"> and sets --wpab-sfx-p on each block (its
 * progress through the screen: 0 = top edge at the bottom of the screen,
 * 1 = bottom edge at the top). Reduced motion, or neither: every block shows
 * in its final, static state.
 */

/* Parallax: the image (section: its background) is enlarged by --wpab-px-s and travels ±--wpab-px-y inside its frame. */
@keyframes wpab-parallax {

	from {
		scale: var(--wpab-px-s, 1);
		translate: 0 calc(var(--wpab-px-y, 0%) * -1);
	}

	to {
		scale: var(--wpab-px-s, 1);
		translate: 0 var(--wpab-px-y, 0%);
	}
}

/* Sideways text: from +--wpab-mv-x to ---wpab-mv-x of its own width. */
@keyframes wpab-move {

	from {
		translate: var(--wpab-mv-x, 0%) 0;
	}

	to {
		translate: calc(var(--wpab-mv-x, 0%) * -1) 0;
	}
}

@keyframes wpab-word {

	from {
		opacity: 0.15;
	}

	to {
		opacity: 1;
	}
}

@keyframes wpab-word-rise {

	from {
		opacity: 0;
		translate: 0 0.4em;
	}
}

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

	@supports (animation-timeline: view()) {

		.wpab-parallax {
			view-timeline: --wpab-px block;
		}

		.wpab-parallax > .wpab-section__bg,
		.wpab-parallax > .wpab-image__frame > .wpab-image__img {
			animation: wpab-parallax linear both;
			animation-timeline: --wpab-px;
		}

		.wpab-scroll-move,
		.wpab-words-scroll {
			view-timeline: --wpab-tx block;
		}

		.wpab-scroll-move {
			overflow-x: clip;
		}

		.wpab-scroll-move .wpab-move {
			display: inline-block;
			white-space: var(--wpab-mv-ws, nowrap);
			animation: wpab-move linear both;
			animation-timeline: --wpab-tx;
		}

		/* Word i of n turns from faint to full between 25 % and 50 % of the block's way up the screen. */
		.wpab-words-scroll:not(.wpab-words-done) .wpab-w {
			animation: wpab-word linear both;
			animation-timeline: --wpab-tx;
			animation-range: cover calc(25% + 25% * var(--wpab-w-i, 0) / var(--wpab-w-n, 1)) cover calc(25% + 25% * (var(--wpab-w-i, 0) + 1) / var(--wpab-w-n, 1));
		}
	}

	/* Script fallback (no scroll timelines): the same values from --wpab-sfx-p. */
	html.wpab-sfx-js .wpab-parallax > .wpab-section__bg,
	html.wpab-sfx-js .wpab-parallax > .wpab-image__frame > .wpab-image__img {
		scale: var(--wpab-px-s, 1);
		translate: 0 calc(var(--wpab-px-y, 0%) * (2 * var(--wpab-sfx-p, 0.5) - 1));
	}

	html.wpab-sfx-js .wpab-scroll-move {
		overflow-x: clip;
	}

	html.wpab-sfx-js .wpab-scroll-move .wpab-move {
		display: inline-block;
		white-space: var(--wpab-mv-ws, nowrap);
		translate: calc(var(--wpab-mv-x, 0%) * (1 - 2 * var(--wpab-sfx-p, 0.5))) 0;
	}

	html.wpab-sfx-js .wpab-words-scroll:not(.wpab-words-done) .wpab-w {
		opacity: calc(0.15 + 0.85 * clamp(0, (var(--wpab-sfx-p, 1) - 0.25 - 0.25 * var(--wpab-w-i, 0) / var(--wpab-w-n, 1)) * var(--wpab-w-n, 1) / 0.25, 1));
	}

	/* Rise: played once by the entrance script (wpab-anim + wpab-in), one word after another. */
	html.wpab-anim-on .wpab-words-rise .wpab-w {
		display: inline-block;
	}

	html.wpab-anim-on .wpab-words-rise a .wpab-w {
		text-decoration: inherit;
	}

	html.wpab-anim-on .wpab-words-rise:not(.wpab-in) .wpab-w {
		opacity: 0;
		translate: 0 0.4em;
	}

	html.wpab-anim-on .wpab-words-rise.wpab-in .wpab-w {
		animation: wpab-word-rise var(--wpab-anim-dur, 600ms) var(--wpab-anim-ease, ease-out) calc(var(--wpab-anim-delay, 0ms) + var(--wpab-w-i, 0) * 60ms) backwards;
	}
}

/* Stacked sticky cards: index of each child; the per-uid CSS sticks them where stickyCards is on. */
.wpab-sticky-cards > :nth-child(2) {
	--wpab-sc-i: 1;
}

.wpab-sticky-cards > :nth-child(3) {
	--wpab-sc-i: 2;
}

.wpab-sticky-cards > :nth-child(4) {
	--wpab-sc-i: 3;
}

.wpab-sticky-cards > :nth-child(5) {
	--wpab-sc-i: 4;
}

.wpab-sticky-cards > :nth-child(6) {
	--wpab-sc-i: 5;
}

.wpab-sticky-cards > :nth-child(7) {
	--wpab-sc-i: 6;
}

.wpab-sticky-cards > :nth-child(8) {
	--wpab-sc-i: 7;
}

.wpab-sticky-cards > :nth-child(n + 9) {
	--wpab-sc-i: 8;
}

/* Reduced motion: the cards stay in the flow (relative keeps them a containing block), none covers another. */
@media (prefers-reduced-motion: reduce) {

	.wpab-sticky-cards > * {
		--wpab-sc-pos: relative;
		--wpab-sc-t: auto;
	}
}

/*
 * Footer reveal: the footer template part sticks to the bottom under the rest
 * of the page, which scrolls up over it (opaque, the body's background).
 * The header part keeps its own stacking (over/sticky headers stay on top).
 * scroll-effects.js adds wpab-footer-reveal--off while the footer is taller
 * than the screen.
 */
.wp-site-blocks:has(> * > .wpab-footer-reveal:not(.wpab-footer-reveal--off)) {
	background-color: inherit;
}

.wp-site-blocks > :has(> .wpab-footer-reveal:not(.wpab-footer-reveal--off)) {
	position: sticky;
	bottom: 0;
	z-index: 0;
}

.wp-site-blocks:has(> * > .wpab-footer-reveal:not(.wpab-footer-reveal--off)) > :not(:has(> .wpab-footer-reveal), :has(.wpab-header)) {
	position: relative;
	z-index: 1;
	background-color: inherit;
}