/*
 * Butterfly Modern Frost & Deep Sea Theme
 * 现代极简毛玻璃配色方案
 */

:root {
  /* 白天模式 - 冰霜蓝白 */
  --global-bg: #f7f9fb;
  --nav-bg: rgba(255, 255, 255, 0.7);
  --card-bg: rgba(255, 255, 255, 0.85);
  --btn-bg: #49b1f5;
  --text-main: #2c3e50;
  --text-link: #49b1f5;
  --hr-border: rgba(73, 177, 245, 0.3);
}

[data-theme="dark"] {
  /* 深色模式 - 极客深蓝 */
  --global-bg: #0d1117;
  --nav-bg: rgba(22, 27, 34, 0.7);
  --card-bg: rgba(22, 27, 34, 0.85);
  --btn-bg: #21262d;
  --text-main: #c9d1d9;
  --text-link: #58a6ff;
  --hr-border: rgba(88, 166, 255, 0.2);
}

/* 全局背景底色 */
#web_bg {
  background-color: var(--global-bg) !important;
}

/* 毛玻璃核心实现：针对导航栏、卡片、侧边栏、搜索框等 */
#nav, 
.layout > div:first-child:not(.recent-posts), 
#aside-content > .card-widget, 
.recent-post-item, 
#pdata, 
.local-search-window {
  background: var(--card-bg) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  transition: all 0.3s ease-in-out;
}

/* 深色模式卡片边框 */
[data-theme="dark"] #nav, 
[data-theme="dark"] .layout > div:first-child:not(.recent-posts), 
[data-theme="dark"] #aside-content > .card-widget, 
[data-theme="dark"] .recent-post-item, 
[data-theme="dark"] #pdata, 
[data-theme="dark"] .local-search-window {
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 侧边栏和卡片阴影微调 */
#aside-content > .card-widget, .recent-post-item {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* 鼠标悬浮交互反馈 */
.recent-post-item:hover {
  border: 1px solid var(--btn-bg) !important;
  box-shadow: 0 8px 24px rgba(73, 177, 245, 0.15) !important;
}

/* 按钮悬浮平滑过渡 */
button, .nav-right .nav-button {
  transition: all 0.3s ease-in-out;
}

button:hover {
  filter: brightness(0.9);
}

/* 代码块美化：圆角与微边框 */
#article-container .highlight {
  border-radius: 10px !important;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] #article-container .highlight {
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 强制应用文本颜色以解决文章内字体太淡的问题 */
body, #article-container {
  color: var(--text-main) !important;
}

[data-theme="dark"] body, 
[data-theme="dark"] #article-container,
[data-theme="dark"] #article-container p,
[data-theme="dark"] #article-container li {
  color: #e6edf3 !important; /* 更亮的浅灰白色，提升深色模式阅读体验 */
}

/* 修改底部区域的颜色，使其与主题一致，移除突兀的纯蓝色块 */
#footer {
  background: transparent !important;
  color: var(--text-main) !important;
}
#footer a {
  color: var(--text-main) !important;
}
#footer a:hover {
  color: var(--text-link) !important;
}

/* 进度条与按钮颜色 */
#rightside > div > button, #nav .site-page:after {
  background-color: var(--btn-bg) !important;
}

/* =====================================================
   Dark 模式：覆盖文章内所有内联 color 样式
   解决从富文本编辑器粘贴的 rgba(0,0,0,x) 深色字体问题
   ===================================================== */

/* 覆盖 font 标签内联颜色 */
[data-theme="dark"] #article-container font[style*="color"] {
  color: #c9d1d9 !important;
}

/* 覆盖所有带内联 color 的元素（span、p、div、li 等） */
[data-theme="dark"] #article-container *[style*="color:rgb(0"],
[data-theme="dark"] #article-container *[style*="color: rgb(0"],
[data-theme="dark"] #article-container *[style*="color:rgba(0"],
[data-theme="dark"] #article-container *[style*="color: rgba(0"],
[data-theme="dark"] #article-container *[style*="color:#000"],
[data-theme="dark"] #article-container *[style*="color: #000"],
[data-theme="dark"] #article-container *[style*="color:#333"],
[data-theme="dark"] #article-container *[style*="color:#353535"],
[data-theme="dark"] #article-container *[style*="color:#595959"],
[data-theme="dark"] #article-container *[style*="color:#666"],
[data-theme="dark"] #article-container *[style*="color:#4d4d4d"] {
  color: #c9d1d9 !important;
}

/* blockquote 引用块文字 */
[data-theme="dark"] #article-container blockquote,
[data-theme="dark"] #article-container blockquote * {
  color: #8b949e !important;
  border-left-color: #30363d !important;
}

/* 表格文字 */
[data-theme="dark"] #article-container table,
[data-theme="dark"] #article-container th,
[data-theme="dark"] #article-container td {
  color: #c9d1d9 !important;
  border-color: #30363d !important;
}

/* =====================================================
   导航栏居中 + 字体调大
   ===================================================== */

/* 让导航菜单在 nav 中绝对居中 */
#nav .menus_items {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
}

#nav .menus_items .menus_item a {
  font-size: 20px !important;
}

/* 隐藏首页 banner 中的站点标题 */
#site-info #site-title {
  display: none !important;
}

/* 打字机副标题字号放大 3 倍（原约 14px → 42px） */
#site-info #site-subtitle,
#site-info #subtitle {
  font-size: 84px !important;
  line-height: 1.4 !important;
}

/* =====================================================
   标签云动画效果
   ===================================================== */

/* 容器：增加间距 */
.tag-cloud-list {
  padding: 16px 8px !important;
  line-height: 2.8 !important;
}

/* 每个标签基础样式 */
.tag-cloud-list a {
  display: inline-block !important;
  margin: 5px 6px !important;
  padding: 6px 18px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  color: #fff !important;
  position: relative !important;
  overflow: hidden !important;
  /* 入场动画 */
  animation: tagFadeIn 0.5s ease both !important;
  /* 悬浮过渡 */
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease,
    filter 0.25s ease !important;
  /* 光晕扫过伪元素准备 */
  isolation: isolate !important;
}

/* 入场动画：从下方淡入 + 随机延迟由 nth-child 控制 */
@keyframes tagFadeIn {
  from { opacity: 0; transform: translateY(14px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* 用 nth-child 错开入场时间，制造瀑布感 */
.tag-cloud-list a:nth-child(3n+1)  { animation-delay: 0.05s !important; }
.tag-cloud-list a:nth-child(3n+2)  { animation-delay: 0.12s !important; }
.tag-cloud-list a:nth-child(3n)    { animation-delay: 0.20s !important; }
.tag-cloud-list a:nth-child(5n+1)  { animation-delay: 0.08s !important; }
.tag-cloud-list a:nth-child(5n+3)  { animation-delay: 0.16s !important; }
.tag-cloud-list a:nth-child(7n+2)  { animation-delay: 0.24s !important; }

/* 光晕扫过效果（::before 伪元素） */
.tag-cloud-list a::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -75% !important;
  width: 50% !important; height: 100% !important;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.35) 50%,
    transparent 100%
  ) !important;
  transform: skewX(-20deg) !important;
  transition: left 0.55s ease !important;
  pointer-events: none !important;
}

/* 悬浮：光晕扫过 + 上浮 + 放大 + 发光 */
.tag-cloud-list a:hover::before {
  left: 130% !important;
}

.tag-cloud-list a:hover {
  transform: translateY(-4px) scale(1.12) !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,0.25),
    0 0 12px rgba(255,255,255,0.15) !important;
  filter: brightness(1.15) saturate(1.2) !important;
  z-index: 1 !important;
}

/* 点击按下反馈 */
.tag-cloud-list a:active {
  transform: translateY(-1px) scale(1.05) !important;
  transition-duration: 0.08s !important;
}

/* 深色模式微调：加强发光感 */
[data-theme="dark"] .tag-cloud-list a:hover {
  box-shadow:
    0 8px 24px rgba(0,0,0,0.5),
    0 0 18px rgba(255,255,255,0.12) !important;
}

/* 脉冲呼吸动画：随机给部分标签加持续呼吸效果 */
@keyframes tagPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); }
  50%       { box-shadow: 0 0 8px 3px rgba(255,255,255,0.12); }
}

.tag-cloud-list a:nth-child(4n+1) {
  animation: tagFadeIn 0.5s ease both, tagPulse 3.5s ease-in-out 1s infinite !important;
}
.tag-cloud-list a:nth-child(6n+3) {
  animation: tagFadeIn 0.5s ease both, tagPulse 4.2s ease-in-out 1.8s infinite !important;
}
.tag-cloud-list a:nth-child(8n+5) {
  animation: tagFadeIn 0.5s ease both, tagPulse 5s ease-in-out 0.5s infinite !important;
}

/* =====================================================
   标签球（TagCanvas 3D 球）
   ===================================================== */

#tag-cloud-sphere-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0 10px;
}

#tag-cloud-canvas {
  max-width: 100%;
  height: auto;
  cursor: grab;
}

#tag-cloud-canvas:active {
  cursor: grabbing;
}

/* 标签球与静态标签列表之间的分割线 */
#tag-cloud-sphere-wrap + .tag-cloud-list {
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--hr-border);
}

/* hide copyright notice row */
.post-copyright__notice { display: none; }