/* Pixel uncover. Rewritten from Sadewa's image reveal + home preloader (teardown 09-30).
   A picture sits under a grid of cover cells in the colour of the page; when it reaches the screen every cell
   vanishes at its own random moment inside 0.8 s, hard (no fade), so the picture is punched out of the page a
   block at a time. The same engine runs backwards (cover) and both ways (swap: cover 260 ms, change the picture,
   uncover 380 ms). Preloader mode: a full-screen ink sheet with a mark in the middle that breaks into 11 x 7
   blocks, each fading out over 150 ms at a random moment inside 400 ms.
   Markup (part.js builds the cover grid):
     <div class="pxu" data-pxu> ...any picture, video or colour field... </div>
     <div class="pxu-pre" data-pxu-pre><div class="pxu-pre__mark">...logo...</div></div>
   Without JS (or with reduced motion) no cover is ever built: the picture is simply there. */
.pxu {
  --pxu-color: #ffffff;   /* cover colour: set it to whatever sits behind the picture (the source: page paper) */
  --pxu-fade: 0ms;        /* each cell's own fade; 0 = hard pop (the source's image reveal) */
  --pxu-z: 1;
  position: relative;
  overflow: hidden;
}
.pxu__cover {
  position: absolute; inset: 0; z-index: var(--pxu-z);
  display: grid; pointer-events: none;
  /* minmax(0, 1fr), not 1fr: a 1fr track can't shrink below its content and widens a phone layout (source gotcha) */
  grid-template-columns: repeat(var(--pxu-cols, 6), minmax(0, 1fr));
  grid-template-rows: repeat(var(--pxu-rows, 5), minmax(0, 1fr));
}
.pxu__cover > i {
  display: block;
  background: var(--pxu-color);
  box-shadow: 0 0 0 .5px var(--pxu-color);   /* closes the sub-pixel seams between fractional-width cells */
  transition: opacity var(--pxu-fade) linear;
}
.pxu__cover > i.is-off { opacity: 0; box-shadow: none; }
.pxu__cover.is-clear { visibility: hidden; }   /* every cell is off: drop the layer */

/* ---------- preloader mode ---------- */
.pxu-pre {
  --pxu-color: #131313;   /* the ink sheet */
  --pxu-fade: 150ms;      /* source: each block fades .15s linear */
  --pxu-mark-in: .5s;     /* mark fades in, linear */
  --pxu-mark-out: .12s;   /* mark fades out as the sheet breaks */
  --pxu-pre-z: 100;
  position: fixed; inset: 0; z-index: var(--pxu-pre-z);
  display: grid; place-items: center;
  pointer-events: none; overflow: hidden;
}
/* Until part.js has built the blocks, the sheet itself is the ink (no flash of the page on first paint);
   if the script never runs, a failsafe drops the sheet after 3 s so the page can't stay hidden. */
.pxu-pre:not(.is-built) { background: var(--pxu-color); animation: pxu-failsafe 0s 3s forwards; }
@keyframes pxu-failsafe { to { visibility: hidden; } }
.pxu-pre--in { position: absolute; }   /* contained in a positioned box instead of the window */
.pxu-pre > .pxu__cover { z-index: 0; }
.pxu-pre__mark {
  position: relative; z-index: 1;
  opacity: 0; transition: opacity var(--pxu-mark-in) linear;
}
.pxu-pre.is-mark .pxu-pre__mark { opacity: 1; }
.pxu-pre.is-out .pxu-pre__mark { opacity: 0; transition-duration: var(--pxu-mark-out); }
.pxu-pre.is-gone { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pxu-pre { display: none; }
}