/* ==========================================================================
   站点动效层（motion.css）
   --------------------------------------------------------------------------
   设计原则：
   1. 纯增强 —— 只有 html 上带了 .motion 才生效；脚本关闭、浏览器不支持
      或用户开了「减少动效」时，页面与原来完全一致，看不到任何隐藏内容。
   2. 只动 transform / opacity / translate，不改变盒模型，避免布局抖动（CLS）。
   3. 首屏内容不做淡入，避免拖慢 LCP；动画只作用于滚动进来的区域。
   4. 所有时长控制在 0.25~0.7s，缓动统一用 cubic-bezier(.22,.61,.36,1)。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 滚动进入：用 animation 而不是 transition，
      这样不会和卡片自身的 hover transition 抢 transition 属性。
   -------------------------------------------------------------------------- */
html.motion .reveal {
  opacity: 0;
}

html.motion .reveal.is-in {
  animation: motionRevealIn .68s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--reveal-delay, 0) * 70ms);
}

@keyframes motionRevealIn {
  from {
    opacity: 0;
    translate: var(--reveal-x, 0) var(--reveal-y, 18px);
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

html.motion .reveal-left { --reveal-x: -22px; --reveal-y: 0; }
html.motion .reveal-right { --reveal-x: 22px; --reveal-y: 0; }

/* --------------------------------------------------------------------------
   2. 页头滚动状态 + 阅读进度条
   -------------------------------------------------------------------------- */
html.motion .site-header {
  transition: box-shadow .35s ease;
}

html.motion .site-header.is-scrolled {
  box-shadow: 0 6px 22px rgba(15, 35, 60, .12);
}

html.motion .site-nav a {
  transition: color .25s ease;
}

.scroll-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: 0 2px 2px 0;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}

.scroll-progress.is-on { opacity: 1; }

/* --------------------------------------------------------------------------
   3. 导航下划线：从中间向两侧展开
   -------------------------------------------------------------------------- */
html.motion .site-nav a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 3px;
  background: var(--color-secondary);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1),
              opacity .3s ease;
}

html.motion .site-nav a:hover::after {
  transform: scaleX(1);
  opacity: .45;
}

html.motion .site-nav a.is-current::after {
  transform: scaleX(1);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   4. 产品卡片：悬浮抬升 + 图片缓推
   -------------------------------------------------------------------------- */
html.motion .product-item {
  overflow: hidden;
  transition: transform .38s cubic-bezier(.22, .61, .36, 1),
              box-shadow .38s ease,
              border-color .38s ease;
}

html.motion .product-item:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--color-primary) 34%, var(--line));
  box-shadow: 0 16px 32px rgba(16, 40, 70, .14);
}

html.motion .product-item img {
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
  backface-visibility: hidden;
}

html.motion .product-item:hover img {
  transform: scale(1.06);
}

html.motion .product-item h2,
html.motion .product-item h3,
html.motion .card-more {
  transition: color .3s ease;
}

html.motion .product-item:hover .card-more {
  color: var(--color-secondary);
}

/* --------------------------------------------------------------------------
   5. 相册卡片 / 资质图片
   -------------------------------------------------------------------------- */
html.motion .album-card {
  transition: transform .38s cubic-bezier(.22, .61, .36, 1),
              box-shadow .38s ease,
              border-color .38s ease;
}

html.motion .album-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--line));
  box-shadow: 0 14px 30px rgba(16, 40, 70, .13);
}

html.motion .qualify-zoom img {
  transition: transform .45s cubic-bezier(.22, .61, .36, 1),
              opacity .3s ease;
}

html.motion .qualify-zoom:hover img {
  transform: scale(1.03);
  opacity: 1;
}

/* 产品详情主图：轻微推近 */
html.motion .detail-photo {
  overflow: hidden;
}

html.motion .detail-photo img,
html.motion .detail-photo .no-photo {
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

html.motion .detail-photo:hover img {
  transform: scale(1.035);
}

/* 联系页右侧深色卡片：轻微上浮 */
html.motion .contact-side {
  transition: transform .4s cubic-bezier(.22, .61, .36, 1),
              box-shadow .4s ease;
}

html.motion .contact-side:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(16, 40, 70, .18);
}

/* --------------------------------------------------------------------------
   6. 资讯列表：悬浮右移
   -------------------------------------------------------------------------- */
html.motion .article-list li {
  transition: transform .32s cubic-bezier(.22, .61, .36, 1),
              box-shadow .32s ease,
              border-color .32s ease;
}

html.motion .article-list li:hover {
  transform: translateX(5px);
  border-color: color-mix(in srgb, var(--color-primary) 28%, var(--line));
  box-shadow: 0 8px 20px rgba(16, 40, 70, .09);
}

/* --------------------------------------------------------------------------
   7. 服务特点：左侧色条自上而下长出
   -------------------------------------------------------------------------- */
html.motion .advantage article {
  position: relative;
  transition: background-color .35s ease;
}

html.motion .advantage article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-secondary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .38s cubic-bezier(.22, .61, .36, 1);
}

html.motion .advantage article:hover::before {
  transform: scaleY(1);
}

html.motion .advantage article:hover {
  background: color-mix(in srgb, var(--color-primary) 3%, #fff);
}

html.motion .adv-no {
  display: inline-block;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1),
              letter-spacing .35s ease;
}

html.motion .advantage article:hover .adv-no {
  transform: translateY(-2px);
  letter-spacing: .18em;
}

/* --------------------------------------------------------------------------
   8. 栏目标题下划线：随进入逐段生长
   -------------------------------------------------------------------------- */
html.motion .section-head h2::after {
  width: 0;
  transition: width .6s cubic-bezier(.22, .61, .36, 1) .18s;
}

html.motion .section-head.is-in h2::after {
  width: 42px;
}

/* --------------------------------------------------------------------------
   9. 按钮：高光扫过 + 轻抬
   -------------------------------------------------------------------------- */
html.motion .btn {
  position: relative;
  overflow: hidden;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1),
              filter .25s ease,
              box-shadow .28s ease,
              background-color .25s ease;
}

html.motion .btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  transition: left .6s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}

html.motion .btn:hover::after {
  left: 120%;
}

html.motion .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(16, 40, 70, .18);
}

html.motion .btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(16, 40, 70, .12);
}

html.motion .product-search button,
html.motion .message-form button,
html.motion .pager a,
html.motion .product-cats a,
html.motion .more-link,
html.motion .product-search-clear {
  transition: transform .25s ease,
              background-color .25s ease,
              color .25s ease,
              border-color .25s ease,
              box-shadow .25s ease;
}

html.motion .product-search button:hover,
html.motion .message-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(16, 40, 70, .16);
}

html.motion .pager a:hover,
html.motion .product-cats a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(16, 40, 70, .1);
}

/* --------------------------------------------------------------------------
   10. 首页轮播：当前帧缓慢推近（Ken Burns）
   -------------------------------------------------------------------------- */
html.motion .banner-slide {
  overflow: hidden;
}

html.motion .banner-slide.is-active img {
  animation: motionKenBurns 8.5s linear both;
}

@keyframes motionKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

html.motion .banner-dot {
  transition: background-color .3s ease, transform .3s ease;
}

html.motion .banner-dot:hover { transform: scale(1.25); }
html.motion .banner-dot.is-active { transform: scale(1.15); }

html.motion .banner-arrow {
  transition: background-color .25s ease, transform .25s ease, opacity .25s ease;
}

html.motion .banner-arrow:hover { transform: scale(1.08); }

html.motion .banner-caption {
  animation: motionCaptionIn .9s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes motionCaptionIn {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

/* --------------------------------------------------------------------------
   11. 内页横幅：底色缓慢流动
   -------------------------------------------------------------------------- */
html.motion .page-banner {
  background-image: linear-gradient(115deg,
      color-mix(in srgb, var(--color-primary) 90%, #ffffff) 0%,
      var(--color-primary) 34%,
      color-mix(in srgb, var(--color-primary) 40%, #07111c) 68%,
      var(--color-primary) 100%);
  background-size: 240% 100%;
  background-position: 0% 50%;
  animation: motionGradientSlide 22s ease-in-out infinite;
}

@keyframes motionGradientSlide {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* --------------------------------------------------------------------------
   12. 首页 Hero：光斑缓慢漂浮
   -------------------------------------------------------------------------- */
html.motion .hero::after {
  animation: motionFloat 16s ease-in-out infinite;
}

html.motion .hero::before {
  content: "";
  position: absolute;
  left: -90px;
  top: -110px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .13), transparent 68%);
  animation: motionFloat 20s ease-in-out infinite reverse;
  pointer-events: none;
}

@keyframes motionFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-16px, -20px, 0); }
}

/* --------------------------------------------------------------------------
   13. 底部 CTA：高光缓慢扫过
   -------------------------------------------------------------------------- */
html.motion .cta-band {
  position: relative;
  overflow: hidden;
}

html.motion .cta-band .cta-inner {
  position: relative;
  z-index: 1;
}

html.motion .cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, .13) 50%, transparent 68%);
  transform: translateX(-70%);
  animation: motionSheen 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes motionSheen {
  0% { transform: translateX(-70%); }
  55%, 100% { transform: translateX(70%); }
}

/* --------------------------------------------------------------------------
   14. 正文表格：行悬浮高亮
   -------------------------------------------------------------------------- */
html.motion .article-body table tbody tr {
  transition: background-color .25s ease;
}

html.motion .article-body table tr:hover td {
  background: color-mix(in srgb, var(--color-primary) 6%, #fff);
}

/* --------------------------------------------------------------------------
   15. 常见问题：手风琴高度动画（.faq-body 由脚本包一层）
   -------------------------------------------------------------------------- */
html.motion .faq-body {
  overflow: hidden;
}

html.motion .faq-item summary {
  transition: color .25s ease, background-color .25s ease;
}

html.motion .faq-item[open] summary {
  color: var(--color-primary);
}

html.motion .faq-item summary::before {
  transition: background-color .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

html.motion .faq-item[open] summary::before {
  background: var(--color-primary);
  transform: scale(1.06);
}

html.motion .faq-item:hover summary {
  background: color-mix(in srgb, var(--color-primary) 3%, #fff);
}

/* --------------------------------------------------------------------------
   16. 灯箱 / 相册大图：轻微缩放淡入
   -------------------------------------------------------------------------- */
html.motion .img-lightbox.is-open img {
  animation: motionZoomIn .32s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes motionZoomIn {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}

html.motion .photo-grid a:hover img {
  transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   17. 回到顶部按钮
   -------------------------------------------------------------------------- */
.back-top {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 60;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-secondary);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(.9);
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(16, 40, 70, .26),
              0 0 0 1px rgba(255, 255, 255, .3);
  transition: opacity .3s ease,
              transform .3s cubic-bezier(.22, .61, .36, 1),
              filter .25s ease,
              box-shadow .3s ease;
}

.back-top.is-on {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-top:hover {
  filter: brightness(1.08);
  box-shadow: 0 10px 24px rgba(16, 40, 70, .32),
              0 0 0 1px rgba(255, 255, 255, .45);
}

.back-top:active {
  transform: translateY(0) scale(.96);
}

.back-top::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg) translate(2px, 2px);
}

/* --------------------------------------------------------------------------
   18. 移动端菜单展开
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  html.motion .site-nav a::after { display: none; }

  html.motion .nav-toggle:checked ~ .site-nav {
    animation: motionMenuIn .28s cubic-bezier(.22, .61, .36, 1) both;
  }

  .back-top {
    right: 14px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }
}

@keyframes motionMenuIn {
  from { opacity: 0; translate: 0 -8px; }
  to { opacity: 1; translate: 0 0; }
}

/* --------------------------------------------------------------------------
   19. 宽屏下细节增强（触屏设备不做 hover 位移）
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  html.motion .about-visual img {
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
  }

  html.motion .about-visual:hover img {
    transform: scale(1.03);
  }
}

/* --------------------------------------------------------------------------
   20. 无障碍：系统开启「减少动效」时全部退化为静态
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.motion { scroll-behavior: auto; }

  html.motion .reveal {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
  }

  html.motion .section-head h2::after {
    width: 42px;
    transition: none;
  }

  html.motion *,
  html.motion *::before,
  html.motion *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }

  html.motion .product-item:hover,
  html.motion .album-card:hover,
  html.motion .article-list li:hover,
  html.motion .btn:hover {
    transform: none;
  }
}