/* 首屏：有 JS 时先隐藏，加上 animate.css 后再淡入。 */
.js-on .hero .eyebrow:not(.animate__animated),
.js-on .hero-grid > div > h1:not(.animate__animated),
.js-on .hero-grid > div > p:not(.eyebrow):not(.legend-title):not(.animate__animated),
.js-on .hero .hero-actions:not(.animate__animated),
.js-on .hero .legend:not(.animate__animated),
.js-on .hero .trust > *:not(.animate__animated),
.js-on .page-hero .eyebrow:not(.animate__animated),
.js-on .page-hero h1:not(.animate__animated),
.js-on .page-hero .lede:not(.animate__animated),
.js-on .page-hero .hero-actions:not(.animate__animated),
.js-on .page-hero .ver-index:not(.animate__animated) {
  opacity: 0;
}

.js-on.is-motion-off .hero .eyebrow,
.js-on.is-motion-off .hero-grid > div > h1,
.js-on.is-motion-off .hero-grid > div > p:not(.eyebrow):not(.legend-title),
.js-on.is-motion-off .hero .hero-actions,
.js-on.is-motion-off .hero .legend,
.js-on.is-motion-off .hero .trust > *,
.js-on.is-motion-off .page-hero .eyebrow,
.js-on.is-motion-off .page-hero h1,
.js-on.is-motion-off .page-hero .lede,
.js-on.is-motion-off .page-hero .hero-actions,
.js-on.is-motion-off .page-hero .ver-index {
  opacity: 1;
}

/* 滚动显现：只做短位移 + 透明度，合成层完成，不改布局。 */
.ms-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 380ms ease, border-color 380ms ease;
}

.ms-reveal[data-dir="left"] {
  transform: translate3d(28px, 0, 0);
}

.ms-reveal[data-dir="right"] {
  transform: translate3d(-28px, 0, 0);
}

.ms-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-on .hero .eyebrow,
  .js-on .hero-grid > div > h1,
  .js-on .hero-grid > div > p:not(.eyebrow):not(.legend-title),
  .js-on .hero .hero-actions,
  .js-on .hero .legend,
  .js-on .hero .trust > *,
  .js-on .page-hero .eyebrow,
  .js-on .page-hero h1,
  .js-on .page-hero .lede,
  .js-on .page-hero .hero-actions,
  .js-on .page-hero .ver-index,
  .ms-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}