/* Desktop Custom Cursor Styles */

.custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 64px;
  height: 64px;
  pointer-events: none;
  z-index: 99999;
  transform: translate3d(var(--mouse-x, 0px), var(--mouse-y, 0px), 0);
  will-change: transform;
  background: url('../../assets/gif/cursor.gif') no-repeat center / contain;
  filter: drop-shadow(0 0 10px rgba(173, 216, 230, 0.9)) 
          drop-shadow(0 0 20px rgba(173, 216, 230, 0.6)) 
          drop-shadow(0 0 30px rgba(173, 216, 230, 0.4));
  transition: opacity 0.2s ease, transform 0.2s ease-out;
}

/* Cursor2 state (on hover) */
.custom-cursor.cursor2 {
  background: var(--bg-color, rgba(173, 216, 230, 1));
  mask-image: url('../../assets/icons/cursor2.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url('../../assets/icons/cursor2.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transform: translate3d(var(--mouse-x, 0px), var(--mouse-y, 0px), 0) rotate(90deg);
  filter: brightness(1.3) saturate(1.5) 
          drop-shadow(0 0 8px var(--bg-color, rgba(173, 216, 230, 1))) 
          drop-shadow(0 0 16px var(--bg-color, rgba(173, 216, 230, 0.9))) 
          drop-shadow(0 0 24px var(--bg-color, rgba(173, 216, 230, 0.8))) 
          drop-shadow(0 0 32px var(--bg-color-dim, rgba(173, 216, 230, 0.6))) 
          drop-shadow(0 0 40px var(--bg-color-faint, rgba(173, 216, 230, 0.4)));
  position: relative;
}

/* Neon glow effect using pseudo-element */
.custom-cursor.cursor2::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-color, rgba(173, 216, 230, 1));
  mask-image: url('../../assets/icons/cursor2.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url('../../assets/icons/cursor2.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  filter: blur(4px) brightness(1.5);
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
  transform: rotate(90deg);
}

/* Cursor2 firework sparkles container */
.cursor2-sparkles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99998;
}

/* Firework sparkle lines */
.cursor2-sparkle-line {
  position: absolute;
  pointer-events: none;
  width: var(--length, 10px);
  height: var(--width, 2px);
  transform-origin: left center;
  will-change: transform, opacity;
}