/* 优雅淡入淡出转场 */
.scene-transition {
  position: fixed;
  inset: 0;
  z-index: 800;
  pointer-events: none;
  visibility: hidden;
}

.scene-transition[hidden] {
  display: none;
}

.scene-transition--active {
  visibility: visible;
  pointer-events: auto;
}

.scene-transition__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    168deg,
    rgba(14, 12, 22, 0.97) 0%,
    rgba(26, 20, 38, 0.96) 45%,
    rgba(14, 12, 20, 0.98) 100%
  );
  opacity: 0;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition:
    opacity 0.9s ease-in-out,
    backdrop-filter 0.9s ease-in-out,
    -webkit-backdrop-filter 0.9s ease-in-out;
}

.scene-transition--in .scene-transition__fade {
  opacity: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.scene-transition--out .scene-transition__fade {
  opacity: 0;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}

/* 标题轻柔淡出 */
#screen-title.title--exit .title-menu {
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.85s ease-in-out;
}

#screen-title.title--exit .title-hint {
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
}

#screen-title.title--exit .title-character-wrap {
  opacity: 0;
  transition: opacity 0.9s ease-in-out;
}

.has-title-video #screen-title.title--exit {
  opacity: 1;
}

/* 游戏画面渐入 */
#screen-game.game--entering .game-stage,
#screen-game.game--entering .game-ui,
#screen-game.game--entering .game-toolbar,
#screen-game.game--entering .game-hud {
  opacity: 0;
}

#screen-game.game--ready .game-stage {
  animation: fade-in-soft 1.15s ease-in-out forwards;
}

#screen-game.game--ready .game-ui {
  animation: fade-in-soft 1.1s ease-in-out 0.15s forwards;
}

#screen-game.game--ready .game-toolbar {
  animation: fade-in-soft 1s ease-in-out 0.22s forwards;
}

#screen-game.game--ready .game-hud {
  animation: fade-in-soft 1s ease-in-out 0.28s forwards;
}

/* 返回标题时轻柔淡出 */
#screen-game.game--exit .game-stage,
#screen-game.game--exit .game-ui,
#screen-game.game--exit .game-toolbar,
#screen-game.game--exit .game-hud {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

#screen-title.title--return .title-menu,
#screen-title.title--return .title-hint,
#screen-title.title--return .title-character-wrap {
  opacity: 0;
}

#screen-title.title--return.title--ready .title-menu,
#screen-title.title--return.title--ready .title-hint {
  animation: fade-in-soft 1s ease-in-out 0.2s forwards;
}

#screen-title.title--return.title--ready .title-character-wrap {
  animation: fade-in-soft 1.1s ease-in-out 0.1s forwards;
}

@keyframes fade-in-soft {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body.is-transitioning .title-btn {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .scene-transition__fade {
    transition-duration: 0.25s;
  }

  #screen-game.game--ready .game-stage,
  #screen-game.game--ready .game-ui,
  #screen-game.game--ready .game-toolbar,
  #screen-game.game--ready .game-hud {
    animation-duration: 0.25s;
    animation-delay: 0s;
  }
}