/* 定义渐变动画的关键帧 */
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%; /* 动画开始时背景位置 */
    }
    50% {
        background-position: 100% 50%; /* 动画中间时背景位置 */
    }
    100% {
        background-position: 0% 50%; /* 动画结束时回到起始位置，形成循环 */
    }
}

/* 侧边卡片的透明度变量和其他全局变量 */
:root {
    --card-bg: rgba(225, 248, 242, 0.9); /* 侧边卡片的默认背景色，包含透明度 */
    /* 可以在这里添加其他全局变量，例如 --primary-color, --text-color 等 */
}

/* 适用于文章页、卡片、最近文章等主要内容区域的渐变和动画效果 */
.layout_post > #post,
#aside_content .card-widget,
#recent-posts > .recent-post-item,
.layout_page > div:first-child:not(.recent-posts),
.layout_post > #page,
.read-mode .layout_post > #post {
    /* 柔和的浅色渐变背景，从左下到右上 */
    background: linear-gradient(135deg, #f8f9fa, #cadff1, #cde6fb, #a5caed);
    background-size: 300% 300%; /* 扩大渐变区域，以便动画时有足够的空间移动 */
    animation: gradient-animation 18s ease infinite; /* 应用渐变动画，18秒一个循环，平滑过渡，无限重复 */

    /* 保留轻微的毛玻璃效果，增加层次感 */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); /* 兼容WebKit浏览器 */

    /* 为所有属性添加平滑过渡，包括背景和模糊效果 */
    transition: all 0.4s ease-in-out; /* 增加过渡效果到所有属性 */
}

/* 鼠标悬停时主要内容区域的效果 */
.layout_post > #post:hover,
#aside_content .card-widget:hover,
#recent-posts > .recent-post-item:hover,
.layout_page > div:first-child:not(.recent-posts):hover,
.layout_post > #page:hover {
    backdrop-filter: blur(12px); /* 悬停时增加模糊度，使背景更柔和 */
    -webkit-backdrop-filter: blur(12px);
    /* 悬停时改变渐变方向，增加视觉变化 */
    background: linear-gradient(45deg, #e9ecef, #dae9f8, #c3ddf7);
    /* animation-play-state: running; /* 确保动画在悬停时继续播放 - 通常动画默认是运行的，除非被暂停 */
    transform: translateY(-3px); /* 悬停时轻微上浮 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
}

#footer {
    position: relative;
    /* background-color: $light-blue; /* 如果 $light-blue 是 SCSS/LESS 变量，需要相应地在预处理器中使用或替换为具体颜色值 */
    background-attachment: scroll;
    background-position: bottom;
    background-size: cover;
}