/* ==========================================================================
   anim.css —— GSAP 动效基础样式（替代 wow.js + animate.css）
   配套 js/anim.js 使用。

   用法（写在 HTML 上即可，无需改 JS）：
     data-anim="up"                单个元素进场
     data-anim-group="up"          容器的直接子元素依次进场
     data-anim-stagger="0.08"      子元素间隔（秒）
     data-anim-delay="0.2"         延迟（秒）
     data-anim-duration="0.9"      时长（秒）
     data-anim-start="top 85%"     ScrollTrigger 触发点
     data-anim-when="load"         页面加载即播放（不等滚动）

   进场类型：fade / up / down / left / right / zoom / mask / blur / flip / lines
   ========================================================================== */

/* 进场前先隐藏。.js-anim 由页面头部的内联脚本添加，
   若 JS 被禁用或 anim.js 加载失败（3 秒兜底）则该类不存在，内容照常显示。 */
.js-anim [data-anim],
.js-anim [data-anim-group] > * {
  opacity: 0;
}

/* 进场完成后由 JS 加上 is-revealed 并清除内联样式，
   让元素回到 CSS 原生状态（hover 位移等不会被内联 transform 覆盖）。 */
.js-anim [data-anim].is-revealed,
.js-anim [data-anim-group] > .is-revealed {
  opacity: 1;
}

/* 关键：模板里 a、卡片等元素带着 transition（template.css 的 a{} 甚至是 transition:all），
   会把 GSAP 每帧写入的 opacity/transform 再"补间"一次，导致动画发糊、发飘，
   清除内联样式时还会拖出一段回弹。进场期间先把过渡关掉，播完再交还给 CSS。 */
.anim-active {
  transition: none !important;
}

/* data-anim="lines" 的行遮罩容器（由 JS 生成）。
   padding/margin 成对出现：把遮罩框向下撑开又不改变排版，
   避免 line-height 等于字号时下伸部件（y、g、p）被裁掉。 */
.anim-lines .anim-line {
  display: block;
  padding-bottom: .16em;
  margin-bottom: -.16em;
  overflow: hidden;
}
.anim-lines .anim-line > span {
  display: block;
  will-change: transform;
}

/* 首屏 banner 文案在动效期间需要 3D 透视 */
.diy_banner {
  perspective: 1200px;
}

/* --------------------------------------------------------------------------
   首页几处缺失的悬停微动效（与内页 yl-* 卡片风格保持一致）
   -------------------------------------------------------------------------- */
.index_cate_item {
  overflow: hidden;
}
.index_cate_item img {
  display: block;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.index_cate_item:hover img {
  transform: scale(1.06);
}
.index_cate_cover1 {
  transition: background-color .4s ease;
}
.index_cate_ele {
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.index_cate_item:hover .index_cate_ele {
  transform: translateY(-6px);
}

.index_headinfo_item {
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease;
}
.index_headinfo_item:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .02);
}

.index_advantages_item {
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), background-color .35s ease, border-color .35s ease;
}
.index_advantages_item:hover {
  transform: translateY(-6px);
}

.iar_2 p {
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.iar_2 p:hover {
  transform: translateX(6px);
}

.diy_banner_item3 div {
  transition: background-color .3s ease, transform .3s ease;
}
.diy_banner_item3 div:hover {
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   无障碍：用户要求减少动效时，全部还原为静态
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-anim],
  .js-anim [data-anim-group] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .index_cate_item img,
  .index_cate_cover1,
  .index_cate_ele,
  .index_headinfo_item,
  .index_advantages_item,
  .iar_2 p,
  .diy_banner_item3 div {
    transition: none;
  }
  .index_cate_item:hover img,
  .index_cate_item:hover .index_cate_ele,
  .index_headinfo_item:hover,
  .index_advantages_item:hover,
  .iar_2 p:hover,
  .diy_banner_item3 div:hover {
    transform: none;
  }
}