/*
 * Page loader shown while the app is booting (see the <div class="page-loader"> in each index.html).
 * Shared by all clients; the client only sets its color in its own assets/styles/loader.css:
 *
 *   :root { --page-loader-color: #e41b65; }
 *
 * The in-app spinner (shared-styles/components/_spinner.scss) has the same look, so the hand-off from
 * this loader to the app is seamless.
 */
.page-loader {
  --page-loader-size: 80px;
  --page-loader-stroke: 5px;

  position: fixed;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: var(--page-loader-size);
  height: var(--page-loader-size);
  margin: calc(var(--page-loader-size) / -2) 0 0 calc(var(--page-loader-size) / -2);
  border-radius: 50%;
  /* A comet: a tail that fades in along the ring and ends in a round head, over a faint track. */
  background:
    conic-gradient(transparent 25%, var(--page-loader-color, #333) 100%),
    var(--page-loader-track, rgba(0, 0, 0, 0.08));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--page-loader-stroke) - 1px), #000 calc(100% - var(--page-loader-stroke)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--page-loader-stroke) - 1px), #000 calc(100% - var(--page-loader-stroke)));
  will-change: transform;
  /* Fades in after a short delay, so quick loads never flash a spinner. */
  animation:
    page-loader-in 0.3s ease-out 0.15s both,
    page-loader-spin 1.1s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
}

/* Round head of the comet. */
.page-loader::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--page-loader-stroke);
  height: var(--page-loader-stroke);
  margin-left: calc(var(--page-loader-stroke) / -2);
  border-radius: 50%;
  background: var(--page-loader-color, #333);
}

@keyframes page-loader-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes page-loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader {
    animation:
      page-loader-in 0.3s ease-out 0.15s both,
      page-loader-spin 2.4s linear infinite;
  }
}