/* ============================================
   CUSTOM CURSOR STYLES
   GSAP-powered: dot (snap) + outline (lerp) + label
   ============================================ */

/* Both elements positioned at top:0 left:0
   JS handles all movement via transform: translate(x - 50%, y - 50%) */
.cursor-dot,
.cursor-outline,
.cursor-label {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10001;
  will-change: transform;
  transition: opacity 0.2s ease;
}

.cursor-dot {
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  z-index: 10002;
  /* Stronger, more visible rose gold bloom */
  box-shadow:
    0 0 6px 3px rgba(232, 160, 191, 0.9),
    0 0 16px 7px rgba(232, 160, 191, 0.5),
    0 0 32px 12px rgba(232, 160, 191, 0.2);
}

.cursor-outline {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(232, 160, 191, 0.7);
  border-radius: 50%;
  z-index: 10000;
  opacity: 0.7;
  transform-origin: center center;
  /* Subtle ring glow */
  box-shadow: 0 0 10px 2px rgba(232, 160, 191, 0.15);
}

/* "VIEW →" label shown on project card hover */
.cursor-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: var(--accent);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0a0a0a;
  z-index: 10003;
  opacity: 0;
  transform-origin: center center;
}

/* Hide on touch screens */
@media (hover: none), (pointer: coarse) {
  .cursor-dot,
  .cursor-outline,
  .cursor-label {
    display: none;
  }

  html, body, a, button {
    cursor: auto !important;
  }
}