/* ============================================================
 * Apple 风格精修补丁层（apple-polish.css）
 * 仅覆盖：字体渲染 / 背景层次 / 展示型字号 / 选中色 / 滚动条 / 减弱动效。
 * 不改动任何布局、栅格、定位与尺寸 —— 结构上与 style.css 完全解耦。
 * 加载顺序须位于 style.css 之后（已在各引入点紧随其后）。
 * 需要整体回退时，删除本文件并在引入点去掉对应 <link> 即可。
 * ============================================================ */

/* ---- 1. 字体渲染：亚像素抗锯齿，Mac / iPhone 上文字立刻变锐利 ----
 * 这是与 apple.com.cn 观感差距最大的单项：原 body 没开 smoothing，
 * 同等字号在 macOS 上会显得更糊、更重。 */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

/* ---- 2. 选中高亮：Apple 那种克制蓝，而非浏览器默认深蓝 ---- */
::selection {
    background: rgba(0, 113, 227, .18);
    color: #1d1d1f;
}

/* ---- 3. 滚动条：纤细半透明（WebKit / Firefox 覆盖，不影响结构）。
 * Mac / iOS 为 overlay 滚动条，零布局占用；Windows 下为细槽，
 * 比系统默认更窄，整体更克制。 */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .20) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .18);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .32);
    background-clip: content-box;
}

/* ---- 4. 背景层次：页面底色由纯白转极浅灰，白色卡片/面板自然浮起 ----
 * 仅改色值（覆盖 --bg / --text 变量），不动任何盒模型。
 * Apple 用 #fbfbfd / #f5f5f7 分层制造景深，原站是一整张纯白平面，
 * 观感更「平」、更「廉价」。 */
:root {
    --bg: #fbfbfd;            /* Apple 首页级近白，替代纯白平面 */
    --text: #1d1d1f;          /* Apple 近黑文字，替代 #0f0f0f */
    --text-strong: #1d1d1f;   /* 后台标题 / 正文同步 */
}
/* 顶栏毛玻璃在浅灰底上更融合（原 rgba(255,255,255,...) 是为纯白调的） */
.topbar {
    background: rgba(251, 251, 253, .72);
}

/* ---- 5. 展示型标题：放大 + 紧字距（仅文章 / 博客 / 区块级大标题，
 * 不动密集的视频网格，避免撑破现有栅格）。Apple 的标题是「杂志头条」
 * 量级，原站 18–28px 更像 UI 标签。 */
.article-title { font-size: 34px; letter-spacing: -0.02em; }
.blog-head h1   { font-size: 30px; letter-spacing: -0.02em; }
.section-title { font-size: 20px; letter-spacing: -0.01em; }
.watch-title   { font-size: 22px; letter-spacing: -0.01em; }
.login-box h1  { letter-spacing: -0.02em; }

/* ---- 6. 动效偏好：系统开启「减弱动态效果」时全部静止 ----
 * Apple 把 reduced-motion 当一等公民；原站所有过渡都无条件常驻。 */
/* ---- 9. 博客卡「旧博客」来源标：与新文章在列表中视觉隔开 ---- */
.src-badge {
    display: inline-block;
    margin-bottom: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
    color: #515154;
    background: #f0f0f2;
    border: 1px solid #d2d2d7;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- 7. 输入框精修：去廉价描边与硬光圈，走 Apple 极简路线 ----
 * 原 style.css 聚焦态用 2px 实心外圈（box-shadow: 0 0 0 2px var(--brand-ring)），
 * 在浅灰底上像一道「阴影」、边框 #dadce0 也偏糙。这里改用 Apple 灰描边，
 * 默认态零阴影；聚焦态按用户偏好**去掉蓝边**，改为中性深灰描边（无蓝/无光圈），
 * 保留聚焦可辨识度。搜索框（border:0）特异性更高，不受影响。 */
input[type=text], input[type=password], input[type=url], input[type=number],
textarea, select {
    border: 1px solid #d2d2d7;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    transition: border-color .18s ease;
}
input[type=text]:hover, input[type=password]:hover, input[type=url]:hover,
input[type=number]:hover, textarea:hover, select:hover {
    border-color: #b8b8bd;
}
input[type=text]:focus, input[type=password]:focus, input[type=url]:focus,
input[type=number]:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #1d1d1f;
    box-shadow: none;
}
/* 文件选择按钮同步圆角，避免与输入框节奏冲突 */
input[type=file]::file-selector-button { border-radius: 18px; }

/* ---- 8. 视频卡片阴影：还原 YouTube 悬停 —— 静止扁平、hover 平滑浮起（不循环） ----
 * 查证结论：YouTube 悬停反馈是「一次性平滑过渡」——阴影柔和浮现、移开又平滑收起，
 * 观感像呼吸般渐显渐隐（原站作者注释原话就是「.4s Material 缓动像呼吸般渐显渐隐」）。
 * 它并非循环脉冲动画；上一版加的 infinite 呼吸循环反而偏离 YouTube、且显得跳。
 * 原站真正的问题只是 hover 阴影 alpha 仅 .03/.04 太淡、几乎看不见。这里去掉静止投影，
 * 把 hover 阴影做成三层低偏移大模糊的柔和包裹晕，并沿用 .4s 缓动做平滑出入。 */
.video-card {
    box-shadow: none;
    transition:
        background-color .4s cubic-bezier(.4, 0, .2, 1),
        box-shadow .4s cubic-bezier(.4, 0, .2, 1);
}
.video-card:hover {
    box-shadow:
        0 1px 3px  rgba(0, 0, 0, .06),
        0 6px 18px rgba(0, 0, 0, .09),
        0 13px 38px rgba(0, 0, 0, .10);
}