#app-container {
  display: none;
}

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease;
  background: #f7f7f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

#loader-wrapper.is-visible {
  opacity: 1.0;
  visibility: visible;
}

html.dark #loader-wrapper {
  background-color: #14181f;
}

html.dark-2 #loader-wrapper {
  background-color: #111115;
}

#loader img {
  display: block;
  width: 72px;
  height: 72px;
  animation: loader-pulse 1.6s ease-in-out infinite;
}

/* The mark is flat dark artwork with no light variant, so the dark themes invert it. */
html.dark #loader img,
html.dark-2 #loader img {
  filter: brightness(0) invert(1);
}

@keyframes loader-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  #loader img { animation: none; opacity: 1; }
}