/* =====================================================
   icon-anim.css —— v18 图标动效层
   把散落的 emoji 图标替换/升级为 SVG 图标，并统一提供
   几组轻柔动效：浮动、呼吸、脉冲、摇摆、渐变色流动。
   全部走 transform/opacity，不触发重排；尊重减弱动效偏好。
   ===================================================== */

/* ---------- 通用动效类 ---------- */
.ic-float { animation: icFloat 3.2s ease-in-out infinite; }
.ic-breathe { animation: icBreathe 2.6s ease-in-out infinite; }
.ic-pulse { animation: icPulse 2s ease-in-out infinite; }
.ic-wiggle { animation: icWiggle 3.6s ease-in-out infinite; }

@keyframes icFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes icBreathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: .82; }
}
@keyframes icPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
@keyframes icWiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-6deg); }
  75%      { transform: rotate(6deg); }
}

/* ---------- 图标基础（SVG 图标容器） ---------- */
.ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: none;
}
.ic svg {
  width: 1em;
  height: 1em;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 填充型图标（如爱心、星星）单独放开 */
.ic.fill svg { fill: currentColor; stroke: none; }

/* ---------- 底部 Tab 图标 ---------- */
.tabbar .tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), color .25s;
}
.tabbar .tab-icon svg { width: 1em; height: 1em; display: block; }
.tabbar .tab.active .tab-icon {
  color: var(--primary, #ff7da3);
  transform: translateY(-1px) scale(1.12);
}
.tabbar .tab:not(.active) .tab-icon { color: var(--muted, #b5a094); }
.tabbar .tab.active .tab-icon svg {
  fill: color-mix(in srgb, var(--primary, #ff7da3) 18%, transparent);
  stroke: var(--primary, #ff7da3);
}

/* ---------- 首页快捷入口图标 ---------- */
.h-quick-item .h-qe {
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.h-quick-item .h-qe svg { width: 1.2em; height: 1.2em; display: block; }
.h-quick-item:active .h-qe { transform: scale(.82) rotate(-6deg); }
.h-quick-item .h-qe.ic { color: var(--accent, #d8a97e); }
.h-quick-item:nth-child(1) .h-qe.ic { color: #e88aa0; }
.h-quick-item:nth-child(2) .h-qe.ic { color: #8fb6d8; }
.h-quick-item:nth-child(3) .h-qe.ic { color: #e6b86a; }
.h-quick-item:nth-child(4) .h-qe.ic { color: #7fc9a2; }
.h-quick-item:nth-child(5) .h-qe.ic { color: #b79bd8; }
.h-quick-item:nth-child(6) .h-qe.ic { color: #e89a8a; }

/* ---------- 通话按钮图标 ---------- */
.cb-btn .ic { font-size: 19px; }

/* ---------- 散落 emoji 的通用"活起来"处理 ---------- */
/* 卡片标题前的 emoji 统一加轻微浮动，让界面有生气 */
.card-title::first-letter { letter-spacing: 0; }
.eicon, .eicon {
  display: inline-block;
  animation: icBreathe 3.4s ease-in-out infinite;
}
.empty .eicon { font-size: 40px; }

/* ---------- 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .ic-float, .ic-breathe, .ic-pulse, .ic-wiggle,
  .eicon, .tabbar .tab-icon, .h-quick-item .h-qe { animation: none !important; }
}