@font-face {
  font-family: 'TuMicha Go Wordmark';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('/shared/fonts/syne-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'TuMicha Go Wordmark';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('/shared/fonts/syne-latin-600.woff2') format('woff2');
}

html.app-loading,
html.app-loading body {
  overflow: hidden;
}

html.app-loading:not(.auth-only-shell) #auth-screen.hidden,
html.app-loading:not(.auth-only-shell) #login-screen.hidden {
  display: none !important;
}

html.native-held-session:not(.auth-only-shell) #auth-screen,
html.native-held-session:not(.auth-only-shell) #login-screen {
  display: none !important;
}

html.portal-dashboard:not(.portal-css-ready) #app {
  display: none !important;
}

html.app-loading::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 8999;
  background: #f4f4f4;
  opacity: 1;
  transition: opacity 480ms ease;
}

html.app-loading.is-loader-entering::before {
  opacity: 0;
}

html.app-loading.is-loader-leaving::before {
  opacity: 0;
}

.app-loader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: max(1.5rem, env(safe-area-inset-top, 0px)) 1.5rem
    max(1.5rem, env(safe-area-inset-bottom, 0px));
  background: #f4f4f4;
  opacity: 1;
  transition: opacity 480ms ease;
}

.app-loader.is-entering {
  opacity: 0;
}

.app-loader.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.app-loader[hidden],
.app-loader.is-done {
  display: none !important;
}

.app-loader-inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

.app-loader-wordmark {
  margin: 0;
  font-family: 'TuMicha Go Wordmark', 'Syne', sans-serif;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  line-height: 1;
  text-transform: uppercase;
  color: #111111;
  visibility: hidden;
}

.app-loader.has-display-font .app-loader-wordmark,
html.tumicha-display-font-ready .app-loader-wordmark {
  visibility: visible;
  animation: appLoaderLogo 1.7s ease-in-out infinite;
}

@keyframes appLoaderLogo {
  0%,
  100% {
    opacity: 0.22;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-loader,
  .app-loader.has-display-font .app-loader-wordmark,
  html.tumicha-display-font-ready .app-loader-wordmark {
    transition: none;
    animation: none;
  }

  .app-loader.has-display-font .app-loader-wordmark,
  html.tumicha-display-font-ready .app-loader-wordmark {
    opacity: 1;
  }
}