/* ============================================================
   动效：入场 / 渐显位移 / 视差 / 数字 / 悬停
   全部基于 transform + opacity，走 GPU 合成层
   ============================================================ */

/* ---------- 入场观察者：默认隐藏 ---------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal="left"] {
  transform: translate3d(-32px, 0, 0);
}

[data-reveal="right"] {
  transform: translate3d(32px, 0, 0);
}

[data-reveal="scale"] {
  transform: scale(0.94);
}

[data-reveal="blur"] {
  filter: blur(8px);
  transition: opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out), filter 0.9s var(--ease-out);
}

/* 进入视口 */
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

/* ---------- 首屏依次入场（不依赖滚动） ---------- */
.hero-enter {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  animation: heroIn 1s var(--ease-out) forwards;
  animation-delay: var(--enter-delay, 0ms);
}

@keyframes heroIn {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ---------- 背景光晕缓慢漂移 ---------- */
@keyframes floatSlow {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(3%, -3%, 0) scale(1.06);
  }
}

/* ---------- 卡片悬停抬升 ---------- */
.lift {
  transition: transform 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out),
    background 0.4s var(--ease-out);
}

.lift:hover {
  transform: translate3d(0, -4px, 0);
  border-color: var(--line-3);
  box-shadow: var(--shadow-lg);
}

/* ---------- 按钮光泽扫过 ---------- */
.shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 80%
  );
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
  pointer-events: none;
}

.shine:hover::after {
  transform: translateX(120%);
}

/* ---------- 渐变边框呼吸 ---------- */
@keyframes borderPulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

/* ---------- 图表/进度条增长 ---------- */
[data-grow] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease-out);
  transition-delay: var(--grow-delay, 0ms);
}

[data-grow].is-visible {
  transform: scaleX(1);
}

/* ---------- 滚动提示箭头 ---------- */
@keyframes scrollHint {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

/* ---------- 轮播滑动 ---------- */
.carousel__track {
  display: flex;
  transition: transform 0.6s var(--ease-in-out);
  will-change: transform;
}

/* ---------- 骨架脉冲 ---------- */
@keyframes pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

/* ---------- 移动端 / 减少动效降级 ---------- */
@media (max-width: 768px) {
  [data-reveal] {
    transform: translate3d(0, 16px, 0);
    transition-duration: 0.6s;
  }

  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translate3d(0, 16px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .hero-enter {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  [data-grow] {
    transform: scaleX(1) !important;
  }

  .carousel__track {
    transition: none !important;
  }

  .shine::after {
    display: none;
  }
}