/* The loader (loader.js): on the first visit of a session, the raccoon walks with a butterfly on its nose over
   "Loading" while the page gets ready, then the whole layer fades and the scene comes in (intro.js). The head script
   adds .loading to the html element, so it covers the page from the first paint. It sits over the page (whose layers
   go up to 50) and under every grain and paper: the print's grain (999), the textures (9998) and Rachel's grain (9999),
   so they lie over it as they do over the card. The cursors (style.css) stay on top.

   The art is here from the first paint, with no script: the two sheets (preloaded in the head) are img elements that
   walk, bob, flap and count dots as CSS steps, one art pixel to --loader-scale screen pixels. Once loader.js has run
   it draws those same images on canvases instead (.live), on the same clock, adding the scene's crawling edges, the
   jump and the butterfly's flight. Img elements, not backgrounds: a script cannot draw a background, and a new image
   of its own would download the sheet again wherever the server says no-store.
   print.js puts the print's filter on whichever is showing (halftone, and the plates when they are on). */
.loader {
  display: none;
}

.loading .loader {
  position: fixed;
  z-index: 998;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--page);
}

.loader-in {
  display: grid;
  justify-items: center;
  gap: var(--loader-gap);
}

/* The raccoon's box: one walk frame (loader/walk.png cells are 72 by 58 art pixels). A press makes it jump. */
.loader-art {
  position: relative;
  width: calc(72px * var(--loader-scale));
  height: calc(58px * var(--loader-scale));
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

/* The sheets are art, not images to save or drag: a press goes to the box. */
.loader-art img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.loader-art canvas {
  position: absolute;
  display: none;
  image-rendering: pixelated;
}

.loader-art.live canvas {
  display: block;
}

.loader-art.live .loader-walk {
  display: none;
}

/* The walk, 4 steps of --loader-step from 3 cells: near legs out, legs under, far legs out, legs under. The body sits an
   art pixel low while the legs are out. */
.loader-walk {
  position: absolute;
  inset: 0;
  overflow: hidden;
  animation: loader-bob calc(var(--loader-step) * 2) step-end infinite;
}

.loader-walk > img {
  display: block;
  width: calc(216px * var(--loader-scale));
  height: calc(58px * var(--loader-scale));
  image-rendering: pixelated;
  animation: loader-walk calc(var(--loader-step) * 4) step-end infinite;
}

@keyframes loader-walk {
  0%, 100% { translate: 0; }
  25%, 75% { translate: calc(-72px * var(--loader-scale)); }
  50% { translate: calc(-144px * var(--loader-scale)); }
}

@keyframes loader-bob {
  0% { translate: 0 calc(1px * var(--loader-scale)); }
  50%, 100% { translate: 0 0; }
}

/* The butterfly stands on the nose (62, 26 in the raccoon's art pixels) by the lowest pixel of its body (8, 11 in its
   17 by 13 cell), so it rides the bob. A slow flap in time with the walk: 6 beats of 2 steps, open, open, half,
   closed, closed, half, half a step behind it, so its wings never change on a step. */
.loader-wing {
  position: absolute;
  left: calc((62px - 8px) * var(--loader-scale));
  top: calc((26px - 11px) * var(--loader-scale));
  width: calc(17px * var(--loader-scale));
  height: calc(13px * var(--loader-scale));
  overflow: hidden;
}

.loader-wing > img {
  display: block;
  width: calc(51px * var(--loader-scale));
  height: calc(13px * var(--loader-scale));
  image-rendering: pixelated;
  animation: loader-flap calc(var(--loader-step) * 12) step-end calc(var(--loader-step) / 2) infinite;
}

@keyframes loader-flap {
  0%, 16.66%, 100% { translate: 0; }
  33.33%, 83.33% { translate: calc(-17px * var(--loader-scale)); }
  50%, 66.66% { translate: calc(-34px * var(--loader-scale)); }
}

/* The dots sit after the word without moving it, so "Loading" stays centred: none, one, two, three, each --loader-dot. */
.loader-label {
  position: relative;
  color: var(--ink-nav);
  font-size: var(--bar-size);
  letter-spacing: var(--bar-track);
}

.loader-dots {
  position: absolute;
  left: 100%;
  clip-path: inset(0 100% 0 0);
  animation: loader-dots calc(var(--loader-dot) * 4) step-end infinite;
}

@keyframes loader-dots {
  0%, 100% { clip-path: inset(0 100% 0 0); }
  25% { clip-path: inset(0 66.67% 0 0); }
  50% { clip-path: inset(0 33.33% 0 0); }
  75% { clip-path: inset(0); }
}