/* ==========================================================================
   官网视觉增强（渐进增强，不改变任何结构与文案）
   - 进来先看这里：所有效果都是"锦上添花"，去掉本文件与 site-polish.js
     站点外观与功能完全不受影响。
   - 只做四件事：导航状态、排版细节、滚动进场、交互反馈。
   ========================================================================== */

/* ---------- 1. 顶部导航：滚动后轻微收拢 + 毛玻璃 + 下划线指示 ---------- */
header {
    transition: box-shadow .25s ease, background-color .25s ease;
}
header.rs-scrolled {
    background-color: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 6px 24px rgba(15, 23, 42, .08);
}
header nav > a {
    position: relative;
}
header nav > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s ease;
    opacity: .8;
    pointer-events: none;
}
header nav > a:hover::after {
    transform: scaleX(1);
}

/* ---------- 2. 排版细节 ---------- */
h1, h2, h3 {
    text-wrap: balance;          /* 标题换行更均匀，避免孤字 */
}
h2 {
    letter-spacing: -.01em;
}
p {
    text-wrap: pretty;
}
::selection {
    background: #CCE5FF;
    color: #003A77;
}

/* 图片加载前先给底色，避免整屏白闪 */
img {
    background-color: #F3F5F8;
}

/* ---------- 3. 交互反馈 ---------- */
a, button {
    transition: color .18s ease, background-color .18s ease,
                border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
:focus-visible {
    outline: 2px solid #0078E7;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- 4. 滚动进场（JS 加 .rs-reveal，进入视口后加 .rs-in） ---------- */
.rs-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .65s cubic-bezier(.22, .61, .36, 1),
                transform .65s cubic-bezier(.22, .61, .36, 1);
}
.rs-in {
    opacity: 1;
    transform: none;
}

/* 系统开启"减少动态效果"时，一律不动 */
@media (prefers-reduced-motion: reduce) {
    .rs-reveal, .rs-reveal.rs-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    header nav > a::after { transition: none; }
}

/* ---------- 5. 窄屏微调 ---------- */
@media (max-width: 640px) {
    h1 { letter-spacing: -.015em; }
    /* 手机上标题行高稍紧，首屏更聚焦 */
    h1 { line-height: 1.22; }
}