/* Shared by the HTML first paint and React. The artwork fades away on an opaque
   canvas before the canvas lifts, so branding never overlaps the arriving page. */
.app-loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--canvas, #f8f9fa);
}

.dark .app-loading {
  background: var(--canvas, #131314);
}

.app-loading-brand {
  display: block;
  width: min(220px, 68vw);
  aspect-ratio: 780 / 403;
  animation: app-loading-enter 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--app-loading-delay, 0ms)
    both;
}

.app-loading[data-exiting] {
  animation: app-loading-exit 850ms ease-in var(--app-loading-exit-delay, 0ms) both;
}

.app-loading[data-exiting] .app-loading-art {
  animation: app-loading-art-exit 650ms cubic-bezier(0.4, 0, 1, 1)
    var(--app-loading-exit-delay, 0ms) both;
}

.app-loading-art,
.app-loading-brand img {
  display: block;
  width: 100%;
  height: 100%;
}

.app-loading-brand img {
  object-fit: contain;
  user-select: none;
}

.app-loading-brand img:last-child {
  display: none;
}
.dark .app-loading-brand img:first-child {
  display: none;
}
.dark .app-loading-brand img:last-child {
  display: block;
}

@keyframes app-loading-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes app-loading-art-exit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes app-loading-exit {
  0%,
  76.47% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-loading-brand {
    animation: none;
  }
  .app-loading[data-exiting],
  .app-loading[data-exiting] .app-loading-art {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}