:root {
  color-scheme: light;
  background: #f5f2eb;
}

html:not(.app-ready) #root {
  visibility: hidden;
}

.app-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  color: #20291c;
  background: #f5f2eb;
  font-family: Onest, system-ui, sans-serif;
  text-align: center;
}

.app-loading strong {
  color: #4a0e13;
  font-size: clamp(34px, 10vw, 54px);
  line-height: 1;
  letter-spacing: -0.055em;
}

.app-loading span {
  color: #716e66;
  font-size: 15px;
}

.app-loading i {
  width: 42px;
  height: 3px;
  overflow: hidden;
  background: rgb(74 14 19 / 16%);
  border-radius: 999px;
}

.app-loading i::after {
  display: block;
  width: 50%;
  height: 100%;
  content: "";
  background: #4a0e13;
  border-radius: inherit;
  animation: opora-loading 0.9s ease-in-out infinite alternate;
}

html.app-ready .app-loading {
  display: none;
}

html.app-ready #root {
  visibility: visible;
}

@keyframes opora-loading {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-loading i::after {
    animation: none;
    width: 100%;
  }
}