/* =========================================================
   亮紫科技 全站交互动效  index-effects.css
   依赖：jQuery（已在 head 引入）+ index-effects.js
   作用域：所有引入本 CSS 的页面
   注意：.index_banner 粒子/视差仅限首页，其他页面无此元素则不生效
   ========================================================= */
@charset "utf-8";

/* ---------- 滚动进场（JS 触发 fx-ready 后才隐藏，JS 失败则正常显示） ---------- */
body.fx-ready .fx-reveal{
  opacity:0;
  transform:translate3d(0,46px,0);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),
             transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
  backface-visibility:hidden;
}
body.fx-ready .fx-reveal.fx-in{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* ---------- Banner 文字入场（纯 CSS，加载即播放） ---------- */
body .index_banner h2,
body .index_banner p,
body .product_banner h2,
body .product_banner p,
body .service_banner h2,
body .service_banner p,
body .news_banner h2,
body .news_banner p,
body .about_banner h2,
body .about_banner p{
  opacity:0;
  transform:translate3d(0,34px,0);
  will-change:transform,opacity;
  backface-visibility:hidden;
  animation:fxBannerIn .95s cubic-bezier(.22,.61,.36,1) forwards;
}
body .index_banner h2,
body .product_banner h2,
body .service_banner h2,
body .news_banner h2,
body .about_banner h2{ animation-delay:.25s; }
body .index_banner p,
body .product_banner p,
body .service_banner p,
body .news_banner p,
body .about_banner p{ animation-delay:.55s; }
@keyframes fxBannerIn{ to{ opacity:1; transform:translate3d(0,0,0); } }

/* Banner 视差（JS 设置 background-position） */
body .index_banner,
body .product_banner,
body .service_banner,
body .news_banner,
body .about_banner{
  transition:background-position .25s ease-out;
}

/* ---------- 导航下划线滑入（全站通用） ---------- */
body .nav li dt a{ position:relative; }
body .nav li dt a::after{
  content:'';
  position:absolute;
  left:30px; right:30px; bottom:13px;
  height:2px;
  background:#1A6BE6;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s ease;
}
body .nav li dt a:hover::after,
body .nav li dt a.cur::after{ transform:scaleX(1); }

/* ---------- 产品卡 hover 增强 ---------- */
body .product_index li{
  transition:transform .4s ease, box-shadow .4s ease;
}
body .product_index li:hover{
  transform:translateY(-6px);
  box-shadow:none;
  z-index:5;
}
body .product_index li:hover dt i{
  background:rgba(8,28,60,.16);
}
body .product_index dd a{
  transition:transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}
body .product_index li:hover dd a{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 8px 18px rgba(62,107,228,.45);
}

/* ---------- 品牌区 hover 增强 ---------- */
body .index_brand li{
  transition:transform .4s ease;
}
body .index_brand li:hover{
  transform:translateY(-5px);
}

/* ---------- 新闻卡 hover 增强（首页 + 内页新闻列表） ---------- */
body .index_news_cont li,
body .news_list li{
  transition:transform .4s ease, box-shadow .4s ease;
}
body .index_news_cont li:hover,
body .news_list li:hover{
  transform:translateY(-8px);
  /* 投影已按需求移除 */
}

/* ---------- 关于页联系卡片 hover 增强 ---------- */
body .aboutlist_cont li{
  transition:transform .35s ease, box-shadow .35s ease;
}
body .aboutlist_cont li:hover{
  transform:translateY(-5px);
}

/* ---------- 内页标签栏 hover 增强 ---------- */
body .service_tab li{
  transition:background-color .3s ease, transform .3s ease;
}
body .service_tab li:hover{
  transform:translateX(4px);
}

/* ---------- 区块标题下方细线滑入 ---------- */
body .product_title h2{
  position:relative;
  padding-bottom:2px;
}
body .product_title h2::after{
  content:'';
  display:none;
}
body .product_title.fx-in h2::after{
  display:none;
}

/* ---------- Banner 科技感粒子画布 ---------- */
body .index_banner{
  position:relative;
  overflow:hidden;
}
body .index_banner .fx-particles{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  z-index:1;
  pointer-events:none;
}
body .index_banner h2,
body .index_banner p{
  position:relative;
  z-index:2;
}

/* ---------- 图片懒加载淡入（渐进增强，JS 失败则图片正常显示） ---------- */
.js-lazy img{
  opacity:0;
  transition:opacity .55s ease;
}
.js-lazy img.img-loaded{
  opacity:1;
}