/* ==========================================================================
   cursor.css — Custom cursor (pointer:fine only)
   Hidden entirely on touch devices.
   ========================================================================== */

/* Gate everything behind pointer:fine */
@media (pointer: fine) {
  .cursor {
    position: fixed;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 10001;
    transform: translate(-30%, -5%);
    opacity: 0;
    transition: opacity 0.3s ease;
    background-image: url('../assets/cursor-hand-states.png');
    background-position: left center;
    background-size: 200% 100%;
    background-repeat: no-repeat;
    image-rendering: pixelated;
  }

  .cursor.grabbing {
    background-position: right center;
  }

  body:hover .cursor {
    opacity: 1;
  }

  .cursor-trail {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, transparent 70%);
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
  }

  /* Hide system cursor on interactive elements */
  body,
  a,
  button,
  .interactive,
  .faq-question,
  .portfolio-item,
  .cta {
    cursor: none;
  }
}

/* pointer:coarse — ensure system cursor */
@media (pointer: coarse) {
  .cursor,
  .cursor-trail {
    display: none !important;
  }

  body {
    cursor: auto;
  }
}