/* cursor-css */
:root {
  --cursor-size: 10px; /* inner dot */
  --ring-size: 36px; /* outer ring */
  --cursor-color: #ffffff; /* slate-900 */
  --ring-color: rgba(255, 255, 255, 0.35);
  --hover-scale: 1.8; /* ring scale on hover */
  --click-scale: 0.85; /* tiny press on click */
  --trail-ease: 0.16; /* JS lerp factor */
  --z-cursor: 999999;
}
body {
  background-color: #000;
}

/* Hide default cursor for desktops only */
@media (hover: hover) and (pointer: fine) {
  body,
  a,
  button {
    cursor: none;
  }
}

/* Cursor containers (no mouse capture) */
.cursor,
.cursor-ring,
.cursor-ripple {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  will-change: transform, width, height, opacity;
  transition: opacity 0.25s ease;
}

/* Inner dot */
.cursor {
  width: var(--cursor-size);
  height: var(--cursor-size);
  border-radius: 50%;
  background: var(--cursor-color);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Outer ring */
.cursor-ring {
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 999px;
  border: 2px solid var(--ring-color);
  backdrop-filter: blur(1px);
}

/* Hover state: grow ring a bit */
.cursor-ring.is-hover {
  transform: translate(-50%, -50%) scale(var(--hover-scale));
  border-color: rgba(15, 23, 42, 0.5);
}

/* Click ripple */
.cursor-ripple {
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.35);
  opacity: 0;
}
.cursor-ripple.animate {
  animation: ripple 0.45s ease-out forwards;
}
@keyframes ripple {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
  }
}

/* Accessibility: if reduced motion is preferred, remove animations */
@media (prefers-reduced-motion: reduce) {
  .cursor-ring,
  .cursor {
    transition: none !important;
  }
  .cursor-ripple {
    display: none !important;
  }
}
/* cursor-css */