/* 动画效果文件 */

/* top-module 浮动动画 */
#firstPage .top-module {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* title-logo 和 battle-icon 动画 */
#firstPage .top-module>img {
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

#firstPage .title-logo {
  animation-name: slideInLeft;
  animation-delay: 0.2s;
}

#firstPage .battle-icon {
  animation-name: slideInRight;
  animation-delay: 0.4s;
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-200%);
  }
  70% {
    transform: translateX(-45%);
  }
  85% {
    transform: translateX(-52%);
  }
  95% {
    transform: translateX(-49%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(200%);
  }
  70% {
    transform: translateX(-3%);
  }
  85% {
    transform: translateX(1%);
  }
  95% {
    transform: translateX(-0.5%);
  }
  100% {
    transform: translateX(0);
  }
}

/* team-sel 模块动画 */
#firstPage .team-pcik {
  animation: fadeIn 0.6s ease-out forwards;
  animation-delay: 0.8s;
  opacity: 0;
}

#firstPage .opt {
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  transform: translateX(0) scale(0.8);
  opacity: 0;
}

#firstPage .team-1 {
  animation-name: teamSlideInLeft;
  animation-delay: 1s;
}

#firstPage .team-2 {
  animation-name: teamSlideInRight;
  animation-delay: 1.2s;
}

#firstPage .team-3 {
  animation-name: teamSlideInLeft;
  animation-delay: 1.4s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes teamSlideInLeft {
  0% {
    transform: translateX(-100%) scale(0.8);
    opacity: 0;
  }
  60% {
    transform: translateX(10%) scale(1);
    opacity: 1;
  }
  75% {
    transform: translateX(-5%) scale(1);
  }
  90% {
    transform: translateX(2%) scale(1);
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes teamSlideInRight {
  0% {
    transform: translateX(100%) scale(0.8);
    opacity: 0;
  }
  60% {
    transform: translateX(-10%) scale(1);
    opacity: 1;
  }
  75% {
    transform: translateX(5%) scale(1);
  }
  90% {
    transform: translateX(-2%) scale(1);
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

/* 答题相关样式 */
#secondPage .opt.correct {
  background-color: #FDE64F;
  color: #FDFBEF;
}

#secondPage .opt.incorrect {
  background-color: #A32803;
}

#secondPage .opt.disabled {
  pointer-events: none;
}

/* 判断题选项样式 */
#secondPage .judge-icon {
  cursor: pointer;
  transition: all 0.3s ease;
}

#secondPage .judge-icon.correct {
  transform: scale(1.2);
}

#secondPage .judge-icon.incorrect {
  opacity: 0.6;
}

#secondPage .judge-icon.disabled {
  pointer-events: none;
}

/* 选项容器样式 */
#secondPage .options.hidden {
  display: none;
}

#secondPage .options.sel-visible {
  display: flex;
  flex-direction: column;
  gap: 8%;
  height: 69.3%;
}

#secondPage .options.judge-visible {
  display: flex;
}

/* Tip样式 */
#secondPage .tip.hidden {
  display: none;
}

#secondPage .tip.visible {
  display: block;
}

/* 通用隐藏类 */
.hidden {
  display: none !important;
}

/* 结果显示动画 */
.paper.result-out {
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  opacity: 0;
  transform: scale(0.9);
}

.rank-wrap.result-in {
  transition: opacity 0.5s ease-in, transform 0.5s ease-in;
  display: block;
  opacity: 1;
  transform: scale(1);
}

.rank-wrap.result-init {
  display: block;
  opacity: 0;
  transform: scale(1.1);
}

/* 得分动画 */
.count-animation {
  animation: countImpact 0.8s ease-out forwards;
}

@keyframes countImpact {
  0% {
    transform: translateX(-50%) scale(0.1);
    opacity: 0;
  }
  50% {
    transform: translateX(-50%) scale(1.5);
    opacity: 1;
  }
  70% {
    transform: translateX(-50%) scale(0.9);
  }
  90% {
    transform: translateX(-50%) scale(1.1);
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}

/* 排名项动画 */
.rank-item-animation {
  animation: rankImpact 0.8s ease-out forwards;
}

@keyframes rankImpact {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
  70% {
    transform: scale(0.9);
  }
  90% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 页面切换动画 */
#firstPage.page-out {
  transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
  transform: translate(-50%, -50%) rotateY(-90deg);
  opacity: 0;
}

#secondPage.page-in {
  transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
  display: block;
  transform: translate(-50%, -50%) rotateY(0);
  opacity: 1;
}

#secondPage.page-init {
  display: block;
  transform: translate(-50%, -50%) rotateY(90deg);
  opacity: 0;
}

#firstPage.page-hidden {
  display: none;
}