/* SANGU custom cursor with lerp (desktop only)
 * White dot + mix-blend-mode: difference inverts whatever is underneath.
 */

@media (min-width: 1025px) and (pointer: fine) {
  body.has-custom-cursor,
  body.has-custom-cursor * {
    cursor: none !important;
  }

  body.has-custom-cursor input,
  body.has-custom-cursor textarea,
  body.has-custom-cursor select,
  body.has-custom-cursor [contenteditable="true"] {
    cursor: text !important;
  }
}

.site-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  pointer-events: none;
  z-index: 9400;
  opacity: 0;
  will-change: transform;
  mix-blend-mode: difference;
  transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, mix-blend-mode 0.2s ease;
}

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

.site-cursor.is-hidden {
  opacity: 0 !important;
}

.site-cursor--hover {
  width: 18px;
  height: 18px;
}

/* Portfolio CTA: solid circle (not blend) so label stays readable */
.site-cursor--portfolio {
  width: 120px;
  height: 120px;
  background: var(--color-navy);
  mix-blend-mode: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-cursor--portfolio .site-cursor__label {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cream);
  text-align: center;
  line-height: 1.2;
  padding: 0 var(--space-xs);
}

@media (max-width: 1024px), (pointer: coarse) {
  .site-cursor {
    display: none !important;
  }
}