/* =========================================================
   动画：滚动揭示、雷达图、数字滚动、浮动装饰 · 宋体高级版
   ========================================================= */

/* === 滚动揭示 === */
.js-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  transition-delay: var(--delay, 0ms);
}

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

.js-reveal.reveal-zoom {
  transform: scale(0.94);
}

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

.js-reveal.reveal-slide-left {
  transform: translateX(-24px);
}

.js-reveal.reveal-slide-left.is-visible {
  transform: translateX(0);
}

.js-reveal.reveal-slide-right {
  transform: translateX(24px);
}

.js-reveal.reveal-slide-right.is-visible {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* === Hero 脉冲点 === */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
}

.hero__badge-dot {
  animation: pulse 2s ease-in-out infinite;
}

/* === 雷达图描边动画 === */
.radar-polygon {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawRadar 1.5s ease-out forwards;
}

@keyframes drawRadar {
  to {
    stroke-dashoffset: 0;
  }
}

.radar-fill {
  opacity: 0;
  animation: fadeInRadar 0.8s ease-out 0.5s forwards;
}

@keyframes fadeInRadar {
  to {
    opacity: 1;
  }
}

.radar-point {
  opacity: 0;
  animation: fadeInPoint 0.4s ease-out forwards;
}

@keyframes fadeInPoint {
  to {
    opacity: 1;
  }
}

/* === 流程图箭头流动 === */
.flow-arrow {
  stroke-dasharray: 6 4;
  animation: flowDash 1s linear infinite;
}

@keyframes flowDash {
  to {
    stroke-dashoffset: -10;
  }
}

/* === 浮动背景 === */
@keyframes floatShape {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-16px) rotate(2deg);
  }
}

.hero__bg-shapes::before {
  animation: floatShape 10s ease-in-out infinite;
}

.hero__bg-shapes::after {
  animation: floatShape 12s ease-in-out infinite reverse;
}

/* === 按钮光晕 === */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* === 轻微呼吸 === */
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.hero__showcase-frame {
  animation: breathe 6s ease-in-out infinite;
}