/* 基本波浪分隔符样式 */
.wave-divider {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
    line-height: 0;
    z-index: 2;
}

.wave-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 150px;
    transform: rotateY(180deg);
}

.wave-fill {
    fill: var(--bg-color);
}

/* 向上弯曲的波浪 */
.wave-divider-up {
    transform: rotate(180deg);
}

/* 波浪变体高度 */
.wave-divider-small {
    height: 100px;
}

.wave-divider-small svg {
    height: 100px;
}

.wave-divider-large {
    height: 200px;
}

.wave-divider-large svg {
    height: 200px;
}

/* 锯齿式波浪 */
.wave-divider-zigzag svg {
    width: calc(150% + 1.3px);
    transform: translateX(-16.6%);
}

/* 多层波浪 */
.wave-divider-multi svg {
    width: calc(130% + 1.3px);
    transform: translateX(-15%);
}

/* 圆形波浪 */
.wave-divider-circle {
    height: 100px;
}

.wave-divider-circle svg {
    height: 100px;
}

/* 对角线波浪 */
.wave-divider-slant {
    height: 120px;
}

.wave-divider-slant svg {
    height: 120px;
}

/* 三角形波浪 */
.wave-divider-triangle {
    height: 60px;
}

.wave-divider-triangle svg {
    height: 60px;
}

/* 波浪动画 */
.wave-divider svg path {
    animation: waveAnimation 5s ease-in-out infinite;
}

.wave-divider-multi svg path:nth-child(1) {
    animation: waveAnimation 7s ease-in-out -2s infinite;
    opacity: 0.1;
}

.wave-divider-multi svg path:nth-child(2) {
    animation: waveAnimation 10s ease-in-out -1s infinite;
    opacity: 0.2;
}

.wave-divider-multi svg path:nth-child(3) {
    animation: waveAnimation 13s ease-in-out infinite;
    opacity: 0.5;
}

@keyframes waveAnimation {
    0% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX(-25px) translateY(10px);
    }
    100% {
        transform: translateX(0) translateY(0);
    }
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
    .wave-divider {
        height: 80px;
    }
    
    .wave-divider svg {
        height: 80px;
    }
    
    .wave-divider-large {
        height: 120px;
    }
    
    .wave-divider-large svg {
        height: 120px;
    }
    
    .wave-divider-circle, .wave-divider-circle svg,
    .wave-divider-slant, .wave-divider-slant svg {
        height: 60px;
    }
    
    .wave-divider-triangle, .wave-divider-triangle svg {
        height: 40px;
    }
}

@media screen and (max-width: 480px) {
    .wave-divider {
        height: 60px;
    }
    
    .wave-divider svg {
        height: 60px;
    }
    
    .wave-divider-large {
        height: 100px;
    }
    
    .wave-divider-large svg {
        height: 100px;
    }
}