/* 联系页首屏动态 2026-10-21
   - 载入：面包屑/眉标/标题逐行/说明/按钮依次浮现；大图由窄框展开、轻微推近
   - 滚动：大图轻微视差（由 contact-hero-motion-20261021.js 写入 --qa-par）
   - 悬停：按钮箭头斜向轻移、电话号码下划线展开
   - 无 JS、减少动态效果、打印时全部静止 */

@media (prefers-reduced-motion: no-preference) {
  html.qa-js .qa-contact .qa-hero :is(.qa-crumb, .qa-eyebrow, .qa-hero-statement, .qa-sub, .qa-hero-connect) {
    animation: qaHeroUp .95s cubic-bezier(.16, 1, .3, 1) both;
  }
  html.qa-js .qa-contact .qa-hero .qa-crumb { animation-delay: .05s; }
  html.qa-js .qa-contact .qa-hero .qa-eyebrow { animation-delay: .12s; }

  /* 标题两行分别浮现，带轻微失焦到清晰 */
  html.qa-js .qa-contact .qa-hero h1 > span {
    display: inline-block;
    animation: qaHeroLine 1.2s cubic-bezier(.16, 1, .3, 1) both;
    will-change: transform, opacity, filter;
  }
  html.qa-js .qa-contact .qa-hero h1 > span:first-of-type { animation-delay: .2s; }
  html.qa-js .qa-contact .qa-hero h1 > span:last-of-type { animation-delay: .34s; }

  html.qa-js .qa-contact .qa-hero .qa-hero-statement { animation-delay: .52s; }
  html.qa-js .qa-contact .qa-hero .qa-sub { animation-delay: .62s; }
  html.qa-js .qa-contact .qa-hero .qa-hero-connect { animation-delay: .74s; }

  /* 大图：画框从中间向两侧展开，图片同时缓慢推近后停在略放大状态，留出视差余量 */
  html.qa-js .qa-contact .qa-hero .qa-hero-media {
    animation: qaHeroFrame 1.5s cubic-bezier(.65, 0, .35, 1) .3s both;
  }
  html.qa-js .qa-contact .qa-hero .qa-hero-media img {
    scale: 1.08;
    translate: 0 var(--qa-par, 0%);
    animation: qaHeroZoom 2.4s cubic-bezier(.16, 1, .3, 1) .3s both;
    will-change: translate, scale;
  }

  /* 悬停微动 */
  .qa-contact .qa-hero .qa-btn > span[aria-hidden="true"] {
    display: inline-block;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1);
  }
  .qa-contact .qa-hero .qa-btn:is(:hover, :focus-visible) > span[aria-hidden="true"] {
    transform: translate(3px, -3px);
  }
  .qa-contact .qa-hero .qa-hero-phone strong {
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
    padding-bottom: 2px;
    transition: background-size .5s cubic-bezier(.16, 1, .3, 1);
  }
  .qa-contact .qa-hero .qa-hero-phone:is(:hover, :focus-visible) strong {
    background-size: 100% 1px;
  }
}

@keyframes qaHeroUp {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes qaHeroLine {
  from { opacity: 0; transform: translate3d(0, .4em, 0); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes qaHeroFrame {
  from { clip-path: inset(8% 14% 0 14%); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes qaHeroZoom {
  from { scale: 1.22; }
  to { scale: 1.08; }
}

@media print {
  html.qa-js .qa-contact .qa-hero *,
  html.qa-js .qa-contact .qa-hero .qa-hero-media img {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    clip-path: none !important;
  }
}