/* 自定义样式将在这里添加 */ 

/* Logo 3D 闪光效果 */
/* 选择 ID 为 logo 的元素内部的 span 标签 */
#logo span {
    /* 基础文字颜色 - 设置为比较醒目的蓝色 */
    color: #4A90E2;
    /* 文字阴影效果 - 通过多层阴影模拟 3D 和光泽感 */
    text-shadow:
        0 0 5px rgba(74, 144, 226, 0.5), /* 内部蓝色辉光效果 */
        0 0 10px rgba(74, 144, 226, 0.3), /* 稍大范围的蓝色辉光 */
        1px 1px 0px #fff, /* 右下方添加白色细高光，模拟顶部反光 */
        -1px -1px 0px rgba(0, 0, 0, 0.2); /* 左上方添加细微黑色阴影，增加对比度 */
    /* 应用名为 shine 的动画，持续时间 4 秒，无限循环，线性变化 */
    animation: shine 4s infinite linear;
}

/* 定义名为 shine 的关键帧动画 */
@keyframes shine {
    /* 动画开始时 (0%) 的文字阴影效果 */
    0% { text-shadow: 0 0 5px rgba(74, 144, 226, 0.5), 0 0 10px rgba(74, 144, 226, 0.3), 1px 1px 0px #fff, -1px -1px 0px rgba(0, 0, 0, 0.2); }
    /* 动画进行到一半时 (50%)，增强辉光效果，颜色变浅 */
    50% { text-shadow: 0 0 10px rgba(128, 188, 255, 0.8), 0 0 20px rgba(128, 188, 255, 0.5), 1px 1px 0px #fff, -1px -1px 0px rgba(0, 0, 0, 0.2); }
    /* 动画结束时 (100%) 恢复到初始效果，形成循环 */
    100% { text-shadow: 0 0 5px rgba(74, 144, 226, 0.5), 0 0 10px rgba(74, 144, 226, 0.3), 1px 1px 0px #fff, -1px -1px 0px rgba(0, 0, 0, 0.2); }
}

/* 语言切换按钮激活状态样式 */
/* 选择同时拥有 lang-button 和 active 类的元素 */
.lang-button.active {
    /* 设置背景色为 Tailwind 的 blue-200 */
    background-color: #bfdbfe;
    /* 设置字体加粗 */
    font-weight: bold;
    /* 设置文字颜色为 Tailwind 的 blue-800 */
    color: #1e40af;
}

/* 可选：添加一个更活泼的全局背景动画，如果默认的渐变背景不够炫丽 */
/*
body {
    动画背景示例 - 使用 CSS 渐变动画
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    背景尺寸设置为 400%，以便动画有移动空间
    background-size: 400% 400%;
    应用名为 gradientBG 的动画，持续 15 秒，缓动效果，无限循环
    animation: gradientBG 15s ease infinite;
}

定义名为 gradientBG 的背景渐变动画
@keyframes gradientBG {
    动画开始时，背景位置在左侧中间
    0% {
        background-position: 0% 50%;
    }
    动画进行到一半时，背景位置移动到右侧中间
    50% {
        background-position: 100% 50%;
    }
    动画结束时，背景位置回到左侧中间，形成循环
    100% {
        background-position: 0% 50%;
    }
} 
*/