/*
 * The entry loader.
 *
 * The design's own: black, the wordmark breathing, a hairline track filling,
 * and a lowercase status that talks. Two things changed in the wiring.
 *
 * The bar tracks real loading. The original stepped by a random amount every
 * ninety milliseconds and redirected when it reached a hundred, which meant a
 * fixed four second wait whether the page was ready in fifty milliseconds or
 * had not started. A progress bar that is not measuring anything is a spinner
 * that lies about how long it has left.
 *
 * And it overlays the page rather than being a page. As a separate document it
 * cost an extra navigation to show a picture of loading before the loading
 * started. Here it is on top of the home page while that page genuinely gets
 * ready, and it leaves when it is.
 */

.ld {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  font-family: var(--face, 'Archivo', sans-serif);
  color: var(--ink, #e7e7e7);
}

/* Removed from the flow the moment it is done, so it can never trap a click. */
.ld[hidden] { display: none; }

.ld-out { opacity: 0; transition: opacity .35s ease; pointer-events: none; }

.ld-logo {
  width: min(380px, 62vw);
  display: block;
  animation: ldIn .8s ease both, ldBreathe 3s ease-in-out .8s infinite;
}
.ld-logo.is-still { animation: ldIn .8s ease both; }

.ld-meta { width: min(380px, 62vw); margin-top: 44px; }

.ld-track { height: 1px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ld-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink, #e7e7e7);
  transition: width .25s ease;
}

.ld-row { display: flex; justify-content: space-between; margin-top: 14px; }

.ld-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--dim, #5d5d66);
  text-transform: lowercase;
}
.ld-caret { animation: ldBlink 1s steps(1) infinite; }

.ld-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--soft, #8b8b95);
  font-variant-numeric: tabular-nums;
}

.ld-enter {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink, #e7e7e7);
  animation: ldUp .4s ease;
}

@keyframes ldBreathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .82; transform: scale(.985); } }
@keyframes ldIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ldUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ldBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/*
 * Somebody who has asked for less movement gets the loader without the
 * breathing and the blinking. The bar still fills, because that is information
 * rather than decoration.
 */
@media (prefers-reduced-motion: reduce) {
  .ld-logo, .ld-logo.is-still, .ld-caret, .ld-enter { animation: none; }
}