/* ═══════════════════════════════════════════════════════════
   CUSTOM CURSOR — Arshia Portfolio
   ═══════════════════════════════════════════════════════════ */

/* ── Cursor Dot (inner) ────────────────────────────────── */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--color-text-primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: 
    width var(--duration-fast) var(--ease-out),
    height var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
  will-change: transform;
  mix-blend-mode: difference;
}

/* ── Cursor Circle (follower) ──────────────────────────── */
.cursor-circle {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(var(--color-accent-rgb), 0.35);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition:
    width var(--duration-normal) var(--ease-out),
    height var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    background var(--duration-normal) var(--ease-out),
    opacity var(--duration-normal) var(--ease-out);
  will-change: transform;
}

/* ── Hover States ──────────────────────────────────────── */
.cursor--hovering .cursor-dot {
  width: 4px;
  height: 4px;
  opacity: 0.6;
}

.cursor--hovering .cursor-circle {
  width: 56px;
  height: 56px;
  border-color: rgba(var(--color-accent-rgb), 0.5);
  background: rgba(var(--color-accent-rgb), 0.04);
}

/* ── Card Hover ────────────────────────────────────────── */
.cursor--on-card .cursor-circle {
  width: 72px;
  height: 72px;
  border-color: rgba(var(--color-accent-rgb), 0.3);
  background: rgba(var(--color-accent-rgb), 0.03);
}

/* ── Text Hover ────────────────────────────────────────── */
.cursor--on-text .cursor-dot {
  width: 3px;
  height: 20px;
  border-radius: 2px;
}

.cursor--on-text .cursor-circle {
  opacity: 0;
}

/* ── Hidden (mobile / touch) ───────────────────────────── */
.cursor--hidden .cursor-dot,
.cursor--hidden .cursor-circle {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Hide default cursor on desktop when custom is active */
.has-custom-cursor,
.has-custom-cursor a,
.has-custom-cursor button,
.has-custom-cursor [data-cursor] {
  cursor: none !important;
}

/* ── Disable on touch devices ──────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .cursor-dot,
  .cursor-circle {
    display: none !important;
  }
}