@charset "UTF-8";
@keyframes bounce {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  15% {
    transform: translateY(-0.4rem);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    transform: translateY(-0.3rem);
    animation-timing-function: ease-in;
  }
  62% {
    transform: translateY(-0.2rem);
    animation-timing-function: ease-in;
  }
  82% {
    transform: translateY(-0.01rem);
    animation-timing-function: ease-in;
  }
  92% {
    transform: translateY(-0.03rem);
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  90% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

@keyframes typing {
  from {
    width: 0;
    opacity: 1;
  }
  to {
    width: 8.98rem;
    opacity: 1;
  }
}

/* 外边框使用X轴方向的缩放 */
@keyframes oneAnimation {
  0% {
    transform: scaleX(0.3);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(50%, 50%, 0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
  75% {
    opacity: 1;
    transform: translate3d(20%, 20%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  70% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes scale {
  0% {
    background-size: 130% 130%;
  }
  100% {
    background-size: 100% 100%;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    height: 0;
  }
  100% {
    opacity: 1;
    height: 6.74rem;
  }
}

@keyframes move-left-bottom {
  0% {
    left: 0;
    bottom: 0;
    opacity: 1;
  }
  100% {
    left: -120vw;
    bottom: -120vh;
    opacity: 0;
  }
}

@keyframes move-left-top {
  0% {
    left: 0;
    top: 0;
    opacity: 1;
  }
  100% {
    left: -120vw;
    top: -344px;
    opacity: 0;
  }
}

@keyframes move-right-top {
  0% {
    top: 0;
    right: 0;
    opacity: 1;
  }
  100% {
    top: -120vh;
    right: -120vw;
    opacity: 0;
  }
}

@keyframes move-right-bottom {
  0% {
    bottom: 0;
    right: 0;
    opacity: 1;
  }
  100% {
    bottom: -120vh;
    right: -120vw;
    opacity: 0;
  }
}

@keyframes move {
  0% {
    opacity: 0;
    transform: rotate3d(1, 1, 1, 90deg) scale(5);
  }
  30% {
    opacity: 0;
    transform: rotate3d(1, 1, 1, 90deg) scale(5);
  }
  to {
    opacity: 1;
    transform: rotate3d(0, 0, 0, 0deg) scale(1);
  }
}

@keyframes opacityMove {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: rotate3d(0, 0, 0, 0deg) scale(1);
  }
}

@keyframes scaleCircle {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 封面主标题：中心缩放弹入 */
@keyframes coverZoomIn {
  0% {
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/* 封面副标题：下方上移淡入 */
@keyframes coverFadeUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.6rem, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* 封面底部细条：横向展开 */
@keyframes coverExpandX {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* 封面左侧小图标：左侧弹入带回弹 */
@keyframes coverBounceIn {
  0% {
    opacity: 0;
    transform: translate3d(-1.2rem, 0, 0);
  }
  70% {
    opacity: 1;
    transform: translate3d(0.1rem, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* 封面点击按钮：缩放弹跳入场 */
@keyframes coverPopIn {
  0% {
    opacity: 0;
    transform: scale3d(0.6, 0.6, 0.6);
  }
  50% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/* 封面点击按钮：弹动两下停顿一下，吸引点击 */
@keyframes coverPulse {
  0%,
  100% {
    transform: scale(1);
  }
  /* 第一弹 */
  12.5% {
    transform: scale(1.12);
  }
  25% {
    transform: scale(1);
  }
  /* 第二弹，幅度稍小 */
  37.5% {
    transform: scale(1.06);
  }
  50% {
    transform: scale(1);
  }
}

/* 封面飞出：从左边飞出 */
@keyframes coverFlyOut {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

/* 内容页推入：从视口右边滑入 */
@keyframes screenPushIn {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes toast1Move {
  0% {
    left: 21.3rem;
    top: 4.5rem;
  }
  100% {
    left: 21.5rem;
    top: 4.3rem;
  }
}

@keyframes toast11Move {
  0% {
    left: 5.6rem;
  }
  100% {
    left: 4.5rem;
  }
}

@keyframes bg-2-3Move {
  0% {
    left: 11.59rem;
    top: 3.28rem;
  }
  100% {
    left: 10rem;
    top: 3.6rem;
  }
}

@keyframes bg-2-4Move {
  0% {
    left: 17.2rem;
    top: 2.9rem;
  }
  100% {
    left: 16.73rem;
    top: 2.64rem;
  }
}

@keyframes bg-2-5Move {
  0% {
    left: 23.15rem;
    top: 5.65rem;
  }
  100% {
    left: 23.55rem;
    top: 5.45rem;
  }
}

@keyframes bg-2-6Move {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-0.5rem, -1rem, 0);
  }
  100% {
    transform: translate3d(-3rem, -0.8rem, 0);
  }
}

@keyframes bg-2-7Move {
  0% {
    transform: rotate(30deg);
  }
  50% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(30deg);
  }
}

@keyframes bg-2-8Move {
  0% {
    left: 14.15rem;
  }
  100% {
    left: 14.55rem;
  }
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes bg-2-15Move {
  0% {
    left: 11.3rem;
    top: 3.39rem;
  }
  100% {
    left: 16.19rem;
    top: 3.39rem;
  }
}

@keyframes bg-2-16Move {
  0% {
    left: 15.88rem;
    top: 3.21rem;
  }
  100% {
    left: 20rem;
    top: 2.5rem;
  }
}

@keyframes bg-2-17Move {
  0% {
    left: 19.36rem;
    top: 2.29rem;
    transform: rotate(0);
  }
  100% {
    left: 23.36rem;
    top: 2.6rem;
    transform: rotate(10deg);
  }
}

@keyframes scaleIn {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

@keyframes musicRotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}