/* ============================================
   有迹科技 · 动画与交互效果
   ============================================ */

/* ---------- 滚动叙事浮现 ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  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].visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 粒子动画 ---------- */
.particle {
  animation: particleFloat var(--duration, 8s) var(--ease-out) infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  10% {
    opacity: var(--max-opacity, 0.8);
  }
  90% {
    opacity: var(--max-opacity, 0.8);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx, 20px), var(--ty, -100px)) scale(1.2);
  }
}

/* ---------- Hero 光晕呼吸 ---------- */
.hero-glow {
  animation: glowPulse 6s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* ---------- Hero 网格漂移 ---------- */
.hero-grid {
  animation: gridDrift 20s linear infinite;
}

@keyframes gridDrift {
  0% { background-position: 0 0; }
  100% { background-position: 80px 80px; }
}

/* ---------- 视差滚动 ---------- */
.hero-bg {
  will-change: transform;
}

.hero-content {
  will-change: transform;
}

/* ---------- 磁吸按钮 ---------- */
.magnetic {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

/* ---------- 卡片悬浮光效 ---------- */
.tech-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(201,169,97,0.05), transparent);
  transition: left 0.8s var(--ease-out);
  pointer-events: none;
}

.tech-card:hover::after {
  left: 100%;
}

/* ---------- 案例卡片细节增强 ---------- */
.case-card {
  position: relative;
}

.case-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.6s var(--ease-out);
  z-index: 3;
}

.case-card:hover::after {
  width: 100%;
}

/* ---------- 解决方案卡片描边动画 ---------- */
.sol-card {
  position: relative;
}

.sol-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  pointer-events: none;
  transition: border-color 0.6s var(--ease-out);
}

.sol-card:hover::after {
  border-color: var(--gold);
}

/* ---------- 数值计数闪烁 ---------- */
.stat-num.counting {
  text-shadow: 0 0 20px var(--gold-glow);
}

/* ---------- 合作伙伴呼吸 ---------- */
.partner-logo {
  animation: partnerBreath 4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.2s);
}

@keyframes partnerBreath {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ---------- 导航栏滑入 ---------- */
.navbar {
  transform: translateY(-100%);
  animation: navSlideDown 0.8s var(--ease-out) 1.6s forwards;
}

@keyframes navSlideDown {
  to { transform: translateY(0); }
}

/* ---------- 标题字符微动 ---------- */
.title-line {
  display: inline-block;
}

.title-accent {
  position: relative;
}

.title-accent::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease-out) 1.8s;
}

.visible .title-accent::after,
.hero .title-accent::after {
  transform: scaleX(1);
}

/* ---------- 移动端禁用部分动画 ---------- */
@media (max-width: 1023px) {
  [data-reveal] {
    transform: translateY(24px);
    transition-duration: 0.6s;
  }

  .hero-grid { animation: none; }
  .hero-glow { animation: none; }
  .partner-logo { animation: none; }
  .navbar { animation: none; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}