/* =============================================================================
   CUSTOM CURSOR
   Main dot + RGB ghost trail
   Velocity-driven trail spread — physics handled in JS
   ============================================================================= */

/* --- Custom properties --- */
:root {
  --cursor-size: 10px;
  --cursor-color: #ed4845;

  /* RGB ghost colours — adjust per theme */
  --cursor-r: rgba(255, 0, 0, 0.8);
  --cursor-g: rgba(0, 255, 0, 0.8);
  --cursor-b: rgba(0, 0, 255, 0.8);
}

/* --- Hide native cursor site-wide (desktop only — guard in JS) --- */
html.custom-cursor-active,
html.custom-cursor-active * {
  cursor: none !important;
}

/* --- Cursor wrapper — fixed position, pointer-events off --- */
#custom-cursor-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 99999;
  pointer-events: none;
}

/* --- Main dot --- */
.cc-dot {
  position: absolute;
  width: var(--cursor-size);
  height: var(--cursor-size);
  border-radius: 50%;
  background: var(--cursor-color);
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* --- Ghost dots --- */
.cc-ghost {
  position: absolute;
  width: var(--cursor-size);
  height: var(--cursor-size);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.cc-ghost[data-channel="r"] { background: var(--cursor-r); }
.cc-ghost[data-channel="g"] { background: var(--cursor-g); }
.cc-ghost[data-channel="b"] { background: var(--cursor-b); }

/* --- Reduced motion: keep cursor dot, kill trail --- */
@media (prefers-reduced-motion: reduce) {
  .cc-ghost {
    display: none;
  }
}