/* ==============================================================
 *  「雾与夜」 · Redefine 皮肤层
 *
 *  通过 _config.redefine.yml 的 inject.head 引入，加载于主题样式之后。
 *  配色沿用博客原有语言：
 *    雾 —— 暖纸底，浅色模式
 *    夜 —— 靛墨底，深色模式
 *    火 —— 落日金，唯一的强调色
 *
 *  Redefine 用 CSS 变量组织配色，这里直接重写它们的值，
 *  比逐个组件覆盖更可靠，也不会漏掉暗色适配。
 * ============================================================== */


/* --------------------------------------------------------------
 *  一、浅色模式 —— 雾
 * -------------------------------------------------------------- */
:root {
  /* 底色：宣纸的暖灰，不是屏幕的冷白 */
  --background-color: #f8f6f2;
  --background-color-transparent: rgba(248, 246, 242, 0.6);
  --background-color-transparent-15: rgba(248, 246, 242, 0.15);
  --background-color-transparent-40: rgba(248, 246, 242, 0.4);
  --background-color-transparent-80: rgba(248, 246, 242, 0.8);

  --second-background-color: #f2efe8;
  --third-background-color: #ebe7de;
  --third-background-color-transparent: rgba(235, 231, 222, 0.6);

  /* 落日金 */
  --primary-color: #a8802c;
  --selection-color: #d8ab5c;

  /* 文字：墨色，由深至浅 */
  --first-text-color: #1f1d1a;
  --second-text-color: #33302c;
  --third-text-color: #6b655c;
  --default-text-color: #4a4640;
  --fourth-text-color: #ded9cf;
  --invert-text-color: #f8f6f2;

  /* 线条与阴影：极细，压薄 */
  --border-color: rgba(120, 105, 75, 0.14);
  --shadow-color-1: rgba(74, 62, 38, 0.07);
  --shadow-color-2: rgba(74, 62, 38, 0.04);
  --shadow-hover-color: rgba(74, 62, 38, 0.22);

  --scrollbar-color: #c9c3b7;
  --scrollbar-color-hover: #a89f8e;
  --scroll-bar-bg-color: #f2efe8;

  --link-color: #33302c;
  --copyright-info-color: #a8503c;
  --avatar-background-color: #a8802c;

  /* 进度条：收成一道金线 */
  --pjax-progress-bar-color: linear-gradient(90deg, #a8802c, #d8ab5c);

  --home-banner-text-color: #f5f2ea;
  --home-banner-icons-container-border-color: rgba(245, 242, 234, 0.3);
  --home-banner-icons-container-background-color: rgba(245, 242, 234, 0.16);
}


/* --------------------------------------------------------------
 *  二、深色模式 —— 夜
 * -------------------------------------------------------------- */
.dark {
  --background-color: #1b1d24;
  --background-color-transparent: rgba(27, 29, 36, 0.6);
  --background-color-transparent-15: rgba(27, 29, 36, 0.15);
  --background-color-transparent-40: rgba(27, 29, 36, 0.4);
  --background-color-transparent-80: rgba(27, 29, 36, 0.8);

  --second-background-color: #22252d;
  --third-background-color: #2a2d36;
  --third-background-color-transparent: rgba(42, 45, 54, 0.6);

  --primary-color: #d8ab5c;
  --selection-color: #a8802c;

  --first-text-color: #ded9cf;
  --second-text-color: #b5b1a8;
  --third-text-color: #8a8780;
  --default-text-color: #b5b1a8;
  --fourth-text-color: #3a3d47;
  --invert-text-color: #1b1d24;

  --border-color: rgba(255, 255, 255, 0.08);
  --shadow-color-1: rgba(0, 0, 0, 0.3);
  --shadow-color-2: rgba(0, 0, 0, 0.2);
  --shadow-hover-color: rgba(0, 0, 0, 0.5);

  --scrollbar-color: #3a3e48;
  --scrollbar-color-hover: #5a6070;
  --scroll-bar-bg-color: #22252d;

  --link-color: #c9c5bc;
  --copyright-info-color: #d97a6c;
  --avatar-background-color: #d8ab5c;

  --pjax-progress-bar-color: linear-gradient(90deg, #d8ab5c, #a8802c);

  --home-banner-text-color: #e8e3d8;
}


/* --------------------------------------------------------------
 *  三、字体
 *
 *  这个博客写的是长句哲思散文。宋体在屏幕上承载长文远胜黑体，
 *  也让「雾与夜」的气质与文字本身保持一致。
 *
 *  用系统字体栈，不引外部 CDN：零请求、零闪烁、离线可构建。
 * -------------------------------------------------------------- */
:root {
  --skin-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
    "STSong", "SimSun", "Times New Roman", Georgia, serif;
  --skin-mono: "JetBrains Mono", "Cascadia Code", "Fira Code", Consolas,
    "SF Mono", Menlo, monospace;
}

body,
.markdown-body,
.home-article-title,
.home-article-content,
.article-content,
.archive-title,
.navbar,
.home-banner-title,
.home-banner-subtitle {
  font-family: var(--skin-serif);
}

/* 代码必须保持等宽，否则会散架 */
code,
pre,
kbd,
samp,
.copyright,
.post-copyright,
.hljs,
.highlight {
  font-family: var(--skin-mono);
  letter-spacing: 0;
}


/* --------------------------------------------------------------
 *  四、排版
 * -------------------------------------------------------------- */

/* 正文：放宽行高与字距，长文才读得下去 */
.markdown-body {
  font-size: 1.04rem;
  line-height: 1.95;
  letter-spacing: 0.03em;
}

.markdown-body p {
  margin-bottom: 1.3rem;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* 章名下一道细金线收口 */
.markdown-body h2 {
  border-bottom: 1px solid rgba(168, 128, 44, 0.28);
  padding-bottom: 0.55rem;
}

.dark .markdown-body h2 {
  border-bottom-color: rgba(216, 171, 92, 0.26);
}

/* 引文：一道金线起头，不加底色 */
.markdown-body blockquote {
  border-left: 2px solid var(--primary-color);
  padding-left: 1.2rem;
  color: var(--third-text-color);
  font-style: normal;
}

/* 强调：不加粗，只提亮 */
.markdown-body strong {
  font-weight: 600;
  color: var(--first-text-color);
}

/* 首字下沉 */
.markdown-body > p:first-of-type::first-letter {
  float: left;
  font-size: 3em;
  line-height: 0.9;
  margin: 0.05em 0.12em 0 0;
  color: var(--primary-color);
  font-weight: 500;
}

@media (max-width: 767px) {
  .markdown-body > p:first-of-type::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    color: inherit;
  }
}


/* --------------------------------------------------------------
 *  五、组件
 * -------------------------------------------------------------- */

/* 首页文章：hover 时标题转金，去掉多余的动效 */
.home-article-title {
  letter-spacing: 0.03em;
}

.home-article-item:hover .home-article-title {
  color: var(--primary-color);
}

/* 日期与标签：字距放宽，不用图标抢注意力 */
.home-article-meta-info {
  letter-spacing: 0.1em;
  font-size: 0.78rem;
}

.home-article-meta-info time {
  font-variant-numeric: oldstyle-nums;
}

/* --------------------------------------------------------------
 *  导航栏
 *
 *  Redefine 的 navbar.color 只接受 10–99 的透明度分量（拼在 hex 末尾），
 *  实际最不透明也只有约 39%，放在头图上必然糊成一片。
 *  这里直接给出不透明度并提高模糊，让深色底真正托住文字。
 *
 *  同时在该容器内重定义文字色变量：导航栏是深色的，
 *  内部的文字也必须翻成亮色，否则深字压深底。
 * -------------------------------------------------------------- */
.navbar-container {
  background: rgba(37, 35, 31, 0.94) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  --first-text-color: #f2eee6;
  --second-text-color: #e2ddd2;
  --third-text-color: #b8b3a8;
  --default-text-color: #e8e3d8;
  --border-color: rgba(255, 255, 255, 0.10);
}

.navbar {
  letter-spacing: 0.12em;
}


/* --------------------------------------------------------------
 *  首页头图
 *
 *  背景图是黄昏的暖金调，中间一带水面很亮，白字直接压上去会糊。
 *  加一层纵向渐变压暗：上端托住导航，中段让画面透出来，
 *  下端收回，好接住滚动的视线。
 * -------------------------------------------------------------- */
/* 主题给背景加了 scale-125 / scale-110，等于把图放大后插值——这是糊的主因。
   1:1 呈现，清晰度立刻回来。 */
.home-banner-background {
  transform: scale(1) !important;
  will-change: auto !important;
}

.home-banner-background::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(20, 18, 16, 0.42) 0%,
    rgba(20, 18, 16, 0.10) 42%,
    rgba(20, 18, 16, 0.48) 100%
  );
}

/* 标题在 .description 里（Redefine 没有 .home-banner-title 这个类） */
.home-banner-container .description,
.home-banner-container .description h1,
.home-banner-container .description p,
.home-banner-container #subtitle {
  color: #f5f2ea;
  letter-spacing: 0.12em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 0, 0, 0.3);
}

.home-banner-container .description h1 {
  letter-spacing: 0.16em;
  font-weight: 500;
}


/* --------------------------------------------------------------
 *  六、折叠块（{% fold %} 兼容层输出）
 *
 *  Redefine 只给了 folding，这里为兼容层补一点语气上的差别：
 *  左侧一道金线，呼应「箱箧」。
 * -------------------------------------------------------------- */
details.fold {
  border-left: 2px solid var(--primary-color);
}

details.fold > summary {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--primary-color);
  list-style: none;
}

details.fold > summary::-webkit-details-marker {
  display: none;
}

details.fold > summary i {
  display: inline-block;
  margin-right: 0.45rem;
  font-size: 0.7em;
  transition: transform 0.25s ease;
}

details.fold[open] > summary i {
  transform: rotate(90deg);
}


/* --------------------------------------------------------------
 *  七、细部
 * -------------------------------------------------------------- */

/* 加载进度条 */
#progress-bar,
.progress-bar {
  background: var(--pjax-progress-bar-color) !important;
}

/* 滚动条更窄 */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* 选中文字留一点金 */
::selection {
  background: rgba(168, 128, 44, 0.18);
  color: var(--first-text-color);
}

.dark ::selection {
  background: rgba(216, 171, 92, 0.22);
}


/* ==============================================================
 *  八、动效
 *
 *  两条原则：
 *    1. 一切动效都可被系统「减弱动态效果」关闭
 *    2. 只有 transform / opacity 参与动画，不触发布局重排
 * ============================================================== */


/* --------------------------------------------------------------
 *  8.1 翻书页 —— 页面切换
 *
 *  使用 View Transitions API（Chrome 111+ / Safari 18+ / Firefox 144+）。
 *  不支持的浏览器会直接跳转，只是少了过渡，功能不受影响。
 *
 *  方向设定：旧页向左"翻起"，新页自右"落下"，
 *  旋转只有 4 度——足以读出"翻页"的意思，又不至于让读者眩晕。
 *  页面根部需要一个轻微的透视，才能让 3D 旋转显出厚度。
 * -------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}

@keyframes skin-page-turn-out {
  to {
    opacity: 0;
    transform: perspective(1800px) rotateY(4deg) translateX(-1.5%);
    transform-origin: right center;
  }
}

@keyframes skin-page-turn-in {
  from {
    opacity: 0;
    transform: perspective(1800px) rotateY(-4deg) translateX(1.5%);
    transform-origin: left center;
  }
}

::view-transition-old(root) {
  animation: skin-page-turn-out 0.42s cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(root) {
  animation: skin-page-turn-in 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}


/* --------------------------------------------------------------
 *  8.2 文字滚动浮现
 *
 *  .rise 由 JS 添加，因此 JS 失效时正文照常显示，不会留白。
 *  首屏元素不参与动画（否则会闪），只有滚入视口的下方才浮现。
 * -------------------------------------------------------------- */
.rise {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.85s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.85s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.rise.is-in {
  opacity: 1;
  transform: none;
}


/* --------------------------------------------------------------
 *  8.3 首页标题视差
 *
 *  向下滚动时，头图标题缓慢上移并淡出，
 *  像书页被翻起时文字先离开画面。
 * -------------------------------------------------------------- */
.home-banner-container .content {
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .rise {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .home-banner-container .content {
    will-change: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}