@media (pointer: fine) {
  html,
  body {
    cursor: url("cursors/cursor-default.svg?v=20260830-5") 5 4, auto;
  }

  a,
  button,
  summary,
  label,
  select,
  input[type="checkbox"],
  input[type="radio"],
  input[type="submit"] {
    cursor: url("cursors/cursor-action.svg?v=20260830-5") 5 4, pointer;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  textarea {
    cursor: text;
  }

  html.has-brand-cursor,
  html.has-brand-cursor body,
  html.has-brand-cursor a,
  html.has-brand-cursor button,
  html.has-brand-cursor summary,
  html.has-brand-cursor label,
  html.has-brand-cursor select,
  html.has-brand-cursor input[type="checkbox"],
  html.has-brand-cursor input[type="radio"],
  html.has-brand-cursor input[type="submit"] {
    cursor: none;
  }

  html.has-brand-cursor input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  html.has-brand-cursor textarea {
    cursor: text;
  }
}

.brand-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  width: 1px;
  height: 1px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--cursor-x, -60px), var(--cursor-y, -60px), 0);
  transition: opacity 160ms ease;
  contain: layout style;
}

.brand-cursor.is-visible {
  opacity: 1;
}

.brand-cursor.is-over-text {
  opacity: 0;
}

.brand-cursor__glyph {
  position: absolute;
  top: 0;
  left: 0;
  width: 27px;
  height: 27px;
  background: center / contain no-repeat url("cursors/cursor-default.svg?v=20260830-5");
  filter:
    drop-shadow(0 0 1px rgb(240 197 181 / 42%))
    drop-shadow(0 0 3px rgb(211 176 120 / 30%))
    drop-shadow(0 0 6px rgb(211 176 120 / 11%));
  transition:
    opacity 120ms ease,
    filter 180ms ease;
}

.brand-cursor__glyph--action {
  background-image: url("cursors/cursor-action.svg?v=20260830-5");
  opacity: 0;
}

.brand-cursor.is-interactive .brand-cursor__glyph--default {
  opacity: 0;
}

.brand-cursor.is-interactive .brand-cursor__glyph--action {
  opacity: 1;
  filter:
    drop-shadow(0 0 1px rgb(244 214 159 / 50%))
    drop-shadow(0 0 4px rgb(211 176 120 / 40%))
    drop-shadow(0 0 7px rgb(211 176 120 / 15%));
}

@media (prefers-reduced-motion: reduce) {
  .brand-cursor {
    display: none;
  }
}