/* ============================================================
   COMPONENT: Custom cursor — precise dot + trailing ring
   The dot tracks the mouse exactly (no lag); the ring follows
   with easing and grows over media / links. Pointer devices only.
   ============================================================ */

.cursor,
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Trailing ring */
.cursor {
  width: 34px; height: 34px;
  border: 1.5px solid rgba(244, 241, 235, 0.55);
  opacity: 0;
  transition: width var(--dur-fast) var(--ease-out),
              height var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              opacity var(--dur) var(--ease-out);
}
.cursor.is-ready { opacity: 1; }
.cursor.is-hover {
  width: 66px; height: 66px;
  background: rgba(229, 75, 39, 0.16);
  border-color: var(--color-accent);
}

/* Precise dot */
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.cursor-dot.is-ready { opacity: 1; }

.cursor__label { display: none; }

/* Hide the OS cursor only while the custom one is active */
body.cursor-custom,
body.cursor-custom * { cursor: none; }

/* Touch / coarse pointers and reduced motion: native cursor, no custom */
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-dot { display: none; }
  body.cursor-custom, body.cursor-custom * { cursor: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor, .cursor-dot { display: none; }
}