/* The same full-screen transition is used after sign-in and during sign-out. */
#loading-screen,
.tsumi-signout-screen {
  position: fixed;
  inset: 0;
  z-index: 2147483500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 44%, #352032 0, #180e1a 53%, #0b070d 100%);
  color: #fff1f6;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
#loading-screen.show,
.tsumi-signout-screen.show { opacity: 1; visibility: visible; }
#loading-screen img,
.tsumi-signout-mark {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 0 18px;
  object-fit: contain;
  filter: drop-shadow(0 0 15px rgba(243, 161, 188, .35));
  animation: tsumi-transition-logo 1.2s ease-in-out infinite alternate;
}
#loading-screen h2,
.tsumi-signout-screen h2 {
  margin: 0 0 8px;
  color: #fff1f6;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1.15;
}
#loading-screen p,
.tsumi-signout-screen p { margin: 0; color: #d8b9ca; font-size: 14px; }
.loading-bar,
.tsumi-signout-loader {
  display: block;
  width: 200px;
  height: 4px;
  margin-top: 28px;
  overflow: hidden;
  border-radius: 999px;
  background: #603b51;
}
.loading-bar span,
.tsumi-signout-loader::before {
  content: '';
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #bb7293, #f3a1bc);
}
#loading-screen.show .loading-bar span,
.tsumi-signout-screen.show .tsumi-signout-loader::before {
  animation: tsumi-transition-progress 1.2s ease-out forwards;
}
@keyframes tsumi-transition-logo { to { transform: scale(1.06); filter: drop-shadow(0 0 22px rgba(243, 161, 188, .6)); } }
@keyframes tsumi-transition-progress { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  #loading-screen,.tsumi-signout-screen { transition: none; }
  #loading-screen img,.tsumi-signout-mark,.loading-bar span,.tsumi-signout-loader::before { animation: none !important; }
  #loading-screen.show .loading-bar span,.tsumi-signout-screen.show .tsumi-signout-loader::before { width: 100%; }
}