/**
 * B2 Group Buy Plugin - CSS Animations
 * 统一的动画关键帧定义
 */

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

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

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

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

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(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 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 scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==================== 循环动画 ==================== */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* ==================== 特效动画 ==================== */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
    50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.5); }
}

@keyframes glowPurple {
    0%, 100% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.3); }
    50% { box-shadow: 0 0 40px rgba(102, 126, 234, 0.5); }
}

@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes ripple {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(4); opacity: 0; }
}

@keyframes wave {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* ==================== 模态框动画 ==================== */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modalSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
}

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

@keyframes modalAppear {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(5px);
    }
}

@keyframes modalDisappear {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

@keyframes modalContentAppear {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ==================== 进度条动画 ==================== */
@keyframes progressStripes {
    from { background-position: 1rem 0; }
    to { background-position: 0 0; }
}

@keyframes progressPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ==================== 表单动画 ==================== */
@keyframes dateSelected {
    0% { transform: scale(1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

@keyframes datepickerShow {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes focusIn {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* ==================== 卡片特效 ==================== */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 2px 16px rgba(245, 158, 11, 0.6); }
}

@keyframes discountPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

@keyframes clockTick {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
}

/* ==================== 工具类 ==================== */
.gb-animate-fadeIn { animation: fadeIn var(--gb-transition-normal, 250ms) ease-out; }
.gb-animate-fadeInUp { animation: fadeInUp var(--gb-transition-normal, 250ms) ease-out; }
.gb-animate-fadeInDown { animation: fadeInDown var(--gb-transition-normal, 250ms) ease-out; }
.gb-animate-scaleIn { animation: scaleIn var(--gb-transition-normal, 250ms) ease-out; }
.gb-animate-slideInLeft { animation: slideInLeft var(--gb-transition-normal, 250ms) ease-out; }
.gb-animate-slideInRight { animation: slideInRight var(--gb-transition-normal, 250ms) ease-out; }
.gb-animate-bounce { animation: bounce 1s infinite; }
.gb-animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.gb-animate-spin { animation: spin 1s linear infinite; }
.gb-animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.gb-animate-float { animation: float 3s ease-in-out infinite; }
.gb-animate-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* 骨架屏加载效果 */
.gb-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--gb-radius-sm, 8px);
}

/* 动画延迟工具类 */
.gb-delay-75 { animation-delay: 75ms; }
.gb-delay-100 { animation-delay: 100ms; }
.gb-delay-150 { animation-delay: 150ms; }
.gb-delay-200 { animation-delay: 200ms; }
.gb-delay-300 { animation-delay: 300ms; }
.gb-delay-500 { animation-delay: 500ms; }
.gb-delay-700 { animation-delay: 700ms; }
.gb-delay-1000 { animation-delay: 1000ms; }

/* 动画持续时间工具类 */
.gb-duration-75 { animation-duration: 75ms; }
.gb-duration-100 { animation-duration: 100ms; }
.gb-duration-150 { animation-duration: 150ms; }
.gb-duration-200 { animation-duration: 200ms; }
.gb-duration-300 { animation-duration: 300ms; }
.gb-duration-500 { animation-duration: 500ms; }
.gb-duration-700 { animation-duration: 700ms; }
.gb-duration-1000 { animation-duration: 1000ms; }