/*
 * THE ONE LOADING BAR. Every loading screen in Limelight uses this file
 * and nothing else: the Lab's startup curtain (and the desktop app, which
 * is the same page), a show opened mid-session, the course's own start,
 * the lesson veil over the tool, the sound tool's start, the intro page's
 * live demo.
 *
 *   "I want the loading bar to be on the same line and always at a
 *    consistent space. It's always going from the left to the right
 *    consistently at the same speed, quickly. As soon as the tool is
 *    ready to load, it loads. ... It should be consistent. Always doing
 *    the same thing, no matter which loading screen."
 *                                           (owner, review 10/07 c1)
 *
 * So it is NOT progress: a short segment sweeps left to right across the
 * track at one constant speed, over and over, until the page removes the
 * loading screen, which it does the moment the tool is ready (mid-sweep
 * is fine). Nothing measures, eases or waits for a pass to finish.
 *
 * SAME PLACE EVERY TIME: the bar is pinned to the middle of the WINDOW
 * (position: fixed), and its one line of words sits the same distance
 * above it, so moving from one loading screen to the next (the course
 * starting, then the lesson veil, then the tool) never moves the bar.
 * A loading screen must therefore not sit inside a transformed or
 * filtered element (that would make "fixed" mean that element instead).
 * The one exception is a loader inside a box on a scrolling page (the
 * intro's live demo): .ll-loadbar-boxed centers it in that box.
 *
 * Markup (both elements are optional of each other):
 *   <p class="ll-loadbar-label">Loading Limelight…</p>
 *   <div class="ll-loadbar" aria-hidden="true"></div>
 *
 * Linked as /loading-bar.css by index.html (the Lab and the desktop app),
 * /learn/index.html, /sound/index.html and /intro/index.html.
 * tests/loading-bar.test.mjs keeps every loader on it.
 */
.ll-loadbar{
  position:fixed;left:50%;top:50%;
  width:240px;height:3px;margin:-1.5px 0 0 -120px;
  border-radius:2px;overflow:hidden;
  background:rgba(140,150,140,.24);
  pointer-events:none;
}
.ll-loadbar::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:40%;
  border-radius:2px;background:#3cb371;
  transform:translateX(-100%);
  /* constant speed: linear, one pass in 0.9 s; transform only, so the
     compositor draws it even while the page's thread is busy */
  animation:ll-loadbar-sweep .9s linear infinite;
  will-change:transform;
}
@keyframes ll-loadbar-sweep{
  from{transform:translateX(-100%)}
  to{transform:translateX(250%)}
}
.ll-loadbar-label{
  position:fixed;left:16px;right:16px;top:50%;margin:-36px 0 0;
  text-align:center;
  font:400 13px/20px roboto-regular,Roboto,system-ui,sans-serif;letter-spacing:.04em;
  color:#c8d0c4;
  pointer-events:none;
}
:root[data-theme="light"] .ll-loadbar-label{color:#3a4038}
/* On an always-dark surface (the lesson veil, the intro's demo box) the
   words stay light in both themes. */
.ll-loadbar-dark .ll-loadbar-label,:root[data-theme="light"] .ll-loadbar-dark .ll-loadbar-label{color:#c8d0c4}
/* A loader inside a box on a scrolling page: centered in the box. */
.ll-loadbar-boxed .ll-loadbar,.ll-loadbar-boxed .ll-loadbar-label{position:absolute}