/* ============================================================
   CUSTOM CURSOR — SM red accent, fine pointer only
   ============================================================ */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}

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

.cursor__dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
  transition:
    width      var(--dur-fast) var(--ease-spring),
    height     var(--dur-fast) var(--ease-spring),
    background var(--dur-fast) var(--ease-out);
  will-change: transform;
}

.cursor__ring {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(220, 38, 38, 0.45);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
  transition:
    width        var(--dur-normal) var(--ease-out),
    height       var(--dur-normal) var(--ease-out),
    background   var(--dur-normal) var(--ease-out),
    border-color var(--dur-normal) var(--ease-out),
    box-shadow   var(--dur-normal) var(--ease-out);
  will-change: transform;
}

.cursor__label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: var(--weight-black);
  letter-spacing: 0.12em;
  color: var(--color-text-primary);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* Hover state */
.cursor.is-hover .cursor__dot {
  width: 10px;
  height: 10px;
  background: var(--color-accent);
}
.cursor.is-hover .cursor__ring {
  width: 56px;
  height: 56px;
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.30);
}

/* CTA state */
.cursor.is-cta .cursor__dot { width: 0; height: 0; opacity: 0; }
.cursor.is-cta .cursor__ring {
  width: 64px;
  height: 64px;
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.40);
}
.cursor.is-cta .cursor__label { opacity: 1; }

/* Click state */
.cursor.is-click .cursor__dot { width: 14px; height: 14px; }
.cursor.is-click .cursor__ring { width: 40px; height: 40px; }

/* Text cursor state */
.cursor.is-text .cursor__ring { opacity: 0; }
.cursor.is-text .cursor__dot { width: 2px; height: 20px; border-radius: 1px; }

@media (pointer: coarse) { .cursor { display: none; } }