/* ============================================================
   JINLONGSEN motion.css — 站点动效增强（独立文件，不改动 styles.css）
   依赖 motion.js 给 <html> 加 .motion-on；无 JS 时本页所有规则不生效，
   内容保持默认可见，不会出现"白屏等动画"的情况。
   ============================================================ */

/* ---------- 基础：进入视口的淡入上移 ---------- */
.motion-on [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .7s cubic-bezier(.22, .61, .36, 1),
    transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--md, 0ms);
  will-change: opacity, transform;
}
.motion-on [data-reveal].in {
  opacity: 1;
  transform: none;
}

/* 左右交错进入（用于双栏区块） */
.motion-on [data-reveal="left"]  { transform: translateX(-34px); }
.motion-on [data-reveal="right"] { transform: translateX(34px); }
.motion-on [data-reveal="left"].in,
.motion-on [data-reveal="right"].in { transform: none; }

/* 缩放进入（用于大图 / 面板） */
.motion-on [data-reveal="zoom"] { transform: scale(.94); }
.motion-on [data-reveal="zoom"].in { transform: none; }

/* ---------- 首屏入场 ---------- */
.motion-on .hero-home [data-hero] {
  opacity: 0;
  transform: translateY(22px);
  animation: mx-rise .8s cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: var(--md, 0ms);
}
@keyframes mx-rise {
  to { opacity: 1; transform: none; }
}

.motion-on .hero-visual .media-placeholder {
  animation: mx-float 7s ease-in-out 1.2s infinite alternate;
}
@keyframes mx-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-12px); }
}

/* 首屏光斑缓慢漂移 */
.motion-on .hero-home:after {
  animation: mx-glow 12s ease-in-out infinite alternate;
}
@keyframes mx-glow {
  from { opacity: .85; transform: translate3d(0, 0, 0) scale(1); }
  to   { opacity: 1;   transform: translate3d(-3%, 2%, 0) scale(1.06); }
}

/* ---------- 标题前的小横线：进入时画出 ---------- */
.motion-on .eyebrow:before {
  width: 0;
  transition: width .6s cubic-bezier(.22, .61, .36, 1) .25s;
}
.motion-on .in .eyebrow:before,
.motion-on [data-reveal].in.eyebrow:before,
.motion-on .hero-home .eyebrow:before {
  width: 26px;
}

/* ---------- 卡片：图片缩放 + 阴影层次 ---------- */
.motion-on .media-placeholder img {
  transition: transform .6s cubic-bezier(.22, .61, .36, 1), opacity .4s ease;
}
.motion-on .card:hover .media-placeholder img,
.motion-on .mini-card:hover .media-placeholder img {
  transform: scale(1.06);
}

/* 图片加载完成前的淡入（避免突然闪出） */
.motion-on .media-placeholder img:not(.mx-loaded) { opacity: 0; }
.motion-on .media-placeholder img.mx-loaded { opacity: .9; }
.motion-on .aspect-hero img.mx-loaded { opacity: .2; }

/* ---------- 链接 / 按钮的箭头微交互 ---------- */
.motion-on .text-link span,
.motion-on .button span {
  display: inline-block;
  transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}
.motion-on .text-link:hover span { transform: translate(3px, -3px); }
.motion-on .button:hover span { transform: translate(2px, -2px); }

.motion-on .text-link { position: relative; }
.motion-on .text-link:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.motion-on .text-link:hover:after { transform: scaleX(1); }

/* 导航下划线滑动 */
.motion-on .desktop-nav a { position: relative; }
.motion-on .desktop-nav a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.motion-on .desktop-nav a:hover:after,
.motion-on .desktop-nav a.active:after { transform: scaleX(1); }

/* ---------- CTA 色带：渐变缓慢流动 ---------- */
.motion-on .cta-band {
  background-size: 180% 180%;
  animation: mx-cta 14s ease-in-out infinite alternate;
}
@keyframes mx-cta {
  from { background-position: 0% 40%; }
  to   { background-position: 100% 60%; }
}

/* ---------- 步骤 / 数字 ---------- */
.motion-on .steps > * {
  transition-delay: var(--md, 0ms);
}
.motion-on .number {
  font-variant-numeric: tabular-nums;
}

/* ---------- 信任条：进入时逐条淡入 ---------- */
.motion-on .trust-inner > * {
  opacity: 0;
  animation: mx-rise .6s ease forwards;
  animation-delay: var(--md, 0ms);
}

/* ---------- 表单聚焦光晕 ---------- */
.motion-on .inquiry-form input,
.motion-on .inquiry-form select,
.motion-on .inquiry-form textarea {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.motion-on .inquiry-form input:focus,
.motion-on .inquiry-form select:focus,
.motion-on .inquiry-form textarea:focus {
  box-shadow: 0 0 0 4px rgba(45, 140, 240, .12);
  transform: translateY(-1px);
}

/* ---------- 回到顶部提示（纯 CSS 装饰，不新增 DOM） ---------- */
.motion-on .site-footer { position: relative; }

/* ============================================================
   鼠标经过动效（参考 ruidonggroup.com 的交互语言，移植到本站结构）
   ============================================================ */

/* 1) 按钮背景扫过：hover 时一层渐变从左向右铺满 */
.motion-on .button { position: relative; overflow: hidden; z-index: 0; }
.motion-on .button:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, #176fcf, var(--cyan));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s cubic-bezier(.22, .61, .36, 1);
}
.motion-on .button:hover:before { transform: scaleX(1); }
.motion-on .button-secondary:before { background: rgba(255, 255, 255, .18); }
.motion-on .button-primary:hover { background: var(--blue); }

/* 2) 卡片标题变色 + 卡片内链接联动（hover 卡片即联动，不必精确指到链接） */
.motion-on .card h3,
.motion-on .mini-card h3 { transition: color .25s ease; }
.motion-on .card:hover h3,
.motion-on .mini-card:hover h3 { color: var(--blue); }
.motion-on .card:hover .text-link { color: #176fcf; }
.motion-on .card:hover .text-link span { transform: translate(3px, -3px); }

/* 3) 图片灰度 → 彩色（参考站 pictureNew hoverEffect） */
.motion-on .media-placeholder img {
  filter: grayscale(.45);
  transition: transform .6s cubic-bezier(.22, .61, .36, 1), opacity .4s ease, filter .6s ease;
}
.motion-on .card:hover .media-placeholder img,
.motion-on .mini-card:hover .media-placeholder img,
.motion-on .media-placeholder:hover img {
  filter: grayscale(0);
}

/* 4) 卡片图片角标条从底部滑入（参考站 gallery-summery 的 hover-show 模式；详情页大图角标保持常显） */
.motion-on .card .media-placeholder figcaption,
.motion-on .mini-card .media-placeholder figcaption {
  transform: translateY(46px);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.motion-on .card:hover .media-placeholder figcaption,
.motion-on .mini-card:hover .media-placeholder figcaption {
  transform: translateY(0);
}
@media (hover: none) {
  .motion-on .card .media-placeholder figcaption,
  .motion-on .mini-card .media-placeholder figcaption { transform: translateY(0); }
}

/* 5) 迷你卡 / 侧栏块：浅色扫光背景 */
.motion-on .mini-card,
.motion-on .side-note { position: relative; overflow: hidden; z-index: 0; }
.motion-on .mini-card:before,
.motion-on .side-note:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--pale), transparent 85%);
  opacity: 0;
  transition: opacity .35s ease;
}
.motion-on .mini-card:hover:before,
.motion-on .side-note:hover:before { opacity: 1; }

/* 6) 导航项文字微抬 + 颜色过渡 */
.motion-on .desktop-nav a { transition: color .22s ease, transform .22s ease; }
.motion-on .desktop-nav a:hover { transform: translateY(-1px); }

/* 7) 表格化列表行（参数/步骤）hover 高亮 */
.motion-on .process-grid article,
.motion-on .two-column-list > div { transition: background .25s ease, transform .25s ease; }
.motion-on .process-grid article:hover,
.motion-on .two-column-list > div:hover {
  background: var(--ice);
  transform: translateX(4px);
}

/* ---------- 降级：系统偏好减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .motion-on *,
  .motion-on *:before,
  .motion-on *:after {
    animation: none !important;
    transition: none !important;
  }
  .motion-on [data-reveal],
  .motion-on .hero-home [data-hero],
  .motion-on .trust-inner > * {
    opacity: 1 !important;
    transform: none !important;
  }
}