/* OWNS HOME -> LOGIN TRANSITION. ANIMATION ONLY. */

:root {
  /* Fade out duration. */
  --logout-fade-out-duration: 200ms;
  /* Login fade in duration. */
  --logout-login-fade-in-duration: 600ms;
  /* Easing. */
  --logout-transition-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

html.logout-transition-active,
html.logout-transition-active body {
  overflow: hidden;
}

.logout-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: auto;
  background: var(--background-app);
  opacity: 0;
  animation: logout-cover-in var(--logout-fade-out-duration) var(--logout-transition-ease) both;
}

.app-shell.logging-out {
  animation: logout-page-out var(--logout-fade-out-duration) var(--logout-transition-ease) both;
  will-change: opacity;
}

.login-screen {
  animation: logout-login-in var(--logout-login-fade-in-duration) var(--logout-transition-ease) both;
  will-change: opacity;
}

@keyframes logout-cover-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes logout-page-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes logout-login-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .logout-transition-overlay,
  .landing-shell.logging-out,
  .login-screen {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}