/* Qing 展示型小部件统一视口动效层。控制板块进场、列表分层及离场，
   不覆盖业务布局与静态 hover 设计。 */
@keyframes qing-motion-up {
  from { opacity: 0; transform: translate3d(0, 58px, 0) scale(.975); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes qing-motion-left {
  from { opacity: 0; transform: translate3d(-64px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes qing-motion-right {
  from { opacity: 0; transform: translate3d(64px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes qing-motion-focus {
  from { opacity: 0; transform: scale(.88); filter: blur(7px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes qing-motion-clip-up {
  from { opacity: 0; transform: translate3d(0, 64px, 0); clip-path: inset(24% 0 0 0 round 8px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); clip-path: inset(0 0 0 0 round 8px); }
}
@keyframes qing-card-fan-in {
  from { opacity: 0; translate: 0 82px; rotate: x 8deg; scale: .94; }
  to { opacity: 1; translate: 0 0; rotate: x 0deg; scale: 1; }
}
@keyframes qing-depth-in {
  from { opacity: 0; translate: 0 64px; scale: .82; filter: blur(9px); }
  to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
}
@keyframes qing-metric-pop-in {
  0% { opacity: 0; translate: 0 54px; scale: .68; }
  68% { opacity: 1; translate: 0 -7px; scale: 1.035; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes qing-editorial-in {
  from { opacity: 0; translate: -86px 28px; rotate: z -1.5deg; clip-path: inset(0 18% 0 0); }
  to { opacity: 1; translate: 0 0; rotate: z 0deg; clip-path: inset(0); }
}
@keyframes qing-focus-wave-in {
  from { opacity: 0; translate: 0 34px; scale: .72; filter: blur(10px) grayscale(1); }
  to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0) grayscale(0); }
}
@keyframes qing-sweep-in {
  from { opacity: 0; translate: 0 42px; clip-path: inset(0 0 0 28%); }
  to { opacity: 1; translate: 0 0; clip-path: inset(0); }
}

/* ==========================================================
   板块舞台层
   data-qing-motion 不只是内部内容的触发标记：板块根节点本身也要先完成
   一次空间揭幕，之后标题与列表才继续各自的分层动画。
   ========================================================== */
.qing-motion-js :is(
  .qph2-wrap,.qph-wrap,.qth-wrap,.qah-wrap,.qch-wrap,
  .qpl-prodlines,.qcp-core-prod,.qind-industries,.qstr-strength,.qpar,
  .qnws-news,.qcc-wrap,.qps-wrap,.qpg-wrap,.qta-wrap,.qto-wrap,
  .qnp-wrap,.qcs-wrap,.qsn-wrap,.qcb-wrap,.qci-wrap,.qpp-wrap,
  .qpav-wrap,.qpsc-wrap,.qpsp-wrap,.qfc-wrap,.qsm-wrap,.qst-wrap,
  .qsb-wrap,.qsc-wrap,.qsi-wrap,.qmc-wrap,.qnh-wrap,.qnr-wrap,
  .qsqr-card,.qpb-wrap
).is-motion-ready {
  --qing-stage-y: 84px;
  --qing-stage-scale: .965;
  --qing-stage-blur: 7px;
  opacity: 0;
  transform: translate3d(0, var(--qing-stage-y), 0) scale(var(--qing-stage-scale));
  filter: blur(var(--qing-stage-blur));
  clip-path: inset(12% 0 0 0 round 22px);
  transform-origin: 50% 50%;
  transition: opacity 1.15s cubic-bezier(.16,1,.3,1),
              transform 1.35s cubic-bezier(.16,1,.3,1),
              filter 1.15s cubic-bezier(.16,1,.3,1),
              clip-path 1.4s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform, filter, clip-path;
}

.qing-motion-js :is(
  .qph2-wrap,.qph-wrap,.qth-wrap,.qah-wrap,.qch-wrap,
  .qpl-prodlines,.qcp-core-prod,.qind-industries,.qstr-strength,.qpar,
  .qnws-news,.qcc-wrap,.qps-wrap,.qpg-wrap,.qta-wrap,.qto-wrap,
  .qnp-wrap,.qcs-wrap,.qsn-wrap,.qcb-wrap,.qci-wrap,.qpp-wrap,
  .qpav-wrap,.qpsc-wrap,.qpsp-wrap,.qfc-wrap,.qsm-wrap,.qst-wrap,
  .qsb-wrap,.qsc-wrap,.qsi-wrap,.qmc-wrap,.qnh-wrap,.qnr-wrap,
  .qsqr-card,.qpb-wrap
).is-motion-ready.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  clip-path: inset(0 0 0 0 round 0);
}

/* 深色、全宽的行业板块使用更有纵深感的舞台揭幕。 */
.qing-motion-js .qind-industries.is-motion-ready {
  --qing-stage-y: 112px;
  --qing-stage-scale: .94;
  --qing-stage-blur: 10px;
  clip-path: inset(20% 0 0 0 round 30px);
  transition-duration: 1.3s, 1.55s, 1.3s, 1.55s;
}

/* 每类小部件拥有不同的板块起始姿态。仅限制在首次进入态，避免覆盖
   is-motion-visible 的最终姿态及 is-motion-exit 的退场姿态。 */
.qing-motion-js [data-motion-style="cinema"].is-motion-ready:not(.is-motion-visible):not(.is-motion-exit) {
  transform: translate3d(0, 46px, 0) scale(.985);
  filter: blur(5px) brightness(.72);
  clip-path: inset(0 0 18% 0);
}
/* 全宽 Hero 不允许横向放大或横移，否则 transform 会扩大页面滚动宽度。 */
.qing-motion-js [data-motion-style="cinema"].is-motion-ready.is-motion-exit {
  transform: translate3d(0, -32px, 0) scale(.985);
  clip-path: inset(0 0 10% 0);
}
.qing-motion-js [data-motion-style="cards"].is-motion-ready:not(.is-motion-visible):not(.is-motion-exit) {
  transform: perspective(1200px) translate3d(0, 96px, 0) rotateX(4deg) scale(.955);
  clip-path: inset(9% 2% 0 2% round 26px);
}
.qing-motion-js [data-motion-style="depth"].is-motion-ready:not(.is-motion-visible):not(.is-motion-exit) {
  transform: translate3d(0, 74px, 0) scale(.9);
  filter: blur(13px) saturate(.65);
  clip-path: inset(15% 4% 8% 4% round 32px);
}
.qing-motion-js [data-motion-style="metrics"].is-motion-ready:not(.is-motion-visible):not(.is-motion-exit) {
  transform: translate3d(0, 58px, 0) scale(.86);
  filter: blur(8px);
  clip-path: inset(8% 3% 8% 3% round 34px);
}
.qing-motion-js [data-motion-style="focus"].is-motion-ready:not(.is-motion-visible):not(.is-motion-exit) {
  transform: scale(.86);
  filter: blur(15px) grayscale(1);
  clip-path: inset(6% round 40px);
}
.qing-motion-js [data-motion-style="editorial"].is-motion-ready:not(.is-motion-visible):not(.is-motion-exit) {
  transform: translate3d(-94px, 24px, 0) skewX(-2deg);
  filter: blur(6px);
  clip-path: inset(0 14% 0 0);
}
.qing-motion-js [data-motion-style="spotlight"].is-motion-ready:not(.is-motion-visible):not(.is-motion-exit) {
  transform: scale(.94);
  filter: blur(12px) brightness(.55);
  clip-path: circle(18% at 50% 50%);
}
.qing-motion-js [data-motion-style="sweep"].is-motion-ready:not(.is-motion-visible):not(.is-motion-exit) {
  transform: translate3d(0, 84px, 0) scale(.985);
  filter: blur(6px);
  clip-path: inset(0 0 0 22%);
}

/* sweep 的子条目仍保留横向退场，但由板块自身裁切，不能扩大页面宽度。 */
.qing-motion-js [data-motion-style="sweep"].is-motion-ready {
  overflow-x: clip;
}

.qing-motion-js [data-motion-style="sweep"].is-motion-ready.is-motion-exit {
  transform: translate3d(0, -36px, 0) scale(.985);
}
.qing-motion-js [data-motion-style="split"].is-motion-ready:not(.is-motion-visible):not(.is-motion-exit) {
  transform: translate3d(0, 58px, 0) scale(.97);
  filter: blur(6px);
  clip-path: inset(0 9% 0 9% round 28px);
}
.qing-motion-js [data-motion-style="narrative"].is-motion-ready:not(.is-motion-visible):not(.is-motion-exit) {
  transform: translate3d(0, 94px, 0) scale(.98);
  filter: blur(7px);
  clip-path: inset(14% 0 0 0);
}

/* 离开视口：板块轻微向右上方退场；内部列表采用反向序号逐条右滑。
   再次进入时会从各自的风格起点重新播放。 */
.qing-motion-js :is(
  .qph2-wrap,.qph-wrap,.qth-wrap,.qah-wrap,.qch-wrap,
  .qpl-prodlines,.qcp-core-prod,.qind-industries,.qstr-strength,.qpar,
  .qnws-news,.qcc-wrap,.qps-wrap,.qpg-wrap,.qta-wrap,.qto-wrap,
  .qnp-wrap,.qcs-wrap,.qsn-wrap,.qcb-wrap,.qci-wrap,.qpp-wrap,
  .qpav-wrap,.qpsc-wrap,.qpsp-wrap,.qfc-wrap,.qsm-wrap,.qst-wrap,
  .qsb-wrap,.qsc-wrap,.qsi-wrap,.qmc-wrap,.qnh-wrap,.qnr-wrap,.qsqr-card,
  .qpb-wrap
).is-motion-ready.is-motion-exit {
  opacity: 0;
  transform: translate3d(0, -36px, 0) scale(.975);
  filter: blur(7px);
  clip-path: inset(0 0 0 8% round 20px);
  overflow-x: clip;
  transition-duration: .75s, .95s, .75s, .9s;
}

.qing-motion-js .is-motion-exit :is(
  .qpl-pl-card,.qcp-cp-card,.qind-ind-card:not(.qind-clone),.qstr-stat-item,
  .qpar-partner-logo,.qnws-news-card,.qph-cats .swiper-slide,.qps-group,
  .qpg-card,.qta-card,.qto-item,.qnp-card,.qsn-item,.qpav-card,.qpsc-card,
  .qpsp-row,.qfc-card,.qsm-card,.qst-card,.qsb-card,.qsc-card,.qnr-card
) {
  opacity: 0 !important;
  transform: translate3d(92px, 0, 0) rotateY(-7deg) scale(.96) !important;
  filter: blur(5px) !important;
  animation: none !important;
  transition: opacity .6s ease calc(var(--motion-list-r,0) * 45ms),
              transform .78s cubic-bezier(.4,0,.2,1) calc(var(--motion-list-r,0) * 45ms),
              filter .6s ease calc(var(--motion-list-r,0) * 45ms) !important;
}

/* 列表入场按内容属性采用不同语言，而不是所有卡片统一上浮。 */
.qing-motion-js [data-motion-style="cards"].is-motion-visible :is(.qpl-pl-card,.qcp-cp-card,.qpg-card,.qfc-card,.qsc-card,.qpav-card,.qpsc-card,.qnr-card),
.qing-motion-js .qph-wrap.is-motion-visible .qph-cats .swiper-slide {
  animation: qing-card-fan-in 1.2s cubic-bezier(.16,1,.3,1) calc(.42s + var(--motion-list-i,0) * 150ms) backwards !important;
}
.qing-motion-js [data-motion-style="depth"].is-motion-visible :is(.qind-ind-card:not(.qind-clone),.qsm-card,.qst-card,.qsb-card) {
  animation: qing-depth-in 1.25s cubic-bezier(.16,1,.3,1) calc(.48s + var(--motion-list-i,0) * 170ms) backwards !important;
}
.qing-motion-js [data-motion-style="metrics"].is-motion-visible :is(.qstr-stat-item,.qsn-item) {
  animation: qing-metric-pop-in 1.15s cubic-bezier(.16,1,.3,1) calc(.4s + var(--motion-list-i,0) * 180ms) backwards !important;
}
.qing-motion-js [data-motion-style="editorial"].is-motion-visible :is(.qnws-news-card,.qnp-card) {
  animation: qing-editorial-in 1.2s cubic-bezier(.16,1,.3,1) calc(.46s + var(--motion-list-i,0) * 180ms) backwards !important;
}
.qing-motion-js [data-motion-style="focus"].is-motion-visible .qpar-partner-logo {
  animation: qing-focus-wave-in 1.05s cubic-bezier(.16,1,.3,1) calc(.38s + var(--motion-list-i,0) * 105ms) backwards !important;
}
.qing-motion-js [data-motion-style="sweep"].is-motion-visible :is(.qps-group,.qta-card,.qto-item,.qpsp-row) {
  animation: qing-sweep-in 1.2s cubic-bezier(.16,1,.3,1) calc(.42s + var(--motion-list-i,0) * 165ms) backwards !important;
}

/* 入场完成或首次交互后由 JS 写入 settled 状态。该状态会一直保留到板块
   真正离开视口，避免鼠标移开后 animation 选择器重新匹配并再次播放。 */
.qing-motion-js .is-motion-visible .is-motion-item-settled {
  animation: none !important;
}

/* 入场的错峰延迟不能污染交互反馈。鼠标或键盘一旦与卡片交互，立即清除
   组件旧 CSS 中遗留的 transition-delay。 */
.qing-motion-js .is-motion-visible :is(
  .qpl-pl-card,.qcp-cp-card,.qind-ind-card:not(.qind-clone),
  .qpar-partner-logo,.qnws-news-card,.qph-cat,.qpg-card,.qnp-card,
  .qpav-card,.qpsc-card,.qfc-card,.qsm-card,.qst-card,.qsb-card,
  .qsc-card,.qnr-card
):is(:hover,:focus-visible) {
  transition-delay: 0s !important;
}

.qing-motion-js .is-motion-visible :is(
  .qpl-pl-card,.qcp-cp-card,.qind-ind-card:not(.qind-clone),
  .qpar-partner-logo,.qnws-news-card,.qph-cat,.qpg-card,.qnp-card,
  .qpav-card,.qpsc-card,.qfc-card,.qsm-card,.qst-card,.qsb-card,
  .qsc-card,.qnr-card
):is(:hover,:focus-visible) * {
  transition-delay: 0s !important;
}

/* 核心产品原样式给每张卡片长期保留了 0.24–0.90 秒 delay；进入完成后
   直接归零，确保 translateY 与图片 scale 使用原本的 0.28/0.35 秒反馈。 */
.qing-motion-js .qcp-core-prod.is-motion-visible .qcp-cp-card,
.qing-motion-js .qcp-core-prod.is-motion-visible .qcp-cp-card .qcp-cp-media img {
  transition-delay: 0s !important;
}

/* 组件原有的入场 transition 通常长达 1.1 秒；进入完成后恢复为即时交互
   节奏，否则 hover 虽无 delay，仍会因为 duration 过长而显得僵硬。 */
.qing-motion-js .is-motion-visible :is(
  .qpl-pl-card,.qcp-cp-card,.qind-ind-card:not(.qind-clone),
  .qpar-partner-logo,.qnws-news-card,.qph-cat,.qpg-card,.qnp-card,
  .qpav-card,.qpsc-card,.qfc-card,.qsm-card,.qst-card,.qsb-card,
  .qsc-card,.qnr-card
) {
  transition-duration: .3s !important;
  transition-delay: 0s !important;
  transition-timing-function: ease !important;
}

.qing-motion-js .is-motion-visible :is(
  .qpl-pl-card,.qcp-cp-card,.qind-ind-card:not(.qind-clone),
  .qnws-news-card,.qph-cat,.qpg-card,.qnp-card,.qpav-card,
  .qpsc-card,.qfc-card,.qsm-card,.qst-card,.qsb-card,.qsc-card,.qnr-card
) img {
  transition-duration: .38s !important;
  transition-delay: 0s !important;
  transition-timing-function: ease !important;
}

.qing-motion-js :is(.qfc-wrap,.qsm-wrap,.qst-wrap,.qsb-wrap,.qsc-wrap,.qsi-wrap,.qmc-wrap,.qnh-wrap,.qnr-wrap,.qsqr-card):not(.is-motion-visible) :is(.qfc-title,.qfc-card,.qsm-title,.qsm-card,.qst-title,.qst-card,.qsb-title,.qsb-card,.qsc-title,.qsc-card,.qsi-title,.qsi-text,.qmc-title,.qmc-desc,.qmc-btn,.qnh-crumb,.qnh-meta,.qnh-title,.qnh-desc,.qnr-section-title,.qnr-card) {
  opacity: 0;
}

:is(.qfc-wrap,.qsc-wrap).is-motion-visible :is(.qfc-title,.qsc-title),
:is(.qsm-wrap,.qst-wrap,.qsb-wrap).is-motion-visible :is(.qsm-title,.qst-title,.qsb-title),
.qnr-wrap.is-motion-visible .qnr-section-title {
  animation: qing-motion-up 1.1s cubic-bezier(.16,1,.3,1) 100ms backwards;
}

.qfc-wrap.is-motion-visible .qfc-card,
.qsc-wrap.is-motion-visible .qsc-card,
.qnr-wrap.is-motion-visible .qnr-card {
  animation: qing-motion-up 1.15s cubic-bezier(.16,1,.3,1) calc(330ms + var(--motion-i,0) * 220ms) backwards;
}

.qsm-wrap.is-motion-visible .qsm-card {
  animation: qing-motion-clip-up 1.2s cubic-bezier(.16,1,.3,1) calc(330ms + var(--motion-i,0) * 210ms) backwards;
}

.qst-wrap.is-motion-visible .qst-card:nth-child(odd) {
  animation: qing-motion-left 1.2s cubic-bezier(.16,1,.3,1) calc(330ms + var(--motion-i,0) * 210ms) backwards;
}
.qst-wrap.is-motion-visible .qst-card:nth-child(even) {
  animation: qing-motion-right 1.2s cubic-bezier(.16,1,.3,1) calc(330ms + var(--motion-i,0) * 210ms) backwards;
}
.qsb-wrap.is-motion-visible .qsb-card {
  animation: qing-motion-up 1.15s cubic-bezier(.16,1,.3,1) calc(330ms + var(--motion-i,0) * 220ms) backwards;
}

.qsi-wrap.is-motion-visible .qsi-title { animation: qing-motion-up 1.1s cubic-bezier(.16,1,.3,1) 100ms backwards; }
.qsi-wrap.is-motion-visible .qsi-text { animation: qing-motion-up 1.15s cubic-bezier(.16,1,.3,1) 360ms backwards; }

.qmc-wrap.is-motion-visible .qmc-title { animation: qing-motion-left 1.2s cubic-bezier(.16,1,.3,1) 100ms backwards; }
.qmc-wrap.is-motion-visible .qmc-desc { animation: qing-motion-left 1.2s cubic-bezier(.16,1,.3,1) 320ms backwards; }
.qmc-wrap.is-motion-visible .qmc-btn { animation: qing-motion-right 1.25s cubic-bezier(.16,1,.3,1) 560ms backwards; }

.qnh-wrap.is-motion-visible .qnh-crumb { animation: qing-motion-up 1.05s cubic-bezier(.16,1,.3,1) 80ms backwards; }
.qnh-wrap.is-motion-visible .qnh-meta { animation: qing-motion-up 1.05s cubic-bezier(.16,1,.3,1) 240ms backwards; }
.qnh-wrap.is-motion-visible .qnh-title { animation: qing-motion-up 1.2s cubic-bezier(.16,1,.3,1) 430ms backwards; }
.qnh-wrap.is-motion-visible .qnh-desc { animation: qing-motion-up 1.15s cubic-bezier(.16,1,.3,1) 650ms backwards; }

.qing-motion-js .qsqr-card:not(.is-motion-visible) { opacity: 0; }
.qsqr-card.is-motion-visible { animation: qing-motion-focus 1.1s cubic-bezier(.16,1,.3,1) 100ms backwards; }

@media (prefers-reduced-motion: reduce) {
  .qing-motion-js :is(
    .qph2-wrap,.qph-wrap,.qth-wrap,.qah-wrap,.qch-wrap,
    .qpl-prodlines,.qcp-core-prod,.qind-industries,.qstr-strength,.qpar,
    .qnws-news,.qcc-wrap,.qps-wrap,.qpg-wrap,.qta-wrap,.qto-wrap,
    .qnp-wrap,.qcs-wrap,.qsn-wrap,.qcb-wrap,.qci-wrap,.qpp-wrap,
    .qpav-wrap,.qpsc-wrap,.qpsp-wrap,.qfc-wrap,.qsm-wrap,.qst-wrap,
    .qsb-wrap,.qsc-wrap,.qsi-wrap,.qmc-wrap,.qnh-wrap,.qnr-wrap,
    .qsqr-card,.qpb-wrap
  ).is-motion-ready {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .qing-motion-js .is-motion-ready :is(
    .qpl-pl-card,.qcp-cp-card,.qind-ind-card,.qstr-stat-item,
    .qpar-partner-logo,.qnws-news-card,.qph-cats .swiper-slide,.qps-group,
    .qpg-card,.qta-card,.qto-item,.qnp-card,.qsn-item,.qpav-card,.qpsc-card,
    .qpsp-row,.qfc-card,.qsm-card,.qst-card,.qsb-card,.qsc-card,.qnr-card
  ) {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
  .qing-motion-js :is(.qfc-wrap,.qsm-wrap,.qst-wrap,.qsb-wrap,.qsc-wrap,.qsi-wrap,.qmc-wrap,.qnh-wrap,.qnr-wrap,.qsqr-card) * {
    opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; animation: none !important;
  }
  .qing-motion-js .qsqr-card { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
}