@keyframes cosineWave {
	0% {
		background-position-x: var(--start);
	}
	50% {
		background-position-x: var(--distance);
	}
	100% {
		background-position-x: var(--start);
	}
}

.wave-move {
	position: absolute;
	/* Other styles like top, left can be set inline or via classes */
	display: inline-block; /* or block as needed */
	animation: cosineWave infinite ease-in-out;
	background-repeat: no-repeat; /* or no-repeat, as needed */
	background-position-x: 0;
	pointer-events: none;
	z-index: 0;
}

.box-content {
	position: relative;
	z-index: 100;
}
/* Instances with different parameters */
.wave-1 {
	--distance: 80%; /*-320*/
	--duration: 20s;
	--start: 40%; /*-220*/
	height: 100%; /*260*/
	width: 100%; /*1123*/
	animation-duration: var(--duration);
	background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iYyIgZGF0YS1uYW1lPSJXYXZlIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDI0MDAgMjk0LjM4Ij48cGF0aCBkPSJNMjQwMCwyOTQuMzhWMEMxNTQ0LjQ5LDU0Mi4wMiwxMTM4LjU3LTgwLjg5LDM4Ny4zOCwyOTQuMzhoMjAxMi42MloiIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4zIi8+PC9zdmc+');
	/* background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMjQwMCA1NTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+PHBhdGggaWQ9ImQiIGQ9Ik0wLDczNy41MUwwLDEzMDEuNDNMMjQwMCwxMzAxLjQzTDI0MDAsMTgwQzE0MDguNTcsODA4LjE0IDEwMjAuOTQsLTEyOC4yNSAwLDczNy41MVoiIHN0eWxlPSJmaWxsOndoaXRlO2ZpbGwtb3BhY2l0eTowLjE1O2ZpbGwtcnVsZTpub256ZXJvOyIvPjwvc3ZnPg==');*/
	/* ORIGINAL background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%202580%20423%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1992.44%2C422.637C1351.18%2C112.279%20965.28%2C743.653%20281.45%2C155.34C1032.68%2C625.292%201261.62%2C-178.217%202022.39%2C422.637L1992.44%2C422.637L1992.44%2C422.637Z%22%20style%3D%22fill%3A%23fff%3Bfill-opacity%3A0.15%3B%22%2F%3E%0A%3C%2Fsvg%3E'); */
	background-position-y: bottom;
	background-size: 203%;
	background-repeat: no-repeat;
	bottom: 0;
	left: 0;
	pointer-events: none;
}

.wave-2 {
	--distance: 0%; /*-230*/
	--duration: 27s; 
	--start: 60%; /*-170*/
	height: 100%; /*151*/
	width: 100%; /*863*/	
	animation-duration: var(--duration);
	background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iYiIgZGF0YS1uYW1lPSJXYXZlIDIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDI0MDAgMTY5Ij4KPHBhdGggZD0iTTM2OC4zNywxNjlDMjU1LjgxLDEzNy4zOSwxMzQuMTUsODMuOTIsMCwwdjE2OWgzNjguMzdaTTIwMzguNDMsMTY5Yy00NTAuMy0yMzUuMDMtNzU0LjAzLTc5LjM5LTEwOTQuOTksMGgxMDk0Ljk5WiIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIwLjMyIi8+PC9zdmc+');	
	/*background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMjQwMCA1NTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+PHBhdGggZD0iTS0xMjAsMjg1LjM2TC0xMjAsMTMyMEwyMjgwLDEzMjBMMjI4MCw3MDUuNkMxMjAyLjQ2LC0yMTQuMjUgOTA3LjI1LDkyNy45OCAtMTIwLDI4NS4zNloiIHN0eWxlPSJmaWxsOndoaXRlO2ZpbGwtb3BhY2l0eTowLjE1O2ZpbGwtcnVsZTpub256ZXJvOyIvPjwvc3ZnPg==');*/
	/*background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMjQwMCA1NTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiID4KICAgIDxwYXRoIGlkPSJkIiBkPSJNMCw2ODcuNTFMMCwxMjUxLjQzTDI0MDAsMTI1MS40M0wyNDAwLDEzMEMxNDA4LjU3LDc1OC4xNCAxMDIwLjk0LC0xNzguMjUgMCw2ODcuNTFaIiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMTUiLz4KPC9zdmc+');*/
	/* ORIGINAL background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%202580%20423%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M321.168%2C422.637C1171.4%2C-147.599%201561.19%2C601.489%202459.8%2C32.155C1698.42%2C682.667%201157.66%2C215.031%20459.408%2C422.637L321.163%2C422.637L321.168%2C422.637Z%22%20style%3D%22fill%3A%23fff%3Bfill-opacity%3A0.15%3B%22%2F%3E%0A%3C%2Fsvg%3E'); */
	background-position-y: bottom;
	background-size: 203%;
	background-repeat: no-repeat;
	bottom: 0;
	left: 0;
	pointer-events: none;
}


.wave-mask {
	position: absolute;
	height: 100%; /*260*/
	width: calc(2px + 100%); /*1123*/
	margin-bottom: -2px;
	margin-left: -1px;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTIwMCA1NTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiID4KICAgIDxwYXRoIGlkPSJiIiBkPSJNMCw0NDkuNjA1TDAsNTUwTDEyMDAsNTUwTDEyMDAsNTAwLjgxMUM2NTIuNDgsMjcwLjk4MyA1MTMuNDgxLDcxMS41MDMgMCw0NDkuNjA1WiIgZmlsbD0iI2ZmZiIvPgo8L3N2Zz4=');
	/* ORIGINAL background-image: url('data:image/svg+xml,%3Csvg%20id%3D%22a%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20viewBox%3D%221%200%20560%2050%22%3E%0A%3Cpath%20id%3D%22b%22%20data-name%3D%22Wave%20Mask%22%20d%3D%22M0%2C8.65v41.98h563.73v-17.04C306.52-78.35%2C241.22%2C136.21%2C0%2C8.65Z%22%20fill%3D%22%23fff%22%2F%3E%0A%3C%2Fsvg%3E'); */
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: 100%;
	bottom: 0;
	left: 0;
	pointer-events: none;
}