/* 定义颜色变量 */
:root {
    /* 亮色模式下的颜色（半透明，alpha 可自行调整） */
    --footer-color-1: rgba(135, 193, 175, 0.75); /* 浅绿 */
    --footer-color-2: rgba(236, 169,  59, 0.75); /* 橙色 */
    --footer-color-3: rgba(154,  45,  40, 0.75); /* 深红 */
    --footer-speed: 90s;                          /* 滚动速度 */
}

/* 当切换到暗色模式时，覆盖变量值 */
[data-theme='dark'] {
    --footer-color-1: rgba( 45,  82,  74, 0.75); /* 深绿 */
    --footer-color-2: rgba(139, 109,  43, 0.75); /* 深橙 */
    --footer-color-3: rgba( 92,  29,  26, 0.75); /* 暗红 */
}

#footer {
    background: linear-gradient(
        90deg,
        var(--footer-color-1)   0%,
        var(--footer-color-1)  33.33%,
        var(--footer-color-2)  33.33%,
        var(--footer-color-2)  66.66%,
        var(--footer-color-3)  66.66%,
        var(--footer-color-3) 100%
    );

    background-repeat: repeat-x;
    background-size: 300% 100%;
    animation: footerScroll var(--footer-speed) linear infinite;
    width: 100%;
    transition: border-color 0.3s ease;

    color: #fff !important;
}

#footer a {
    color: rgba(255, 255, 255, 0.8) !important;
}

#footer a:hover {
    color: #fff !important;
}

@keyframes footerScroll {
    0%   { background-position:    0% 0%; }
    100% { background-position: -300% 0%; }
}