.s1-next, .s14-point {
  animation: s1-next-ani2 2s linear infinite;
}

.s1-next::before, .s14-point::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(https://game.gtimg.cn/images/taoyuan/cp/a20250318mbti/click-point.png) no-repeat center / contain;
  animation: s1-next-ani1 2s ease infinite;
}

.s14-point::after {
  animation: float-ani 2s ease infinite;
}

@keyframes s1-next-ani1 {
  0% { transform: scale(1); opacity: 1; }
  80% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes s1-next-ani2 {
  0% { transform: translateY(0); }
  15% { transform: translateY(0.02rem); }
  30% { transform: translateY(0); }
  45% { transform: translateY(-0.02rem); }
  60% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

@keyframes up-ani {
  0% { transform: translateY(0.5rem); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes light-ani {
  0% { opacity: 1; }
  9% { opacity: 1; }
  10% { opacity: 0; }
  20% { opacity: 0; }
  29% { opacity: 0; }
  30% { opacity: 1; }
  39% { opacity: 1; }
  40% { opacity: 0; }
  50% { opacity: 0; }
  59% { opacity: 0; }
  60% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes jump-ani {
  0% { transform: translate(0.3rem, -0.2rem); opacity: 0; }
  33% { transform: translate(0.2rem, -0.1rem); opacity: 1; }
  66% { transform: translate(0.1rem, -0.2rem); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes left-ani {
  0% { transform: translateX(-0.5rem); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes right-ani {
  0% { transform: translateX(0.5rem); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes huxi-ani {
  0% { transform: scale(1) rotate(0); }
  45% { transform: scale(0.7) rotate(5deg); }
  90% { transform: scale(1) rotate(0); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes eye-ani {
  0% { height: 0; }
  100% { height: 0.18rem; }
}

@keyframes shake-ani {
  0% { transform: rotate(0); }
  10% { transform: rotate(6deg); }
  20% { transform: rotate(0); }
  30% { transform: rotate(-6deg); }
  40% { transform: rotate(0); }
  50% { transform: rotate(6deg); }
  60% { transform: rotate(0); }
  100% { transform: rotate(0); }
}

@keyframes scale-ani {
  0% { transform: scale(1); }
  10% { transform: scale(1.1); }
  20% { transform: scale(1); }
  30% { transform: scale(1.1); }
  40% { transform: scale(1); }
  50% { transform: scale(6deg); }
  60% { transform: scale(1); }
  100% { transform: scale(1); }
}

@keyframes float-ani {
  0% { transform: translate(0); }
  10% { transform: translate(0.04rem, 0.04rem); }
  20% { transform: translate(0); }
  30% { transform: translate(0.04rem, 0.04rem); }
  40% { transform: translate(0); }
  50% { transform: translate(0); }
  60% { transform: translate(0); }
  100% { transform: translate(0); }
}

@keyframes mood-ani {
  0% {
    background-position: 0;
  }
  50% {
    background-position: -1.8rem;
  }
  100% {
    background-position: 0;
  }
}

@keyframes show-ani {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.up-ani, .s1-up-ani, .jump-ani, .left-ani, .right-ani, .show-ani {
  opacity: 0;
}

.huxi-ani {
  transform-origin: 0 80%;
}

.swiper-slide-active .up-ani, .active .up-ani {
  animation: up-ani 1s ease forwards;
}

.swiper-slide-active .light-ani {
  animation: light-ani 3s linear infinite;
}

.swiper-slide-active .light-ani {
  animation: light-ani 3s linear infinite;
}

.swiper-slide-active .jump-ani {
  animation: jump-ani 0.8s linear forwards;
}

.swiper-slide-active .left-ani {
  animation: left-ani 1s ease forwards;
}

.swiper-slide-active .right-ani {
  animation: right-ani 1s ease forwards;
}

.swiper-slide-active .huxi-ani {
  animation: huxi-ani 2.8s ease-in infinite;
}

.swiper-slide-active .eye-ani {
  animation: eye-ani 0.8s linear forwards;
}

.swiper-slide-active .shake-ani {
  animation: shake-ani 1.6s linear infinite;
}

.swiper-slide-active .scale-ani {
  animation: scale-ani 1.6s linear infinite;
}

.swiper-slide-active .mood-ani {
  animation: mood-ani infinite 1s steps(3, start);
}

.swiper-slide-active .show-ani {
  animation: show-ani linear 0.3s forwards;
}

.slide1.end .s1-up-ani {
  animation: up-ani 1s ease forwards;
}

.ani-delay1 { animation-delay: 0.1s !important; }
.ani-delay2 { animation-delay: 0.2s !important; }
.ani-delay3 { animation-delay: 0.3s !important; }
.ani-delay4 { animation-delay: 0.4s !important; }
.ani-delay5 { animation-delay: 0.5s !important; }
.ani-delay6 { animation-delay: 0.6s !important; }
.ani-delay7 { animation-delay: 0.7s !important; }
.ani-delay8 { animation-delay: 0.8s !important; }
.ani-delay9 { animation-delay: 0.9s !important; }
.ani-delay10 { animation-delay: 1.0s !important; }
.ani-delay11 { animation-delay: 1.1s !important; }
.ani-delay12 { animation-delay: 1.2s !important; }
.ani-delay13 { animation-delay: 1.3s  !important }
.ani-delay14 { animation-delay: 1.4s  !important }
.ani-delay15 { animation-delay: 1.5s  !important }
.ani-delay16 { animation-delay: 1.6s  !important }
.ani-delay17 { animation-delay: 1.7s  !important }
.ani-delay18 { animation-delay: 1.8s  !important }
.ani-delay19 { animation-delay: 1.9s !important }
.ani-delay20 { animation-delay: 2.0s !important }
.ani-delay21 { animation-delay: 2.1s !important }
.ani-delay22 { animation-delay: 2.2s !important }
.ani-delay23 { animation-delay: 2.3s !important }
.ani-delay24 { animation-delay: 2.4s !important }
.ani-delay25 { animation-delay: 2.5s !important }
.ani-delay26 { animation-delay: 2.6s !important }
.ani-delay27 { animation-delay: 2.7s !important }
.ani-delay28 { animation-delay: 2.8s !important }
.ani-delay29 { animation-delay: 2.9s !important }
.ani-delay30 { animation-delay: 3.0s !important }
.ani-delay32 { animation-delay: 3.2s !important }
.ani-delay34 { animation-delay: 3.4s !important }
.ani-delay35 { animation-delay: 3.5s !important }
.ani-delay36 { animation-delay: 3.6s !important }
.ani-delay38 { animation-delay: 3.8s !important }
.ani-delay40 { animation-delay: 4.0s !important }
.ani-delay42 { animation-delay: 4.2s !important }
.ani-delay44 { animation-delay: 4.4s !important }
.ani-delay45 { animation-delay: 4.5s !important }
.ani-delay46 { animation-delay: 4.6s !important }
.ani-delay50 { animation-delay: 5.0s !important }

.s1-desc1, .s1-desc2 {
  transition: opacity 0.5s;
}

.slide1.end .s1-desc1 {
  opacity: 0;
}

.slide1.end .s1-desc2 {
  opacity: 1;
  transition-delay: 0.5s;
}

.q-btn1, .q-btn2 {
  opacity: 0;
  transition: transform 1s, opacity 1s;
  animation-delay: 0.6s, 0.6s;
}

.q-btn1 {
  transform: translateX(-0.7rem);
}

.q-btn2 {
  transform: translateX(0.7rem);
}

.swiper-slide-active .q-btn1,
.swiper-slide-active .q-btn2 {
  transform: translateX(0);
  opacity: 1;
}