@media (hover: hover) and (pointer: fine) {
  body.custom-crosshair-active,
  body.custom-crosshair-active * {
    cursor: none !important;
  }

  .custom-crosshair {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 24px;
    height: 24px;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
    transition: opacity 160ms ease;
    will-change: transform, opacity;
  }

  .custom-crosshair.is-visible {
    opacity: 1;
  }

  .custom-crosshair-ring {
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(63, 224, 255, 0.9);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(63, 224, 255, 0.12), transparent 68%);
    box-shadow: 0 0 12px rgba(63, 224, 255, 0.35), inset 0 0 8px rgba(63, 224, 255, 0.14);
    transition: inset 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    animation: crosshair-pulse 2.4s ease-in-out infinite;
  }

  .custom-crosshair-line {
    display: none;
  }

  .custom-crosshair-core {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 4px;
    height: 4px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #3fe0ff;
    box-shadow: 0 0 9px 2px rgba(63, 224, 255, 0.7);
    transition: transform 140ms ease, background 180ms ease;
  }

  .custom-crosshair.is-hovering .custom-crosshair-ring {
    inset: 0;
    border-color: rgba(55, 240, 165, 0.95);
    box-shadow: 0 0 18px rgba(55, 240, 165, 0.55), inset 0 0 10px rgba(55, 240, 165, 0.2);
    animation-duration: 1.2s;
  }

  .custom-crosshair.is-hovering .custom-crosshair-core {
    background: #37f0a5;
    transform: scale(1.35);
  }

  .custom-crosshair.is-pressed .custom-crosshair-ring {
    inset: 6px;
    transform: rotate(45deg);
  }

  .custom-crosshair.is-pressed .custom-crosshair-core {
    transform: scale(0.7);
  }

  .custom-crosshair.is-reduced-motion .custom-crosshair-ring {
    animation: none;
  }
}

@keyframes crosshair-pulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(63, 224, 255, 0.25), inset 0 0 6px rgba(63, 224, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 17px rgba(63, 224, 255, 0.5), inset 0 0 10px rgba(63, 224, 255, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .custom-crosshair-ring {
    animation: none !important;
    transition: none !important;
  }

  .custom-crosshair-core {
    transition: none !important;
  }
}