/* Wave Container */
.waves-container {
    pointer-events: none;
    position: relative;
    top: -20vh;
    width: 100%;
    height: 24vh;
    min-height: 80px;
    max-height: 300px;
    overflow: visible;
}

/* wave SVG */
.waves-container svg {
    pointer-events: none;
    width: 100%;
    height: 100%;
    display: block;
}

/* 确保波浪的所有子元素都不响应鼠标 */
.waves-container * {
    pointer-events: none !important;
}

/* Wave Animation */
.parallax>use {
    pointer-events: none;
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
    animation-delay: -10s;
    animation-duration: 5s;
}

.parallax>use:nth-child(2) {
    animation-delay: -8s;
    animation-duration: 10s;
}

.parallax>use:nth-child(3) {
    animation-delay: -6s;
    animation-duration: 15s;
}

.parallax>use:nth-child(4) {
    animation-delay: -1s;
    animation-duration: 20s;
}

/* Wave Movement Animation */
@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}

/* Wave Path Motion */
@keyframes wave-path-motion {
    0% {
        transform: translate(-90px, 0px);
    }

    6.25% {
        transform: translate(-78.75px, 5.5px);
    }

    12.5% {
        transform: translate(-67.5px, 9px);
    }

    18.75% {
        transform: translate(-56.25px, 10.5px);
    }

    25% {
        transform: translate(-45px, 11px);
    }

    31.25% {
        transform: translate(-33.75px, 10.5px);
    }

    37.5% {
        transform: translate(-22.5px, 9px);
    }

    43.75% {
        transform: translate(-11.25px, 5.5px);
    }

    50% {
        transform: translate(0px, 0px);
    }

    56.25% {
        transform: translate(11.25px, -5.5px);
    }

    62.5% {
        transform: translate(22.5px, -9px);
    }

    68.75% {
        transform: translate(33.75px, -10.5px);
    }

    75% {
        transform: translate(45px, -11px);
    }

    81.25% {
        transform: translate(56.25px, -10.5px);
    }

    87.5% {
        transform: translate(67.5px, -9px);
    }

    93.75% {
        transform: translate(78.75px, -5.5px);
    }

    100% {
        transform: translate(85px, 0px);
    }
}

/* Counter Horizontal Movement */
@keyframes counter-horizontal {
    0% {
        transform: translateX(90px);
    }

    6.25% {
        transform: translateX(78.75px);
    }

    12.5% {
        transform: translateX(67.5px);
    }

    18.75% {
        transform: translateX(56.25px);
    }

    25% {
        transform: translateX(45px);
    }

    31.25% {
        transform: translateX(33.75px);
    }

    37.5% {
        transform: translateX(22.5px);
    }

    43.75% {
        transform: translateX(11.25px);
    }

    50% {
        transform: translateX(0px);
    }

    56.25% {
        transform: translateX(-11.25px);
    }

    62.5% {
        transform: translateX(-22.5px);
    }

    68.75% {
        transform: translateX(-33.75px);
    }

    75% {
        transform: translateX(-45px);
    }

    81.25% {
        transform: translateX(-56.25px);
    }

    87.5% {
        transform: translateX(-67.5px);
    }

    93.75% {
        transform: translateX(-78.75px);
    }

    100% {
        transform: translateX(-85px);
    }
}