/* 定义颜色变量 */
:root {
    /* 亮色模式下的颜色 */
    --footer-color-1: #87c1af; /* 浅绿 */
    --footer-color-2: #eca93b; /* 橙色 */
    --footer-color-3: #9a2d28; /* 深红 */
    --footer-speed: 90s;        /* 滚动速度 */
}

/* 当切换到暗色模式时，覆盖变量值 */
[data-theme='dark'] {
    --footer-color-1: #2d524a; /* 深绿 */
    --footer-color-2: #8b6d2b; /* 深橙 */
    --footer-color-3: #5c1d1a; /* 暗红 */
}

#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: background 0.3s ease, 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%;
    }
}