/* --- Loading 动画库 --- */
/* 容器透视（如果用到3D效果） */
.loader-container.perspective-y, .loader-container.perspective-x { perspective: 2500px; }

/* 核心动画控制类 */
.load-item {
  opacity: 0; /* 初始隐藏 */
  transform: none;
  animation-fill-mode: forwards;
  animation-duration: 500ms; /* 统一调整为 0.8s，更柔和 */
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 使用更优雅的贝塞尔曲线 */
}

/* 延迟控制 */
.load-item[data-delay] { opacity: 0; }
.load-item.add-numbers { opacity: 1; }

/* --- 简约风格动画 --- */

/* 1. 向上浮现 (主推) */
.fade-in-up.is-visible { animation-name: fadeInUp; }
@keyframes fadeInUp {
  from { transform: translateY(300px); opacity: 0; } /* 距离稍微改小，更精致 */
  to { transform: translateY(0); opacity: 1; }
}

/* 2. 向下浮现 */
.fade-in-down.is-visible { animation-name: fadeInDown; }
@keyframes fadeInDown {
  from { transform: translateY(-300px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 3. 向左浮现 */
.fade-in-left.is-visible { animation-name: fadeInLeft; }
@keyframes fadeInLeft {
  from { transform: translateX(300px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* 4. 向右浮现 */
.fade-in-right.is-visible { animation-name: fadeInRight; }
@keyframes fadeInRight {
  from { transform: translateX(-300px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* 5. 中心放大 (用于强调产品或图片) */
.scale-up-center.is-visible { animation-name: scaleUp; animation-duration: 400ms; }
@keyframes scaleUp {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 5. 渐显 */
.scale-show.is-visible { animation-name: scaleUp; animation-duration: 2000ms; }
@keyframes scaleUp {
  0% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.scale-show2.is-visible { animation-name: scaleUp; animation-duration: 1500ms; }
@keyframes scaleUp {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.gradually-show.is-visible { animation-name: graduallyUp; animation-duration: 800ms; }
@keyframes graduallyUp {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- 从小变大出现 (配合逐字显示) --- */
.load-item.scale-in {
    /* 初始状态：不可见、缩小 */
    opacity: 0;
    transform: scale(4);
    display: inline-block;
    animation-duration: 350ms;
}
.load-item.scale-in.is-visible {
    animation-name: scaleInEffect;
}

@keyframes scaleInEffect {
    from { 
        opacity: 0; 
        transform: scale(4); 
    }
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}

.load-item.scale-in-new {
    /* 初始状态：不可见、缩小 */
    opacity: 0;

    display: inline-block;
    animation-duration: 300ms;
}
.load-item.scale-in-new.is-visible {
    animation-name: scaleInEffect;
}

@keyframes scaleInEffect {
    from { 
        opacity: 0; 
        transform: rotate(60deg) translate(80%,-30%);
    }
    to { 
        opacity: 1; 
        transform: rotate(0) translate(0,0);
    }
}

/* --- 新增：弹性跳动出现效果 (单循环，停留在 scale(1)) --- */
.bounce-in-single.is-visible { 
  animation-name: bounceInEffect; 
  animation-duration: 800ms; /* 动画持续时间，可调整 */
  /* 由于 .load-item 已经设置了 animation-fill-mode: forwards，
     元素在动画结束后会保持在 100% 关键帧定义的状态 (scale(1))，不会消失。*/
}

@keyframes bounceInEffect {
  0% { 
    opacity: 0; 
    transform: scale(0); /* 初始从小开始 */
  }
  18% { 
    opacity: 1; 
    transform: scale(1.3); /* 第一次超调：放大 */
  }
  36% { 
    transform: scale(0.8); /* 第一次回弹：缩小 */
  }
  54% { 
    transform: scale(1.15); /* 第二次超调：再次放大 */
  }
  76% { 
    transform: scale(0.9); /* 第二次回弹：缩小 */
  }
  100% { 
    opacity: 1;
    transform: scale(1); /* 最终状态：停留在正常大小 */
  }
}