/* Site cursor.
   A CSS `cursor: url()` is a static bitmap - it cannot know what is under it,
   so it cannot be white on dark and black on light. This is a real element
   following the pointer.

   It is not drawn in a colour at all. Every state is a mask cut in the shape of
   its icon, and what shows through is the page itself run through
   `grayscale -> invert -> contrast`: the backdrop loses its colour first, so
   the result is always a shade of grey, and it is inverted, so near-black
   ground gives a white cursor, a pale hero gives a black one, and the mid-tones
   give the greys in between. Nothing has to be marked up as light or dark, and
   colour under the cursor never tints it.

   Inverting has one blind spot: ground that is already mid-grey inverts to
   itself. So each icon is drawn twice - the body, in those soft greys, and
   behind it an outline of the same shape grown by a pixel, pushed so hard that
   it can only come out black or white. Where the body reads clearly the outline
   is the same tone and disappears into it; over a mid-grey photo the outline is
   what keeps the cursor on the page. It is the trick every system cursor uses,
   except this one picks its own two tones.

   The native cursor is only hidden once the script has taken over, so a page
   without JS keeps its own. */
/* `!important` is doing real work: rules like `.page-projects button` or
   `.project-sitemap__stage[data-map-theme="entyx"] .project-sitemap__block` are
   more specific than a bare `.class *`, so without it the native arrow keeps
   showing through on buttons, carousels and pills - two cursors at once. */
.has-site-cursor,
.has-site-cursor * {
  cursor: none !important;
}

.site-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  width: 0;
  height: 0;
  pointer-events: none;
  /* visibility, not opacity: any value between 0 and 1 would isolate the
     element from the page behind it, and the backdrop the layers read is
     exactly that page */
  visibility: hidden;
  will-change: transform;
}

.site-cursor.is-awake {
  visibility: visible;
}

/* one state is shown at a time, and it is switched with display rather than
   opacity - a cross-fade would put a layer at a fractional opacity, which is
   the one thing that breaks the backdrop it is reading */
.site-cursor__layer {
  display: none;
  position: absolute;
  width: 36px;
  height: 36px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 36px 36px;
  mask-size: 36px 36px;
}

.site-cursor[data-state="default"] .site-cursor__layer[data-for="default"],
.site-cursor[data-state="click"] .site-cursor__layer[data-for="click"],
.site-cursor[data-state="drag"] .site-cursor__layer[data-for="drag"],
.site-cursor[data-state="grab"] .site-cursor__layer[data-for="grab"],
.site-cursor[data-state="point"] .site-cursor__layer[data-for="point"] {
  display: block;
}

.site-cursor__body {
  -webkit-backdrop-filter: grayscale(1) invert(1) contrast(1.6);
  backdrop-filter: grayscale(1) invert(1) contrast(1.6);
}

/* The outline is the grown shape with the body's own shape cut back out of it,
   so the two never overlap - if the outline were painted under the body, the
   body would be reading the outline instead of the page. */
.site-cursor__outline {
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-backdrop-filter: grayscale(1) invert(1) contrast(100);
  backdrop-filter: grayscale(1) invert(1) contrast(100);
}

/* Each state carries its own offset so the point it is aimed with sits exactly
   on the pointer: the arrows are aimed with their tip, and the two hands - like
   every grab cursor - with the middle of the palm. */
.site-cursor__layer[data-for="default"] {
  left: -11.293px;
  top: -11.293px;
}

.site-cursor__layer[data-for="click"] {
  left: -12.793px;
  top: -12.793px;
}

.site-cursor__layer[data-for="drag"],
.site-cursor__layer[data-for="grab"] {
  left: -18px;
  top: -18px;
}

/* the pointing hand is aimed with its fingertip, not the palm */
.site-cursor__layer[data-for="point"] {
  left: -15.07px;
  top: -3.105px;
}

.site-cursor__body[data-for="default"] {
  -webkit-mask-image: url("../images/cursor/default.svg");
  mask-image: url("../images/cursor/default.svg");
}

.site-cursor__outline[data-for="default"] {
  -webkit-mask-image: url("../images/cursor/default-ring.svg"), url("../images/cursor/default.svg");
  mask-image: url("../images/cursor/default-ring.svg"), url("../images/cursor/default.svg");
}

.site-cursor__body[data-for="click"] {
  -webkit-mask-image: url("../images/cursor/click.svg");
  mask-image: url("../images/cursor/click.svg");
}

.site-cursor__outline[data-for="click"] {
  -webkit-mask-image: url("../images/cursor/click-ring.svg"), url("../images/cursor/click.svg");
  mask-image: url("../images/cursor/click-ring.svg"), url("../images/cursor/click.svg");
}

.site-cursor__body[data-for="drag"] {
  -webkit-mask-image: url("../images/cursor/drag.svg");
  mask-image: url("../images/cursor/drag.svg");
}

.site-cursor__outline[data-for="drag"] {
  -webkit-mask-image: url("../images/cursor/drag-ring.svg"), url("../images/cursor/drag-solid.svg");
  mask-image: url("../images/cursor/drag-ring.svg"), url("../images/cursor/drag-solid.svg");
}

.site-cursor__body[data-for="grab"] {
  -webkit-mask-image: url("../images/cursor/grab.svg");
  mask-image: url("../images/cursor/grab.svg");
}

.site-cursor__body[data-for="point"] {
  -webkit-mask-image: url("../images/cursor/point.svg");
  mask-image: url("../images/cursor/point.svg");
}

.site-cursor__outline[data-for="point"] {
  -webkit-mask-image: url("../images/cursor/point-ring.svg"), url("../images/cursor/point-solid.svg");
  mask-image: url("../images/cursor/point-ring.svg"), url("../images/cursor/point-solid.svg");
}

.site-cursor__outline[data-for="grab"] {
  -webkit-mask-image: url("../images/cursor/grab-ring.svg"), url("../images/cursor/grab-solid.svg");
  mask-image: url("../images/cursor/grab-ring.svg"), url("../images/cursor/grab-solid.svg");
}

/* a coarse pointer has no cursor to replace */
@media (pointer: coarse) {
  .has-site-cursor,
  .has-site-cursor * {
    cursor: auto;
  }

  .site-cursor {
    display: none;
  }
}