/* Hitech Cursor Effect - Advanced States */
body[data-cursor-effects="on"],
body[data-cursor-effects="on"] * {
  cursor: none !important;
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: #00f3ff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000100;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px #00f3ff, 0 0 20px #00f3ff;
  transition: width 0.2s, height 0.2s, background-color 0.2s, border-radius 0.2s;
  contain: layout style paint;
  -webkit-transform: translate3d(0, 0, 0) translate(-50%, -50%);
  transform: translate3d(0, 0, 0) translate(-50%, -50%);
  will-change: transform;
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  pointer-events: none;
  z-index: 1000099;
  transform: translate(-50%, -50%);
  contain: layout style paint;
  -webkit-transform: translate3d(0, 0, 0) translate(-50%, -50%);
  transform: translate3d(0, 0, 0) translate(-50%, -50%);
  will-change: transform;
}

.cursor-ring-inner {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0, 243, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
}

.cursor-ring.hovered .cursor-ring-inner {
  transform: rotate(45deg) scale(0.8);
  border-radius: 4px;
  border-color: #00f3ff;
  background-color: rgba(0, 243, 255, 0.05);
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
}

.cursor-ring.magnetized .cursor-ring-inner {
  transform: rotate(45deg) scale(0.7);
  border-width: 2px;
  box-shadow: 0 0 25px rgba(0, 243, 255, 0.4);
}

.cursor-dot.hovered {
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  box-shadow: 0 0 15px #ffffff;
}

.cursor-ring.text-mode .cursor-ring-inner {
  border-color: transparent;
  background-color: transparent;
  transform: scale(1);
  box-shadow: none;
  border-radius: 0;
}

.cursor-ring.text-mode .cursor-ring-inner::before,
.cursor-ring.text-mode .cursor-ring-inner::after {
  content: '';
  position: absolute;
  top: 20%;
  bottom: 20%;
  width: 8px;
  border: 2px solid #00f3ff;
  transition: all 0.3s ease;
}

.cursor-ring.text-mode .cursor-ring-inner::before {
  left: -5px;
  border-right: none;
  border-radius: 4px 0 0 4px;
}

.cursor-ring.text-mode .cursor-ring-inner::after {
  right: -5px;
  border-left: none;
  border-radius: 0 4px 4px 0;
}

.cursor-dot.text-mode {
  background-color: #00f3ff;
  height: 24px;
  width: 2px;
  border-radius: 1px;
  box-shadow: 0 0 10px #00f3ff;
}

.cursor-ring.scan-mode .cursor-ring-inner {
  border-color: transparent;
  background-color: rgba(0, 243, 255, 0.02);
  transform: scale(1.4);
  border-radius: 0;
  box-shadow: none;
}

.cursor-ring.scan-mode .cursor-ring-inner::before,
.cursor-ring.scan-mode .cursor-ring-inner::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 2px solid #00f3ff;
  transition: all 0.3s ease;
  clip-path: none;
  border: none;
  background: 
    linear-gradient(to right, #00f3ff 2px, transparent 2px) 0 0,
    linear-gradient(to bottom, #00f3ff 2px, transparent 2px) 0 0,
    linear-gradient(to left, #00f3ff 2px, transparent 2px) 100% 0,
    linear-gradient(to bottom, #00f3ff 2px, transparent 2px) 100% 0,
    linear-gradient(to right, #00f3ff 2px, transparent 2px) 0 100%,
    linear-gradient(to top, #00f3ff 2px, transparent 2px) 0 100%,
    linear-gradient(to left, #00f3ff 2px, transparent 2px) 100% 100%,
    linear-gradient(to top, #00f3ff 2px, transparent 2px) 100% 100%;
  background-size: 10px 10px;
  background-repeat: no-repeat;
}

.cursor-ring.scan-mode .cursor-ring-inner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(0, 243, 255, 0.8);
  box-shadow: 0 0 10px #00f3ff;
  animation: scanLine 1.5s linear infinite;
  background-size: 100% 100%;
}

@keyframes scanLine {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.cursor-ring.clicking .cursor-ring-inner {
  transform: scale(0.9);
  background-color: rgba(0, 243, 255, 0.3);
  border-color: #ffffff;
}

.cursor-trail-particle {
  position: fixed;
  width: 4px;
  height: 4px;
  background-color: rgba(0, 243, 255, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000098;
  animation: fadeOut 0.5s linear forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

.cursor-compass {
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.cursor-compass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 60deg,
    rgba(0, 243, 255, 1) 90deg,
    transparent 120deg
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.cursor-compass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 50deg,
    rgba(0, 243, 255, 0.6) 90deg,
    transparent 130deg
  );
  filter: blur(4px);
  z-index: -1;
}

.cursor-ripple {
  position: fixed;
  border-radius: 50%;
  border: 1px solid rgb(0, 153, 255);
  background: radial-gradient(circle, rgba(0, 243, 255, 0.1) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1000097;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
  animation: rippleExpand 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@keyframes rippleExpand {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.8;
  }
  100% {
    width: 150px;
    height: 150px;
    opacity: 0;
  }
}

.cursor-ring.idle .cursor-ring-inner {
  animation: idlePulse 3s infinite ease-in-out;
  opacity: 0.5;
}

@keyframes idlePulse {
  0% { transform: scale(1); box-shadow: 0 0 15px rgba(0, 243, 255, 0.1); border-color: rgba(0, 243, 255, 0.3); }
  50% { transform: scale(1.1); box-shadow: 0 0 25px rgba(0, 243, 255, 0.3); border-color: rgba(0, 243, 255, 0.6); }
  100% { transform: scale(1); box-shadow: 0 0 15px rgba(0, 243, 255, 0.1); border-color: rgba(0, 243, 255, 0.3); }
}

.cursor-ring.locking .cursor-ring-inner {
  animation: targetLock 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes targetLock {
  0% { transform: scale(1) rotate(0deg); border-width: 1px; }
  50% { transform: scale(0.8) rotate(45deg); border-width: 3px; border-color: #fff; }
  100% { transform: scale(1) rotate(90deg); border-width: 1px; }
}

.cursor-ring.glitch .cursor-ring-inner {
  animation: glitchAnim 0.2s steps(2) infinite;
}

@keyframes glitchAnim {
  0% { transform: translate(0); box-shadow: 2px 0 rgba(255,0,0,0.5), -2px 0 rgba(0,0,255,0.5); }
  25% { transform: translate(-2px, 2px); box-shadow: -2px 0 rgba(255,0,0,0.5), 2px 0 rgba(0,0,255,0.5); }
  50% { transform: translate(2px, -2px); box-shadow: 2px 0 rgba(255,0,0,0.5), -2px 0 rgba(0,0,255,0.5); }
  75% { transform: translate(-2px, -2px); box-shadow: -2px 0 rgba(255,0,0,0.5), 2px 0 rgba(0,0,255,0.5); }
  100% { transform: translate(0); box-shadow: 2px 0 rgba(255,0,0,0.5), -2px 0 rgba(0,0,255,0.5); }
}

@media (max-width: 768px) {
  body[data-cursor-effects="on"],
  body[data-cursor-effects="on"] * {
    cursor: auto !important;
  }
  .cursor-dot, .cursor-ring, .cursor-trail-particle, .cursor-ripple {
    display: none !important;
  }
}

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