/* ==========================================================
   81首码网 首页微调 —— 三项
   1) 菜单栏彩虹渐变（复刻自 h586.com，使用其 header_bg.png）
   2) 首页文章列表广告位（xgtj-recom）间距优化
   3) 文章标题悬停彩色渐变字（复刻自 huiyixian.com）

   ★ 用法：加载于主题 style.css 之后即可生效。
   ★ 依赖：第 1 项需同时上传 style/images/header_bg.png，否则菜单栏无彩虹。
   ★ 取消任何一项：删掉对应注释块内的规则即可，互不影响。
   ========================================================== */


/* ===== 第 1 项：菜单栏彩虹渐变 =====
   图片为横向七彩、纵向渐隐的透明 PNG，叠加在白色顶栏上。
   顶部菜单栏与文章列表上方的分类 tab 条各一处。 */
.top-bar{background-image:url(images/header_bg.png)}
.top-bar.fixed-nav{background-image:url(images/header_bg.png)}
.main-navigation{background-image:url(images/header_bg.png)}


/* ===== 第 3 项：标题悬停彩色渐变字 =====
   复刻自 huiyixian.com：鼠标移上标题时，文字填充色变透明、
   露出背后 200% 宽的七彩渐变，并以 4s 周期缓慢横向流动。
   渐变：青蓝 #32c5ff → 紫 #b620e0 → 金橙 #f7b500 → 绿 #20e050 */
.entry-title a:hover,
.widget-posts-title:hover,
.side_random h4.r-title a:hover,
/* 轮播：大图标题 + 下方小图标题 */
.swiper-title:hover,
.small-slider-item .title:hover,
.swiper-slide .block-fea:hover .swiper-title,
.small-slider-item .small-slider-img:hover .title,
/* 轮播右侧「热门榜单」1-8 名 */
.toptext-list li a:hover,
/* 侧栏「最近发表」列表 */
.divPrevious .m-previous span.text a:hover,
/* 侧栏最新文章（作者卡片内） */
.widget-about-intro .widget-about-posts li a:hover,
/* 其它可能的文章链接兜底：所有指向 /post/ 的链接 */
a[href*="/post/"]:hover{
  background-image:-webkit-linear-gradient(30deg,#32c5ff 25%,#b620e0 50%,#f7b500 75%,#20e050 100%);
  background-image:linear-gradient(30deg,#32c5ff 25%,#b620e0 50%,#f7b500 75%,#20e050 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  background-size:200% 100%;
  -webkit-background-size:200% 100%;
  -webkit-animation:maskedAnimation 4s infinite linear;
  animation:maskedAnimation 4s infinite linear;
  -webkit-text-shadow:none;
  text-shadow:none;
}
/* 轮播标题原本是白字压在深色半透明底上，悬停渐变后底衬去掉更醒目 */
.swiper-slide .block-fea:hover .swiper-title,
.small-slider-item .small-slider-img:hover .title{background-color:transparent;}
/* 「置顶」「推荐」「热文」等徽章标签不参与渐变，保持原底色白字 */
.entry-title a:hover .badge,
.swiper-title:hover .badge,
.small-slider-item .title:hover .badge,
.swiper-slide .block-fea:hover .swiper-title .badge,
.small-slider-item .small-slider-img:hover .title .badge{
  -webkit-text-fill-color:#fff;
  color:#fff;
  background-image:none;
  -webkit-animation:none;
  animation:none;
}
/* 渐变流动动画（与参考站一致） */
@keyframes maskedAnimation{
  0%{background-position:0 0}
  100%{background-position:-100% 0}
}
