/* 动画库 */

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

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

/* 从上往下滑入 */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-down {
  animation: slideDown 0.3s ease-out;
}

/* 从下往上滑入 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}

/* 缩放进入 */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scaleIn 0.3s ease-out;
}

/* 脉冲 */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 漂浮装饰元素动画 - 参考xwld */

/* 左侧漂浮 */
@keyframes drift-left {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
    opacity: 0.1;
  }
  50% {
    transform: translateX(-30px) translateY(-20px) rotate(10deg);
    opacity: 0.2;
  }
  100% {
    transform: translateX(0) translateY(-40px) rotate(-5deg);
    opacity: 0.1;
  }
}

/* 右侧漂浮 */
@keyframes drift-right {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
    opacity: 0.1;
  }
  50% {
    transform: translateX(30px) translateY(-20px) rotate(-10deg);
    opacity: 0.2;
  }
  100% {
    transform: translateX(0) translateY(-40px) rotate(5deg);
    opacity: 0.1;
  }
}

/* 温和漂浮 */
@keyframes slow-float {
  0%, 100% {
    transform: translateY(0px);
    opacity: 0.12;
  }
  50% {
    transform: translateY(-15px);
    opacity: 0.2;
  }
}

/* 叶子漂浮 */
@keyframes float-leaf {
  0% {
    transform: translateY(0px) translateX(0px) rotateZ(0deg);
    opacity: 0.8;
  }
  25% {
    transform: translateY(-15px) translateX(8px) rotateZ(8deg);
  }
  50% {
    transform: translateY(-20px) translateX(0px) rotateZ(0deg);
    opacity: 1;
  }
  75% {
    transform: translateY(-10px) translateX(-8px) rotateZ(-8deg);
  }
  100% {
    transform: translateY(0px) translateX(0px) rotateZ(0deg);
    opacity: 0.8;
  }
}

/* 星星闪烁 */
@keyframes twinkle-star {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* 绽放 */
@keyframes bloom {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.15) rotate(180deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

/* 温和脉冲 */
@keyframes gentle-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.9;
  }
}

/* 光晕脉冲 */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(217, 119, 6, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(217, 119, 6, 0.6);
  }
}

/* 动画类应用 */
.float-left {
  animation: drift-left 8s ease-in-out infinite;
}

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

.float-gentle {
  animation: slow-float 6s ease-in-out infinite;
}

.animate-leaf {
  animation: float-leaf 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

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

.animate-bloom {
  animation: bloom 2.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

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