/* =========================================================
   首页动态动画增强 —— 仅新增动画表现，不改动原有布局与样式
   原 new-home-index.css 的布局/尺寸/颜色规则一律不动
   ========================================================= */

/* 启用动画时（由 JS 添加 .anim-ready 到 <html>）才让元素初始隐藏，
   进入视口后由 JS 添加 .is-visible 显示，保证无 JS 时内容正常可见 */
.anim-ready [data-reveal],
.anim-ready [data-reveal-fade] {
  opacity: 0;
}

/* 入场动画结束后释放 GPU 合成层，避免文字长期停留在低分辨率图层导致模糊 */
.anim-ready [data-reveal].is-visible,
.anim-ready [data-reveal-fade].is-visible {
  will-change: auto;
}

/* 滑动入场（用于无 hover 位移冲突的标题/区块） */
.anim-ready [data-reveal] {
  transform: translateY(48px);
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1),
              transform .8s cubic-bezier(.22, 1, .36, 1);
}
.anim-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* 纯淡入入场（用于有 hover 上浮效果的卡片，避免与 transform 冲突） */
.anim-ready [data-reveal-fade] {
  transition: opacity .9s ease, transform .3s ease;
}
.anim-ready [data-reveal-fade].is-visible {
  opacity: 1;
}

/* 取消原 CSS 中“加载即播放”的卡片入场动画，改由滚动触发，
   否则滚到下方板块时动画早已结束，看起来毫无效果 */
.anim-ready .step-card,
.anim-ready .agent-card,
.anim-ready .scenario-card,
.anim-ready .connect-card {
  animation: none;
}

/* ---------- Hero 区域常驻动效 ---------- */


/* 副标题轻微呼吸 */
.hero-subtitle {
  animation: softPulse 4.5s ease-in-out infinite;
}
@keyframes softPulse {
  0%, 100% { opacity: .9; }
  50%      { opacity: .62; }
}

/* Hero 卡片悬浮动效由 JS 驱动（initHeroCardFloat）：
   rAF 逐帧取整到整数像素的 translateY，兼顾悬浮动效与文字清晰 */

/* 背景流光层（绝对定位、不拦截点击、位于内容之下） */
/* .hero-section::after,
.cta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(0, 246, 255, .14), transparent 42%),
    radial-gradient(circle at 82% 72%, rgba(21, 107, 236, .16), transparent 44%);
  background-size: 200% 200%;
  animation: auraMove 15s ease-in-out infinite alternate;
}
@keyframes auraMove {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
} */

/* ---------- 场景图标浮动 ---------- */
.scenario-icon img {
  animation: iconFloat 4s ease-in-out infinite;
}
.scenario-card:hover .scenario-icon img {
  animation: none; /* 悬停时让原 hover 缩放生效 */
}
@keyframes iconFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-6px) rotate(6deg); }
}

/* ---------- 连接卡片竖条脉冲 ---------- */
.connect-card .connect-icon {
  animation: barPulse 3s ease-in-out infinite;
}
@keyframes barPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* ---------- 主按钮呼吸光晕 ---------- */
.btn-primary {
  animation: btnGlow 3.5s ease-in-out infinite;
}
.btn-primary:hover {
  animation: none; /* 悬停时让原 hover 阴影生效 */
}
@keyframes btnGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
  50%      { box-shadow: 0 0 22px 2px rgba(0, 229, 255, .35); }
}

/* ---------- 统计数字计数完成时的弹跳高亮 ---------- */
.stat-value.counted {
  animation: numPop .6s ease;
}
@keyframes numPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ---------- 装饰粒子（由 JS 注入，绝对定位，不占布局） ---------- */
.fx-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(0, 246, 255, .85), rgba(0, 246, 255, 0) 70%);
  opacity: 0;
  animation: particleRise linear infinite;
}
@keyframes particleRise {
  0%   { transform: translateY(0) scale(.6);     opacity: 0; }
  12%  { opacity: .8; }
  88%  { opacity: .5; }
  100% { transform: translateY(-170px) scale(1); opacity: 0; }
}

/* ---------- 无障碍 / 性能降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim-ready [data-reveal],
  .anim-ready [data-reveal-fade] {
    opacity: 1 !important;
    transform: none !important;
  }
  * {
    animation: none !important;
  }
  .fx-particle { display: none !important; }
}

/* 触屏设备关闭常驻动效，避免性能问题与误触 */
@media (hover: none) and (pointer: coarse) {
  .hero-cards .info-card,
  .scenario-icon img,
  .connect-card .connect-icon,
  .btn-primary,
  .hero-title .title-1,
  .hero-subtitle,
  .hero-section::after,
  .cta-section::after { animation: none !important; }
  .fx-particle { display: none !important; }
}