:root {
  --cursor-dot-size: 10px;
  --cursor-ring-size: 34px;
  --cursor-color: 255, 0, 0; /* R, G, B */
  --cursor-click-size: 14px;
}

/* Hide default cursor on pointer devices (we'll draw our own). */
@media (pointer: fine) {
  html,
  body {
    cursor: none;
  }
}

/* Disable effects for reduced motion users. */
@media (prefers-reduced-motion: reduce) {
  html,
  body {
    cursor: auto;
  }
  .custom-cursor-root {
    display: none !important;
  }
}

.custom-cursor-root {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 2147483647;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 12px rgba(var(--cursor-color), 0.35));
}

.custom-cursor-dot,
.custom-cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform;
  pointer-events: none;
}

.custom-cursor-dot {
  width: var(--cursor-dot-size);
  height: var(--cursor-dot-size);
  border-radius: 999px;
  background: rgba(var(--cursor-color), 0.95);
}

.custom-cursor-ring {
  width: var(--cursor-ring-size);
  height: var(--cursor-ring-size);
  border-radius: 999px;
  border: 2px solid rgba(var(--cursor-color), 0.55);
  background: rgba(var(--cursor-color), 0.08);
  backdrop-filter: blur(2px);
}

.custom-cursor-click {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--cursor-click-size);
  height: var(--cursor-click-size);
  border-radius: 999px;
  border: 2px solid rgba(var(--cursor-color), 0.85);
  background: rgba(var(--cursor-color), 0.10);
  pointer-events: none;
  z-index: 2147483647;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 16px rgba(var(--cursor-color), 0.35));
  animation: customCursorClick 520ms cubic-bezier(.2, .9, .2, 1) forwards;
}

@keyframes customCursorClick {
  0% {
    opacity: 1;
    transform: translate3d(var(--x, -9999px), var(--y, -9999px), 0) translate(-50%, -50%) scale(0.75);
  }
  60% {
    opacity: 0.75;
    transform: translate3d(var(--x, -9999px), var(--y, -9999px), 0) translate(-50%, -50%) scale(2.2);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--x, -9999px), var(--y, -9999px), 0) translate(-50%, -50%) scale(3.0);
  }
}

/* Hover over interactive elements => bigger, punchier ring */
.custom-cursor--hover .custom-cursor-ring {
  transform: translate3d(-9999px, -9999px, 0) scale(1.25);
  border-color: rgba(var(--cursor-color), 0.8);
  background: rgba(var(--cursor-color), 0.12);
}

/* Mouse down => quick pulse */
.custom-cursor--down .custom-cursor-dot {
  transform: translate3d(-9999px, -9999px, 0) scale(0.85);
}
.custom-cursor--down .custom-cursor-ring {
  transform: translate3d(-9999px, -9999px, 0) scale(0.9);
}