/* The loading screen (js/loader.js, after the Peexl sample): a full Energy Blue cover with the PixelPath lockup in the
   middle (the logo's "Reversed" version, white on Energy Blue), stepping in and then playing the logo's loop: a wave
   runs along the mark's pixel path and the end pixel blinks like a cursor. When the page is ready the cover breaks up
   in large square pixels, each dropping to half strength and then gone, in a loose left-to-right sweep, revealing the
   site. Used as it is by loader.html (the loading page) and index.html (the site). */
.loader {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--bg-brand, #006bff);
}
.loader__px { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the lockup at whole-pixel sizes: 60px tall, a 12px grid unit (10px on a phone), so the mark's pixels stay crisp */
.loader__logo {
  position: relative; height: 60px; width: auto; aspect-ratio: 1668.64 / 500; overflow: visible;
  fill: var(--color-neutral-0, #fff); shape-rendering: crispEdges;
  animation: loader-in 480ms steps(4, end) both;
}
.loader__word { shape-rendering: geometricPrecision; }
@media (max-width: 767px) { .loader__logo { height: 50px; } }
@keyframes loader-in { from { opacity: 0; transform: scale(0.88); } }
.loader.is-handoff .loader__logo { animation: none; }   /* carried on from the loading page: already in */
.loader.is-dissolving { background: transparent; }
.loader.is-dissolving .loader__logo { opacity: 0; transition: opacity 160ms steps(2, end); animation: none; }
.loader.is-gone { opacity: 0; transition: opacity 360ms ease-out; }
html.is-loading, html.is-loading body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .loader__logo { animation: none; } }