/* 语义色：优先吃整页换色写入的 --color-base-*，没有则回退到当前页配色方案 */
.c3-divider-tone--background-1 {
    --c3-divider-fill: var(--color-base-background-1, var(--color-background, var(--color-page-background)));
}

.c3-divider-tone--background-2 {
    --c3-divider-fill: var(--color-base-background-2, var(--color-media-background, var(--color-card-background)));
}

.c3-divider-tone--accent-1 {
    --c3-divider-fill: var(--color-base-accent-1, var(--color-button-background));
}

.c3-divider-tone--accent-2 {
    --c3-divider-fill: var(--color-base-accent-2, var(--color-button-secondary-background));
}

.c3-divider-tone--inverse {
    --c3-divider-fill: var(--color-base-text, var(--color-text));
}

.c3-divider-pad {
    background-color: rgb(var(--c3-divider-fill));
}

.section-divider {
    position: relative;
}

.section-divider::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: calc(100% - 1px);
    top: -1px;
    z-index: -1;
    width: 100%;
    background: rgb(var(--c3-divider-fill, var(--color-background)));
}

.section-divider.color-gradient::before {
    display: none;
}

.section-divider__svg {
    --max-height: 150px;
    background: none;
    position: relative;
    overflow: hidden;
    transform: translateY(1px);
}

.section-divider__svg hr {
    margin: 0;
    box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
}

.line.color-accent-1,
.line.color-accent-2,
.line.color-background-1,
.line.color-background-2,
.line.color-inverse,
.line.color-custom {
    stroke: rgb(var(--color-background));
}
.section-divider__svg svg {
    color: rgb(var(--c3-divider-fill, var(--color-background)));
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    max-height: var(--max-height);
}

.section-shape {
    display: block;
    width: 100%;
    height: auto;
    max-height: var(--max-height, 180px);
}

.waves-animated-1 {
    --max-height: 30px;
    margin: 0;
}

.parallax1>use {
    animation: move-forever1 10s linear infinite;
}

.parallax2>use {
    animation: move-forever2 8s linear infinite;
    opacity: 0.4;
}

.parallax3>use {
    animation: move-forever3 6s linear infinite;
    opacity: 0.3;
}

.parallax4>use {
    animation: move-forever4 4s linear infinite;
    opacity: 0.2;
}

@keyframes move-forever1 {
    0% {
        transform: translate(85px, 0%);
    }

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

@keyframes move-forever2 {
    0% {
        transform: translate(-90px, 0%);
    }

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

@keyframes move-forever3 {
    0% {
        transform: translate(85px, 0%);
    }

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

@keyframes move-forever4 {
    0% {
        transform: translate(-90px, 0%);
    }

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

@media screen and (min-width: 1000px) {
    .waves-animated-1 {
        --max-height: 60px;
    }
}