@charset "UTF-8";

/* ====================
   全局样式 (Global Styles)
   ==================== */

/* 动效令牌：全站统一的缓动与时长，保证动效语言一致 */
:root {
    /* 主缓动：快出缓收，利落无回弹 */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    /* 微交互时长（代码块、正文内链接等） */
    --dur-fast: 150ms;
    /* 悬停反馈时长（导航、文章链接等） */
    --dur-med: 280ms;
    /* 入场动画时长 */
    --dur-enter: 420ms;
}

/* 始终预留滚动条槽位：有无滚动条的页面布局宽度保持恒定，杜绝页面切换或
   异步内容（如 giscus 评论区）撑高页面时产生的横向抖动 */
html {
    scrollbar-gutter: stable;
}

body {
    /* 基础文本颜色：深灰色，具有一定透明度以融合背景 */
    color: rgba(0, 0, 0, 0.799);
    /* 基础背景颜色：非常浅的灰色，提供柔和的视觉效果 */
    background-color: rgba(232, 232, 232, 0.231);
    /* 字体栈：首选无衬线字体，如 Arial，确保跨平台的可读性 */
    font-family: sans-serif, Arial;
    /* 页面底部留白，防止内容紧贴底部 */
    margin-bottom: 100px;
    /* 注意：body 不做颜色过渡，否则每次加载页面都会从白场淡入（深色模式下尤为刺眼） */
}

/* 所有标题标签 (h1-h6) 默认使用普通字重，避免过于粗重 */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

/* 用于水平居中块级元素并设置其宽度 */
.center {
    margin-left: 5%;
    width: 90%;
    margin-right: 5%;
}

/* ====================
   动画定义 (Keyframes)
   ==================== */

/* 入场动画：轻微上浮并淡入，无缩放、无回弹 */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* 页面间交叉淡入过渡（渐进增强：不支持的浏览器自动退化为普通跳转） */
@view-transition {
    navigation: auto;
}

/* ====================
   顶部标题区样式 (Header/Title Section Styles)
   ==================== */

.title {
    /* 文本居中对齐 */
    text-align: center;
    /* 上下外边距，为标题区提供足够的空间 */
    margin-top: 50px;
    margin-bottom: 50px;
    
    /* 入场动画：页面加载时标题区率先浮现 */
    animation: fadeUp var(--dur-enter) var(--ease-out) forwards;
}

/* 标题区内具有 'light' id 的元素（如副标题），颜色为灰色 */
.title #light {
    color: grey;
    transition: color var(--dur-med) var(--ease-out);
}

/* 标题区内的链接样式 */
.title a {
    /* 链接之间右侧间隔 */
    margin-right: 20px;
    /* 字体大小，略大于普通文本 */
    font-size: 1.17em;
    /* 链接颜色：与主体文本颜色一致 */
    color: rgba(0, 0, 0, 0.799);
    /* 移除默认下划线，改用动画实现 */
    text-decoration: none;
    position: relative;
    display: inline-block;
    transition: color var(--dur-med) var(--ease-out);
}

/* 标题链接下划线动画：从中心向两边展开 */
.title a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    background-color: rgba(0, 0, 0, 0.799);
    transition: width 0.25s var(--ease-out), left 0.25s var(--ease-out);
}

.title a:hover::after {
    width: 100%;
    left: 0;
}

/* 移除旧的 hover 下划线，改用上面的 ::after 动画 */
.title a:hover {
    text-decoration: none;
}

/* ====================
   文章/内容区样式 (Article/Content Section Styles)
   ==================== */

article {
    /* 文章内容居中对齐 */
    text-align: center;
    /* 文章底部外边距 */
    margin-bottom: 20px;

    /* 入场动画：紧随标题之后逐项级联浮现 */
    opacity: 0; /* 初始隐藏 */
    animation: fadeUp var(--dur-enter) var(--ease-out) 0.06s forwards;
}

/* 列表逐项级联：每项比上一项晚 30ms，六项封顶（整页 0.6s 内就绪） */
article:nth-of-type(2) { animation-delay: 0.09s; }
article:nth-of-type(3) { animation-delay: 0.12s; }
article:nth-of-type(4) { animation-delay: 0.15s; }
article:nth-of-type(5) { animation-delay: 0.18s; }
article:nth-of-type(n+6) { animation-delay: 0.21s; }

/* 文章内的链接样式 */
article a {
    /* 字体大小，略大于普通文本 */
    font-size: 1.17em;
    /* 链接默认颜色为灰色 */
    color: grey;
    /* 移除默认下划线 */
    text-decoration: none;
    position: relative;
    display: inline-block;

    /* 悬停反馈：仅颜色过渡，不做位移与缩放 */
    transition: color var(--dur-med) var(--ease-out);
}

/* 文章链接下划线动画：与导航、页脚同一语言 */
article a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -1px;
    left: 50%;
    background-color: rgba(0, 0, 0, 0.799);
    transition: width 0.25s var(--ease-out), left 0.25s var(--ease-out);
}

article a:hover::after {
    width: 100%;
    left: 0;
}

/* 文章链接鼠标悬停效果：颜色加深 */
article a:hover {
    color: rgba(0, 0, 0, 0.799);
}

/* 主要内容区域 */
.main {
    /* 左右外边距，提供适度的阅读区域宽度 */
    margin-left: 17%;
    margin-right: 17%;
    /* 行高，提高文本可读性 */
    line-height: 1.7;

    /* 入场动画：紧随标题之后出现 */
    opacity: 0;
    animation: fadeUp var(--dur-enter) var(--ease-out) 0.1s forwards;
}

/* 主要内容区段落的底部外边距 */
.main p {
    margin-bottom: 1em;
}

/* 主要内容区加粗文本的字重 */
.main b {
    font-weight: bolder;
}

/* 主要内容区内链接的默认颜色 */
.main a {
    color: grey;
    text-decoration: none;
    border-bottom: 1px solid transparent; /* 预留边框位置 */
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

/* 主要内容区内链接鼠标悬停效果 */
.main a:hover {
    color: rgba(0, 0, 0, 0.799);
    border-bottom: 1px solid rgba(0, 0, 0, 0.799);
    background-color: rgba(0, 0, 0, 0.05); /* 轻微背景高亮 */
    border-radius: 2px;
}

/* 主要内容区内图片的样式 */
.main img {
    /* 左右外边距，使图片在内容区内居中 */
    margin-left: 10%;
    width: 80%; /* 图片宽度 */
    margin-right: 10%;
    /* 上下外边距 */
    margin-top: 1em;
    margin-bottom: 1em;
    /* 阴影效果，使图片有立体感 */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    /* 轻微圆角 */
    border-radius: 4px;
    /* 图片不可点击，不做悬停动效，避免暗示不存在的交互 */
}

/* 居中文本的通用类 */
.mid {
    text-align: center;
}

/* 具有 'clock' id 的元素，文本居中 */
#clock {
    text-align: center;
    transition: opacity 0.5s var(--ease-out);
}

/* 代码块样式：用于显示代码片段 */
.code {
    /* 字体大小 */
    font-size: 1em;
    /* 内边距 */
    padding: 2px 4px;
    /* 背景颜色：略浅于页面背景，突出代码 */
    background-color: rgba(249, 249, 249, 0.799);
    /* 边框 */
    border: 1px solid darkgray;
    /* 圆角边框 */
    border-radius: 4px;

    /* 悬停反馈：仅颜色变化，不做位移 */
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

/* 代码块悬停效果：极轻的颜色变化 */
.code:hover {
    border-color: rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 1);
}

/* ====================
   页脚样式 (Footer Styles)
   ==================== */

.footer {
    /* 页脚文本居中对齐 */
    text-align: center;
    /* 页脚顶部外边距 */
    margin-top: 50px;

    /* 入场动画：最后出现 */
    opacity: 0;
    animation: fadeUp var(--dur-enter) var(--ease-out) 0.18s forwards;
}

/* 页脚内链接的样式 */
.footer a {
    /* 链接之间右侧间隔 */
    margin-right: 20px;
    /* 字体大小 */
    font-size: 1.17em;
    /* 链接颜色：与主体文本颜色一致 */
    color: rgba(0, 0, 0, 0.799);
    /* 移除默认下划线 */
    text-decoration: none;
    position: relative;
    display: inline-block;
}

/* 页脚链接下划线动画（同 Header） */
.footer a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -1px;
    left: 50%;
    background-color: rgba(0, 0, 0, 0.799);
    transition: width 0.25s var(--ease-out), left 0.25s var(--ease-out);
}

.footer a:hover::after {
    width: 100%;
    left: 0;
}

.footer a:hover {
    text-decoration: none; /* 确保不显示默认下划线 */
}

/* 页脚内具有 'special' id 的元素，移除右侧边距（例如，最后一个链接） */
.footer #special {
    margin-right: 0;
}

/* ====================
   响应式设计 (Responsive Design)
   ==================== */

/* 当屏幕宽度小于或等于 1000px 时 */
@media screen and (max-width: 1000px) {
    /* 主要内容区左右边距调整为 5%，适应小屏幕 */
    .main {
        margin-left: 5%;
        margin-right: 5%;
    }
}

/* ====================
   深色模式 (Dark Mode)
   ==================== */

/* 当用户系统偏好设置为深色模式时 */
@media (prefers-color-scheme: dark) {
    /* 页面背景颜色切换为深色 */
    body {
        background-color: rgba(0, 0, 0, 0.868);
        color: rgb(190, 190, 190); /* [新增] 确保 body 文字颜色也变化 */
    }

    /* 标题区链接颜色变为浅灰色 */
    .title a {
        color: rgb(190, 190, 190);
    }
    
    /* [新增] 深色模式下标题链接下划线颜色 */
    .title a::after {
        background-color: rgb(190, 190, 190);
    }

    /* 主要内容区文本颜色变为浅灰色 */
    .main {
        color: rgb(190, 190, 190);
    }

    /* 文章区文本颜色变为浅灰色 */
    article {
        color: rgb(190, 190, 190);
    }

    /* 文章内链接颜色变为浅灰色 */
    article a {
        color: rgb(190, 190, 190);
    }

    /* 深色模式下文章链接下划线颜色 */
    article a::after {
        background-color: rgb(190, 190, 190);
    }

    /* 文章内链接鼠标悬停颜色变为更浅的灰色 */
    article a:hover {
        color: rgb(235, 235, 235);
    }

    /* 代码块背景色变为中灰色，文本颜色变为深色 */
    .code {
        background-color: rgb(60, 60, 60); /* [调整] 深色模式代码背景稍深一点更护眼 */
        color: rgb(220, 220, 220);
        border: 1px solid rgb(80, 80, 80);
    }
    
    .code:hover {
        background-color: rgb(70, 70, 70);
        border-color: rgb(120, 120, 120);
    }

    /* 主要内容区代码块内链接颜色变为深色 */
    .main .code a {
        color: rgb(220, 220, 220);
    }

    /* 主要内容区代码块内链接鼠标悬停颜色变为更深的色 */
    .main .code a:hover {
        color: white;
    }

    /* 主要内容区内链接颜色变为较深的灰色 */
    .main a {
        color: rgb(150, 150, 150); /* 提高对比度 */
    }

    /* 主要内容区内链接鼠标悬停颜色变为浅灰色 */
    .main a:hover {
        color: rgb(230, 230, 230);
        background-color: rgba(255, 255, 255, 0.1);
        border-bottom-color: rgb(230, 230, 230);
    }

    /* 页脚链接颜色变为浅灰色 */
    .footer a {
        color: rgb(190, 190, 190);
    }
    
    /* [新增] 深色模式下页脚链接下划线颜色 */
    .footer a::after {
        background-color: rgb(190, 190, 190);
    }
    
    /* 深色模式下图片阴影调整（更深阴影）并稍微降低亮度防止刺眼 */
    .main img {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
        opacity: 0.9;
    }
}

/* ====================
   无障碍 (Accessibility)
   ==================== */

/* 尊重系统"减弱动态效果"设置：关闭所有动画与过渡，确保内容立即可见 */
@media (prefers-reduced-motion: reduce) {
    .title, article, .main, .footer {
        opacity: 1;
        animation: none;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* 页面间过渡退化为瞬时切换 */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}