/* ===================================================
   风水百科 · 交互增强 - 参考GitHub优秀设计
   =================================================== */

/* ===== 1. 平滑页面过渡 ===== */
#body-wrap {
  animation: pageIn 0.35s ease both;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== 2. 文章卡片悬浮微交互 ===== */
.recent-post-item {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer;
}

.recent-post-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}

/* ===== 3. 侧栏卡片悬浮 ===== */
.card-widget {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card-widget:hover {
  transform: translateY(-1px) !important;
}

/* ===== 4. 阅读进度条 ===== */
#scroll-progress {
  background: linear-gradient(90deg, #2D8F72, #C9A84C, #3DAF8A) !important;
  height: 2px !important;
  transition: opacity 0.3s !important;
}

/* ===== 5. 回到顶部按钮 ===== */
#go-up {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#go-up:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 2px 12px rgba(61,175,138,0.3) !important;
}

/* ===== 6. 标签动画 ===== */
.tag-cloud-list a {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tag-cloud-list a:hover {
  transform: scale(1.05) !important;
}

/* ===== 7. 列表项动画 ===== */
.category-list-item {
  transition: all 0.2s ease !important;
}

.category-list-item:hover {
  transform: translateX(3px) !important;
}

/* ===== 8. 文章图片 ===== */
#article-container img {
  transition: all 0.3s ease;
  border-radius: 8px;
}

#article-container img:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* ===== 9. 表格美化 ===== */
#article-container tbody tr {
  transition: background 0.15s ease;
}

#article-container tbody tr:hover {
  background: rgba(61,175,138,0.06) !important;
}

/* ===== 10. 引用块 ===== */
#article-container blockquote {
  transition: border-color 0.2s ease;
}

#article-container blockquote:hover {
  border-color: #C9A84C !important;
}

/* ===== 11. 搜索弹窗 ===== */
#search .search-dialog {
  animation: searchIn 0.2s ease both;
}

@keyframes searchIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== 12. 选择文字 ===== */
::selection {
  background: rgba(61,175,138,0.25) !important;
}

/* ===== 13. 响应式优化 ===== */
@media (max-width: 768px) {
  #recent-posts > .recent-post-item {
    padding: 14px 16px !important;
  }
}

/* ===== 14. 滚动条 ===== */
::-webkit-scrollbar {
  width: 5px !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(61,175,138,0.2) !important;
  border-radius: 10px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(61,175,138,0.4) !important;
}

/* ===== 15. 导航栏打字效果 ===== */
#nav .site-name {
  position: relative;
}