/* Kova Effects core. Shared tokens every effect reads:
 *   --kfx-color  accent for the effect (set from the block's "Effect color"; falls back to the theme accent)
 *   --kfx-speed  duration multiplier (slow 1.6 / normal 1 / fast 0.6)
 * Layer helper: background effects paint on .kfx-layer or ::before/::after behind content (z-index -1 inside an isolated box). */
.kfx {
	--kfx-c: var(--kfx-color, var(--wp--preset--color--accent, var(--wp--preset--color--primary, #e8833a)));
	--kfx-s: var(--kfx-speed, 1);
	--kfx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Background slot: keep content above the painted layer. */
.kfx[class*="kfx-bg-"] { position: relative; isolation: isolate; overflow: hidden; }
.kfx-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* ---------- Entrance base (only once JS confirmed: html.kfx-js) ---------- */
.kfx-js .kfx-in { transition-property: opacity, transform, filter; transition-duration: calc(0.9s * var(--kfx-s)); transition-timing-function: var(--kfx-ease); will-change: opacity, transform; }
.kfx-js .kfx-in.is-in { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
	.kfx, .kfx *, .kfx::before, .kfx::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
	.kfx-js .kfx-in { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* Background layers inside layout-managed containers: never constrained, never pushing content down. */
.kfx-layer { max-width: none !important; margin: 0 !important; }
.kfx-layer + * { margin-block-start: 0; }

/* Cover blocks paint their own image + dim overlay; lift background effects above those, content above the effect. */
.wp-block-cover.kfx[class*="kfx-bg-"]::before,
.wp-block-cover.kfx[class*="kfx-bg-"] > .kfx-layer { z-index: 2; }
.wp-block-cover.kfx[class*="kfx-bg-"] > .wp-block-cover__inner-container { position: relative; z-index: 3; }