/*
 * WP Agent Builder effects (style groups animation + hover). Loaded only on
 * pages that render a block with an effect (StyleEngine\Effects). Per-block
 * values come from the style engine as custom properties / hover rules.
 */

/* Entrance: defaults per animated block, so nested blocks never inherit another block's timing. */
.wpab-anim {
	--wpab-anim-dur: 600ms;
	--wpab-anim-delay: 0ms;
	--wpab-anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--wpab-anim-stagger: 0ms;
	--wpab-anim-i: 0;
}

/*
 * Start state only once effects.js (or the head script) marked <html>: without
 * JavaScript, or with reduced motion, every block shows as is. Staggered
 * containers stay put; their child blocks (.wpab-anim-child, set by the script)
 * play the effect one after another.
 */
@media (prefers-reduced-motion: no-preference) {

	html.wpab-anim-on .wpab-anim:not(.wpab-anim-stagger):not(.wpab-in),
	html.wpab-anim-on .wpab-anim-stagger:not(.wpab-in) .wpab-anim-child {
		opacity: var(--wpab-a-o, 1);
		transform: var(--wpab-a-tf, none);
	}

	html.wpab-anim-on .wpab-anim.wpab-in:not(.wpab-anim-stagger),
	html.wpab-anim-on .wpab-anim-stagger.wpab-in .wpab-anim-child {
		animation: wpab-entrance var(--wpab-anim-dur) var(--wpab-anim-ease) calc(var(--wpab-anim-delay) + var(--wpab-anim-i) * var(--wpab-anim-stagger)) backwards;
	}
}

/* "backwards" holds the start state during the delay; afterwards the block's own styles apply again. */
@keyframes wpab-entrance {

	from {
		opacity: var(--wpab-a-o, 1);
		transform: var(--wpab-a-tf, none);
	}
}

/* Hover: transitions of the properties the hover group changes. */
.wpab-hover {
	transition-property: translate, scale, box-shadow, border-color, background-color, color;
	transition-duration: var(--wpab-hover-dur, 250ms);
	transition-timing-function: ease;
}

.wpab-hover :is(.wpab-image__img, .wpab-section__bg) {
	transition: scale var(--wpab-hover-dur, 250ms) ease;
}

/* Reduced motion: colours and shadows still change, nothing moves. */
@media (prefers-reduced-motion: reduce) {

	.wpab-hover,
	.wpab-hover :is(.wpab-image__img, .wpab-section__bg) {
		transition: none;
	}

	.wpab-hover:is(:hover, :focus-visible, :has(:focus-visible)),
	.wpab-hover:is(:hover, :focus-visible, :has(:focus-visible)) :is(.wpab-image__img, .wpab-section__bg) {
		translate: none !important;
		scale: none !important;
	}
}