/**
 * Loader overlay — must paint before first external CSS bundle.
 */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--background-color, #000);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  z-index: var(--ttms-z-loader, 99999);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

#loader img {
  display: block;
  max-width: 100%;
  padding: 0;
  margin: 0 auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

#loaderImage {
  max-width: calc(100% - 2rem);
  max-height: min(360px, 70dvh);
  width: auto;
  height: auto;
}

#menuImage {
  width: 120px;
  height: 120px;
  max-width: 120px;
  max-height: 120px;
  filter: drop-shadow(1px 1px 0px #000);
}

#loader.loader-hide-up,
#loader.loader-hide-up-right,
#loader.loader-hide-right,
#loader.loader-hide-down-right,
#loader.loader-hide-down,
#loader.loader-hide-down-left,
#loader.loader-hide-left,
#loader.loader-hide-up-left,
#loader.loader-hide-up-rotate-left,
#loader.loader-hide-up-right-rotate-left,
#loader.loader-hide-right-rotate-left,
#loader.loader-hide-down-right-rotate-left,
#loader.loader-hide-down-rotate-left,
#loader.loader-hide-down-left-rotate-left,
#loader.loader-hide-left-rotate-left,
#loader.loader-hide-up-left-rotate-left,
#loader.loader-hide-up-rotate-right,
#loader.loader-hide-up-right-rotate-right,
#loader.loader-hide-right-rotate-right,
#loader.loader-hide-down-right-rotate-right,
#loader.loader-hide-down-rotate-right,
#loader.loader-hide-down-left-rotate-right,
#loader.loader-hide-left-rotate-right,
#loader.loader-hide-up-left-rotate-right,
#loader.loader-hide-up-rotate-scale,
#loader.loader-hide-up-right-rotate-scale,
#loader.loader-hide-right-rotate-scale,
#loader.loader-hide-down-right-rotate-scale,
#loader.loader-hide-down-rotate-scale,
#loader.loader-hide-down-left-rotate-scale,
#loader.loader-hide-left-rotate-scale,
#loader.loader-hide-up-left-rotate-scale {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#loader.loader-hide-up { transform: translateY(-100%); }
#loader.loader-hide-down { transform: translateY(100%); }
#loader.loader-hide-left { transform: translateX(-100%); }
#loader.loader-hide-right { transform: translateX(100%); }