/* ============================================================
   文章卡片 HUD 终端风 + 正文逐块滚动淡入
   ─────────────────────────────────────────────────────────────
   · 卡片：/study/ /tech/ 等列表页的 .post-entry，纯 CSS 覆盖
     PaperMod 原生结构（不动 list.html 模板）。
   · reveal：html.content-reveal 前提下才隐藏未入场块 —— 渐进增强，
     脚本没加载/出错时正文照常平铺。
   ============================================================ */

/* ---------- A. 文章卡片 ---------- */

.post-entry {
    border-left: 2px solid var(--accent-line, rgba(34, 211, 238, 0.38));
    transition: transform 0.25s ease, border-color 0.16s ease;
}

/* 仪器风:激活用边线表达, 不用全向辉光 */
.post-entry:hover,
.post-entry:focus-within {
    border-color: color-mix(in srgb, var(--accent, rgb(34, 211, 238)) 45%, var(--border));
    border-left-color: var(--accent, rgb(34, 211, 238));
}

.post-entry .entry-header h2 {
    transition: color 0.16s ease;
}

.post-entry:hover .entry-header h2,
.post-entry:focus-within .entry-header h2 {
    color: color-mix(in srgb, var(--accent) 62%, var(--primary));
}

/* meta 行：HUD 终端语言 —— 等宽字、小字号、宽字距（不用 Pixel CN，
   避免正文页为此加载像素字体） */
.entry-footer {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
}

/* void-bg 模式撤了卡片边框和投影 —— 左侧竖线要留着（放在其后覆盖）。 */
html.void-bg-on .post-entry {
    border-left: 2px solid var(--accent-line, rgba(34, 211, 238, 0.38));
}

html.void-bg-on .post-entry:hover,
html.void-bg-on .post-entry:focus-within {
    border-color: transparent;
    border-left-color: var(--accent, rgb(34, 211, 238));
}

@media (max-width: 640px) {
    .post-entry {
        padding: calc(var(--gap) * 0.7);
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-entry,
    .post-entry .entry-header h2 {
        transition: none !important;
    }
    .post-entry:hover,
    .post-entry:focus-within {
        transform: none;
    }
}

/* ---------- B. 正文逐块滚动淡入 ---------- */

/* 只在 html.content-reveal（JS 就位）时隐藏未入场块 */
/* DISABLED: content must never depend on JS */
html.content-reveal .post-content > *:not(.is-in) {
    opacity: 0;
    transform: translateY(10px);
}


html.content-reveal .post-content > .is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.9, 0.25, 1);
}

@media (prefers-reduced-motion: reduce) {
    html.content-reveal .post-content > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}




/* ============================================================
   根页面(归档 / 关于 / 空间)的标头
   ─────────────────────────────────────────────────────────────
   用户:"每个根页面都有一个大标题,比如 技术 – Tuagfey Blog,很容易跟正文弄混"
   —— 真正混的是 page.php 那几个页面:它们的标题用的是和文章一样的 .post-title。
   ⇒ 只对 body.page 生效:标题上方加一条 PAGE 标签,下面一道分隔线,标题降一档;
     文章页(body.single)一个字都不动。
   ============================================================ */
body.page .post-single .post-header {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
body.page .post-single .post-header::before {
    content: "PAGE";
    display: block;
    font-size: 10px;
    letter-spacing: .34em;
    color: var(--secondary);
    opacity: .75;
    margin-bottom: 8px;
}
body.page .post-single .post-title {
    font-size: calc(26px * var(--hud-s, 1));
    letter-spacing: .02em;
}

/* ---------- 列表页(学习/技术)的标头同一种形态 ----------
   列表页(index.php)的结构是 header.page-header > h1.page-header-title,
   上面那段只覆盖了 body.page 的 .post-header —— 学习/技术页漏网。
   统一成同一套:PAGE 小标签 + 分隔线 + 标题降档。 */
body.archive .page-header,
body.blog .page-header {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
body.archive .page-header::before,
body.blog .page-header::before {
    content: "PAGE";
    display: block;
    font-size: 10px;
    letter-spacing: .34em;
    color: var(--secondary);
    opacity: .75;
    margin-bottom: 8px;
}
body.archive .page-header-title,
body.blog .page-header-title {
    font-size: calc(26px * var(--hud-s, 1));
    letter-spacing: .02em;
}
/* 标题里那条 RSS 链接图标压回次要色,别和新形态抢戏 */
body.archive .page-header-title a,
body.blog .page-header-title a {
    color: var(--secondary);
}

/* ---------- 滚动淡入:覆盖列表页的标题与卡片 ----------
   之前的规则只盖 .post-content 的直接子块,列表页的标题/卡片都不在内。
   与 .post-content > * 同一套:html.content-reveal 前提下隐藏未入场块。 */
html.content-reveal .page-header:not(.is-in),
html.content-reveal .post-entry:not(.is-in) {
    opacity: 0;
    transform: translateY(10px);
}
html.content-reveal .page-header.is-in,
html.content-reveal .post-entry.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.9, 0.25, 1);
}
@media (prefers-reduced-motion: reduce) {
    html.content-reveal .page-header,
    html.content-reveal .post-entry {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}