/* 动画关键帧定义文件 */

/* 浮动动画 */
@keyframes float {
  0%,
  100% {
    /* 保留元素进入动画后的旋转状态，只改变Y轴位置 */
    transform: translateY(0px) rotate(var(--initial-rotate, 0deg));
  }
  50% {
    transform: translateY(-20px)
      rotate(calc(var(--initial-rotate, 0deg) + 5deg));
  }
}

/* 从左侧滑入动画 */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100%) rotate(var(--initial-rotate, -15deg));
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(var(--initial-rotate, -15deg));
  }
}

/* 从右侧滑入动画 */
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(100%) rotate(var(--initial-rotate, 15deg));
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(var(--initial-rotate, 15deg));
  }
}

/* 从底部滑入动画 */
@keyframes slideInFromBottom {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate3d(0, 80px, 0) scale(0.8);
    -ms-transform: translate3d(0, 80px, 0) scale(0.8);
    transform: translate3d(0, 80px, 0) scale(0.8);
  }
  1% {
    visibility: visible;
  }
  60% {
    opacity: 0.9;
    -webkit-transform: translate3d(0, -8px, 0) scale(1.05);
    -ms-transform: translate3d(0, -8px, 0) scale(1.05);
    transform: translate3d(0, -8px, 0) scale(1.05);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

/* 手机浮动动画 */
@keyframes phoneFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* 右侧滑入动画 */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 标题发光动画 */
@keyframes titleGlow {
  from {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  to {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 20px rgba(44, 62, 80, 0.3);
  }
}

/* 副标题滑动动画 */
@keyframes subtitleSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 淡入上升动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(200px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 左侧滑入动画 */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 缩放进入动画 */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

/* 脉冲动画 */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1); /* 动画开始和结束时为原始大小 */
  }
  50% {
    transform: scale(1.25); /* 动画中间点放大到1.25倍 */
  }
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    -ms-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    -ms-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    -ms-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    -ms-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    -ms-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}