/* 核心动画：新增两种效果 + 保留原有 */
    @keyframes fadeIn {
      0% { opacity: 0; }
      30% { opacity: 0.2; }
      70% { opacity: 0.7; }
      100% { opacity: 1; }
    }
    @keyframes slideLeft {
      0% { transform: translateX(-100px); opacity: 0; }
      40% { transform: translateX(-50px); opacity: 0.3; }
      70% { transform: translateX(-10px); opacity: 0.8; }
      100% { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideRight {
      0% { transform: translateX(100px); opacity: 0; }
      40% { transform: translateX(50px); opacity: 0.3; }
      70% { transform: translateX(10px); opacity: 0.8; }
      100% { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideUpStrong {
      0% { transform: translateY(200px); opacity: 0; }
      50% { transform: translateY(-20px); opacity: 0.8; }
      80% { transform: translateY(10px); opacity: 0.9; }
      100% { transform: translateY(0); opacity: 1; }
    }
    @keyframes scaleIn {
      0% { transform: scale(0.5); opacity: 0; }
      50% { transform: scale(1.05); opacity: 0.8; }
      80% { transform: scale(0.95); opacity: 0.9; }
      100% { transform: scale(1); opacity: 1; }
    }
    /* 新增1：从上到下淡入（slide-down-fade）- 从上方滑入+淡入 */
    @keyframes slideDownFade {
      0% { transform: translateY(-80px); opacity: 0; }
      40% { transform: translateY(-40px); opacity: 0.3; }
      70% { transform: translateY(-10px); opacity: 0.8; }
      100% { transform: translateY(0); opacity: 1; }
    }
    /* 新增2：由小到大淡入（scale-up-fade）- 从小放大+淡入 */
    @keyframes scaleUpFade {
      0% { transform: scale(0.8); opacity: 0; }
      50% { transform: scale(1.02); opacity: 0.7; }
      80% { transform: scale(0.98); opacity: 0.9; }
      100% { transform: scale(1); opacity: 1; }
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    /* 动画类：新增对应动画类 */
    .animate-fade-in { animation: fadeIn 1.2s ease-out forwards; }
    .animate-slide-left { animation: slideLeft 1s ease-out forwards; }
    .animate-slide-right { animation: slideRight 1s ease-out forwards; }
    .animate-slide-up-strong { animation: slideUpStrong 1.2s ease-out forwards; }
    .animate-scale-in { animation: scaleIn 1s ease-out forwards; }
    .animate-slide-down-fade { animation: slideDownFade 1.2s ease-out forwards; } /* 新增 */
    .animate-scale-up-fade { animation: scaleUpFade 1.2s ease-out forwards; } /* 新增 */
    .animate-spin { animation: spin 1s linear infinite; }
    .animate-bounce { animation: bounce 1s ease-in-out infinite; }

    /* 自定义工具类：合规化样式 + 优化初始状态 */
    .content-auto { content-visibility: auto; }
    .loadable {
      opacity: 0;
      will-change: transform, opacity;
      animation-play-state: paused;
      animation-fill-mode: forwards;
    }
    .loadable.animated {
      opacity: 1;
      animation-play-state: running;
    }