/* =========================
   变量定义
   ========================= */
:root {
  --trans-light: rgba(255, 255, 255, 0.88);
  --trans-dark: rgba(25, 25, 25, 0.88);
  --border-style: 1px solid rgb(169, 169, 169);
  --backdrop-filter: blur(5px) saturate(150%);
  --theme-color: #ef50a8;
  --cursor-color: rgb(57, 197, 187);
}

/* =========================
   页脚 & 页头透明
   ========================= */
#footer, #page-header {
  background: transparent !important;
}

#footer::before, #page-header::before {
  background: transparent !important;
}

/* =========================
   侧边栏个人信息卡片
   ========================= */
#aside-content > .card-widget.card-info {
  position: relative;
  background: linear-gradient(-45deg, #e8d8b9, #eccec5, #a3e9eb, #bdbdf0, #eec1ea);
  background-size: 400% 400%;
  box-shadow: 0 0 5px rgb(66, 68, 68);
  border-radius: 18px;
  animation: gradientMove 10s ease infinite;
  transition: background 0.5s;
}

[data-theme="dark"] #aside-content > .card-widget.card-info {
  background: #191919ee;
}

/* Follow Me 按钮 */
#aside-content > .card-widget.card-info > #card-info-btn {
  background-color: #3eb8be;
  border-radius: 8px;
}

/* 彩带效果 */
.author_top:hover {
  background: url(https://tuchuang.voooe.cn/images/2023/01/02/snow.gif) no-repeat center/cover;
}

/* 渐变动画 */
@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =========================
   鼠标自定义
   ========================= */
#cursor {
  position: fixed;
  width: 16px;
  height: 16px;
  background: var(--cursor-color);
  border-radius: 50%;
  opacity: 0.25;
  pointer-events: none;
  z-index: 10086;
  transition: 0.2s ease-in-out background, opacity, transform;
  will-change: transform, opacity, background;
}

#cursor.hidden { opacity: 0; }
#cursor.hover { opacity: 0.1; transform: scale(2.5); }
#cursor.active { opacity: 0.5; transform: scale(0.5); }

/* 移动端隐藏 */
@media (hover: none) { #cursor { display: none; } }

/* =========================
   卡片 & 内容统一风格
   ========================= */
#recent-posts > .recent-post-item,
#aside-content .card-widget,
div#post, div#page, div#archive {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 20px;
  border: var(--border-style);
  transition: background 0.3s;
}

[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#page,
[data-theme="dark"] div#archive {
  background: var(--trans-dark);
}

/* 导航栏透明 & 夜间模式 */
#page-header.nav-fixed #nav {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: var(--backdrop-filter);
  transition: background 0.3s;
}

[data-theme="dark"] #page-header.nav-fixed #nav {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* =========================
   阅读模式
   ========================= */
.read-mode #aside-content .card-widget,
.read-mode div#post {
  background: rgba(158, 204, 171, 0.5) !important;
}

[data-theme="dark"] .read-mode #aside-content .card-widget,
[data-theme="dark"] .read-mode div#post {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}

/* =========================
   文章标题风车图标
   ========================= */
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
  animation: spin 4s linear infinite;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-1turn); }
}

/* hover 动画与颜色变化 */
#content-inner.layout h1:hover::before,
#content-inner.layout h2:hover::before,
#content-inner.layout h3:hover::before,
#content-inner.layout h4:hover::before,
#content-inner.layout h5:hover::before,
#content-inner.layout h6:hover::before {
  animation: spin 6s linear infinite;
  color: var(--theme-color);
}

#content-inner.layout h1:hover,
#content-inner.layout h2:hover,
#content-inner.layout h3:hover,
#content-inner.layout h4:hover,
#content-inner.layout h5:hover,
#content-inner.layout h6:hover {
  color: var(--theme-color);
}

/* 各级 H 标题图标颜色与位置 */
#content-inner.layout h1::before { color: #ef50a8; margin-left: -1.55rem; font-size: 1.3rem; margin-top: -0.23rem; }
#content-inner.layout h2::before { color: #fb7061; margin-left: -1.35rem; font-size: 1.1rem; margin-top: -0.12rem; }
#content-inner.layout h3::before { color: #ffbf00; margin-left: -1.22rem; font-size: 0.95rem; margin-top: -0.09rem; }
#content-inner.layout h4::before { color: #a9e000; margin-left: -1.05rem; font-size: 0.8rem; margin-top: -0.09rem; }
#content-inner.layout h5::before { color: #57c850; margin-left: -0.9rem; font-size: 0.7rem; margin-top: 0; }
#content-inner.layout h6::before { color: #5ec1e0; margin-left: -0.9rem; font-size: 0.66rem; margin-top: 0; }

/* 隐藏深浅色模式切换提示 */
#theme-mode-tip,
.theme-mode-tip,
.theme-switch-tip {
  display: none !important;
}