/* ============================================
   自定义样式 - 高斯模糊背景效果
   ============================================ */

/* CSS变量定义 - 模糊强度配置 */
:root {
  --card-blur-intensity: 10px;
  --article-blur-intensity: 15px;
}

/* 暗色模式下的模糊强度 */
[data-theme="dark"] {
  --card-blur-intensity: 15px;
  --article-blur-intensity: 20px;
}

/* ============================================
   网站整体背景设置
   ============================================ */

/* 确保body背景固定，实现整个网站背景的无缝衔接 */
body {
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  /* 防止白屏闪烁 */
  background-color: #f5f5f5 !important;
}

/* 暗色模式下的背景色 */
[data-theme="dark"] body {
  background-color: #1a1a1a !important;
}

/* 使用 CSS 变量缓存背景 URL，用于早期初始化 */
:root {
  --cached-bg-url: none;
}

/* 早期背景应用 - 在页面加载前就显示背景 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--cached-bg-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: -1;
  pointer-events: none;
}

/* 确保背景在页面加载时立即可见 */
html {
  min-height: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* ============================================
   顶部导航栏和页脚背景
   ============================================ */

#page-header,
#footer {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 移除主题默认的背景色，让body背景透过来 */
#page-header {
  background-color: transparent !important;
}

#footer {
  background-color: transparent !important;
}

/* 使用伪元素创建模糊层，避免内容模糊 */
#page-header::before,
#footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;
  filter: blur(8px);
  z-index: -1;
}

/* 确保内容在模糊层之上 */
#page-header > *:not(:empty),
#footer > *:not(:empty) {
  position: relative;
  z-index: 1;
}

/* ============================================
   所有卡片组件样式（侧边栏卡片）
   ============================================ */

.card-widget {
  backdrop-filter: blur(var(--card-blur-intensity)) !important;
  -webkit-backdrop-filter: blur(var(--card-blur-intensity)) !important;
  background-color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s ease !important;
}

/* 卡片悬停效果 */
.card-widget:hover {
  backdrop-filter: blur(calc(var(--card-blur-intensity) + 5px)) !important;
  -webkit-backdrop-filter: blur(calc(var(--card-blur-intensity) + 5px)) !important;
  background-color: rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 暗色模式下的卡片样式 */
[data-theme="dark"] .card-widget {
  background-color: rgba(30, 30, 30, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .card-widget:hover {
  background-color: rgba(30, 30, 30, 0.8) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ============================================
   文章页面样式
   ============================================ */

#post {
  backdrop-filter: blur(var(--article-blur-intensity)) !important;
  -webkit-backdrop-filter: blur(var(--article-blur-intensity)) !important;
  background-color: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s ease !important;
}

/* 文章悬停效果 */
#post:hover {
  backdrop-filter: blur(calc(var(--article-blur-intensity) + 5px)) !important;
  -webkit-backdrop-filter: blur(calc(var(--article-blur-intensity) + 5px)) !important;
  background-color: rgba(255, 255, 255, 0.85) !important;
}

/* 暗色模式下的文章样式 */
[data-theme="dark"] #post {
  background-color: rgba(30, 30, 30, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] #post:hover {
  background-color: rgba(30, 30, 30, 0.85) !important;
}

/* ============================================
   首页文章列表样式（文章预览卡片）
   ============================================ */

.recent-post-item {
  backdrop-filter: blur(var(--card-blur-intensity)) !important;
  -webkit-backdrop-filter: blur(var(--card-blur-intensity)) !important;
  background-color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer;
  position: relative;
}

/* 文章列表项悬停效果 */
.recent-post-item:hover {
  backdrop-filter: blur(calc(var(--card-blur-intensity) + 5px)) !important;
  -webkit-backdrop-filter: blur(calc(var(--card-blur-intensity) + 5px)) !important;
  background-color: rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 文章列表项点击时的上升动画 */
.recent-post-item:active {
  animation: cardRiseUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 卡片上升动画关键帧 */
@keyframes cardRiseUp {
  0% {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  }
  100% {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }
}

/* 暗色模式下的文章列表样式 */
[data-theme="dark"] .recent-post-item {
  background-color: rgba(30, 30, 30, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .recent-post-item:hover {
  background-color: rgba(30, 30, 30, 0.8) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .recent-post-item:active {
  animation: cardRiseUpDark 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 暗色模式下的卡片上升动画关键帧 */
@keyframes cardRiseUpDark {
  0% {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }
  50% {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  }
  100% {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }
}

/* ============================================
   归档页面卡片样式
   ============================================ */

.card-archive-list-item {
  backdrop-filter: blur(var(--card-blur-intensity)) !important;
  -webkit-backdrop-filter: blur(var(--card-blur-intensity)) !important;
  background-color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s ease !important;
}

/* 归档卡片内部内容的高斯模糊 */
.card-archive-list-item .card-archive-list-link {
  backdrop-filter: blur(var(--card-blur-intensity)) !important;
  -webkit-backdrop-filter: blur(var(--card-blur-intensity)) !important;
  background-color: rgba(255, 255, 255, 0.3) !important;
  border-radius: 4px;
  padding: 8px 12px;
  transition: all 0.3s ease !important;
  display: block;
  color: #333 !important;
}

.card-archive-list-item .card-archive-list-link:hover {
  backdrop-filter: blur(calc(var(--card-blur-intensity) + 5px)) !important;
  -webkit-backdrop-filter: blur(calc(var(--card-blur-intensity) + 5px)) !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateX(4px);
  color: #000 !important;
}

/* 确保归档卡片内的文字可见 */
.card-archive-list-item .card-archive-list-date,
.card-archive-list-item .card-archive-list-count {
  color: inherit !important;
  pointer-events: none;
}

.card-archive-list-item:hover {
  backdrop-filter: blur(calc(var(--card-blur-intensity) + 5px)) !important;
  -webkit-backdrop-filter: blur(calc(var(--card-blur-intensity) + 5px)) !important;
  background-color: rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .card-archive-list-item {
  background-color: rgba(30, 30, 30, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 暗色模式下的归档卡片内部内容 */
[data-theme="dark"] .card-archive-list-item .card-archive-list-link {
  background-color: rgba(30, 30, 30, 0.3) !important;
  color: #ccc !important;
}

[data-theme="dark"] .card-archive-list-item .card-archive-list-link:hover {
  background-color: rgba(30, 30, 30, 0.5) !important;
  color: #fff !important;
}

/* 确保暗色模式下归档卡片内的文字可见 */
[data-theme="dark"] .card-archive-list-item .card-archive-list-date,
[data-theme="dark"] .card-archive-list-item .card-archive-list-count {
  color: inherit !important;
}

[data-theme="dark"] .card-archive-list-item:hover {
  background-color: rgba(30, 30, 30, 0.8) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ============================================
   分类页面卡片样式
   ============================================ */

.category-list-item {
  backdrop-filter: blur(var(--card-blur-intensity)) !important;
  -webkit-backdrop-filter: blur(var(--card-blur-intensity)) !important;
  background-color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s ease !important;
}

/* 分类卡片内部内容的高斯模糊 */
.category-list-item .category-list-link {
  backdrop-filter: blur(var(--card-blur-intensity)) !important;
  -webkit-backdrop-filter: blur(var(--card-blur-intensity)) !important;
  background-color: rgba(255, 255, 255, 0.3) !important;
  border-radius: 4px;
  padding: 8px 12px;
  transition: all 0.3s ease !important;
  display: block;
  color: #333 !important;
}

.category-list-item .category-list-link:hover {
  backdrop-filter: blur(calc(var(--card-blur-intensity) + 5px)) !important;
  -webkit-backdrop-filter: blur(calc(var(--card-blur-intensity) + 5px)) !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateX(4px);
  color: #000 !important;
}

/* 确保分类卡片内的文字可见 */
.category-list-item .category-list-count {
  color: inherit !important;
  pointer-events: none;
}

.category-list-item:hover {
  backdrop-filter: blur(calc(var(--card-blur-intensity) + 5px)) !important;
  -webkit-backdrop-filter: blur(calc(var(--card-blur-intensity) + 5px)) !important;
  background-color: rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .category-list-item {
  background-color: rgba(30, 30, 30, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 暗色模式下的分类卡片内部内容 */
[data-theme="dark"] .category-list-item .category-list-link {
  background-color: rgba(30, 30, 30, 0.3) !important;
  color: #ccc !important;
}

[data-theme="dark"] .category-list-item .category-list-link:hover {
  background-color: rgba(30, 30, 30, 0.5) !important;
  color: #fff !important;
}

/* 确保暗色模式下分类卡片内的文字可见 */
[data-theme="dark"] .category-list-item .category-list-count {
  color: inherit !important;
}

[data-theme="dark"] .category-list-item:hover {
  background-color: rgba(30, 30, 30, 0.8) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ============================================
   标签页面卡片样式
   ============================================ */

.tag-list-item {
  backdrop-filter: blur(var(--card-blur-intensity)) !important;
  -webkit-backdrop-filter: blur(var(--card-blur-intensity)) !important;
  background-color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s ease !important;
}

/* 标签卡片内部内容的高斯模糊 */
.tag-list-item .tag-list-link {
  backdrop-filter: blur(var(--card-blur-intensity)) !important;
  -webkit-backdrop-filter: blur(var(--card-blur-intensity)) !important;
  background-color: rgba(255, 255, 255, 0.3) !important;
  border-radius: 4px;
  padding: 8px 12px;
  transition: all 0.3s ease !important;
  display: block;
  color: #333 !important;
}

.tag-list-item .tag-list-link:hover {
  backdrop-filter: blur(calc(var(--card-blur-intensity) + 5px)) !important;
  -webkit-backdrop-filter: blur(calc(var(--card-blur-intensity) + 5px)) !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateX(4px);
  color: #000 !important;
}

/* 确保标签卡片内的文字可见 */
.tag-list-item .tag-list-count {
  color: inherit !important;
  pointer-events: none;
}

.tag-list-item:hover {
  backdrop-filter: blur(calc(var(--card-blur-intensity) + 5px)) !important;
  -webkit-backdrop-filter: blur(calc(var(--card-blur-intensity) + 5px)) !important;
  background-color: rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .tag-list-item {
  background-color: rgba(30, 30, 30, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 暗色模式下的标签卡片内部内容 */
[data-theme="dark"] .tag-list-item .tag-list-link {
  background-color: rgba(30, 30, 30, 0.3) !important;
  color: #ccc !important;
}

[data-theme="dark"] .tag-list-item .tag-list-link:hover {
  background-color: rgba(30, 30, 30, 0.5) !important;
  color: #fff !important;
}

/* 确保暗色模式下标签卡片内的文字可见 */
[data-theme="dark"] .tag-list-item .tag-list-count {
  color: inherit !important;
}

[data-theme="dark"] .tag-list-item:hover {
  background-color: rgba(30, 30, 30, 0.8) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ============================================
   响应式设计 - 平板设备（最大宽度768px）
   ============================================ */

@media (max-width: 768px) {
  :root {
    --card-blur-intensity: 8px;
    --article-blur-intensity: 12px;
  }

  [data-theme="dark"] {
    --card-blur-intensity: 12px;
    --article-blur-intensity: 16px;
  }

  #page-header::before,
  #footer::before {
    filter: blur(5px);
  }

  .card-widget,
  .recent-post-item,
  .card-archive-list-item,
  .category-list-item,
  .tag-list-item {
    backdrop-filter: blur(var(--card-blur-intensity)) !important;
    -webkit-backdrop-filter: blur(var(--card-blur-intensity)) !important;
  }

  #post {
    backdrop-filter: blur(var(--article-blur-intensity)) !important;
    -webkit-backdrop-filter: blur(var(--article-blur-intensity)) !important;
  }
}

/* ============================================
   响应式设计 - 手机设备（最大宽度480px）
   ============================================ */

@media (max-width: 480px) {
  :root {
    --card-blur-intensity: 6px;
    --article-blur-intensity: 10px;
  }

  [data-theme="dark"] {
    --card-blur-intensity: 10px;
    --article-blur-intensity: 14px;
  }
}

/* ============================================
   页面过渡动画样式
   ============================================ */

/* 文章内容卡片加载动画 */
.post-content,
.article-content {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 文章内容卡片加载完成状态 */
.post-content.loaded,
.article-content.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* 页面过渡遮罩层 */
.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0);
  pointer-events: none;
  z-index: 9999;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 暗色模式下的页面过渡遮罩层 */
[data-theme="dark"] .page-transition-overlay {
  background-color: rgba(0, 0, 0, 0);
}

/* 页面过渡时的遮罩层状态 */
.page-transition-overlay.active {
  background-color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .page-transition-overlay.active {
  background-color: rgba(0, 0, 0, 0.5);
}

/* 性能优化 - GPU加速 */
.recent-post-item,
.post-content,
.article-content,
.page-transition-overlay {
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 减少重绘和回流 */
.recent-post-item,
.post-content,
.article-content {
  contain: layout style paint;
}