/* 全站页面过场：当前场景式黑幕的运行时锁定规则。 */
html.songline-page-transitioning,
html.songline-page-transitioning body{
  overscroll-behavior:none;
}
html.songline-page-transitioning body{
  cursor:progress;
}
html.songline-page-transitioning main.container{
  will-change:transform, opacity;
}

/* v2：场景式穿屏过场。覆盖首版淡入黑幕，保持同一模块边界。 */
.songline-page-transition-overlay{
  position:fixed;
  z-index:2147483000;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  top:-12lvh;
  left:-2vw;
  width:104vw;
  height:124lvh;
  overflow:hidden;
  visibility:hidden;
  opacity:1;
  background:#020304;
  transform:translate3d(0,0,0);
  transition:none;
  will-change:transform;
}
.songline-page-transition-overlay::before{
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.025), transparent 44%);
}
.songline-page-transition-overlay.is-visible{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}
.songline-page-transition-overlay.is-forward:not(.is-covering):not(.is-leaving){
  transform:translate3d(0,112lvh,0);
}
.songline-page-transition-overlay.is-forward.is-covering{
  transform:translate3d(0,0,0);
  transition:transform .42s cubic-bezier(.16,.82,.22,1);
}
.songline-page-transition-overlay.is-forward.is-leaving{
  transform:translate3d(0,-112lvh,0);
  transition:transform .42s cubic-bezier(.54,0,.86,.42);
}
.songline-page-transition-overlay.is-backward:not(.is-covering):not(.is-leaving){
  transform:translate3d(0,-112lvh,0);
}
.songline-page-transition-overlay.is-backward.is-covering{
  transform:translate3d(0,0,0);
  transition:transform .42s cubic-bezier(.16,.82,.22,1);
}
.songline-page-transition-overlay.is-backward.is-leaving{
  transform:translate3d(0,112lvh,0);
  transition:transform .42s cubic-bezier(.54,0,.86,.42);
}
.songline-page-transition-overlay.is-right:not(.is-covering):not(.is-leaving){transform:translate3d(112vw,0,0)}
.songline-page-transition-overlay.is-right.is-covering{transform:translate3d(0,0,0);transition:transform .42s cubic-bezier(.16,.82,.22,1)}
.songline-page-transition-overlay.is-right.is-leaving{transform:translate3d(-112vw,0,0);transition:transform .42s cubic-bezier(.54,0,.86,.42)}
.songline-page-transition-overlay.is-left:not(.is-covering):not(.is-leaving){transform:translate3d(-112vw,0,0)}
.songline-page-transition-overlay.is-left.is-covering{transform:translate3d(0,0,0);transition:transform .42s cubic-bezier(.16,.82,.22,1)}
.songline-page-transition-overlay.is-left.is-leaving{transform:translate3d(112vw,0,0);transition:transform .42s cubic-bezier(.54,0,.86,.42)}
.songline-page-transition-overlay.is-same{opacity:0;transition:opacity .36s ease}
.songline-page-transition-overlay.is-same.is-covering{opacity:1}
.songline-page-transition-overlay.is-same.is-leaving{opacity:0;transition:opacity .44s ease}
main.container.songline-page-exit-forward,
main.container.songline-page-exit-backward,
main.container.songline-page-exit-right,
main.container.songline-page-exit-left,
main.container.songline-page-exit-same{
  transition:transform .42s cubic-bezier(.2,.7,.2,1), opacity .58s ease;
  opacity:0;
}
main.container.songline-page-exit-forward{transform:translate3d(0,-126px,0) scale(.97)}
main.container.songline-page-exit-backward{transform:translate3d(0,126px,0) scale(.97)}
main.container.songline-page-exit-right{transform:translate3d(-126px,0,0) scale(.97)}
main.container.songline-page-exit-left{transform:translate3d(126px,0,0) scale(.97)}
main.container.songline-page-exit-same{transform:scale(.985)}
main.container.songline-page-enter-forward{transform:translate3d(0,132px,0) scale(.97)}
main.container.songline-page-enter-backward{transform:translate3d(0,-132px,0) scale(.97)}
main.container.songline-page-enter-right{transform:translate3d(132px,0,0) scale(.97)}
main.container.songline-page-enter-left{transform:translate3d(-132px,0,0) scale(.97)}
main.container.songline-page-enter-same{transform:scale(.985)}
main.container.songline-page-enter-active{
  transform:translate3d(0,0,0);
  opacity:1;
  transition:transform .62s cubic-bezier(.16,.84,.2,1), opacity .54s ease;
}
@media(max-width:760px){
  .songline-page-transition-loader{width:70px;height:70px}
  main.container.songline-page-exit-forward{transform:translate3d(0,-84px,0) scale(.978)}
  main.container.songline-page-exit-backward{transform:translate3d(0,84px,0) scale(.978)}
  main.container.songline-page-exit-right{transform:translate3d(-84px,0,0) scale(.978)}
  main.container.songline-page-exit-left{transform:translate3d(84px,0,0) scale(.978)}
  main.container.songline-page-enter-forward{transform:translate3d(0,90px,0) scale(.978)}
  main.container.songline-page-enter-backward{transform:translate3d(0,-90px,0) scale(.978)}
  main.container.songline-page-enter-right{transform:translate3d(90px,0,0) scale(.978)}
  main.container.songline-page-enter-left{transform:translate3d(-90px,0,0) scale(.978)}
}
/* 手机端由黑幕承接场景变化，内容只淡入淡出，避免新页面先偏移一帧再归位。 */
@media(max-width:980px){
  main.container.songline-page-exit-forward,
  main.container.songline-page-exit-backward,
  main.container.songline-page-exit-right,
  main.container.songline-page-exit-left,
  main.container.songline-page-exit-same,
  main.container.songline-page-enter-forward,
  main.container.songline-page-enter-backward,
  main.container.songline-page-enter-right,
  main.container.songline-page-enter-left,
  main.container.songline-page-enter-same,
  main.container.songline-page-enter-active{transform:none!important}
}
@media(prefers-reduced-motion: reduce){
  .songline-page-transition-overlay{
    top:0;
    left:0;
    width:100vw;
    height:100lvh;
    opacity:0;
    transform:none!important;
    transition:opacity .14s ease!important;
  }
  .songline-page-transition-overlay.is-covering{opacity:1}
  .songline-page-transition-overlay.is-leaving{opacity:0}
  .songline-page-transition-loader{display:none}
  main.container.songline-page-exit-forward,
  main.container.songline-page-exit-backward,
  main.container.songline-page-exit-right,
  main.container.songline-page-exit-left,
  main.container.songline-page-exit-same,
  main.container.songline-page-enter-forward,
  main.container.songline-page-enter-backward,
  main.container.songline-page-enter-right,
  main.container.songline-page-enter-left,
  main.container.songline-page-enter-same,
  main.container.songline-page-enter-active{
    transform:none!important;
    transition:opacity .14s ease!important;
  }
}