/* custom-cursor.css
   Star Old Spare Parts — Wheel Ring Cursor System
   Hides default OS cursor on desktop and styles the #star-custom-cursor element.
*/

/* ── Hide native cursor on desktop ───────────────────────────── */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  html, body,
  a, button, .btn,
  [role="button"], label, select,
  [data-cursor] {
    cursor: none !important;
  }
  input, textarea {
    cursor: text !important;
  }
}

/* ── Cursor Container ─────────────────────────────────────────── */
#star-custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2147483647;
  overflow: hidden;
  /* Hidden on mobile / touch by default */
  display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  #star-custom-cursor {
    display: block;
  }
}

/* ── Shared Layer ─────────────────────────────────────────────── */
.cursor-layer-blend,
.cursor-layer-normal {
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* shown by JS on first mousemove */
}

/* ── Blend layer: difference mix for high contrast on any bg ──── */
.cursor-layer-blend {
  mix-blend-mode: difference;
  color: white;
}

.cursor-layer-normal {
  color: white;
}

/* ── Outer Ring (slow static circle) ─────────────────────────── */
.cursor-ring-outer,
.cursor-ring-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cursor-ring-outer circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: 0.25;
}

/* ── Inner Spinning Dashed Ring (the "wheel") ────────────────── */
.cursor-ring-inner circle {
  fill: none;
  stroke: #38BDF8;
  stroke-width: 2.5;
  /* 3 visible arcs out of full circumference (~239px for r=38) */
  stroke-dasharray: 68 28;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(56,189,248,0.7));
}

/* ── Chevron / Direction icons ───────────────────────────────── */
.cursor-icon-svg {
  position: absolute;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #38BDF8;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), opacity 0.3s ease;
  filter: drop-shadow(0 0 3px rgba(56,189,248,0.6));
}

.cursor-chevron-top-normal {
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
}

.cursor-chevron-bottom-normal {
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
}

/* ── Sparkle (star) icon — shown on 'view' mode ─────────────── */
.cursor-sparkle {
  position: absolute;
  width: 18px;
  height: 18px;
  fill: #38BDF8;
  stroke: none;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
  filter: drop-shadow(0 0 4px rgba(56,189,248,0.8));
}

/* ── Aura glow behind the ring ───────────────────────────────── */
.cursor-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,0.18) 0%, rgba(56,189,248,0) 70%);
  filter: blur(6px);
  pointer-events: none;
  transition: background 0.4s ease, transform 0.4s ease;
}