.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: difference;
}

.cursor__dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--gold-bright);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.25s, height 0.25s, background 0.25s;
}

.cursor__ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(243, 209, 90, 0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), border-color 0.3s, opacity 0.3s;
}

/* Hover states via JS classes */
.cursor.is-hover .cursor__dot {
  width: 12px;
  height: 12px;
  background: var(--leaf);
}

.cursor.is-hover .cursor__ring {
  width: 64px;
  height: 64px;
  border-color: var(--leaf);
}

.cursor.is-click .cursor__ring {
  width: 28px;
  height: 28px;
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
}