/* ============================================================
   cursor.css — custom cursor with 3 states
   Default: small ring / Link: expanded ring / Image: VIEW circle
   ============================================================ */

/* ── BASE RING ───────────────────────────────────────────── */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translateX(-50%) translateY(-50%);
  will-change: transform;
  background-color: transparent;
  border: 1px solid rgba(136, 136, 136, 0.67);
  transition:
    width            0.3s cubic-bezier(0.16, 1, 0.3, 1),
    height           0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color     0.3s cubic-bezier(0.16, 1, 0.3, 1),
    opacity          0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Hidden — applied on mouseleave */
.cursor.is-hidden {
  opacity: 0;
}

/* ── LINK STATE — hovering a link or button ──────────────── */
.cursor.is-link {
  width: 64px;
  height: 64px;
  background-color: rgba(180, 175, 168, 0.25);
  border-color: transparent;
}

/* ── IMAGE STATE — hovering a project image ──────────────── */
.cursor.is-image {
  width: 80px;
  height: 80px;
  background-color: #F0FFFF;
  border-color: transparent;
  mix-blend-mode: difference;
}

/* VIEW label visible in image state */
.cursor.is-image .cursor__label {
  opacity: 1;
  transform: scale(1);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: #0a0a0a;
  background: none;
  padding: 0;
}

/* ── VIEW LABEL ──────────────────────────────────────────── */
.cursor__label {
  font-family: var(--font-nav);
  font-size: 0.6rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity   0.25s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}