/* ---------- Star cursor (global: include on every page, with assets/js/cursor.js) ---------- */
/* The cursor is assets/images/star_cursor.svg (127 × 122) shown at ¼ size (~32px); the click
   point is the tip of the star's upper-left point.
   - Normally: black over anything light and white over anything dark (never a colour) — always
     visible.
   - Over anything clickable: pink (--cursor-hover-color), or green
     (--cursor-hover-contrast-color) when the thing under it is that same pink.
   Without the script (or on touch screens), the plain star below is used as a normal cursor. */
:root {
  --cursor-hover-color: #ef5fa0;
  --cursor-hover-contrast-color: #10a05f;
}

html {
  cursor: url("../images/star_cursor.svg") 5 0, auto;
  cursor: image-set(url("../images/star_cursor.svg") 4x) 5 0, auto;
}

/* Keep the star over links and buttons too (instead of the hand). */
a,
button {
  cursor: inherit;
}

.star-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  width: 31.75px;
  height: 30.5px;
  background: #fff;
  -webkit-mask: url("../images/star_cursor.svg") center / contain no-repeat;
  mask: url("../images/star_cursor.svg") center / contain no-repeat;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: background-color 0.15s ease;
}

/* Pure black or white, never a colour: the star shows what's behind it in greyscale, pushed to
   black or white (contrast) and then flipped (invert), so it's black over anything light and white
   over anything dark. Browsers without backdrop-filter keep the "difference" star above. */
@supports (backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1)) {
  .star-cursor {
    background: transparent;
    mix-blend-mode: normal;
    -webkit-backdrop-filter: grayscale(1) contrast(100) invert(1);
    backdrop-filter: grayscale(1) contrast(100) invert(1);
  }
}

.star-cursor.is-over-clickable {
  mix-blend-mode: normal;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--cursor-hover-color);
}

.star-cursor.is-over-clickable.is-over-hover-color {
  background: var(--cursor-hover-contrast-color);
}

/* Sparkle trail behind the cursor (cursor.js). The sparkles are drawn white and shown with
   "difference", so like the star they're dark over light areas and light over dark ones. */
.cursor-trail {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: difference;
}

/* While the star is active, hide the system cursor everywhere (even where a page sets its own). */
html.has-star-cursor,
html.has-star-cursor * {
  cursor: none !important;
}