/* Page loader: the ribbon (an orange line) that fills the screen when this page opens.
   The page starts with the screen already covered in the ribbon's orange; once every page
   image has loaded, the ribbon carries on from the covered frame and thins out to show the page.
   Built by js/loader/main.js. */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 2100;              /* above everything */
  pointer-events: auto;       /* blocks clicks and scrolling while it is showing */
  background: #FF6638;        /* the ribbon's own orange: covers the screen from the very first paint,
                                 before the animation player has loaded */
}

/* Once the ribbon itself is drawn (and covering the screen), the plain orange is not needed:
   the ribbon alone has to thin out and reveal the page */
.page-loader.is-ribbon {
  background: transparent;
}

.page-loader svg {
  display: block;
}