/* =========================================================================
   全局背景图与基础设置
   ========================================================================= */
#web_bg {
  background: url(/img/background.jpg) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  filter: contrast(1.12) saturate(1.08) brightness(1.04);
  z-index: -999;
}

#page-header {
  background: transparent !important;
  background-image: none !important;
}

#page-header::before {
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(7px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(135%) !important;
  opacity: 0.52 !important;
  transition: background-color 0.45s ease, backdrop-filter 0.45s ease, opacity 0.45s ease !important;
  pointer-events: none !important;
}

#page-header.nav-fixed::before,
#page-header.not-top-img::before {
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(7px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(135%) !important;
  opacity: 0.52 !important;
}

[data-theme="dark"] #page-header::before {
  background: rgba(16, 21, 32, 0.18) !important;
  background-color: rgba(16, 21, 32, 0.18) !important;
  opacity: 0.46 !important;
}

[data-theme="dark"] #page-header.nav-fixed::before,
[data-theme="dark"] #page-header.not-top-img::before {
  background: rgba(16, 21, 32, 0.18) !important;
  background-color: rgba(16, 21, 32, 0.18) !important;
  opacity: 0.46 !important;
}

/* =========================================================================
   3D 悬浮交互卡片 (大厂风格)
   ========================================================================= */
/* 给所有文章卡片、侧边栏小组件增加玻璃态、阴影和 3D 悬浮动画 */
.layout > .recent-posts > .recent-post-item,
.layout > div:first-child:not(.recent-posts),
#aside-content .card-widget,
#archive,
#tag,
#category {
  background: rgba(255, 255, 255, 0.6) !important; /* 更通透的背景 */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); /* 柔和的环境阴影 */
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: perspective(1000px) translateZ(0) translateY(0);
}

/* 鼠标悬浮时的 3D 抬升与光影变化 */
.layout > .recent-posts > .recent-post-item:hover,
#aside-content .card-widget:hover {
  transform: perspective(1000px) translateZ(20px) translateY(-8px);
  box-shadow: 0 20px 40px 0 rgba(31, 38, 135, 0.25), 0 0 20px rgba(255, 255, 255, 0.5) inset;
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

/* 文章内部图片的圆角和过渡 */
.recent-post-item .post_cover img.article-cover {
  border-radius: 16px 16px 0 0;
  transition: transform 0.6s ease;
}
.recent-post-item:hover .post_cover img.article-cover {
  transform: scale(1.05); /* 图片放大效果 */
}

/* =========================================================================
   顶部导航栏毛玻璃与现代感过渡
   ========================================================================= */
#nav {
  background-color: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(16px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(165%) !important;
  transition: all 0.5s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 30px rgba(10, 16, 28, 0.12);
}

.nav-fixed #nav,
#page-header.nav-fixed #nav {
  background-color: rgba(255, 255, 255, 0.26) !important;
  backdrop-filter: blur(20px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
  box-shadow: 0 12px 32px rgba(10, 16, 28, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] #nav {
  background-color: rgba(19, 24, 34, 0.34) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .nav-fixed #nav,
[data-theme="dark"] #page-header.nav-fixed #nav {
  background-color: rgba(19, 24, 34, 0.48) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

/* 导航栏文字特效 (发光) */
#nav a,
#nav .site-page,
#nav .menus_item {
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

#nav a:hover,
#nav .menus_item:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-2px);
}

#nav i,
#nav svg {
  pointer-events: none;
}

/* =========================================================================
   首页大标题与打字机特效文字
   ========================================================================= */
#site-info {
  animation: floatTitle 4s ease-in-out infinite;
}

/* 标题悬浮微动动画 */
@keyframes floatTitle {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

#site_title, #site_subtitle, .site-title, #site-title {
  color: #ffffff !important;
  text-shadow: 0 4px 10px rgba(0,0,0,0.4), 0 0 40px rgba(255, 255, 255, 0.3) !important;
  font-weight: 800;
  letter-spacing: 2px;
}

#subtitle {
  color: #f0f0f0 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
  font-size: 1.6em !important;
  font-weight: 300;
  letter-spacing: 1px;
}

/* =========================================================================
   其他 UI 元素透明化
   ========================================================================= */
/* 下拉菜单毛玻璃 */
#nav .menus_item_child,
#nav .menus_item_child a {
  background-color: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 移动端侧边栏毛玻璃 */
#sidebar {
  background-color: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(25px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* 页脚透明化 */
#footer {
  background: transparent !important;
}
#footer::before {
  background: transparent !important;
}

/* 首页顶部区域背景透明 */
#page .header {
  background: transparent !important;
}

#index_img #banner {
  background: transparent !important;
}