// src/constants/animations.js
// 通用动画定义 - 使用 @emotion/react 的 keyframes

import { keyframes } from '@emotion/react';

/**
 * 脉冲动画 - 用于S/A级重要性标签
 * 从中心向外扩散的阴影效果
 */
export const pulseAnimation = keyframes`
  0% {
    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 77, 79, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0);
  }
`;

/**
 * 渐入动画
 */
export const fadeIn = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`;

/**
 * 从下往上滑入动画
 */
export const slideInUp = keyframes`
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
`;

/**
 * 缩放进入动画
 */
export const scaleIn = keyframes`
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
`;

/**
 * 旋转动画（用于Loading Spinner）
 */
export const spin = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;