/*
 * The two surfaces the category-grid mascot is drawn onto.
 *
 * The panels used to hold seven copies of assets/brand/mascot.png -- the same
 * drawing every time, individually rotated and mirrored to disguise the
 * repetition. One mascot who walks between the panels replaces all seven, so
 * the tiles are now colour, stripes and a wordmark, and he is the only art on
 * the grid.
 */

/*
 * The single render surface. It is NOT displayed: every frame is copied out of
 * it into the per-panel canvases below, which is what keeps the whole grid to
 * one WebGL context.
 */
.category-mascot-source {
  position: absolute;
  left: -99999px;
  top: 0;
}

/*
 * One per panel, INSIDE the panel, holding that panel's slice of him.
 *
 * z-index 2 puts him above the panel's background pseudo-elements (-2 and -1)
 * and below .category-copy and .category-arrow (3), so he stands in front of
 * the stripes and behind the wordmark. He shares the right of the tile with
 * the end of a long word -- PRE-ROLLS and EDIBLES both reach it -- and
 * passing behind those letters rather than over them is the whole point.
 *
 * It has to live inside the panel to manage that. Every .category-panel
 * carries .reveal, whose transform makes it a stacking context even at rest
 * (styles-shell.css), sealing .category-copy inside -- so a canvas placed as a
 * SIBLING of the panels could only ever be above or below a whole panel,
 * wordmark and all, with or without `isolation`.
 */
.category-mascot-tile {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}