/* Pixel-flicker hover. Measured from craft.wild.as (teardown 09-30), rewritten with our names.
   A button with pixel-stepped corners (two square steps per corner, no border-radius) whose face is covered
   by a grid of small square cells; while hovered, every 130ms each cell independently has a 14% chance of
   showing a random accent colour, else it is clear. The background changes colour underneath (.2s).
   part.js builds the cell grid and runs the flicker; everything tunable is here. */
.pxflk {
  --pxflk-bg: #0a0a0a;                                     /* resting background */
  --pxflk-hover: #3b5bd9;                                  /* hovered background */
  --pxflk-ink: #fff;                                       /* label colour */
  --pxflk-bg-dur: .2s;                                     /* background change */
  --pxflk-step: 5px;                                       /* one corner step; a corner is two steps (10px). 4px / 3px for small tags, 0 = square */
  --pxflk-cell: 9px;                                       /* flicker cell size */
  --pxflk-every: 130ms;                                    /* reshuffle interval */
  --pxflk-odds: .14;                                       /* chance a cell is lit on each reshuffle */
  --pxflk-accents: #d8ff00, #f5c518, #e0492a, #0a0a0a;     /* picked at random per lit cell */
  --pxflk-pad: 16px 36px;

  --_s: var(--pxflk-step);
  --_d: calc(var(--pxflk-step) * 2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pxflk-pad);
  border: 0;
  background: var(--pxflk-bg);
  color: var(--pxflk-ink);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--pxflk-bg-dur);
  clip-path: polygon(
    var(--_d) 0, calc(100% - var(--_d)) 0, calc(100% - var(--_d)) var(--_s), calc(100% - var(--_s)) var(--_s),
    calc(100% - var(--_s)) var(--_d), 100% var(--_d), 100% calc(100% - var(--_d)), calc(100% - var(--_s)) calc(100% - var(--_d)),
    calc(100% - var(--_s)) calc(100% - var(--_s)), calc(100% - var(--_d)) calc(100% - var(--_s)), calc(100% - var(--_d)) 100%,
    var(--_d) 100%, var(--_d) calc(100% - var(--_s)), var(--_s) calc(100% - var(--_s)), var(--_s) calc(100% - var(--_d)),
    0 calc(100% - var(--_d)), 0 var(--_d), var(--_s) var(--_d), var(--_s) var(--_s), var(--_d) var(--_s), var(--_d) 0);
}
.pxflk.is-on { background: var(--pxflk-hover); }
@media (hover: hover) { .pxflk:hover { background: var(--pxflk-hover); } }   /* no-JS fallback; JS drives .is-on */
.pxflk:focus-visible { outline: none; background: var(--pxflk-hover); }       /* clip-path would cut an outline */

.pxflk-fx {                                                /* the cell grid, built by part.js */
  position: absolute; inset: 0; z-index: 1;
  display: grid; align-content: start;
  overflow: hidden; pointer-events: none;
}
.pxflk-fx i { display: block; }
.pxflk-label { position: relative; z-index: 2; }           /* label rides above the cells */