/* 悬浮装饰元素样式 */
.floating-decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.floating-item {
  position: absolute;
  opacity: 0;
  animation: fade-in 1.5s ease-out forwards;
}

/* 淡入动画 */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 轻微上下浮动动画 */
@keyframes gentle-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* 轻微摇摆动画 */
@keyframes gentle-sway {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}

/* 组合动画：浮动+摇摆 */
@keyframes float-and-sway {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-10px) rotate(2deg);
  }
  50% {
    transform: translateY(-15px) rotate(0deg);
  }
  75% {
    transform: translateY(-10px) rotate(-2deg);
  }
}

/* 不同类型的装饰元素 */
.floating-item.leaf {
  width: 40px;
  height: 60px;
}

.floating-item.flower {
  width: 50px;
  height: 50px;
}

.floating-item.mushroom {
  width: 45px;
  height: 45px;
}

.floating-item.berry {
  width: 35px;
  height: 40px;
}

.floating-item.sparkle {
  width: 30px;
  height: 30px;
}

/* 为部分元素添加动画 */
.floating-item.animated {
  animation: fade-in 1.5s ease-out forwards, gentle-float 4s ease-in-out infinite;
}

.floating-item.animated-sway {
  animation: fade-in 1.5s ease-out forwards, gentle-sway 5s ease-in-out infinite;
}

.floating-item.animated-both {
  animation: fade-in 1.5s ease-out forwards, float-and-sway 6s ease-in-out infinite;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .floating-decorations {
    opacity: 0.52;
  }

  .floating-item.leaf {
    width: 30px;
    height: 45px;
  }

  .floating-item.flower {
    width: 35px;
    height: 35px;
  }

  .floating-item.mushroom {
    width: 32px;
    height: 32px;
  }

  .floating-item.berry {
    width: 25px;
    height: 30px;
  }

  .floating-item.sparkle {
    width: 20px;
    height: 20px;
  }
}