/* ------------------------------------------------------------------ *
 *  Gooey cursor-trail effect — replica of pxpush.com
 *  Ported from the inline CSS + `class mP` in pxpush's _nuxt bundle.
 * ------------------------------------------------------------------ */

:root {
  --bgcolor: #1a1a1a;      /* pxpush background          */
  --primarycolor: #bababa; /* pxpush foreground/text     */
  --columns: 20;           /* grid resolution (cell count across the viewport) */
}

/* Full-screen overlay that hosts the grid of cells.
   `mix-blend-mode: difference` inverts whatever sits underneath the
   lit cells, which is what gives pxpush's trail its colour-shifting look. */
.cursor {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  pointer-events: none;          /* never blocks clicks / hovers */
  mix-blend-mode: difference;
  --size: calc(100vw / var(--columns));   /* one square cell */
}

/* pxpush only runs the effect on wide screens — no hover pointer below this. */
@media screen and (max-width: 1300px) {
  .cursor { display: none; }
}

/* The grid itself. `filter: url(#gooey)` is attached by JS at runtime
   (and deliberately skipped on Firefox, matching the original). */
.cursor__inner {
  display: grid;
  grid-template-columns: repeat(var(--columns), var(--size));
}

/* Each cell: a white square that lives at opacity 0 until the pointer
   passes over it. The gooey filter on the parent melts lit neighbours
   together into blobs. */
.cursor__inner-box {
  width: var(--size);
  height: var(--size);
  background: #fff;
  opacity: 0;
}

/* The SVG only carries the filter definition — keep it out of layout. */
.cursor > svg {
  position: absolute;
  width: 0;
  height: 0;
}