/* ==========================================================================
   全局特效样式优化
   ========================================================================== */

/* 1. 移除可能导致卡顿的全局 Body 过渡，改为仅内容淡入（如果需要）或直接移除 */
/* body { opacity: 0; transition: opacity 0.8s ease-in-out; } */
/* body.loaded { opacity: 1; } */

/* 确保 Butterfly 主题背景透明，以便显示 Canvas 背景 */
#web_bg {
  background: transparent !important;
  display: none !important; /* 隐藏原主题背景图片/颜色 */
}

#body-wrap {
  background: transparent !important;
}

/* 2. 动态星空/粒子背景 Canvas */
#universe-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364);
  pointer-events: none;
}

/* 3. 阅读进度条 */
#reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  width: 0%;
  z-index: 9999;
  transition: width 0.1s ease;
  box-shadow: 0 0 10px rgba(255, 154, 158, 0.7);
}

/* 4. 滚动条美化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* 5. 交互特效增强 */
/* 链接动态下划线 */
#article-container a:not(.fancybox) {
  position: relative;
  text-decoration: none;
  color: #4facfe;
  transition: color 0.3s;
}
#article-container a:not(.fancybox)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #4facfe;
  transition: width 0.3s ease-in-out;
}
#article-container a:not(.fancybox):hover::after {
  width: 100%;
}

/* 卡片悬停光晕效果 */
.card-widget, .recent-post-item {
  transition: all 0.3s ease-in-out;
  border-radius: 10px; /* 圆角 */
}
.card-widget:hover, .recent-post-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* 头像旋转 */
.avatar-img {
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.avatar-img:hover {
  transform: rotate(360deg) scale(1.1);
}

/* ==========================================================================
   友链 (Friend Links) 悬浮特效优化
   ========================================================================== */

/* 1. 友链项整体平滑过渡 (终极丝滑版) */
.flink-list > .flink-list-item {
  transition: all 0.5s cubic-bezier(0.6, 0.1, 0, 1) !important;
  will-change: transform, box-shadow;
  border: 1px solid transparent !important;
}

/* 2. 悬浮时的位移、阴影与模糊 */
.flink-list > .flink-list-item:hover {
  transform: translateY(-10px) scale(1.02) !important;
  background: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(8px);
  border-color: rgba(79, 172, 254, 0.4) !important;
}

/* 3. 友链图标 (头像) 缩放与平滑处理 */
.flink-list > .flink-list-item .flink-item-icon {
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.flink-list > .flink-list-item:hover .flink-item-icon {
  transform: scale(1.15) rotate(5deg) !important;
}

/* 4. 文字颜色与微移 */
.flink-list > .flink-list-item .flink-item-name {
  transition: all 0.5s cubic-bezier(0.6, 0.1, 0, 1) !important;
}

.flink-list > .flink-list-item:hover .flink-item-name {
  color: #4facfe !important;
  transform: translateX(4px);
}