/* ============================================
 * 矾山茶语 · 关键帧动画
 * Keyframe Animations
 * ============================================ */

/* 1. 数据滚动（信息栏轮播） */
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 2. KPI数值刷新闪烁 */
@keyframes value-flash {
  0% { color: var(--color-text-brand); }
  50% { color: var(--color-primary-light); text-shadow: 0 0 12px var(--color-primary-glow); }
  100% { color: var(--color-text-brand); text-shadow: none; }
}

/* 3. 告警脉冲（预警状态点） */
@keyframes pulse-warning {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 159, 67, 0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(255, 159, 67, 0); }
}

/* 4. 告警脉冲（危险状态点） */
@keyframes pulse-danger {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 90, 90, 0.5); }
  50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(255, 90, 90, 0); }
}

/* 5. GIS地图点位浮动 */
@keyframes map-point-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* 6. 弹窗滑入（从右侧） */
@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* 7. 弹窗滑出（向右侧） */
@keyframes slide-out-right {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

/* 8. 数据加载骨架屏微光 */
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* 9. 卡片淡入上移 */
@keyframes fade-in-up {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 10. 边框光线扫描（标题栏底部装饰） */
@keyframes border-scan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 11. 告警弹窗整体闪烁（用于重大告警提醒） */
@keyframes alert-blink {
  0%, 100% { border-color: rgba(255, 90, 90, 0.4); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 90, 90, 0.15); }
  50% { border-color: rgba(255, 90, 90, 0.7); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(255, 90, 90, 0.3); }
}

/* 12. 仪表盘指针摆动 */
@keyframes gauge-sweep {
  0% { transform: rotate(-90deg); }
  100% { transform: rotate(var(--gauge-end, 90deg)); }
}

/* ===== 动画使用类 ===== */

/* 数据滚动 */
.anim-ticker {
  animation: ticker-scroll 30s linear infinite;
}

/* 数值刷新 */
.anim-flash {
  animation: value-flash 600ms ease-out;
}

/* 预警脉冲 */
.anim-pulse-warning {
  animation: pulse-warning 2s ease-in-out infinite;
}

/* 告警脉冲 */
.anim-pulse-danger {
  animation: pulse-danger 1.5s ease-in-out infinite;
}

/* 地图点位浮动 */
.anim-float {
  animation: map-point-float 3s ease-in-out infinite;
}

/* 弹窗滑入 */
.anim-slide-in {
  animation: slide-in-right 300ms var(--ease-out);
}

/* 卡片入场 */
.anim-fade-in {
  animation: fade-in-up 400ms var(--ease-out) both;
}

/* 骨架屏 */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-elevated) 25%,
    var(--color-bg-hover) 50%,
    var(--color-bg-elevated) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}