/* ============================================
   魔力仙境
   ============================================ */

/* ========== 1. 呼吸动画 - LOGO ========== */
@keyframes breath {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

.anim-breath {
  animation: breath 4s ease-in-out infinite;
}

/* ========== 2. 悬浮动画 - 挂件 ========== */
@keyframes float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

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

/* ========== 3. 光晕脉冲 - 下载按钮 ========== */
@keyframes glow-pulse {
  0%,
  100% {
    box-shadow:
      0 4px 15px rgba(255, 127, 80, 0.3),
      0 0 30px rgba(255, 127, 80, 0.2);
  }
  50% {
    box-shadow:
      0 4px 20px rgba(255, 127, 80, 0.5),
      0 0 50px rgba(255, 127, 80, 0.4);
  }
}

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

/* ========== 4. 向上滑入 - 页面加载 ========== */
@keyframes slide-in-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-slide-up {
  animation: slide-in-up 0.8s ease-out forwards;
}

.anim-slide-up-delay-1 {
  animation: slide-in-up 0.8s ease-out 0.1s forwards;
  opacity: 0;
}

.anim-slide-up-delay-2 {
  animation: slide-in-up 0.8s ease-out 0.2s forwards;
  opacity: 0;
}

.anim-slide-up-delay-3 {
  animation: slide-in-up 0.8s ease-out 0.3s forwards;
  opacity: 0;
}

/* ========== 5. 淡入 ========== */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.anim-fade-in {
  animation: fade-in 0.6s ease-out forwards;
}

/* ========== 6. 缩放弹入 ========== */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.anim-scale-in {
  animation: scale-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* ========== 7. 摇晃动画 - 提醒 ========== */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

.anim-shake {
  animation: shake 0.6s ease-in-out;
}

/* ========== 8. 流光效果 - 按钮高光 ========== */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.anim-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* ========== 9. 星星闪烁 ========== */
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.anim-twinkle {
  animation: twinkle 2s ease-in-out infinite;
}

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

.anim-spin {
  animation: spin 2s linear infinite;
}

/* ========== 11. 弹跳 ========== */
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

.anim-bounce {
  animation: bounce 1.5s ease infinite;
}

/* ========== 12. 波利跳跃 - 悬浮挂件专用 ========== */
@keyframes poring-jump {
  0%,
  100% {
    transform: translateY(0) scaleY(1) scaleX(1);
  }
  15% {
    transform: translateY(0) scaleY(0.9) scaleX(1.1);
  }
  30% {
    transform: translateY(-20px) scaleY(1.1) scaleX(0.95);
  }
  50% {
    transform: translateY(-25px) scaleY(1) scaleX(1);
  }
  70% {
    transform: translateY(-20px) scaleY(1.05) scaleX(0.98);
  }
  85% {
    transform: translateY(0) scaleY(0.95) scaleX(1.05);
  }
}

.anim-poring {
  animation: poring-jump 2.5s ease-in-out infinite;
}