/* ============================================================
   ALMARA DESIGN — Custom Cursor
   ============================================================ */

body { cursor: none; }
a, button, .project-card, .tag, [data-cursor="hover"] { cursor: none; }

#customCursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: var(--z-toast);
}

.cursor__dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  top: var(--cy, -100px);
  left: var(--cx, -100px);
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s;
}

.cursor__ring {
  position: fixed;
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(184,149,106,0.5);
  border-radius: 50%;
  top: var(--ry, -100px);
  left: var(--rx, -100px);
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, border-color 0.3s, opacity 0.3s;
}

/* Hover state */
#customCursor.cursor--hover .cursor__dot {
  width: 10px;
  height: 10px;
  background: var(--color-accent-dark);
}
#customCursor.cursor--hover .cursor__ring {
  width: 48px;
  height: 48px;
  border-color: var(--color-accent);
}

/* Click state */
#customCursor.cursor--click .cursor__dot { transform: translate(-50%, -50%) scale(0.6); }
#customCursor.cursor--click .cursor__ring { transform: translate(-50%, -50%) scale(0.8); }

/* Hide on touch devices */
@media (pointer: coarse) {
  body, a, button, .project-card, .tag { cursor: auto; }
  #customCursor { display: none; }
}