/* Page loader: the ribbon (a green line) that fills the screen when this page opens.
   The page starts with the screen already covered in the ribbon's green; 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: #289E4B;        /* the ribbon's own green: 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 green 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;
}