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

@keyframes mFadeUp {
  from {
    opacity: 0;
    transform: translateY(0.18rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mFadeDown {
  from {
    opacity: 0;
    transform: translateY(-0.12rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mScaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mGlowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 0.04rem rgba(46, 140, 255, 0.4));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 0.12rem rgba(80, 190, 255, 0.85));
    transform: scale(1.06);
  }
}

@keyframes mArrowBounce {
  0%, 100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.12) translateY(0.06rem);
    opacity: 0.88;
  }
}

@keyframes mModalIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.m-anim-enter {
  opacity: 0;
  will-change: opacity, transform;
}

.m-anim-fade-up.m-anim-play {
  animation: mFadeUp var(--m-anim-duration) var(--m-anim-ease) forwards;
}

.m-anim-fade-down.m-anim-play {
  animation: mFadeDown var(--m-anim-duration) var(--m-anim-ease) forwards;
}

.m-anim-scale-in.m-anim-play {
  animation: mScaleIn var(--m-anim-duration) var(--m-anim-ease) forwards;
}

.m-anim-glow {
  animation: mGlowPulse 1.8s ease-in-out infinite;
}

.m-anim-bounce {
  animation: mArrowBounce 1.6s ease-in-out infinite;
}

.m-anim-delay-1 { animation-delay: 0.08s; }
.m-anim-delay-2 { animation-delay: 0.16s; }
.m-anim-delay-3 { animation-delay: 0.26s; }
.m-anim-delay-4 { animation-delay: 0.36s; }
.m-anim-delay-5 { animation-delay: 0.48s; }
.m-anim-delay-6 { animation-delay: 0.6s; }
.m-anim-delay-7 { animation-delay: 0.72s; }
.m-anim-delay-8 { animation-delay: 0.84s; }

.mobile-modal-overlay.is-open .m-reserve-modal,
.mobile-modal-overlay.is-open .m-success-modal {
  animation: mModalIn 0.4s var(--m-anim-ease) forwards;
}

.reserve-btn img.m-anim-glow {
  animation: mGlowPulse 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .m-anim-enter,
  .m-anim-fade-up,
  .m-anim-fade-down,
  .m-anim-scale-in,
  .m-anim-glow,
  .m-anim-bounce,
  .mobile-modal-overlay.is-open .m-reserve-modal,
  .mobile-modal-overlay.is-open .m-success-modal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}