/* ── Custom Cursor Styles ── */
/* Hide default cursor when custom cursor is active */
.custom-cursor, .custom-cursor * { cursor: none !important; }

/* Dot — fixed 8px circle, instant position */
.sylq-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  margin-left: -4px; margin-top: -4px;
  border-radius: 50%;
  background: #ffffff;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 2147483647;
  opacity: 0;
  transition: opacity .3s, background .4s;
}
.sylq-cursor-dot.visible { opacity: 1; }

/* Ring — 24px hollow circle, lagged position */
.sylq-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 24px; height: 24px;
  margin-left: -12px; margin-top: -12px;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
  mix-blend-mode: difference;
  background: transparent;
  pointer-events: none;
  z-index: 2147483646;
  opacity: 0;
  transition: width .25s cubic-bezier(.22,1,.36,1),
              height .25s cubic-bezier(.22,1,.36,1),
              margin .25s cubic-bezier(.22,1,.36,1),
              opacity .3s,
              background .25s,
              border-color .4s,
              border-width .25s;
}
.sylq-cursor-ring.visible { opacity: 1; }

/* Hover state — expand to 40px, slight fill */
.sylq-cursor-ring.hover {
  width: 40px; height: 40px;
  margin-left: -20px; margin-top: -20px;
  background: rgba(255, 255, 255, 0.1);
  border-width: 1px;
}

/* Removed specific dark mode hover to rely on difference blending */

/* Click state — shrink snap */
.sylq-cursor-ring.click {
  width: 16px; height: 16px;
  margin-left: -8px; margin-top: -8px;
  transition: width .1s, height .1s, margin .1s;
}

/* Responsive: disable on touch/mobile */
@media (pointer: coarse) {
  .sylq-cursor-dot, .sylq-cursor-ring { display: none !important; }
  .custom-cursor, .custom-cursor * { cursor: auto !important; }
}