/* ============================================
   活泼创意的动画效果
   ============================================ */

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

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

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

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

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

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-7px);
    }
}

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

@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes wobble {
    0% {
        transform: translateX(0);
    }
    15% {
        transform: translateX(-10px) rotate(-5deg);
    }
    30% {
        transform: translateX(8px) rotate(3deg);
    }
    45% {
        transform: translateX(-8px) rotate(-3deg);
    }
    60% {
        transform: translateX(5px) rotate(2deg);
    }
    75% {
        transform: translateX(-3px) rotate(-1deg);
    }
    100% {
        transform: translateX(0);
    }
}

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

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

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

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.2);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.2);
    }
    70% {
        transform: scale(1);
    }
}

/* 特效动画 */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(50, 130, 184, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(50, 130, 184, 0.8), 0 0 30px rgba(50, 130, 184, 0.6);
    }
}

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

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

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

@keyframes floatRotate {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(5deg);
    }
    50% {
        transform: translateY(-30px) rotate(0deg);
    }
    75% {
        transform: translateY(-15px) rotate(-5deg);
    }
}

/* 页面过渡动画 */
@keyframes fadeInPage {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* 加载动画 */
@keyframes loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dots {
    0%, 20% {
        color: rgba(0,0,0,0);
        text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
    }
    40% {
        color: var(--color-highlight);
        text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
    }
    60% {
        text-shadow: .25em 0 0 var(--color-highlight), .5em 0 0 rgba(0,0,0,0);
    }
    80%, 100% {
        text-shadow: .25em 0 0 var(--color-highlight), .5em 0 0 var(--color-highlight);
    }
}

/* 打字机效果 */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

/* 粒子效果 */
@keyframes particle {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

/* 波纹效果 */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* 聚光灯效果 */
@keyframes spotlight {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* 鼠标滚轮动画 */
@keyframes mouseWheel {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(15px);
    }
}

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

@keyframes iconRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

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

/* 文字动画 */
@keyframes textGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes textGlow {
    0%, 100% {
        text-shadow: 0 0 5px rgba(50, 130, 184, 0.5);
    }
    50% {
        text-shadow: 0 0 20px rgba(50, 130, 184, 0.8), 0 0 30px rgba(187, 225, 250, 0.6);
    }
}

/* 边框动画 */
@keyframes borderGlow {
    0%, 100% {
        border-color: rgba(50, 130, 184, 0.3);
    }
    50% {
        border-color: rgba(50, 130, 184, 0.8);
    }
}

@keyframes borderSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 背景动画 */
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes starTwinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* 卡片动画 */
@keyframes cardFlip {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(180deg);
    }
}

@keyframes cardFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 悬停效果动画 */
@keyframes hoverFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes hoverGlow {
    0% {
        box-shadow: 0 0 5px rgba(50, 130, 184, 0.3);
    }
    100% {
        box-shadow: 0 0 20px rgba(50, 130, 184, 0.6), 0 0 30px rgba(50, 130, 184, 0.4);
    }
}

/* 弹窗动画 */
@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes modalZoomIn {
    from {
        transform: scale(0.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 进度条动画 */
@keyframes progress {
    from {
        width: 0%;
    }
    to {
        width: var(--progress-width);
    }
}

@keyframes progressGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(50, 130, 184, 0.5);
    }
    50% {
        box-shadow: 0 0 15px rgba(50, 130, 184, 0.8);
    }
}

/* 工具类动画 */
.animate-fadeIn {
    animation: fadeIn 0.5s ease;
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease;
}

.animate-slideInUp {
    animation: slideInUp 0.6s ease;
}

.animate-scaleIn {
    animation: scaleIn 0.5s ease;
}

.animate-bounce {
    animation: bounce 1s ease;
}

.animate-pulse {
    animation: pulse 2s ease infinite;
}

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

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

/* 延迟动画 */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* 动画速度 */
.duration-fast { animation-duration: 0.3s; }
.duration-normal { animation-duration: 0.5s; }
.duration-slow { animation-duration: 1s; }

/* 无限循环 */
.infinite { animation-iteration-count: infinite; }