/*
 * Water Shape Motion for Elementor by City Morph
 * Slow, layered water-like drift for Elementor shape dividers.
 *
 * Turn it on by any of:
 *   - class "cm-water-on" on a Section or Container (Advanced > CSS Classes)
 *   - the "Water Motion (City Morph)" panel in the Style tab
 *   - Settings > Water Shapes > "Animate all shape dividers" (adds body.cm-water-all)
 *
 * Variables:
 *   --cm-water-speed   base duration in seconds
 *   --cm-water-travel  sideways travel in percent (kept <= 12)
 *   --cm-water-bob     rise height in px
 */

:is(.cm-water-on > .elementor-shape, .cm-water-all .elementor-shape) .elementor-shape-fill {
	--cm-s: var(--cm-water-speed, 30);
	--cm-t: var(--cm-water-travel, 6);
	--cm-b: var(--cm-water-bob, 4px);

	transform-box: fill-box;
	transform-origin: center center;
	will-change: transform;
	animation-name: cm-water-drift;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: calc(var(--cm-s) * 1s);
}

/* Each layer gets its own pace, direction and starting phase so they never move in sync. */
:is(.cm-water-on > .elementor-shape, .cm-water-all .elementor-shape) .elementor-shape-fill:nth-of-type(1) {
	animation-duration: calc(var(--cm-s) * 1.15s);
	animation-delay: calc(var(--cm-s) * -0.30s);
}
:is(.cm-water-on > .elementor-shape, .cm-water-all .elementor-shape) .elementor-shape-fill:nth-of-type(2) {
	animation-duration: calc(var(--cm-s) * 0.85s);
	animation-direction: alternate-reverse;
	animation-delay: calc(var(--cm-s) * -0.10s);
}
:is(.cm-water-on > .elementor-shape, .cm-water-all .elementor-shape) .elementor-shape-fill:nth-of-type(3) {
	animation-duration: calc(var(--cm-s) * 1.40s);
	animation-delay: calc(var(--cm-s) * -0.55s);
}
:is(.cm-water-on > .elementor-shape, .cm-water-all .elementor-shape) .elementor-shape-fill:nth-of-type(4) {
	animation-duration: calc(var(--cm-s) * 1.00s);
	animation-direction: alternate-reverse;
	animation-delay: calc(var(--cm-s) * -0.75s);
}

/* Reverse option flips the direction of every layer. */
:is(.cm-water-dir-reverse > .elementor-shape, .cm-water-dir-reverse .elementor-shape) .elementor-shape-fill:nth-of-type(odd) {
	animation-direction: alternate-reverse;
}
:is(.cm-water-dir-reverse > .elementor-shape, .cm-water-dir-reverse .elementor-shape) .elementor-shape-fill:nth-of-type(even) {
	animation-direction: alternate;
}

/*
 * The path is stretched a little wider than its box so that sliding it sideways
 * never uncovers an edge. The rise only goes toward the solid side of the divider,
 * so no gap opens up there either.
 */
@keyframes cm-water-drift {
	0% {
		transform: translateX(calc(var(--cm-t, 6) * -1%)) translateY(0) scaleX(calc(1.02 + var(--cm-t, 6) * 0.02));
	}
	50% {
		transform: translateX(0) translateY(calc(var(--cm-b, 4px) * -1)) scaleX(calc(1.02 + var(--cm-t, 6) * 0.02));
	}
	100% {
		transform: translateX(calc(var(--cm-t, 6) * 1%)) translateY(0) scaleX(calc(1.02 + var(--cm-t, 6) * 0.02));
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.cm-water-on > .elementor-shape, .cm-water-all .elementor-shape) .elementor-shape-fill {
		animation: none !important;
		transform: none !important;
	}
}