/* ============================================================
   KV 入场动画（ab-kv 共享，所有使用 ab-kv 的页面）
   覆盖 about-kv.css 的默认淡入，实现分层入场
   ============================================================ */

/* ---- ① 背景图：从小到大缓拉 ---- */
.kv-anim .ab-kv__bg img {
  animation: kv-zoom 2.9s cubic-bezier(0.25, 0.1, 0.25, 1) 0s forwards;
}

@keyframes kv-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* ---- ② 蓝绿装饰层：缓缓浮现 ---- */
.kv-anim .ab-kv__deco--pc {
  opacity: 0;
  animation: kv-deco-in 1.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s forwards;
}

@keyframes kv-deco-in {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- ③ 主标题逐行滑入 ---- */
.kv-anim .ab-kv__title {
  display: flex;
  flex-direction: column;
  animation: none;
  opacity: 1;
}

.kv-anim .ab-kv__title-line {
  display: block;
  opacity: 0;
  transform: translateY(40px);
  animation: kv-title-up 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.kv-anim .ab-kv__title-line:nth-child(1) {
  animation-delay: 1.0s;
}

.kv-anim .ab-kv__title-line:nth-child(2) {
  animation-delay: 1.4s;
}

@keyframes kv-title-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- ④ 副标题缓入 ---- */
.kv-anim .ab-kv__subtitle {
  opacity: 0;
  animation: kv-subtitle-in 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 1.8s forwards;
}

@keyframes kv-subtitle-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- 移动端简化：纯 fade-in ---- */
@media (max-width: 992px) {
  .kv-anim .ab-kv__bg img {
    animation: none;
    opacity: 1;
  }
  .kv-anim .ab-kv__deco--pc,
  .kv-anim .ab-kv__deco--mobile {
    animation: none;
    opacity: 1;
  }
  .kv-anim .ab-kv__title-line {
    opacity: 0;
    transform: translateY(20px);
    animation: kv-fade-up 0.5s ease-out forwards;
  }
  .kv-anim .ab-kv__title-line:nth-child(1) {
    animation-delay: 0.2s;
  }
  .kv-anim .ab-kv__title-line:nth-child(2) {
    animation-delay: 0.5s;
  }
  .kv-anim .ab-kv__subtitle {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

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

@keyframes kv-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- 无障碍降级 ---- */
@media (prefers-reduced-motion: reduce) {
  .kv-anim .ab-kv__bg img,
  .kv-anim .ab-kv__deco--pc,
  .kv-anim .ab-kv__deco--mobile,
  .kv-anim .ab-kv__title-line,
  .kv-anim .ab-kv__subtitle {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}
