/* 波浪横幅专用选择器 - 避免与主题其他样式冲突 */
.sf-wave-banner {
    position: relative;
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
    overflow: hidden;
    border-radius: 0.75rem;
    margin: 1.5rem 0;
}

.sf-wave-banner__content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #fff;
    text-align: center;
    padding: 2rem;
}

/* 波浪动画层 */
.sf-wave-banner__wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,120 350,0 600,60 C850,120 1050,0 1200,60 L1200,120 L0,120 Z' fill='rgba(255,255,255,0.3)'/%3E%3C/svg%3E") repeat-x;
    background-size: 600px 100px;
    animation: sf-wave-banner-move 6s linear infinite;
}

.sf-wave-banner__wave:nth-child(2) {
    bottom: 10px;
    opacity: 0.5;
    animation-duration: 8s;
    animation-direction: reverse;
}

.sf-wave-banner__wave:nth-child(3) {
    bottom: 20px;
    opacity: 0.3;
    animation-duration: 10s;
}

@keyframes sf-wave-banner-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}