/* PC 端页面动画 */
:root {
  --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --anim-duration: 0.75s;
}

@keyframes animFadeUp {
  from {
    opacity: 0;
    transform: translateY(36px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes animFadeDown {
  from {
    opacity: 0;
    transform: translateY(-28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes animFadeLeft {
  from {
    opacity: 0;
    transform: translateX(48px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes animFadeRight {
  from {
    opacity: 0;
    transform: translateX(-48px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes animScaleIn {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes animGlowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(46, 140, 255, 0.35));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(46, 180, 255, 0.75));
    transform: scale(1.04);
  }
}

@keyframes animHomeReserveIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(36px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes animHomeReserveGlow {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(46, 140, 255, 0.35));
    transform: translateX(-50%) scale(1);
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(46, 180, 255, 0.75));
    transform: translateX(-50%) scale(1.04);
  }
}

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

@keyframes animModalIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes animNavGlow {
  from {
    text-shadow: 0 0 0 rgba(46, 140, 255, 0);
  }
  to {
    text-shadow: 0 0 12px rgba(80, 170, 255, 0.55);
  }
}

/* 入场基础态 */
.anim-enter {
  opacity: 0;
  will-change: opacity, transform;
}

.anim-enter-fade-up.anim-is-visible {
  animation: animFadeUp var(--anim-duration) var(--anim-ease) forwards;
}

.anim-enter-fade-down.anim-is-visible {
  animation: animFadeDown var(--anim-duration) var(--anim-ease) forwards;
}

.anim-enter-fade-left.anim-is-visible {
  animation: animFadeLeft var(--anim-duration) var(--anim-ease) forwards;
}

.anim-enter-fade-right.anim-is-visible {
  animation: animFadeRight var(--anim-duration) var(--anim-ease) forwards;
}

.anim-enter.anim-is-visible {
  animation-fill-mode: forwards;
}

.anim-enter-scale.anim-is-visible {
  animation: animScaleIn var(--anim-duration) var(--anim-ease) forwards;
}

.anim-loop-glow {
  animation: animGlowPulse 2.2s ease-in-out infinite;
}

.anim-loop-float {
  animation: animFloat 2.6s ease-in-out infinite;
}

.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.35s; }
.anim-delay-4 { animation-delay: 0.5s; }
.anim-delay-5 { animation-delay: 0.65s; }
.anim-delay-6 { animation-delay: 0.8s; }
.anim-delay-7 { animation-delay: 0.95s; }
.anim-delay-8 { animation-delay: 1.1s; }

.page--home .home-reserve.anim-enter-fade-up.anim-is-visible {
  animation: animHomeReserveIn var(--anim-duration) var(--anim-ease) forwards;
}

.page--home .home-reserve.anim-loop-glow {
  animation: animHomeReserveGlow 2.2s ease-in-out infinite;
}

.page--home .home-reserve.anim-loop-glow:hover {
  animation: animHomeReserveGlow 2.2s ease-in-out infinite;
}

.nav-item.active .nav-cn {
  animation: animNavGlow 2.4s ease-in-out infinite alternate;
}

.modal-overlay.is-open .reserve-modal,
.modal-overlay.is-open .success-modal {
  animation: animModalIn 0.45s var(--anim-ease) forwards;
}

.warriors-stats-num {
  display: inline-block;
}

.warriors-stats.anim-is-visible .warriors-stats-num {
  animation: animGlowPulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .anim-enter,
  .anim-enter-fade-up,
  .anim-enter-fade-down,
  .anim-enter-fade-left,
  .anim-enter-fade-right,
  .anim-enter-scale,
  .anim-loop-glow,
  .anim-loop-float,
  .page--home .home-reserve.anim-enter-fade-up.anim-is-visible,
  .page--home .home-reserve.anim-loop-glow,
  .nav-item.active .nav-cn,
  .warriors-stats.anim-is-visible .warriors-stats-num,
  .modal-overlay.is-open .reserve-modal,
  .modal-overlay.is-open .success-modal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .page--home .home-reserve {
    transform: translateX(-50%) !important;
  }
}