/* =====================================================
   Modern Cursor Styles
   ===================================================== */

.cursor,
.cursor-follower {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.1s ease;
}

.cursor {
  width: 12px;
  height: 12px;
  background: transparent;
  border: 2px solid var(--accent-purple, #9b59b6);
  box-shadow: 0 0 8px var(--accent-purple, #9b59b6);
}

.cursor-follower {
  width: 48px;
  height: 48px;
  background: transparent;
  border: 2px solid var(--accent-purple, #9b59b6);
  filter: blur(1px);
}

.cursor.visible,
.cursor-follower.visible {
  opacity: 1;
  visibility: visible;
}

.cursor.hover,
.cursor-follower.hover {
  transform: translate(-50%, -50%) scale(1.3);
}

.cursor.click,
.cursor-follower.click {
  transform: translate(-50%, -50%) scale(0.8);
}

.cursor.click {
  background: var(--accent-purple, #9b59b6);
}

.konami-active .cursor,
.konami-active .cursor-follower {
  border: 2px solid var(#ffffff);
}

html,
body,
* {
  cursor: none !important;
}

/* =====================================================
   Media Query for Hover Devices
   ===================================================== */
@media (hover: hover) and (pointer: fine) {
  body:hover .cursor,
  body:hover .cursor-follower {
    opacity: 1;
    visibility: visible;
  }
}