/* =============================================
   联帮智护 · 智慧养老 — 动画样式
   ============================================= */

/* ---------- 入场动画基础状态 ---------- */
.fade-in       { opacity: 0; transform: translateY(28px); }
.fade-in-left  { opacity: 0; transform: translateX(-40px); }
.fade-in-right { opacity: 0; transform: translateX(40px); }
.fade-in-up    { opacity: 0; transform: translateY(40px); }
.zoom-in       { opacity: 0; transform: scale(0.88); }

/* ---------- 进入视口后激活 ---------- */
.fade-in.visible,
.fade-in-left.visible,
.fade-in-right.visible,
.fade-in-up.visible,
.zoom-in.visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 延迟类 ---------- */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }
.delay-5 { transition-delay: 0.5s !important; }
.delay-6 { transition-delay: 0.6s !important; }

/* ---------- 卡片依次出现 ---------- */
.stagger-group > * { opacity: 0; transform: translateY(24px); }
.stagger-group.visible > *:nth-child(1) { opacity: 1; transform: none; transition: opacity 0.6s ease 0.05s, transform 0.6s ease 0.05s; }
.stagger-group.visible > *:nth-child(2) { opacity: 1; transform: none; transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s; }
.stagger-group.visible > *:nth-child(3) { opacity: 1; transform: none; transition: opacity 0.6s ease 0.25s, transform 0.6s ease 0.25s; }
.stagger-group.visible > *:nth-child(4) { opacity: 1; transform: none; transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s; }
.stagger-group.visible > *:nth-child(5) { opacity: 1; transform: none; transition: opacity 0.6s ease 0.45s, transform 0.6s ease 0.45s; }
.stagger-group.visible > *:nth-child(6) { opacity: 1; transform: none; transition: opacity 0.6s ease 0.55s, transform 0.6s ease 0.55s; }

/* ---------- 光晕扫射 ---------- */
@keyframes shine-sweep {
  0%   { left: -100%; }
  60%  { left: 130%; }
  100% { left: 130%; }
}
.shine-btn {
  position: relative;
  overflow: hidden;
}
.shine-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg);
  animation: shine-sweep 3s ease-in-out infinite;
}

/* ---------- 数字计数器 ---------- */
.counter-wrap {
  display: inline-block;
  min-width: 2ch;
}

/* ---------- 脉冲圆圈 ---------- */
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.8); opacity: 0; }
}
.pulse-circle {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.pulse-circle::before,
.pulse-circle::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(0, 212, 255, 0.5);
  border-radius: 50%;
  animation: pulse-ring 2s ease-out infinite;
}
.pulse-circle::after { animation-delay: 1s; }

/* ---------- 数据流线条 ---------- */
@keyframes data-flow {
  0%   { stroke-dashoffset: 1000; opacity: 0.8; }
  100% { stroke-dashoffset: 0;    opacity: 0.2; }
}
.flow-line {
  stroke-dasharray: 1000;
  animation: data-flow 4s linear infinite;
}

/* ---------- 背景网格呼吸 ---------- */
@keyframes grid-pulse {
  0%,100% { opacity: 0.04; }
  50%      { opacity: 0.08; }
}
.bg-grid {
  background-image:
    linear-gradient(var(--primary) 1px, transparent 1px),
    linear-gradient(90deg, var(--primary) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: grid-pulse 4s ease-in-out infinite;
}

/* ---------- 标签下划线动画 ---------- */
.underline-anim {
  position: relative;
  display: inline-block;
}
.underline-anim::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.4s ease;
}
.underline-anim:hover::after { width: 100%; }

/* ---------- 卡片边框流光 ---------- */
@keyframes border-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.glow-border {
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.glow-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(270deg, var(--primary), var(--accent2), var(--accent), var(--primary));
  background-size: 300% 300%;
  animation: border-flow 6s linear infinite;
  z-index: -1;
}

/* ---------- 图标旋转 ---------- */
@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spin-icon { display: inline-block; animation: icon-spin 6s linear infinite; }

/* ---------- Hero 文字逐字出现 ---------- */
@keyframes typing-cursor { 0%,100% { border-right-color: var(--primary); } 50% { border-right-color: transparent; } }
.typing-cursor { border-right: 2px solid var(--primary); animation: typing-cursor 0.8s step-end infinite; }

/* ---------- 粒子淡入 ---------- */
@keyframes particle-drift {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-120px) translateX(40px); opacity: 0; }
}

/* ---------- 加载进度条 ---------- */
@keyframes loading-bar {
  0%   { width: 0%; }
  100% { width: 100%; }
}
.loading-line {
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  animation: loading-bar 0.6s ease forwards;
}

/* ---------- tooltip 出现 ---------- */
.tooltip-wrap { position: relative; }
.tooltip-box {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%) scale(0.8);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.tooltip-wrap:hover .tooltip-box {
  opacity: 1; transform: translateX(-50%) scale(1);
}

/* ---------- Hero 装饰环 ---------- */
@keyframes rotate-ring {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.deco-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(0, 212, 255, 0.2);
  animation: rotate-ring 20s linear infinite;
}
.deco-ring-2 { animation-direction: reverse; animation-duration: 30s; }