/**
 * JADT MEP — Custom Cursor
 * Dot + lagging ring. Always-visible invert blend, smooth GSAP motion.
 * Desktop fine-pointer only.
 */

:root {
  --jadt-cursor-ink: #ffffff;
  --jadt-cursor-z: 2147483000;
}

@media (hover: hover) and (pointer: fine) {
  /* Kill native cursor everywhere (incl. theme cursor:pointer hand) */
  html.jadt-cursor-on,
  html.jadt-cursor-on * {
    cursor: none !important;
  }

  /* Only form fields keep a native caret / default */
  html.jadt-cursor-on input,
  html.jadt-cursor-on textarea,
  html.jadt-cursor-on select,
  html.jadt-cursor-on [contenteditable="true"],
  html.jadt-cursor-on input *,
  html.jadt-cursor-on textarea *,
  html.jadt-cursor-on select * {
    cursor: auto !important;
  }

  html.jadt-cursor-on input[type="text"],
  html.jadt-cursor-on input[type="email"],
  html.jadt-cursor-on input[type="password"],
  html.jadt-cursor-on input[type="search"],
  html.jadt-cursor-on input[type="tel"],
  html.jadt-cursor-on input[type="url"],
  html.jadt-cursor-on input[type="number"],
  html.jadt-cursor-on textarea {
    cursor: text !important;
  }
}

/* Fixed layers — NEVER put opacity on a parent of blend-mode children
   (opacity creates isolation and kills invert on light backgrounds). */
.jadt-cursor-ring,
.jadt-cursor-dot,
.jadt-cursor-ripple,
.jadt-cursor-particle {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--jadt-cursor-z);
  border-radius: 50%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.jadt-cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--jadt-cursor-ink);
  background: transparent;
  mix-blend-mode: difference;
  opacity: 0;
}

.jadt-cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--jadt-cursor-ink);
  mix-blend-mode: difference;
  opacity: 0;
}

/* State cues = size only (via GSAP scale). Invert stays on so gold
   buttons stay readable — cursor becomes dark navy over yellow. */
.jadt-cursor-ring.is-interactive {
  border-width: 2px;
}

.jadt-cursor-ripple {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--jadt-cursor-ink);
  mix-blend-mode: difference;
  opacity: 0.85;
}

.jadt-cursor-particle {
  width: 4px;
  height: 4px;
  background: var(--jadt-cursor-ink);
  mix-blend-mode: difference;
  opacity: 0.7;
}

@media (hover: none), (pointer: coarse) {
  .jadt-cursor-ring,
  .jadt-cursor-dot,
  .jadt-cursor-ripple,
  .jadt-cursor-particle {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jadt-cursor-particle {
    display: none !important;
  }
}