/* ============================================================================
   Custom cursor — drop-in addon
   ----------------------------------------------------------------------------
   A small dot that tracks the real cursor exactly, plus a larger ring that
   trails behind it with slight lag. The ring grows and the dot hides on
   hover over links/buttons/cards. Desktop mouse only — hidden automatically
   on touch/coarse-pointer devices, and inert under prefers-reduced-motion.

   HOW TO USE
   1. Include this file's CSS (link it, or paste into your stylesheet).
   2. Include cursor.js before </body> (defer or place at the end).
   3. Optionally set --cursor-color on :root to match your brand color;
      defaults to a teal if you don't.
   That's it — the script creates its own elements, nothing else to add
   to your HTML.
   ========================================================================== */

:root {
  --cursor-color: #12B892; /* change to match your brand */
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.cursor-dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--cursor-color);
}

.cursor-ring {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1.5px solid color-mix(in srgb, var(--cursor-color) 55%, transparent);
  transition:
    opacity 220ms cubic-bezier(0.2, 0.7, 0.3, 1),
    width 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    height 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    margin 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Shown once the mouse actually moves, so it never flashes at 0,0 on load. */
body.cursor-active .cursor-dot,
body.cursor-active .cursor-ring {
  opacity: 1;
}

/* Grows and swallows the dot when hovering an interactive element.
   Edit the selector list in cursor.js to match what "interactive" means
   in your markup. */
body.cursor-hover .cursor-ring {
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  background: color-mix(in srgb, var(--cursor-color) 12%, transparent);
}
body.cursor-hover .cursor-dot {
  opacity: 0;
}

/* Touch/coarse-pointer devices don't have a real cursor to replace. */
@media (pointer: coarse), (hover: none) {
  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}

@media print {
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}