/* =============
   Hao AI - 动画效果
   ================= */

/* 淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 淡出动画 */
@keyframes fadeOut {
    from {
     opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* 上移淡入 */
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 下移淡出 */
@keyframes slideDownFadeOut {
    from {
        opacity: 1;
      transform: translateY(0);
    }
    to {
        opacity: 0;
    transform: translateY(20px);
    }
}

/* 缩放淡入 */
@keyframes scaleInFadeIn {
  from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 浮动动画 */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* 发光脉冲 */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 0 rgba(96, 165, 250, 0);
    }
    50% {
      box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
    }
}

/* 加载旋转 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 闪烁 */
@keyframes blink {
    0%, 49%, 100% {
        opacity: 1;
    }
    50%, 99% {
        opacity: 0.5;
    }
}

/* 彩虹颜色变化 */
@keyframes rainbow {
    0% { color: var(--color-primary); }
    25% { color: #a78bfa; }
    50% { color: #ec4899; }
    75% { color: var(--color-warning); }
    100% { color: var(--color-primary); }
}

/* 动画工具类 */
.animate-fade-in {
    animation: fadeIn var(--duration-base) ease-out;
}

.animate-fade-out {
    animation: fadeOut var(--duration-base) ease-out;
}

.animate-slide-up {
    animation: slideUpFadeIn var(--duration-base) ease-out;
}

.animate-scale-in {
    animation: scaleInFadeIn var(--duration-base) ease-out;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-blink {
    animation: blink 1.5s ease-in-out infinite;
}

.animate-rainbow {
    animation: rainbow 3s ease-in-out infinite;
}

/* 过渡效果 */
.transition-fast {
    transition: var(--duration-fast) var(--easing-standard);
}

.transition-base {
    transition: var(--duration-base) var(--easing-standard);
}

.transition-slow {
    transition: var(--duration-slow) var(--easing-standard);
}

.transition-colors {
    transition: background-color var(--duration-base) var(--easing-standard), color var(--duration-base) var(--easing-standard), border-color var(--duration-base) var(--easing-standard);
}

.transition-transform {
    transition: transform var(--duration-base) var(--easing-standard);
}

.transition-all {
    transition: all var(--duration-base) var(--easing-standard);
}

/* Hover 效果 */
.hover-lift {
    transition: var(--duration-base) var(--easing-standard);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

.hover-scale {
    transition: var(--duration-base) var(--easing-standard);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-glow {
    transition: var(--duration-base) var(--easing-standard);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
}

/* 页面进入动画 */
.page-enter {
    animation: slideUpFadeIn 0.5s ease-out;
}

/* 卡片进入动画 */
.card-enter {
    animation: slideUpFadeIn 0.4s ease-out;
}

/* 列表项进入动画 - 可以通过 CSS 延迟实现 */
.list-item {
    animation: slideUpFadeIn 0.4s ease-out;
}

.list-item:nth-child(1) { animation-delay: 0.1s; }
.list-item:nth-child(2) { animation-delay: 0.2s; }
.list-item:nth-child(3) { animation-delay: 0.3s; }
.list-item:nth-child(4) { animation-delay: 0.4s; }
.list-item:nth-child(5) { animation-delay: 0.5s; }

/* 响应式动画调整 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 深色模式动画优化 */
@media (prefers-color-scheme: dark) {
    .animate-glow {
    animation: glow 2.5s ease-in-out infinite;
    }
}

/* 性能优化 - 使用 GPU 加速 */
.will-animate {
    will-change: transform, opacity;
}

/* 移除动画类 */
.no-animation {
    animation: none !important;
    transition: none !important;
}