/* ============================================
 * 渐进式动画系统 v1.0
 * 说明：所有动画通过 .reveal-* 类与 .is-visible 类配合实现
 *       默认状态下元素完全透明/偏移/缩小，触发后平滑过渡
 *       不影响布局与功能，仅在视觉上增强滚动体验
 *       配合 JS/animations.js 的 IntersectionObserver 使用
 * ============================================ */

/* 通用：所有 reveal 元素的初始态 */
.reveal {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* 触发后的常态 */
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ========== 上滑进入（默认） ========== */
.reveal {
  transform: translateY(40px);
}

.reveal.is-visible {
  transform: translateY(0);
}

/* ========== 下滑进入 ========== */
.reveal-down {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-down.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========== 左滑进入 ========== */
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ========== 右滑进入 ========== */
.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ========== 缩放进入 ========== */
.reveal-zoom {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-zoom.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ========== 子项交错进入（用于列表/网格） ========== */
.stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* 子项依次延迟 */
.stagger.is-visible > *:nth-child(1)  { transition-delay: 0.05s; }
.stagger.is-visible > *:nth-child(2)  { transition-delay: 0.10s; }
.stagger.is-visible > *:nth-child(3)  { transition-delay: 0.15s; }
.stagger.is-visible > *:nth-child(4)  { transition-delay: 0.20s; }
.stagger.is-visible > *:nth-child(5)  { transition-delay: 0.25s; }
.stagger.is-visible > *:nth-child(6)  { transition-delay: 0.30s; }
.stagger.is-visible > *:nth-child(7)  { transition-delay: 0.35s; }
.stagger.is-visible > *:nth-child(8)  { transition-delay: 0.40s; }
.stagger.is-visible > *:nth-child(9)  { transition-delay: 0.45s; }
.stagger.is-visible > *:nth-child(10) { transition-delay: 0.50s; }
.stagger.is-visible > *:nth-child(11) { transition-delay: 0.55s; }
.stagger.is-visible > *:nth-child(12) { transition-delay: 0.60s; }
.stagger.is-visible > *:nth-child(n+13) { transition-delay: 0.65s; }

/* ========== 图片柔和淡入 ========== */
.reveal-fade {
  opacity: 0;
  transition: opacity 1.0s ease-out;
}

.reveal-fade.is-visible {
  opacity: 1;
}

/* ========== 关键元素强调（轻微缩放弹跳） ========== */
.reveal-pop {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-pop.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ========== 增强过渡：按钮/卡片 hover ========== */
.btn-anim,
.product-item,
.feature-item,
.application-item,
.news-item,
.category-btn,
.timeline-item,
.value-card,
.history-item,
.job-card,
.contact-info,
.contact-form {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease,
              background-color 0.35s ease;
}

.product-item:hover,
.feature-item:hover,
.application-item:hover,
.news-item:hover,
.value-card:hover,
.history-item:hover,
.job-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 47, 255, 0.12);
}

/* ========== 减少动效偏好支持 ========== */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-down,
  .reveal-left,
  .reveal-right,
  .reveal-zoom,
  .reveal-fade,
  .reveal-pop,
  .stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ========== 小屏降级（移动端关掉过强动画以免卡顿） ========== */
@media (max-width: 768px) {
  .reveal,
  .reveal-down,
  .reveal-left,
  .reveal-right,
  .reveal-zoom,
  .stagger > * {
    transform: translateY(20px);
  }

  .reveal-left,
  .reveal-right {
    transform: translateX(0);
  }
}