/* ============================================================
   无锡素康科技 · A+ 克制灵动动效层
   仅动画 transform / opacity，不改变模板布局、配色、圆角与阴影体系
   ============================================================ */

:root {
  --m-ease: cubic-bezier(.22, 1, .36, 1);
  --m-fast: 180ms;
  --m-reveal: 440ms;
}

/* ---------- 顶部导航：滚动阴影 ---------- */
header.fixed {
  transition: box-shadow .28s ease, background-color .28s ease;
}
header.fixed.is-scrolled {
  box-shadow: 0 6px 24px rgba(20, 96, 56, .10);
}

/* ---------- 桌面导航：下划线生长 ---------- */
@media (min-width: 1024px) {
  header nav a {
    position: relative;
  }
  header nav a:not(.border-b-2)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .30s var(--m-ease);
  }
  header nav a:not(.border-b-2):hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* ---------- 按钮：轻微上浮 ---------- */
.btn {
  transition:
    transform var(--m-fast) var(--m-ease),
    background-color var(--m-fast) ease,
    color var(--m-fast) ease,
    border-color var(--m-fast) ease,
    box-shadow var(--m-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
  }
  .btn:active {
    transform: translateY(0);
    transition-duration: 90ms;
  }
  /* Tab / 筛选按钮保持稳定，避免成排跳动 */
  .tab-btn:hover,
  .filter-btn:hover {
    transform: none;
  }
}

/* ---------- 卡片：悬停上浮 + 图片轻微缩放 ---------- */
.card {
  transition:
    transform .22s var(--m-ease),
    box-shadow .22s var(--m-ease),
    border-color .20s ease;
}
.card img {
  transition: transform .50s var(--m-ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-4px);
  }
  .card.overflow-hidden:hover img {
    transform: scale(1.045);
  }
  .card:not(.overflow-hidden):hover img {
    transform: translateY(-2px);
  }
}

/* ---------- 独立图片（案例大图 / 客户 Logo） ---------- */
@media (hover: hover) and (pointer: fine) {
  .motion-img {
    transition: transform .42s var(--m-ease);
  }
  .motion-img:hover {
    transform: scale(1.018);
  }
}

/* ---------- 首帧预隐藏 ----------
   在 motion.js 完成目标标记前先隐藏将被显现的元素，
   避免慢速设备上出现“先显示、再隐藏、再入场”的闪烁。
   标记完成后立即解除，不影响后续滚动显现与 hover。 */
.js:not(.motion-marked) main .section-title,
.js:not(.motion-marked) main .card:not(.case-card),
.js:not(.motion-marked) main img[data-lightbox]:not([data-float]),
.js:not(.motion-marked) main > section:first-of-type h1:not([data-hero]),
.js:not(.motion-marked) main > section:first-of-type h1:not([data-hero]) + p {
  opacity: 0;
}

/* ---------- 滚动显现 ---------- */
.js [data-reveal] {
  opacity: 0;
  transition: none;
  will-change: opacity, transform;
}
.js [data-reveal="up"] {
  transform: translate3d(0, 26px, 0);
}
.js [data-reveal="left"] {
  transform: translate3d(-26px, 0, 0);
}
.js [data-reveal="right"] {
  transform: translate3d(26px, 0, 0);
}
.js [data-reveal="zoom"] {
  transform: scale(.965);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--m-reveal) var(--m-ease),
    transform var(--m-reveal) var(--m-ease);
  transition-delay: var(--d, 0ms);
}

/* ---------- 首屏 Hero 入场 ---------- */
.js [data-hero] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
.js [data-hero].is-hero-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .62s var(--m-ease),
    transform .62s var(--m-ease);
  transition-delay: var(--d, 0ms);
}

/* ---------- 板块标题：红色短横线展开 ---------- */
.js .section-title::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--m-ease) .10s;
}
.js .section-title.is-visible::after {
  transform: scaleX(1);
}
/* 居中标题的短横线同步居中，避免与标题脱节 */
.text-center > .section-title::after,
.text-center .section-title::after {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Banner 低多边形缓慢漂移 ---------- */
[data-drift] svg {
  animation: m-drift 26s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
  will-change: transform;
}
@keyframes m-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-1.2%, 1%, 0) scale(1.025); }
}

/* ---------- Hero 图片呼吸 ---------- */
[data-float] {
  animation: m-float 7.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes m-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -8px, 0); }
}

/* ---------- 产品 Tab 面板淡入 ---------- */
.tab-panel.is-panel-in {
  animation: m-panel-in .42s var(--m-ease) both;
}
@keyframes m-panel-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 图片灯箱：缩放淡入 ---------- */
#lightbox {
  opacity: 0;
  transition: opacity .22s ease;
}
#lightbox.is-open {
  opacity: 1;
}
#lightbox > .relative {
  opacity: .65;
  transform: translate3d(0, 10px, 0) scale(.965);
  transition: transform .32s var(--m-ease), opacity .26s ease;
}
#lightbox.is-open > .relative {
  opacity: 1;
  transform: none;
}

/* ---------- 解决方案锚点导航：scrollspy 高亮 ---------- */
[data-spy] a.is-active {
  background: #D92121;
  border-color: #D92121;
  color: #FFFFFF;
}

/* ---------- 箭头微动 ---------- */
.m-arrow {
  display: inline-block;
  transition: transform .22s var(--m-ease);
}
a:hover .m-arrow,
.card:hover .m-arrow {
  transform: translateX(4px);
}

/* ---------- 联系信息复制 ---------- */
[data-copy] {
  position: relative;
  cursor: pointer;
  transition: color .18s ease;
}
[data-copy]:hover,
[data-copy]:focus-visible {
  color: #D92121;
}
[data-copy]:focus-visible {
  outline: 2px solid rgba(217, 33, 33, .35);
  outline-offset: 4px;
  border-radius: 4px;
}
@media (hover: hover) and (pointer: fine) {
  [data-copy]::after {
    content: '点击复制';
    margin-left: 8px;
    font-size: 11px;
    font-weight: 400;
    color: #999999;
    opacity: 0;
    transition: opacity .18s ease;
  }
  [data-copy]:hover::after {
    opacity: 1;
  }
}

/* ---------- 复制提示 Toast ---------- */
#motionToast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 120;
  max-width: calc(100vw - 40px);
  padding: 12px 18px;
  border-radius: 8px;
  background: #146038;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 10px 30px rgba(20, 96, 56, .22);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 16px, 0);
  transition: opacity .22s ease, transform .28s var(--m-ease);
}
#motionToast.is-show {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

/* ---------- 手机端：动效减弱 ---------- */
@media (max-width: 767px) {
  .js [data-reveal="up"] {
    transform: translate3d(0, 16px, 0);
  }
  .js [data-reveal="left"] {
    transform: translate3d(-14px, 0, 0);
  }
  .js [data-reveal="right"] {
    transform: translate3d(14px, 0, 0);
  }
  .js [data-reveal="zoom"] {
    transform: scale(.98);
  }
  [data-drift] svg {
    animation-duration: 38s;
  }
  [data-float] {
    animation-duration: 10s;
  }
}

/* ---------- 用户偏好减少动态 ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal],
  .js [data-hero] {
    opacity: 1 !important;
    transform: none !important;
  }
  .js .section-title::after {
    transform: none !important;
  }
  [data-drift] svg,
  [data-float] {
    animation: none !important;
  }
  .card:hover,
  .btn:hover,
  .motion-img:hover {
    transform: none !important;
  }
}