/* Hide the native pointer only while the custom cursor is visible. */
@media (hover: hover) and (pointer: fine) and (any-pointer: fine) and
       (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  html.has-custom-cursor,
  html.has-custom-cursor * {
    cursor: none !important;
  }
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}

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

.custom-cursor::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url('assets/cursor-regular.svg') center / contain no-repeat;
  filter: drop-shadow(0 1px 2px var(--bg-primary, #F5F5FA));
  transition: transform 150ms ease;
  transform-origin: 25% 9.375%;
}

.custom-cursor[data-state="content"]::before { transform: scale(1.04); }
.custom-cursor[data-state="interactive"]::before {
  background-image: url('assets/cursor-select.svg');
  transform: scale(1.08);
}
.custom-cursor.is-pressed::before { transform: scale(0.92); }

@media (hover: none), (pointer: coarse), (any-pointer: coarse),
       (prefers-reduced-motion: reduce), (forced-colors: active) {
  .custom-cursor { display: none; }
}