/* ============================================================
   Product-Detail KV 入场动效
   - 文字区：立即触发（motion 系统词级揭示 + fade-up）
   - 右侧蓝色背景块：滞后0.3s，从右滑入，缓和慢速，幅度大
   - 前景产品图：滞后1.1s，从下滑入，视差错开，spring 缓动
   ============================================================ */

/* ==================== 右侧视差动效 ==================== */

/* ① 蓝色背景块：从右侧滑入 + 淡入（1.5s，柔和） */
.pd2-kv__img--anim {
  opacity: 0;
  transform: translateX(15%);
  animation: pd2-bg-slide-in 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s forwards;
}

@keyframes pd2-bg-slide-in {
  from {
    opacity: 0;
    transform: translateX(15%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ② 前景产品图：从下方浮入 + 淡入（1.2s，spring，晚于背景） */
.pd2-kv__bottle--anim {
  opacity: 0;
  transform: translateY(20%);
  animation: pd2-bottle-up 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards;
}

@keyframes pd2-bottle-up {
  from {
    opacity: 0;
    transform: translateY(20%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================== 文字区：立即触发，慢速 ==================== */

/* 标题：拆分后立即可见 */
.pd2-kv .m-anim-title.is-ready {
  visibility: visible;
}

/* 标题词级滑入：时长从0.5s 放慢到1.0s */
.pd2-kv .m-anim-title .m-word {
  transition: transform 1.0s cubic-bezier(0.075, 0.82, 0.165, 1),
              opacity 0.8s ease;
}

/* 文字区所有滚动淡入元素：时长从0.7s 放慢到1.2s */
.pd2-kv__body [data-m-anim] {
  transition: opacity 1.2s ease,
              transform 1.2s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-delay: var(--m-delay, 0ms);
}

/* ==================== 移动端简化 ==================== */
@media (max-width: 992px) {
  .pd2-kv__img--anim {
    animation-name: pd2-kv-fade;
    animation-duration: 0.8s;
    animation-delay: 0.3s;
    transform: none;
  }

  .pd2-kv__bottle--anim {
    display: none;
  }
}

@keyframes pd2-kv-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==================== 无障碍降级 ==================== */
@media (prefers-reduced-motion: reduce) {
  .pd2-kv__img--anim,
  .pd2-kv__bottle--anim {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
