/* ============================================================
 * 入场动画与过渡效果（2026-10-20）
 * 配合 home-enhancements.js 使用
 * ============================================================ */

/* ================= 淡入动画 ================= */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ================= 淡入上移 ================= */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= 淡入缩放 ================= */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ================= 淡入左移 ================= */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ================= 淡入右移 ================= */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ================= 应用入场动画的类 ================= */
.fade-in {
  animation: fadeIn 600ms ease-out forwards;
}

.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
}

.fade-in-up.in-view {
  animation: fadeInUp 600ms ease-out forwards;
}

.fade-in-scale {
  opacity: 0;
  transform: scale(0.95);
}

.fade-in-scale.in-view {
  animation: fadeInScale 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-20px);
}

.fade-in-left.in-view {
  animation: fadeInLeft 600ms ease-out forwards;
}

.fade-in-right {
  opacity: 0;
  transform: translateX(20px);
}

.fade-in-right.in-view {
  animation: fadeInRight 600ms ease-out forwards;
}

/* ================= 分层入场（各卡片递进） ================= */
.tc-product-card {
  animation-fill-mode: both;
}

.tc-product-card:nth-child(1).fade-in-up { animation-delay: 0ms; }
.tc-product-card:nth-child(2).fade-in-up { animation-delay: 60ms; }
.tc-product-card:nth-child(3).fade-in-up { animation-delay: 120ms; }
.tc-product-card:nth-child(4).fade-in-up { animation-delay: 180ms; }
.tc-product-card:nth-child(5).fade-in-up { animation-delay: 240ms; }
.tc-product-card:nth-child(6).fade-in-up { animation-delay: 300ms; }
.tc-product-card:nth-child(n+7).fade-in-up { animation-delay: 360ms; }

/* ================= Tab 切换过渡 ================= */
.arco-tabs-nav-tab {
  position: relative;
}

.arco-tabs-nav-tab::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--brand-primary, #165dff) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.arco-tabs-nav-tab-active::before {
  opacity: 0;
}

.tab-transitioning {
  animation: tabSlideIn 300ms ease-out;
}

@keyframes tabSlideIn {
  from {
    color: var(--text-secondary);
  }
  to {
    color: var(--brand-primary, #165dff);
  }
}

/* ================= 卡片悬停增强 ================= */
.tc-product-card {
  position: relative;
  overflow: hidden;
}

.tc-product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 300ms ease-out;
  pointer-events: none;
}

.tc-product-card:hover::before {
  left: 100%;
}

/* ================= 悬浮客服面板入场 ================= */
@keyframes dockPanelSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dock-panel-animate {
  animation: dockPanelSlideIn 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ================= 加载骨架屏 ================= */
@keyframes skeletonLoading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.skeleton-loading {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(255, 255, 255, 0.1) 100%
  );
  background-size: 200% 100%;
  animation: skeletonLoading 1500ms infinite;
}

/* ================= 呼吸效果 ================= */
@keyframes breathe {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.breathe-animation {
  animation: breathe 2000ms ease-in-out infinite;
}

/* ================= 脉冲效果 ================= */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(22, 93, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(22, 93, 255, 0);
  }
}

.pulse-animation {
  animation: pulse 1500ms infinite;
}

/* ================= 禁用动画（高对比度模式） ================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}