/* ============================================
   S16 版式动效规范
   - 每页至少 3 种动效意图
   - 入场：fade / slide / scale / clip
   - 触发：load / scroll / hover
   - 时长：120 / 220 / 360 / 600 / 800ms
   - 缓动：ease-out / cubic-bezier(0.16, 1, 0.3, 1)
   ============================================ */

/* 动效 1：fade-in（淡入） */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.anim-fade-in {
  animation: fade-in 600ms ease-out both;
}

/* 动效 2：slide-up（上滑） */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.anim-slide-up {
  animation: slide-up 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 动效 3：slide-right（右滑） */
@keyframes slide-right {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}
.anim-slide-right {
  animation: slide-right 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 动效 4：scale-in（缩放） */
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.anim-scale-in {
  animation: scale-in 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 动效 5：stagger-fade（依次淡入） */
@keyframes stagger-fade {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.anim-stagger-fade {
  animation: stagger-fade 360ms ease-out both;
}
.anim-stagger-fade:nth-child(1) { animation-delay: 0ms; }
.anim-stagger-fade:nth-child(2) { animation-delay: 100ms; }
.anim-stagger-fade:nth-child(3) { animation-delay: 200ms; }
.anim-stagger-fade:nth-child(4) { animation-delay: 300ms; }

/* 动效 6：count-up（数字计数） */
@keyframes count-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.anim-count-up {
  animation: count-up 800ms ease-out both;
}

/* 动效 7：parallax（视差） */
.anim-parallax {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* 动效 8：clip-reveal（裁剪展开） */
@keyframes clip-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.anim-clip-reveal {
  animation: clip-reveal 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ============================================
   hover 交互动效
   ============================================ */
.hover-lift {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(23, 37, 84, 0.14);
}

.hover-scale {
  transition: transform 0.22s ease;
}
.hover-scale:hover {
  transform: scale(1.02);
}

/* ============================================
   滚动联动动效（Intersection Observer）
   ============================================ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   降级方式（prefers-reduced-motion）
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .scroll-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   LCP 元素不得延迟入场
   ============================================ */
.hero-content,
.hero-image {
  animation: none !important;
}
/* UI-PATCH-20261111-A2A3A6 reduced-motion */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* UI-PATCH-20261111-A2A3A6 focus-visible */
:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px}
:focus{outline:2px solid #1d4ed8;outline-offset:2px}