/* 文章卡片和侧边栏液态玻璃效果 */
.card-widget,
.recent-posts .article-container,
#recent-posts > .recent-post-item,
.recent-posts .recent-post-item,
div#recent-posts > div.recent-post-item {
  /* 液态玻璃效果 - 简化版 */
  backdrop-filter: blur(10px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
  
  /* 渐变背景模拟液态质感 */
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  ) !important;
  
  /* 多层阴影增强深度感 */
  box-shadow: 
    0 8px 32px rgba(31, 38, 135, 0.37),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.1) !important;
  
  /* 渐变边框 */
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-image: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.1)
  ) 1;
  
  /* 平滑过渡动画 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  
  /* 性能优化 */
  will-change: backdrop-filter, transform !important;
  

}

/* 悬停效果增强 */
.card-widget:hover,
.recent-posts .article-container:hover,
#recent-posts > .recent-post-item:hover,
.recent-posts .recent-post-item:hover,
div#recent-posts > div.recent-post-item:hover {
  backdrop-filter: blur(15px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(200%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 
    0 12px 40px rgba(31, 38, 135, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 0 rgba(255, 255, 255, 0.15) !important;
}


/* 深色模式液态玻璃适配 */
[data-theme='dark'] .card-widget,
[data-theme='dark'] .recent-posts .article-container,
[data-theme='dark'] #recent-posts > .recent-post-item,
[data-theme='dark'] .recent-posts .recent-post-item,
[data-theme='dark'] div#recent-posts > div.recent-post-item {
  /* 深色模式渐变背景 */
  background: linear-gradient(135deg, 
    rgba(30, 30, 30, 0.1),
    rgba(20, 20, 20, 0.05)
  ) !important;
  
  /* 深色模式边框 */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-image: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.05)
  ) 1;
  
  /* 深色模式阴影 */
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* 深色模式悬停效果 */
[data-theme='dark'] .card-widget:hover,
[data-theme='dark'] .recent-posts .article-container:hover,
[data-theme='dark'] #recent-posts > .recent-post-item:hover,
[data-theme='dark'] .recent-posts .recent-post-item:hover,
[data-theme='dark'] div#recent-posts > div.recent-post-item:hover {
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 2px 0 rgba(255, 255, 255, 0.1) !important;
}

/* 设置默认顶部图片完全透明 */
#page-header {
  background-color: transparent !important;
  background-image: none !important;
}

#page-header.not-home-page {
  background-color: transparent !important;
  background-image: none !important;
}

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

/* 顶部导航栏液态玻璃效果 - 固定时显示 */
#page-header.nav-fixed #nav {
  /* 液态玻璃效果 */
  backdrop-filter: blur(15px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
  
  /* 渐变背景模拟液态质感 */
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.08)
  ) !important;
  
  /* 多层阴影增强深度感 */
  box-shadow: 
    0 8px 32px rgba(31, 38, 135, 0.37),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.15) !important;
  
  /* 渐变边框 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  
  /* 平滑过渡动画 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  
  /* 性能优化 */
  will-change: backdrop-filter, transform !important;
}

/* 导航栏悬停效果增强 */
#page-header.nav-fixed #nav:hover {
  backdrop-filter: blur(20px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
  box-shadow: 
    0 12px 40px rgba(31, 38, 135, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 0 rgba(255, 255, 255, 0.2) !important;
}

/* 深色模式导航栏液态玻璃适配 */
[data-theme='dark'] #page-header.nav-fixed #nav {
  /* 深色模式渐变背景 */
  background: linear-gradient(135deg, 
    rgba(30, 30, 30, 0.15),
    rgba(20, 20, 20, 0.08)
  ) !important;
  
  /* 深色模式边框 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  
  /* 深色模式阴影 */
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* 深色模式导航栏悬停效果 */
[data-theme='dark'] #page-header.nav-fixed #nav:hover {
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 0 rgba(255, 255, 255, 0.12) !important;
}

/* 动态视频背景样式 */
.video-background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  background-attachment: fixed;
}

/* 背景蒙版，提高可读性 */
.video-background-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 默认蒙版 */
  z-index: 0; /* 确保在视频之上，但在内容之下 */
  pointer-events: none; /* 允许点击穿透 */
}

/* 图片背景状态 */
.video-background-container.image-background {
  /* 移除transition避免残影 */
  /* 确保图片背景与视频背景使用相同的显示方式 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* 视频背景状态 */
.video-background-container.video-background:not(.image-background) {
   background-image: none !important;
 }
 
 /* 当同时有图片和视频背景时，保持图片背景作为底层 */
 .video-background-container.video-background.image-background {
   /* 保持背景图片，视频作为覆盖层 */
 }
 
 /* 背景视频样式 - 防止缓存导致的样式冲突 */
.background-video,
.buffer-video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  /* 移除transition避免残影 */
  /* 防止首次加载时的比例问题 */
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

/* 主视频样式 */
.background-video {
  z-index: -1 !important;
}

/* 缓冲视频特殊样式 */
.buffer-video {
  z-index: -3 !important; /* 确保缓冲视频在主视频下方 */
}

/* 确保视频在不同屏幕比例下都能正确显示 */
@media (aspect-ratio: 16/9) {
  .background-video {
    width: 100%;
    height: auto;
  }
}

@media (aspect-ratio: 4/3) {
  .background-video {
    width: auto;
    height: 100%;
  }
}

/* 移动设备优化 */
@media (max-width: 768px) {
  .video-background-container {
    background-attachment: scroll; /* 移动设备不支持fixed attachment */
  }
  
  .background-video {
    /* 移动设备上可能需要调整视频显示 */
    min-width: 120%;
    min-height: 120%;
  }
}

/* 移动端静态背景专用样式 */
.video-background-container.mobile-background {
  background-attachment: scroll !important;
  /* 确保移动端背景图片正确显示 */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* 竖屏手机特殊适配 */
@media screen and (max-width: 768px) and (orientation: portrait) {
  .video-background-container.mobile-background {
    /* 竖屏时确保图片覆盖整个屏幕 */
    background-size: cover !important;
    /* 调整背景位置，避免显示图片的留白部分 */
    background-position: center 20% !important;
    /* 移动端使用scroll避免iOS兼容性问题 */
    background-attachment: scroll !important;
    /* 确保最小高度覆盖整个视口 */
    min-height: 100vh !important;
  }
}

/* 超小屏幕竖屏设备（如小尺寸手机） */
@media screen and (max-width: 480px) and (orientation: portrait) {
  .video-background-container.mobile-background {
    /* 小屏幕设备更激进的裁剪策略 */
    background-size: cover !important;
    background-position: center 15% !important;
    /* 确保背景完全填充 */
    width: 100% !important;
    height: 100vh !important;
  }
}

/* 横屏手机和平板优化 */
@media screen and (max-width: 1024px) and (orientation: landscape) {
  .video-background-container.mobile-background {
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: scroll !important;
  }
}

/* 移动端优化：隐藏视频元素 */
.video-background-container[data-mobile-optimized="true"] .background-video,
.video-background-container[data-mobile-optimized="true"] .buffer-video {
  display: none !important;
}

/* 减少动画以提高性能 */
@media (prefers-reduced-motion: reduce) {
  .video-background-container,
  .background-video {
    transition: none !important;
  }
}

/* 确保内容在视频背景上可见 */
body {
  position: relative;
  z-index: 1;
}

/* 为液态玻璃效果提供更好的背景对比 */
.card-widget,
.recent-posts .article-container,
#recent-posts > .recent-post-item,
.recent-posts .recent-post-item,
div#recent-posts > div.recent-post-item {
  /* 在视频背景上增强对比度 */
  backdrop-filter: blur(12px) saturate(180%) contrast(1.1) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) contrast(1.1) !important;
}

/* 深色模式下的视频背景适配 */
[data-theme='dark'] .video-background-container::before {
  background-color: rgba(0, 0, 0, 0.6); /* 深色模式下更暗的蒙版 */
}


/* 强制文章页等非主页的背景透明，以显示视频 */
#content-wrap,
#aside-content {
  background: transparent !important;
}

/* 底部footer背景透明设置 */
footer,
#footer,
.footer {
  background: transparent !important;
}