@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

/* ==========================================================================
   1. 基础配置与浅色模式 (优化版：羊皮纸与丝绒)
   ========================================================================== */
:root, [data-md-color-scheme="default"] {
  /* 字体设置 */
  --md-text-font: "Inter", "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --md-code-font: "JetBrains Mono", "Fira Code", monospace;

  /* 背景与正文 */
  --md-default-bg-color:      #F8F4E8; /* 柔和纸张色 */
  --md-default-fg-color:      #2E2424; /* 深褐色文字 */
  
  /* 品牌色 - 丝绒深红系列 */
  --md-primary-fg-color:      #801A1A; 
  --md-primary-fg-color--dark:#5A1212;
  --md-accent-fg-color:       #B59431; /* 古金色 */

  /* 【新增】代码块背景：半透明米色，融入羊皮纸，不再突兀 */
  --md-code-bg-color:         rgba(230, 220, 205, 0.5); 
  --md-code-fg-color:         #3E3434;

  /* 【优化】链接颜色：浅色模式下深红链接是安全的，显贵气 */
  --md-typeset-a-color:       #801A1A;

  /* 页脚与交互细节 */
  --md-footer-bg-color:       #2E2424;
  --md-footer-fg-color:       #DCD3C8;
  --header-border-color:      rgba(128, 26, 26, 0.2);
  --search-bg-hover:          rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   2. 深色模式 (优化版：灰烬与玫瑰 - 专业阅读向)
   ========================================================================== */
[data-md-color-scheme="slate"] {
  /* 调色盘 */
  --md-default-bg-color:      #1F1A1D; /* 带红褐倾向的深灰 */
  --md-default-fg-color:      #DCD3C8; /* 蕾丝灰白色 */
  
  /* 【优化】主色提亮：增加暗夜中的通透感 */
  --md-primary-fg-color:      #D64C3F; 
  --md-accent-fg-color:       #E6C275; /* 灰烬金色 */
  
  /* 【重要修正】链接颜色：由红改金 */
  /* 避免红色链接让用户误以为是“错误/警告”，金色在暗底上阅读极佳 */
  --md-typeset-a-color:       #E6C275; 

  /* 【新增】代码块背景：深邃的半透明黑 */
  --md-code-bg-color:         rgba(0, 0, 0, 0.3);

  /* 组件颜色 */
  --md-footer-bg-color:       #140f0f;
  --md-footer-fg-color:       #a6a6a6; 
  --md-typeset-color:         #DCD3C8;
  --md-typeset-h1-color:      #DCD3C8;
  --md-admonition-icon-color: #EBCB6B;
  
  /* 专属页眉背景 */
  --header-bg-custom:         rgba(31, 26, 29, 0.85);
}

/* 页眉导航颜色设置 */
[data-md-color-scheme="slate"] .md-tabs {
  background-color: #1D171A !important;
}

/* ==========================================================================
   3. 全局 UI 组件优化 (导航、搜索、滚动条)
   ========================================================================== */

/* 导航栏：磨砂玻璃 */
.md-header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* 【优化】去除红色描边，改用光影分割，更显现代 */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

[data-md-color-scheme="slate"] .md-header {
  background-color: rgba(28, 22, 26, 0.85)!important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 搜索框优化 */
[data-md-color-scheme="slate"] .md-search__form {
  background-color: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(235, 203, 107, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-md-color-scheme="slate"] .md-search__form:hover {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
[data-md-color-scheme="slate"] .md-search__form:focus-within {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 0 8px rgba(235, 203, 107, 0.2);
}
[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
[data-md-color-scheme="slate"] .md-header__button.md-logo img, 
[data-md-color-scheme="slate"] .md-header__button.md-logo svg {
  filter: brightness(0.9);
}

/* 全局滚动行为 */
html {
  scroll-behavior: smooth;
}

/* 字体应用 */
.md-typeset, .md-nav, .md-footer, .ethereal-btn {
  font-family: var(--md-text-font) !important;
}

/* 【优化】滚动条：更克制，只在悬停时明显，阅读时不抢戏 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb {
  background: var(--md-accent-fg-color); /* 改用金色/土黄，避免“血条”感 */
  opacity: 0.5;
  border-radius: 4px;
  border: transparent;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--md-primary-fg-color); /* 悬停时才变红 */
}
::-webkit-scrollbar-track { background: transparent; }

/* 内容区域 */
.md-content {
  border: none !important;
  background-color: transparent !important;
  min-height: 80vh; 
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;

  /* 文字渲染优化 */
  text-rendering: optimizeLegibility; 
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   4. 代码块与文本元素 (深度优化)
   ========================================================================== */

/* 行内代码 (`code`) */
.md-typeset code {
  /* 使用新定义的变量，自动适配深浅模式 */
  background-color: var(--md-code-bg-color);
  color: var(--md-primary-fg-color);
  border-radius: 3px;
  padding: 0 4px;
  /* 去除原来的红色边框，让它更像标记笔 */
  border: none;
  font-family: var(--md-code-font);
}

[data-md-color-scheme="slate"] .md-typeset code {
  color: #e8a7a7; /* 柔和粉红 */
}

/* 代码块容器 (Pre > Code) */
.md-typeset pre > code {
  background-color: var(--md-code-bg-color); /* 关键：使用半透明背景 */
  white-space: pre-wrap;
  word-break: break-all;
  display: block;
  line-height: 1.6; /* 稍微收紧一点，更专业 */
  padding: 1.2rem;
  border-radius: 4px;
  font-family: var(--md-code-font);
  box-shadow: none; /* 去除投影，追求纸面印刷感 */
}

/* 链接下划线动画 */
.md-typeset a {
  position: relative;
  text-decoration: none !important;
  color: var(--md-typeset-a-color); /* 应用优化后的颜色变量 */
  transition: color 0.3s;
}

.md-typeset a::after {
  content: "";
  position: absolute; width: 0; height: 1px; bottom: -1px; left: 0;
  background-color: var(--md-accent-fg-color);
  transition: width 0.3s ease;
}
.md-typeset a:hover::after { width: 100%; }

/* 导航激活项 */
.md-nav__link--active {
  color: var(--md-primary-fg-color) !important;
  font-weight: 700;
  /* 恢复文字右移效果，0.8rem 比之前的 1.2rem 更精致，不会显得太空 */
  padding-left: 0.8rem !important; 
  
  /* 强制干掉任何粗竖线（包括 MkDocs 原生自带的 TOC 激活竖线） */
  border-left: none !important;    
  
  /* 加上平滑的过渡动画，点击时文字会优雅地滑过去 */
  transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}

/* ==========================================================================
   5. 首页 (Hero Section) 专用布局 (保持原有逻辑)
   ========================================================================== */
body:has(.hero-section) {
  overflow: hidden !important;
  height: 100vh;
}

body:has(.hero-section) .md-container {
    min-height: 100vh;
    animation: bg-breathe 8s infinite alternate ease-in-out;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    transition: background-image 1.5s ease-in-out !important; 
}

/* --- 背景切换逻辑 --- */
body.time-morning:has(.hero-section) .md-container {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), 
    url("../assets/illustration/Telysta&Losalind_Library_day_01.webp") !important;
}
body.time-afternoon:has(.hero-section) .md-container {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), 
    url("../assets/illustration/Telysta&Losalind_Library_day_02.webp") !important;
}
body.time-evening:has(.hero-section) .md-container {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), 
    url("../assets/illustration/Telysta&Losalind_Library_night_01.webp") !important;
}
body.time-night:has(.hero-section) .md-container {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), 
    url("../assets/illustration/Telysta&Losalind_Library_night_02.webp") !important;
}

@keyframes bg-breathe { from { filter: brightness(1); } to { filter: brightness(1.08); } }

/* 首页隐藏多余组件 */
body:has(.hero-section) :is(.md-header, .md-tabs, .md-sidebar, .md-footer, .md-header__topic) {
  display: none !important; 
}
body:has(.hero-section) :is(.md-main, .md-main__inner, .md-content, article) {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.hero-section {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  height: 100vh; width: 100%; text-align: center;
}

/* 史诗标题 */
.epic-title {
  font-family: 'Cinzel', serif !important; 
  font-size: clamp(2.5rem, 8vw, 5.5rem) !important; 
  font-weight: 700 !important;
  letter-spacing: 0.2em; 
  text-transform: uppercase;
  white-space: nowrap; 
  margin: 0 !important;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out !important;
  display: block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.time-morning .epic-title,
body.time-afternoon .epic-title {
  background-image: linear-gradient(to bottom, #ffffff 20%, #EBCB6B 100%);
  filter: drop-shadow(0 0 10px rgba(235, 203, 107, 0.4)) drop-shadow(0 5px 15px rgba(0, 0, 0, 0.8));
}
body.time-evening .epic-title,
body.time-night .epic-title {
  background-image: linear-gradient(to bottom, #FFFFFF 30%, #B0C4DE 100%); 
  filter: drop-shadow(0 0 15px rgba(176, 196, 222, 0.5)) drop-shadow(0 5px 20px rgba(0, 0, 0, 0.9));
}

.epic-subtitle {
  color: rgba(242, 238, 226, 0.9) !important;
  font-size: 1.1rem;
  font-style: italic;
  margin: 1rem 0 3.5rem !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.3em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out !important;
}

/* 按钮样式 */
.ethereal-btn {
  display: inline-block;
  padding: 1.2rem 5rem;
  background: rgba(46, 36, 36, 0.4);
  border: 1px solid rgba(163, 134, 43, 0.4);
  color: #f2eee2 !important;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.15em;
  position: relative; 
  overflow: hidden; 
  transition: all 0.4s ease;
  border-radius: 2px;
  z-index: 1;
  border: 1px solid rgba(181, 148, 49, 0.5); 
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out, border-color 0.4s ease, background 0.4s ease !important;
}

.ethereal-btn::before {
  content: "";
  position: absolute; top: 0; left: -150%; width: 100%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1), transparent);
  transition: all 0.6s ease;
  z-index: -1;
  transform: skewX(-25deg);
  animation: shine-loop 4s infinite ease-in-out;
}

.ethereal-btn:hover::before { animation: none; left: 150%; transition: left 0.6s ease; }
.ethereal-btn:hover {
  border-color: rgba(163, 134, 43, 1);
  background: rgba(107, 36, 36, 0.4);
  color: #ffffff !important;
  box-shadow: 0 0 25px rgba(163, 134, 43, 0.3);
  transform: translateY(-3px);
}
.ethereal-btn span {
  display: block; font-size: 0.65rem; opacity: 0.6; margin-top: 4px; letter-spacing: 0.2em;
}
@keyframes shine-loop { 0% { left: -150%; } 30% { left: 150%; } 100% { left: 150%; } }

/* ==========================================================================
   6. 进场动画与移动端适配
   ========================================================================== */
body.content-ready .epic-title { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
body.content-ready .epic-subtitle { opacity: 1; transform: translateY(0); transition-delay: 0.9s; }
body.content-ready .ethereal-btn { opacity: 1; transform: translateY(0); transition-delay: 1.4s; }

body.content-ready.time-morning .epic-title,
body.content-ready.time-afternoon .epic-title {
  background-image: linear-gradient(to bottom, #ffffff 20%, #EBCB6B 100%);
  filter: drop-shadow(0 0 10px rgba(235, 203, 107, 0.4)) drop-shadow(0 5px 15px rgba(0, 0, 0, 0.8));
}
body.content-ready.time-evening .epic-title,
body.content-ready.time-night .epic-title {
  background-image: linear-gradient(to bottom, #FFFFFF 30%, #B0C4DE 100%); 
  filter: drop-shadow(0 0 15px rgba(176, 196, 222, 0.5)) drop-shadow(0 5px 20px rgba(0, 0, 0, 0.9));
}

/* 移动端响应式 */
@media screen and (max-width: 76.25em) {
  .epic-title {
    white-space: normal !important; line-height: 1.1 !important;
    font-size: clamp(2.2rem, 10vw, 3.5rem) !important;
    padding: 0 10% !important; text-align: center; word-break: break-word;
    -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.1);
  }
  body.time-morning .epic-title,
  body.time-afternoon .epic-title {
    background-image: linear-gradient(to bottom, #FFFFFF 10%, #EBCB6B 60%, #B59431 100%) !important;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8)) !important;
  }
  body.time-evening .epic-title,
  body.time-night .epic-title {
    background-image: linear-gradient(to bottom, #FFFFFF 20%, #B0C4DE 70%, #778899 100%) !important;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.9)) !important;
  }
  .epic-subtitle {
    font-size: 0.85rem !important; padding: 0 15% !important; margin: 1.5rem 0 3rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }
  .ethereal-btn {
    padding: 1rem 0 !important; width: 70% !important; max-width: 280px;
    font-size: 0.9rem !important;
    background: rgba(46, 36, 36, 0.6) !important;
    border: 1px solid rgba(181, 148, 49, 0.6) !important;
  }
}

/* 布局补丁 */
.md-main__inner { display: flex; align-items: stretch; }
.md-content__inner { flex-grow: 1; }
.md-typeset :is(h1, h2, h3, h4, h5, h6), :target { scroll-margin-top: 5.5rem; }
.md-content { padding-bottom: 60vh !important; }
.md-footer-meta__inner {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 0.8rem 0 !important;
}
.md-copyright { margin: 0 !important; opacity: 0.6; font-size: 0.65rem; letter-spacing: 0.5px; }

/* ==========================================================================
   8. 墨水涂黑 / 机密文本特效 (Redacted Text)
   ========================================================================== */

/* --- 基础状态：被浓墨覆盖 --- */
.md-typeset .ink-redacted {
  background-color: #1A1515; /* 极深的炭黑色，像干涸的墨迹 */
  color: #1A1515; /* 文字颜色与背景完全一致，完美隐藏 */
  padding: 0 6px;
  border-radius: 2px;
  margin: 0 2px;
  transition: all 0.4s ease;
  cursor: crosshair; /* 鼠标放上去会变成十字准星，增加解密感 */
  user-select: none; /* 默认禁止鼠标划选偷看内容 */
}

/* 深色模式下的墨水颜色微调，确保比底色更黑 */
[data-md-color-scheme="slate"] .md-typeset .ink-redacted {
  background-color: #0A0809; 
  color: #0A0809;
}

/* --- 交互状态：鼠标悬停时墨水褪去，浮现血字 --- */
.md-typeset .ink-redacted:hover {
  background-color: transparent; /* 背景墨水消散 */
  color: var(--md-primary-fg-color); /* 浮现出你设定的丝绒酒红色 */
  text-shadow: 0 0 8px rgba(128, 26, 26, 0.4); /* 带有微弱的血色魔法微光 */
  user-select: auto; /* 悬停后允许读者复制这段秘密 */
}

/* ==========================================================================
   9. 目录树缩进参考线 (Obsidian 风格 - 仅限右侧) 与排版优化
   ========================================================================== */

/* 1. 放宽全局侧边栏的宽度，给长目录更多空间 */
:root {
  --md-sidebar-width: 16rem; 
}

/* 2. 定义参考线基础颜色 */
:root, [data-md-color-scheme="default"] {
  --md-nav-guide-color: rgba(46, 36, 36, 0.12); 
}
[data-md-color-scheme="slate"] {
  --md-nav-guide-color: rgba(220, 211, 200, 0.12); 
}

/* 3. 核心：仅为【右侧目录】(.md-sidebar--secondary) 添加 Obsidian 竖线 */
.md-sidebar--secondary .md-nav__item > .md-nav {
  border-left: 1px solid var(--md-nav-guide-color); /* 画出竖线 */
  margin-left: 0.5rem;   /* 适当的缩进，不会占用太多横向空间 */
  padding-left: 0.5rem;  /* 文字与竖线的距离 */
  border-radius: 0;
  transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 右侧竖线的悬停高亮特效 */
.md-sidebar--secondary .md-nav__item > .md-nav:hover {
  border-left-color: var(--md-accent-fg-color);
}

/* 4. 右侧目录文字换行与行高优化，告别拥挤 */
.md-sidebar--secondary .md-nav__link {
  word-break: break-word; 
  line-height: 1.4;       
  padding-top: 0.2rem;    
  padding-bottom: 0.2rem;
}