/* IO */
.article-product-page.article-product-io-ready [data-io] {
  opacity: 0;
  will-change: transform, opacity;
  transition-property: transform, opacity;
  transition-duration: var(--io-duration, 700ms), var(--io-duration, 700ms);
  transition-timing-function: var(--io-easing, ease), var(--io-easing, ease);
  transition-delay: var(--io-delay-out, var(--io-delay, 0ms)), var(--io-delay-out, var(--io-delay, 0ms));
}

.article-product-page.article-product-io-ready [data-io].is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: var(--io-delay-in, var(--io-delay, 0ms)), var(--io-delay-in, var(--io-delay, 0ms));
}

.article-product-page.article-product-io-ready [data-io="zoom-in-up"] {
  transform: translate3d(0, 24px, 0) scale(0.92);
}

.article-product-page.article-product-io-ready [data-io="fade-zoom-in"] {
  transform: translate3d(0, 0, 0);
}

.article-product-page.article-product-io-ready [data-io="fade-right"] {
  transform: translate3d(-40px, 0, 0);
}

.article-product-page.article-product-io-ready [data-io="fade-up"] {
  transform: translate3d(0, 40px, 0);
}

.article-product-page.article-product-io-ready [data-io="fade-up-zero"] {
  transform: translate3d(0, 0, 0);
}

.article-product-page.article-product-io-ready .article-product-features-media__orbit[data-io="fade-up-zero"],
.article-product-page.article-product-io-ready .article-product-features-media__orbit[data-io="fade-up-zero"].is-inview {
  transform: translate(-50%, -50%);
}

.article-product-page.article-product-io-ready .article-product-features-media__orbit[data-io="fade-zoom-in"],
.article-product-page.article-product-io-ready .article-product-features-media__orbit[data-io="fade-zoom-in"].is-inview {
  transform: translate(-50%, -50%);
  transition-duration: 1000ms;
}

/* 圈层进入视口后按顺序循环扩散 */
.article-product-page.article-product-io-ready .article-product-features-media__orbit:not(.article-product-features-media__orbit--static).is-inview::before {
  animation: article-product-orbit-wave var(--article-orbit-wave-duration) var(--article-orbit-wave-easing) infinite;
  animation-delay: var(--article-orbit-wave-delay, 0ms);
}

@keyframes article-product-orbit-wave {
  0% {
    opacity: var(--article-orbit-wave-opacity);
    transform: scale(var(--article-orbit-wave-scale-from));
  }

  100% {
    opacity: 0;
    transform: scale(var(--article-orbit-wave-scale-to));
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-product-page.article-product-io-ready .article-product-features-media__orbit:not(.article-product-features-media__orbit--static).is-inview::before {
    animation: none;
    opacity: 0.22;
    transform: scale(1);
  }
}