/* =========================================================
   Section Waves
   Version: 1.3
   ---------------------------------------------------------
   Reusable SVG section wave utilities for parent containers.

   Shape variants:
   - .section-wave-slope
   - .section-wave-crest
   - .section-wave-double
   - .section-wave-arc

   Reverse variants:
   - .section-wave-slope-reverse
   - .section-wave-crest-reverse
   - .section-wave-double-reverse
   - .section-wave-arc-reverse

   Light gray variants:
   - .section-wave-slope-gray
   - .section-wave-crest-gray
   - .section-wave-double-gray
   - .section-wave-arc-gray

   Light gray reverse variants:
   - .section-wave-slope-gray-reverse
   - .section-wave-crest-gray-reverse
   - .section-wave-double-gray-reverse
   - .section-wave-arc-gray-reverse

   Optional modifiers:
   - .section-wave-compact
   - .section-wave-tall

   Designed for GeneratePress Blocks
   Crafted by Sparky and Kernel

   Bee Media
   ========================================================= */

/* =========================================================
   Core engine
   ========================================================= */

.section-wave-slope,
.section-wave-crest,
.section-wave-double,
.section-wave-arc,
.section-wave-slope-reverse,
.section-wave-crest-reverse,
.section-wave-double-reverse,
.section-wave-arc-reverse,
.section-wave-slope-gray,
.section-wave-crest-gray,
.section-wave-double-gray,
.section-wave-arc-gray,
.section-wave-slope-gray-reverse,
.section-wave-crest-gray-reverse,
.section-wave-double-gray-reverse,
.section-wave-arc-gray-reverse {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	--section-wave-height: clamp(10rem, 24vw, 20rem);
	--section-wave-bottom-space: clamp(7rem, 14vw, 14rem);

	--section-wave-color: #d0d8ef;
	--section-wave-color-2: rgba(208,216,239,0.72);

	--section-wave-opacity: 1;
	--section-wave-opacity-2: 0.72;

	padding-bottom: var(--section-wave-bottom-space);
}

/* Keep content above decorative wave layers */
.section-wave-slope > *,
.section-wave-crest > *,
.section-wave-double > *,
.section-wave-arc > *,
.section-wave-slope-reverse > *,
.section-wave-crest-reverse > *,
.section-wave-double-reverse > *,
.section-wave-arc-reverse > *,
.section-wave-slope-gray > *,
.section-wave-crest-gray > *,
.section-wave-double-gray > *,
.section-wave-arc-gray > *,
.section-wave-slope-gray-reverse > *,
.section-wave-crest-gray-reverse > *,
.section-wave-double-gray-reverse > *,
.section-wave-arc-gray-reverse > * {
	position: relative;
	z-index: 2;
}

/* Primary wave layer */
.section-wave-slope::after,
.section-wave-crest::after,
.section-wave-double::after,
.section-wave-arc::after,
.section-wave-slope-reverse::after,
.section-wave-crest-reverse::after,
.section-wave-double-reverse::after,
.section-wave-arc-reverse::after,
.section-wave-slope-gray::after,
.section-wave-crest-gray::after,
.section-wave-double-gray::after,
.section-wave-arc-gray::after,
.section-wave-slope-gray-reverse::after,
.section-wave-crest-gray-reverse::after,
.section-wave-double-gray-reverse::after,
.section-wave-arc-gray-reverse::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--section-wave-height);
	z-index: 0;
	pointer-events: none;
	background: var(--section-wave-color);
	opacity: var(--section-wave-opacity);

	-webkit-mask-image: var(--section-wave-mask);
	mask-image: var(--section-wave-mask);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: center bottom;
	mask-position: center bottom;
}

/* Secondary wave layer, double variants only */
.section-wave-double::before,
.section-wave-double-reverse::before,
.section-wave-double-gray::before,
.section-wave-double-gray-reverse::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(var(--section-wave-height) * 1.05);
	z-index: 1;
	pointer-events: none;
	background: var(--section-wave-color-2);
	opacity: var(--section-wave-opacity-2);

	-webkit-mask-image: var(--section-wave-mask-2);
	mask-image: var(--section-wave-mask-2);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: center bottom;
	mask-position: center bottom;
}

/* =========================================================
   Wave geometry
   Large abstract diagonal waves with rounded single-shape flow
   ========================================================= */

:root {
	/* Low left to high right */
	--section-wave-slope-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 520' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 520 C260 460 420 395 610 285 C820 165 1050 -15 1440 -155 L1440 520 L0 520 Z' fill='%23000'/%3E%3C/svg%3E");
	--section-wave-crest-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 520' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 520 C260 500 430 390 650 285 C900 165 1110 30 1440 -95 L1440 520 L0 520 Z' fill='%23000'/%3E%3C/svg%3E");
	--section-wave-arc-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 560' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 560 C300 510 470 420 665 285 C870 145 1095 -45 1440 -195 L1440 560 L0 560 Z' fill='%23000'/%3E%3C/svg%3E");

	/* High left to low right */
	--section-wave-slope-reverse-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 520' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 -155 C390 -15 620 165 830 285 C1020 395 1180 460 1440 520 L1440 520 L0 520 Z' fill='%23000'/%3E%3C/svg%3E");
	--section-wave-crest-reverse-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 520' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 -95 C330 30 540 165 790 285 C1010 390 1180 500 1440 520 L1440 520 L0 520 Z' fill='%23000'/%3E%3C/svg%3E");
	--section-wave-arc-reverse-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 560' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 -195 C345 -45 570 145 775 285 C970 420 1140 510 1440 560 L1440 560 L0 560 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* =========================================================
   Ocean blue variants
   ========================================================= */

.section-wave-slope {
	--section-wave-color: #d0d8ef;
	--section-wave-mask: var(--section-wave-slope-mask);
}

.section-wave-crest {
	--section-wave-color: var(--global-color-8);
	--section-wave-mask: var(--section-wave-crest-mask);
}

.section-wave-double {
	--section-wave-color: var(--global-color-11);
	--section-wave-color-2: #d0d8ef;
	--section-wave-mask: var(--section-wave-slope-mask);
	--section-wave-mask-2: var(--section-wave-crest-mask);
}

.section-wave-arc {
	--section-wave-color: var(--global-color-9);
	--section-wave-height: clamp(11rem, 26vw, 22rem);
	--section-wave-bottom-space: clamp(8rem, 16vw, 16rem);
	--section-wave-mask: var(--section-wave-arc-mask);
}

/* =========================================================
   Ocean blue reverse variants
   ========================================================= */

.section-wave-slope-reverse {
	--section-wave-color: #d0d8ef;
	--section-wave-mask: var(--section-wave-slope-reverse-mask);
}

.section-wave-crest-reverse {
	--section-wave-color: var(--global-color-8);
	--section-wave-mask: var(--section-wave-crest-reverse-mask);
}

.section-wave-double-reverse {
	--section-wave-color: var(--global-color-11);
	--section-wave-color-2: #d0d8ef;
	--section-wave-mask: var(--section-wave-slope-reverse-mask);
	--section-wave-mask-2: var(--section-wave-crest-reverse-mask);
}

.section-wave-arc-reverse {
	--section-wave-color: var(--global-color-9);
	--section-wave-height: clamp(11rem, 26vw, 22rem);
	--section-wave-bottom-space: clamp(8rem, 16vw, 16rem);
	--section-wave-mask: var(--section-wave-arc-reverse-mask);
}

/* =========================================================
   Light gray variants
   ========================================================= */

.section-wave-slope-gray {
	--section-wave-color: #dfe3e8;
	--section-wave-mask: var(--section-wave-slope-mask);
}

.section-wave-crest-gray {
	--section-wave-color: #cfd5dc;
	--section-wave-mask: var(--section-wave-crest-mask);
}

.section-wave-double-gray {
	--section-wave-color: #c5ccd4;
	--section-wave-color-2: #e3e7eb;
	--section-wave-mask: var(--section-wave-slope-mask);
	--section-wave-mask-2: var(--section-wave-crest-mask);
}

.section-wave-arc-gray {
	--section-wave-color: var(--contrast-2);
	--section-wave-height: clamp(11rem, 26vw, 22rem);
	--section-wave-bottom-space: clamp(8rem, 16vw, 16rem);
	--section-wave-mask: var(--section-wave-arc-mask);
}

/* =========================================================
   Light gray reverse variants
   ========================================================= */

.section-wave-slope-gray-reverse {
	--section-wave-color: #dfe3e8;
	--section-wave-mask: var(--section-wave-slope-reverse-mask);
}

.section-wave-crest-gray-reverse {
	--section-wave-color: #cfd5dc;
	--section-wave-mask: var(--section-wave-crest-reverse-mask);
}

.section-wave-double-gray-reverse {
	--section-wave-color: #c5ccd4;
	--section-wave-color-2: #e3e7eb;
	--section-wave-mask: var(--section-wave-slope-reverse-mask);
	--section-wave-mask-2: var(--section-wave-crest-reverse-mask);
}

.section-wave-arc-gray-reverse {
	--section-wave-color: var(--contrast-2);
	--section-wave-height: clamp(11rem, 26vw, 22rem);
	--section-wave-bottom-space: clamp(8rem, 16vw, 16rem);
	--section-wave-mask: var(--section-wave-arc-reverse-mask);
}

/* =========================================================
   Transparency utilities
   Add one class with any wave variant
   ========================================================= */

.section-wave-transp10 {
	--section-wave-opacity: 0.1;
	--section-wave-opacity-2: 0.1;
}

.section-wave-transp20 {
	--section-wave-opacity: 0.2;
	--section-wave-opacity-2: 0.2;
}

.section-wave-transp30 {
	--section-wave-opacity: 0.3;
	--section-wave-opacity-2: 0.3;
}

.section-wave-transp40 {
	--section-wave-opacity: 0.4;
	--section-wave-opacity-2: 0.4;
}

.section-wave-transp50 {
	--section-wave-opacity: 0.5;
	--section-wave-opacity-2: 0.5;
}

.section-wave-transp60 {
	--section-wave-opacity: 0.6;
	--section-wave-opacity-2: 0.6;
}

.section-wave-transp70 {
	--section-wave-opacity: 0.7;
	--section-wave-opacity-2: 0.7;
}

.section-wave-transp80 {
	--section-wave-opacity: 0.8;
	--section-wave-opacity-2: 0.8;
}

.section-wave-transp90 {
	--section-wave-opacity: 0.9;
	--section-wave-opacity-2: 0.9;
}

/* =========================================================
   Optional modifiers
   ========================================================= */

.section-wave-compact {
	--section-wave-height: clamp(7rem, 16vw, 14rem);
	--section-wave-bottom-space: clamp(5rem, 10vw, 10rem);
}

.section-wave-tall {
	--section-wave-height: clamp(13rem, 30vw, 26rem);
	--section-wave-bottom-space: clamp(10rem, 20vw, 20rem);
}