/* 按钮点击缩放动画 */
@keyframes buttonPop {
    0% { transform: scale(1); }
    50% { transform: scale(0.96); }
    100% { transform: scale(1); }
}

.btn-click {
    animation: buttonPop 0.2s ease;
}

/* 卡片悬停动画 */
.card {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

.card:hover {
    transform: translateY(-4px) scale(1.02);
}

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

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 脉冲动画 */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse {
    animation: pulse 2s infinite;
}

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

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

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

.blink {
    animation: blink 1s infinite;
}

/* 波浪动画 */
@keyframes wave {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

.wave {
    animation: wave 2s infinite;
}

/* 页面切换动画 */
.page-transition-enter {
    opacity: 0;
    transform: translateX(100%);
}

.page-transition-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s ease;
}

.page-transition-exit {
    opacity: 1;
    transform: translateX(0);
}

.page-transition-exit-active {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.3s ease;
}

/* 下拉刷新动画 */
@keyframes pullToRefresh {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pull-to-refresh {
    animation: pullToRefresh 1s linear infinite;
}