/* The full-screen loading picture (#loading in index.html, driven by js/core/boot.js). The painted picture already holds
   an empty groove for the progress bar; the green fill and the percent are drawn into it. .ldArt is the picture's own
   box: sized like background-size: cover but pinned to the bottom, so the groove never leaves a cropped screen; the
   groove is placed in % of that box (its pixel position in the picture). Phones (taller than 3:5) get the tall picture,
   every other screen the wide one. The first width/font-size lines are for browsers without container units. */
#loading {
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow: hidden;
  background: #e8a447;
  container-type: size;
  transition: opacity 0.5s ease;
}
#loading.out {
  opacity: 0;
  pointer-events: none;
}
.ldArt {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: max(100vw, calc(100vh * 2000 / 1116));
  width: max(100cqw, calc(100cqh * 2000 / 1116));
  aspect-ratio: 2000 / 1116;
  background: url(../assets/ui/loader/bg_wide.webp) center / 100% 100% no-repeat;
  container-type: inline-size;
}
.ldLogo {
  position: absolute;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 3vh);
  top: calc(env(safe-area-inset-top, 0px) + 3cqh);
  width: min(86vw, 57vh);
  width: min(86cqw, 57cqh);
  transform: translateX(-50%);
  filter: drop-shadow(0 0.5cqh 1cqh rgba(50, 25, 8, 0.5));
  animation: ldBob 3.2s ease-in-out infinite;
  pointer-events: none;
}
.ldBar {
  position: absolute;
  left: 38.55%;
  top: 91.94%;
  width: 22.9%;
  height: 3.405%;
  box-sizing: border-box;
  padding: 0.1em;
  border-radius: 0.5em;
  font-size: 1.9cqw; /* = the groove's height: everything inside is in em */
}
.ldBar i {
  position: relative;
  display: block;
  height: 100%;
  width: var(--p, 0%);
  border-radius: 0.4em;
  overflow: hidden;
  background: linear-gradient(#b4ec62, #6db73a 50%, #3f7d23);
  box-shadow: inset 0 0.06em 0 rgba(255, 255, 255, 0.45), inset 0 -0.1em 0 rgba(0, 0, 0, 0.2), 0 0 0.3em rgba(160, 230, 80, 0.4);
  transition: width 0.2s linear;
}
.ldBar i::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: ldShine 1.4s linear infinite;
}
.ldBar b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 800 0.62em/1 var(--body);
  letter-spacing: 0.04em;
  color: #fff6e0;
  text-shadow: 0 0.08em 0 #4a2d16, 0 0 0.2em #4a2d16;
}
@media (max-aspect-ratio: 3/5) {
  .ldArt {
    width: max(100vw, calc(100vh * 926 / 2000));
    width: max(100cqw, calc(100cqh * 926 / 2000));
    aspect-ratio: 926 / 2000;
    background-image: url(../assets/ui/loader/bg_tall.webp);
  }
  .ldBar {
    left: 11.23%;
    top: 90.75%;
    width: 77.97%;
    height: 3.15%;
    font-size: 6.8cqw;
  }
}
@keyframes ldBob {
  50% {
    transform: translateX(-50%) translateY(0.8cqh);
  }
}
@keyframes ldShine {
  to {
    left: 110%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ldLogo,
  .ldBar i::after {
    animation: none;
  }
}