/* the loading screen: Bokator runs along a naga balustrade on the causeway to Angkor Wat at dusk,
   the stone turning to gold behind him as the art comes in (the bar is in loading-naga.css). Its own
   art is small and preloaded first by the page; until the painting lands, the dusk colors stand in */
.loader {
  --px: 2;
  --tiles: 3;
  --progress: 0;

  position: fixed;
  inset: 0;
  z-index: var(--layer-overlay);
  overflow: hidden;
  font-family: var(--font-display);
  color: var(--color-text);
  background: linear-gradient(
    var(--color-loader-sky-top),
    var(--color-loader-sky) 30%,
    var(--color-loader-sky-low) 45%,
    var(--color-loader-sky-warm) 58%,
    var(--color-loader-water) 75%
  );
  transition:
    opacity var(--duration-normal) var(--easing-out),
    visibility 0s;
}

/* faded out it takes no taps, and once the fade is over the page drops it altogether */
.loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-slow) var(--easing-out),
    visibility 0s linear var(--duration-slow);
}

.loader[hidden] {
  display: none;
}

/* the painting is cropped like the title's, round its middle, so the temple stays in sight on a phone
   held upright */
.loader-scene {
  position: absolute;
  inset: 0;
  background: url('../assets/ui/loading/bg.png') 50% 50% / cover no-repeat;
  image-rendering: pixelated;
}

/* the balustrade stands in front of the painted one, on the dark stone of the causeway */
.loader-stage {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sab) + 7%);
  display: flex;
  flex-direction: column;
  align-items: center;
  translate: -50% 0;
}

/* the words wait for the pixel font, rather than showing in a fallback first */
.loader-caption {
  display: flex;
  justify-content: space-between;
  gap: 2em;
  width: 100%;
  margin: calc(var(--px) * 6px) 0 0;
  padding: 0 calc(var(--px) * 8px);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--easing-out);
  font-size: var(--font-size-md);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  text-shadow: var(--text-shadow-pixel-sm);
}

.loader.lettered .loader-caption {
  opacity: 1;
}

.loader-percent {
  color: var(--color-text);
  letter-spacing: var(--tracking-wide);
}

/* the balustrade is as many stretches long as the screen has room for, in whole art pixels */
@media (min-width: 480px) {
  .loader {
    --tiles: 5;
  }
}

@media (min-width: 720px) {
  .loader {
    --tiles: 8;
  }
}

@media (min-width: 1100px) and (min-height: 640px) {
  .loader {
    --px: 3;
  }

  .loader-caption {
    font-size: var(--font-size-xl);
  }
}

@media (min-width: 1800px) and (min-height: 1000px) {
  .loader {
    --px: 4;
  }
}

/* a phone on its side is short: the run sits lower, under less sky */
@media (max-height: 420px) {
  .loader-stage {
    bottom: calc(var(--sab) + 3%);
  }
}

@media (max-width: 339px) {
  .loader {
    --px: 1;
  }
}