/* 动画效果 */

/* 1. 淡入淡出 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

/* 2. 滑动效果 */
.slide-up-enter-active, .slide-up-leave-active {
  transition: all 0.3s ease;
}
.slide-up-enter, .slide-up-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

.slide-down-enter-active, .slide-down-leave-active {
  transition: all 0.3s ease;
}
.slide-down-enter, .slide-down-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

.slide-left-enter-active, .slide-left-leave-active {
  transition: all 0.3s ease;
}
.slide-left-enter, .slide-left-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-right-enter-active, .slide-right-leave-active {
  transition: all 0.3s ease;
}
.slide-right-enter, .slide-right-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

/* 3. 缩放效果 */
.scale-enter-active, .scale-leave-active {
  transition: all 0.3s ease;
}
.scale-enter, .scale-leave-to {
  transform: scale(0.8);
  opacity: 0;
}

/* 4. 弹跳效果 */
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-out 0.5s;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(0);
  }
}

/* 5. 旋转效果 */
.rotate-enter-active, .rotate-leave-active {
  transition: all 0.3s ease;
}
.rotate-enter, .rotate-leave-to {
  transform: rotate(180deg);
  opacity: 0;
}

/* 6. 页面切换效果 */
.page-enter-active, .page-leave-active {
  transition: all 0.3s ease;
  position: absolute;
  width: 100%;
}
.page-enter {
  transform: translateX(100%);
}
.page-leave-to {
  transform: translateX(-100%);
}

/* 7. 卡片飞入效果 */
.card-fly-enter-active {
  transition: all 0.3s ease;
}
.card-fly-enter {
  transform: translateY(20px);
  opacity: 0;
}
.card-fly-enter-to {
  transform: translateY(0);
  opacity: 1;
}

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

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

/* 9. 脉冲效果 */
.pulse {
  animation: pulse 2s infinite;
}

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

/* 10. 心跳效果 */
.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite both;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* 11. 抖动效果 */
.shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* 12. 悬停效果 */
.hover-lift {
  transition: all 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 13. 按钮点击效果 */
.btn-click {
  transition: all 0.2s ease;
}

.btn-click:active {
  transform: scale(0.95);
}

/* 14. 渐变背景动画 */
.gradient-bg {
  background: linear-gradient(-45deg, #46D5BE, #4ECDC4, #FFD166, #FF6B6B);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

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