/* ==========================================================================
   AGCS Custom Smooth Circular Cursor Styles (GPU Accelerated - High FPS)
   ========================================================================== */

/* Hide native cursor only when custom cursor is active */
html.has-custom-cursor,
html.has-custom-cursor body,
html.has-custom-cursor *,
html.has-custom-cursor *::before,
html.has-custom-cursor *::after {
  cursor: none !important;
}

.custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background-color: #38bdf8;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999999;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  will-change: transform;
  transform: translateZ(0);
}

.custom-cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(56, 189, 248, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999998;
  opacity: 0;
  background: rgba(56, 189, 248, 0.04);
  transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  will-change: transform;
  transform: translateZ(0);
}

/* Hover state above links, buttons & interactive elements */
.custom-cursor-follower.cursor-hover {
  border-color: rgba(214, 255, 86, 0.85);
  background: rgba(214, 255, 86, 0.08);
}

.custom-cursor-dot.cursor-hover {
  background-color: #d6ff56;
}

/* Pulsating Multi-Ring Click Ripple Effect (GPU Accelerated) */
.custom-cursor-ripple-container {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999997;
  transform: translateZ(0);
}

.custom-cursor-ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  pointer-events: none;
  will-change: transform, opacity;
}

.custom-cursor-ripple.ring-1 {
  animation: cursorRippleAnim1 0.9s cubic-bezier(0.1, 0.75, 0.25, 1) forwards;
}

.custom-cursor-ripple.ring-2 {
  border-width: 1px;
  animation: cursorRippleAnim2 1.2s cubic-bezier(0.12, 0.7, 0.2, 1) 0.06s forwards;
}

.custom-cursor-ripple.ring-3 {
  border-width: 1px;
  animation: cursorRippleAnim3 1.5s cubic-bezier(0.15, 0.65, 0.15, 1) 0.12s forwards;
}

.custom-cursor-ripple.cursor-hover {
  border-color: #d6ff56;
  background: rgba(214, 255, 86, 0.12);
}

@keyframes cursorRippleAnim1 {
  0% {
    opacity: 0.9;
    transform: translate3d(-50%, -50%, 0) scale(0.2);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(2.2);
  }
}

@keyframes cursorRippleAnim2 {
  0% {
    opacity: 0.75;
    transform: translate3d(-50%, -50%, 0) scale(0.2);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(3.5);
  }
}

@keyframes cursorRippleAnim3 {
  0% {
    opacity: 0.55;
    transform: translate3d(-50%, -50%, 0) scale(0.2);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(4.8);
  }
}