/* WAVES */
@keyframes move-wave {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

wave-separator-component {
    display: block;
    margin-bottom: -1px;
}

.wave-separator {
    width: 100%;
    height: 100px;
    position: relative;
    overflow: hidden;
    margin-top: -99px;
    z-index: 1;
}

.wave-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100px;
    animation: move-wave linear infinite;
}

.wave-layer svg {
    width: 100%;
    height: 100px;
    display: block;
    background: transparent;
}

.wave-layer.wave-1 {
    opacity: 0.9;
    animation-duration: 7s;
    animation-delay: -1s;
}

.wave-layer.wave-2 {
    opacity: 0.8;
    animation-duration: 10s;
}

.wave-layer.wave-3 {
    opacity: 0.7;
    animation-duration: 13s;
}