/* 开屏遮罩：一直盖到 JS 主动撤掉，不依赖 body.page-loading（去掉该类会瞬间放开全部 transition，容易闪） */

html:has(#splash-screen),
body.page-loading {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10050;
  width: 100vw;
  height: 100vh;
  background-color: #f9f9f9;
}

html[data-bs-theme="dark"] .splash-screen {
  background-color: #151521;
}

.splash-screen.splash-hide {
  animation: splash-fade-out 0.32s ease forwards;
  pointer-events: none;
}

@keyframes splash-fade-out {
  to {
    opacity: 0;
  }
}

.splash-screen .loader {
  position: absolute;
  top: 50vh;
  left: 50vw;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  perspective: 800px;
}

.splash-screen .loader .loader-item {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.splash-screen .loader .loader-item:nth-child(1) {
  border-bottom: 6px solid #f1416c;
  transform: rotateX(35deg) rotateY(-45deg);
  animation: splash-rotate-one 1s linear infinite;
}

.splash-screen .loader .loader-item:nth-child(2) {
  border-right: 6px solid #009ef7;
  transform: rotateX(50deg) rotateY(10deg);
  animation: splash-rotate-two 1s linear infinite;
}

.splash-screen .loader .loader-item:nth-child(3) {
  border-top: 6px solid #50cd89;
  transform: rotateX(35deg) rotateY(55deg);
  animation: splash-rotate-three 1s linear infinite;
}

@keyframes splash-rotate-one {
  to {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes splash-rotate-two {
  to {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes splash-rotate-three {
  to {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}