/* ============================================================
   SVQ 官网动画样式
   ============================================================ */

/* ---------- 粒子画布 ---------- */
#svq-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero { position: relative; overflow: hidden; }
.hero > *:not(#svq-particles) { position: relative; z-index: 1; }

/* ---------- 滚动入场：初始状态 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 延迟级别 */
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
.reveal-d5 { transition-delay: 0.40s; }
.reveal-d6 { transition-delay: 0.48s; }
.reveal-d7 { transition-delay: 0.56s; }
.reveal-d8 { transition-delay: 0.64s; }
.reveal-d9 { transition-delay: 0.72s; }
.reveal-d10 { transition-delay: 0.80s; }

/* ---------- 架构层级：从左滑入 ---------- */
.arch-layer {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.arch-layer.is-visible {
  opacity: 1;
  transform: none;
}
.arch-layer:nth-child(1) { transition-delay: 0.05s; }
.arch-layer:nth-child(2) { transition-delay: 0.15s; }
.arch-layer:nth-child(3) { transition-delay: 0.25s; }
.arch-layer:nth-child(4) { transition-delay: 0.35s; }
.arch-layer:nth-child(5) { transition-delay: 0.45s; }

/* ---------- 卡片光晕跟随 ---------- */
.card,
.platform-card,
.solution-item,
.case-card,
.hardware-col,
.vision-item {
  position: relative;
  overflow: hidden;
}
.card::before,
.platform-card::before,
.solution-item::before,
.case-card::before,
.hardware-col::before,
.vision-item::before {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,156,245,0.18) 0%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  left: -999px;
  top: -999px;
  transition: left 0s, top 0s;
  z-index: 0;
}
.card > *,
.platform-card > *,
.solution-item > *,
.case-card > *,
.hardware-col > *,
.vision-item > * {
  position: relative;
  z-index: 1;
}

/* ---------- 扫光条 ---------- */
@keyframes svq-scan {
  0%   { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(400%) skewX(-12deg); }
}
.svq-scan-wrap {
  position: relative;
  overflow: hidden;
}
.svq-scan-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.07) 50%, transparent 100%);
  animation: svq-scan 3.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

/* ---------- 首屏文字打字光标 ---------- */
@keyframes svq-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.svq-cursor::after {
  content: '|';
  margin-left: 2px;
  animation: svq-blink 0.9s step-start infinite;
  color: var(--accent);
}

/* ---------- 数字滚动 ---------- */
.svq-count {
  display: inline-block;
  transition: none;
}

/* ---------- Hero 徽章浮动 ---------- */
@keyframes svq-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.hero-points li {
  animation: svq-float 4s ease-in-out infinite;
}
.hero-points li:nth-child(2) { animation-delay: 0.6s; }
.hero-points li:nth-child(3) { animation-delay: 1.2s; }

/* ---------- 导航栏滚动渐深 ---------- */
.site-header {
  transition: background 0.35s, box-shadow 0.35s, border-color 0.35s;
}
.site-header.scrolled {
  background: rgba(10, 18, 38, 0.96) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.45);
  border-color: rgba(255,255,255,0.06) !important;
}

/* ---------- section-head 下划线动画 ---------- */
.section-head h2 {
  position: relative;
  display: inline-block;
}
.section-head h2::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  border-radius: 2px;
}
.section-head.is-visible h2::after {
  width: 100%;
}

/* ---------- 产品模块卡片标题图标动效 ---------- */
.card:hover h3 {
  color: var(--accent-2);
  transition: color 0.25s;
}

/* ---------- 流程步骤连线闪烁 ---------- */
@keyframes svq-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61,156,245,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(61,156,245,0); }
}
.dev-pills span {
  position: relative;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.dev-pills span:hover {
  background: rgba(61,156,245,0.2);
  color: var(--accent-2);
  transform: translateY(-2px);
}

/* ---------- AI 流程箭头闪烁 ---------- */
@keyframes svq-arrow-flash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
#ai .content-row span[style*="→"],
#ai span[style*="→"] {
  animation: svq-arrow-flash 1.8s ease-in-out infinite;
}

/* ---------- 时间线竖线生长 ---------- */
.vision-timeline {
  position: relative;
}
.vision-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 2px;
  transition: height 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}
.vision-timeline.is-visible::before {
  height: 100%;
}