.surface-hero {
--helen-wave-color: var(--color-surface-hero);
}
.surface-person {
--helen-wave-color: var(--color-surface-person);
}
.surface-service {
--helen-wave-color: var(--color-surface-service);
}
.surface-footer {
--helen-wave-color: var(--color-surface-footer);
}
.surface-base {
--helen-wave-color: var(--color-surface-base);
} .helen-wave {
position: absolute;
inset-inline: 0;
block-size: calc(var(--wave-height) + 1px);
z-index: 1;
pointer-events: none;
}
.helen-wave--top {
inset-block-end: calc(100% - 1px);
}
.helen-wave--bottom {
inset-block-start: calc(100% - 1px);
}
.helen-wave svg {
display: block;
inline-size: 100%;
block-size: 100%;
} .helen-wave--bottom svg {
transform: scaleY(-1);
}
.helen-wave path {
fill: var(--helen-wave-color);
} .clip-to-wave {
border-block-end: var(--wave-height) solid transparent;
margin-block-end: calc(-1 * var(--wave-height));
mask-image: linear-gradient(#000 0 0), var(--helen-wave-c-mask);
mask-origin: padding-box;
mask-size: 100% 100%, 100vw calc(var(--wave-height) + 1px);
mask-position: 0 0, left 50% bottom calc(-1 * var(--wave-height));
mask-repeat: no-repeat;
}