/* 翻转动效的容器需要设置perspective */
.loader-container.perspective-y,
.loader-container.perspective-x {
  perspective: 2500px;
}

/* 所有动效元素的初始状态 */
.load-item {
  /* 初始状态：不可见 */
  opacity: 0;
  transform: none;
  animation-fill-mode: forwards;
  animation-duration: 500ms;
  animation-timing-function: ease-in-out;
}

/* 带有延迟的元素，确保在动画开始前不可见 */
.load-item[data-delay] {
  opacity: 0;
}

/* 当元素可见时，应用动画效果 */
/*.load-item.is-visible {
  opacity: 1;
}*/
.load-item.add-numbers {
  opacity: 1;
}

/* --- 从各个方向移动并渐现 --- */

.fade-in-up.is-visible { animation-name: fadeInUp; }
@keyframes fadeInUp {
  from { transform: translateY(100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.fade-in-down.is-visible { animation-name: fadeInDown; }
@keyframes fadeInDown {
  from { transform: translateY(-100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.fade-in-left.is-visible { animation-name: fadeInLeft; }
@keyframes fadeInLeft {
  from { transform: translateX(50%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.fade-in-right.is-visible { animation-name: fadeInRight; }
@keyframes fadeInRight {
  from { transform: translateX(-50%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.fade-in-left100.is-visible { animation-name: fadeInLeft100; animation-duration: 700ms;}
@keyframes fadeInLeft100 {
  from { transform: translateX(100%); opacity: 0.5; }
  to { transform: translateX(0); opacity: 1; }
}

.fade-in-right100.is-visible { animation-name: fadeInRight100; animation-duration: 700ms;}
@keyframes fadeInRight100 {
  from { transform: translateX(-100%); opacity: 0.5; }
  to { transform: translateX(0); opacity: 1; }
}

/* --- 从小变大（一次）--- */
.scale-up-center.is-visible {
  animation-name: scaleUp;
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
@keyframes scaleUp {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- 从大变小（一次）--- */
.scale-down.is-visible {
  animation-name: scaleDown;
  animation-duration: 800ms;
}
.scale-down30.is-visible {
  animation-name: scaleDown30;
  animation-duration: 800ms;
}
.scale-down12.is-visible {
  animation-name: scaleDown12;
  animation-duration: 500ms;
}
@keyframes scaleDown {
  from { transform: scale(2); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes scaleDown30 {
  from { transform: scale(10); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes scaleDown15 {
  from { transform: scale(1.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes scaleDown12 {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* --- 翻转动效 --- */
.flip-horizontal.is-visible { animation-name: flipInX; animation-duration: 800ms;}
@keyframes flipInX {
  from { transform: perspective(2500px) rotateX(-100deg); opacity: 0; }
  to { transform: perspective(2500px) rotateX(0deg); opacity: 1; }
}

.flip-in-y-left.is-visible { animation-name: flipInYLeft; animation-duration: 800ms;}
@keyframes flipInYLeft {
  from { transform: perspective(2500px) rotateY(100deg); opacity: 0; }
  to { transform: perspective(2500px) rotateY(0deg); opacity: 1; }
}

.flip-in-y-right.is-visible { animation-name: flipInYRight; animation-duration: 800ms;}
@keyframes flipInYRight {
  from { transform: perspective(2500px) rotateY(-100deg); opacity: 0; }
  to { transform: perspective(2500px) rotateY(0deg); opacity: 1; }
}

.flip-in-x-bottom.is-visible { animation-name: flipInXBottom; animation-duration: 800ms;}
@keyframes flipInXBottom {
  from { transform: perspective(2500px) rotateX(100deg); opacity: 0; }
  to { transform: perspective(2500px) rotateX(0deg); opacity: 1; }
}

/* --- 上下弹跳 --- */
.bounce-vertical.is-visible {
  animation-name: bounceVertical;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}
@keyframes bounceVertical {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: translateY(-35%); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

/* --- 旋转淡入 --- */
.rotate-fade-in.is-visible { animation-name: rotateFadeIn; }
@keyframes rotateFadeIn {
  from { transform: rotate(-90deg); opacity: 0; }
  to { transform: rotate(0deg); opacity: 1; }
}

/* --- 从小变大（循环）--- */
.scale-up-repeat.is-visible {
  animation-name: scaleUpRepeat;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}
@keyframes scaleUpRepeat {
  0%, 100% { transform: scale(0.5); opacity: 0.5; }
  50% { transform: scale(1); opacity: 1; }
}

/* --- 左右晃动 --- */
.shake-horizontal.is-visible {
  animation-name: shakeHorizontal;
  animation-duration: 0.8s;
  animation-iteration-count: infinite;
  opacity: 1;
}
@keyframes shakeHorizontal {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}