/* ========================================
   YouDaoRS MC Wiki - 动画库 v3.0
   现代化微交互动画系统
   ======================================== */

/* ========== 🎬 页面转场动画 ========== */

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes page-exit {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
    filter: blur(5px);
  }
}

.md-content {
  animation: page-enter 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

/* ========== ✨ 渐入动画系列 ========== */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

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

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

.fade-in { animation: fade-in 0.5s ease; }
.fade-in-up { animation: fade-in-up 0.6s ease; }
.fade-in-down { animation: fade-in-down 0.6s ease; }
.fade-in-left { animation: fade-in-left 0.6s ease; }
.fade-in-right { animation: fade-in-right 0.6s ease; }

/* 确保滚动动画元素有正确的最终状态 */
.revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ========== 🎬 新版滚动显示动画系统 ========== */

/* 初始状态：等待触发动画的元素 */
.scroll-reveal-init {
  opacity: 0;
  transform: translateY(30px);
  transition: none; /* 禁用transition，只用animation */
}

/* 动画中：正在播放动画的元素 */
.scroll-reveal-animate {
  /* 动画由JS的style.animation控制 */
}

/* 完成状态：动画已完成的元素 */
.scroll-reveal-done {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 淡入上升动画 */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ========== 🚀 缩放动画系列 ========== */

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

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

@keyframes zoom-in-bounce {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.zoom-in { animation: zoom-in 0.5s ease; }
.zoom-out { animation: zoom-out 0.5s ease; }
.zoom-in-bounce { animation: zoom-in-bounce 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

/* ========== 🎯 弹跳动画系列 ========== */

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

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

@keyframes bounce-soft {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.bounce-in { animation: bounce-in 0.6s ease; }
.bounce-gentle { animation: bounce-gentle 2s ease-in-out infinite; }
.bounce-soft { animation: bounce-soft 1.5s ease-in-out infinite; }

/* ========== 🌊 滑动动画系列 ========== */

@keyframes slide-in-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-down {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-up { animation: slide-in-up 0.5s ease; }
.slide-in-down { animation: slide-in-down 0.5s ease; }
.slide-in-left { animation: slide-in-left 0.5s ease; }
.slide-in-right { animation: slide-in-right 0.5s ease; }

/* ========== 🔄 旋转动画系列 ========== */

@keyframes rotate-in {
  from {
    opacity: 0;
    transform: rotate(-180deg);
  }
  to {
    opacity: 1;
    transform: rotate(0);
  }
}

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

@keyframes rotate-3d {
  from {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  to {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

.rotate-in { animation: rotate-in 0.6s ease; }
.rotate-360 { animation: rotate-360 2s linear infinite; }
.rotate-3d { animation: rotate-3d 10s linear infinite; transform-style: preserve-3d; }

/* ========== 🎪 翻转动画系列 ========== */

@keyframes flip-in-x {
  from {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateX(0);
  }
}

@keyframes flip-in-y {
  from {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateY(0);
  }
}

@keyframes flip-card {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(180deg);
  }
}

.flip-in-x { animation: flip-in-x 0.6s ease; }
.flip-in-y { animation: flip-in-y 0.6s ease; }
.flip-on-hover {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-on-hover:hover {
  transform: rotateY(180deg);
}

/* ========== 💫 脉冲动画系列 ========== */

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

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

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(124, 77, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(124, 77, 255, 0.8);
  }
}

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

/* ========== 🌈 渐变动画系列 ========== */

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

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

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

.gradient-x {
  background-size: 200% 100%;
  animation: gradient-x 3s ease infinite;
}

.gradient-y {
  background-size: 100% 200%;
  animation: gradient-y 3s ease infinite;
}

.gradient-rotate {
  background-size: 400% 400%;
  animation: gradient-rotate 5s ease infinite;
}

/* ========== 🎨 发光动画系列 ========== */

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 
      0 0 5px rgba(124, 77, 255, 0.5),
      0 0 10px rgba(124, 77, 255, 0.3);
  }
  50% {
    box-shadow: 
      0 0 15px rgba(124, 77, 255, 0.8),
      0 0 25px rgba(124, 77, 255, 0.5);
  }
}

@keyframes neon-glow {
  0%, 100% {
    text-shadow: 
      0 0 5px rgba(124, 77, 255, 0.8),
      0 0 10px rgba(124, 77, 255, 0.6),
      0 0 15px rgba(124, 77, 255, 0.4);
  }
  50% {
    text-shadow: 
      0 0 10px rgba(124, 77, 255, 1),
      0 0 20px rgba(124, 77, 255, 0.8),
      0 0 30px rgba(124, 77, 255, 0.6);
  }
}

.glow { animation: glow-pulse 2s ease-in-out infinite; }
.neon-text { animation: neon-glow 1.5s ease-in-out infinite alternate; }

/* ========== 🔆 震动动画系列 ========== */

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

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

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

.shake { animation: shake 0.5s ease; }
.shake-vertical { animation: shake-vertical 0.5s ease; }
.shake-rotate { animation: shake-rotate 0.5s ease; }

/* ========== 💧 波纹动画系列 ========== */

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.6;
  }
  100% {
    width: 500px;
    height: 500px;
    opacity: 0;
  }
}

.ripple-effect {
  position: relative;
  overflow: hidden;
}

.ripple-effect::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(124, 77, 255, 0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ripple-effect:active::after {
  animation: ripple 0.6s ease-out;
}

/* ========== 📝 打字机动画 ========== */

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

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

.typewriter {
  overflow: hidden;
  border-right: 3px solid;
  white-space: nowrap;
  animation: 
    typewriter 3s steps(40) 1s forwards,
    blink 0.75s step-end infinite;
}

/* ========== 🌊 波浪动画 ========== */

@keyframes wave {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(-3deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(8px) rotate(3deg);
  }
}

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

/* ========== ⏳ 加载动画系列 ========== */

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

@keyframes dots {
  0%, 20% {
    color: rgba(124, 77, 255, 0);
    text-shadow:
      0.25em 0 0 rgba(124, 77, 255, 0),
      0.5em 0 0 rgba(124, 77, 255, 0);
  }
  40% {
    color: #7c4dff;
    text-shadow:
      0.25em 0 0 rgba(124, 77, 255, 0),
      0.5em 0 0 rgba(124, 77, 255, 0);
  }
  60% {
    text-shadow:
      0.25em 0 0 #7c4dff,
      0.5em 0 0 rgba(124, 77, 255, 0);
  }
  80%, 100% {
    text-shadow:
      0.25em 0 0 #7c4dff,
      0.5em 0 0 #7c4dff;
  }
}

.loader {
  border: 4px solid rgba(124, 77, 255, 0.2);
  border-top-color: #7c4dff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

.dots-loader::after {
  content: '.';
  animation: dots 1s steps(5, end) infinite;
}

/* ========== 🎯 悬停效果系列 ========== */

.hover-lift {
  transition: all 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(124, 77, 255, 0.3);
}

.hover-grow {
  transition: all 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

.hover-grow:hover {
  transform: scale(1.08);
}

.hover-rotate {
  transition: all 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

.hover-rotate:hover {
  transform: rotate(5deg);
}

.hover-tilt {
  transition: all 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

.hover-tilt:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
}

.hover-glow {
  transition: all 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(124, 77, 255, 0.6);
}

/* ========== ⏱️ 延迟和时长类 ========== */

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
.delay-8 { animation-delay: 0.8s; }

.duration-fast { animation-duration: 0.3s; }
.duration-normal { animation-duration: 0.6s; }
.duration-slow { animation-duration: 1s; }
.duration-slower { animation-duration: 1.5s; }

/* ========== ✨ 特殊效果动画 ========== */

/* 粒子漂浮 */
@keyframes float-particle {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(10px, -10px) rotate(90deg);
  }
  50% {
    transform: translate(20px, 0) rotate(180deg);
  }
  75% {
    transform: translate(10px, 10px) rotate(270deg);
  }
}

.float-particle {
  animation: float-particle 8s ease-in-out infinite;
}

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

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

/* 心跳效果 */
@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  10%, 30% {
    transform: scale(0.9);
  }
  20%, 40% {
    transform: scale(1.1);
  }
}

.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

/* ========== 终极动画库 v3.0 完成 ========== */