/* Custom Cursor Styles */

/* Hide default cursor everywhere */
html,
body {
  cursor: none !important;
}

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

/* Custom cursor element */
.custom-cursor {
  position: fixed;
  width: 0.5cm;
  height: 0.5cm;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999 !important;
  background-color: white;
  mix-blend-mode: difference;
  opacity: 0;
  display: block !important;
  left: 0;
  top: 0;
  /* GPU acceleration - use transform for positioning */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0) translate(-50%, -50%);
  /* Only transition size and opacity, not transform */
  transition: opacity 0.15s ease-out, width 0.12s ease-out, height 0.12s ease-out;
  /* Contain for better isolation */
  contain: layout style;
}

/* Cursor grows when hovering over text */
.custom-cursor.cursor-hover-text {
  width: 1.5cm;
  height: 1.5cm;
}

/* Striker mode for carrom section */
.custom-cursor.striker-mode {
  width: 1cm;
  height: 1cm;
  background-color: white;
  box-shadow: 
    0 0 10px rgba(255, 255, 255, 0.5),
    0 0 20px rgba(255, 255, 255, 0.3),
    inset 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Disable cursor on very small screens */
@media (max-width: 320px) {
  html,
  body,
  html *,
  body * {
    cursor: auto !important;
  }
  
  .custom-cursor {
    display: none !important;
  }
}

/* Smaller cursor on tablet-sized screens (non-touch) */
@media (max-width: 768px) and (hover: hover) {
  .custom-cursor {
    width: 0.4cm;
    height: 0.4cm;
  }
  
  .custom-cursor.cursor-hover-text {
    width: 1cm;
    height: 1cm;
  }
}

/* Mobile touch cursor - show on touch devices */
@media (hover: none) and (pointer: coarse) {
  html,
  body,
  html *,
  body * {
    cursor: auto !important;
  }
  
  /* Show custom cursor on mobile for touch */
  .custom-cursor {
    display: block !important;
    width: 1.2cm;
    height: 1.2cm;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out, width 0.15s ease-out, height 0.15s ease-out;
  }
  
  .custom-cursor.touch-active {
    opacity: 1;
  }
  
  .custom-cursor.cursor-hover-text {
    width: 1.8cm;
    height: 1.8cm;
  }
}

/* Mobile screens */
@media (max-width: 768px) {
  .custom-cursor {
    display: block !important;
    width: 1cm;
    height: 1cm;
  }
  
  .custom-cursor.cursor-hover-text {
    width: 1.5cm;
    height: 1.5cm;
  }
}

/* Hide cursor when mobile nav is open to prevent text visibility issues */
body.nav-open .custom-cursor {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}