/* Custom Cursor Styles - Always Visible with Circular Glow */
#custom-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  display: block;
  /* Default cursor size (desktop) - 9% reduced from 30px */
  width: 27.3px;
  height: 27.3px;
  border-radius: 50%;
  /* Offset cursor tip to finger tip (bottom-right area) */
  margin-left: -4px;
  margin-top: -4px;
  /* Start hidden until JS shows it */
  opacity: 0;
  transition: opacity 0.1s ease-out;
  /* Bright white orb core - pure white center */
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255, 255, 255, 1) 0%,
    rgba(240, 248, 255, 0.98) 15%,
    rgba(200, 225, 255, 0.9) 35%,
    rgba(150, 200, 255, 0.75) 55%,
    rgba(100, 150, 220, 0.5) 75%,
    rgba(50, 100, 200, 0.2) 100%
  );
  /* No box-shadow - uses ::after pseudo-element for circular glow */
}

/* Circular glow using pseudo-element - TRUE circular blur for fog layer */
#custom-cursor::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(200, 220, 255, 0.4) 30%,
    rgba(150, 190, 255, 0.2) 50%,
    rgba(100, 150, 220, 0.1) 70%,
    rgba(50, 100, 200, 0) 100%
  );
  animation: cursorGlowPulse 2s ease-in-out infinite;
  pointer-events: none;
}

/* Outer bloom layer for additional glow */
#custom-cursor::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350%;
  height: 350%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(150, 190, 255, 0.2) 0%,
    rgba(100, 150, 220, 0.1) 40%,
    rgba(50, 100, 200, 0) 100%
  );
  animation: cursorBloomPulse 3s ease-in-out infinite;
  pointer-events: none;
}

/* Pulsing animation for the circular glow */
@keyframes cursorGlowPulse {
  0%, 100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* Slower pulsing for the outer bloom */
@keyframes cursorBloomPulse {
  0%, 100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Mobile/tablet cursor - Hidden on mobile devices */
@media (max-width: 1024px), (pointer: coarse) {
  #custom-cursor {
    /* Hide cursor on mobile devices */
    display: none !important;
  }
}

#custom-cursor.visible {
  opacity: 1;
}

#custom-cursor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Scale image to fit nicely within the cursor */
  transform: scale(3.5);
}

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

/* On mobile/tablet devices, allow touch to pass through to elements */
@media (max-width: 1024px), (pointer: coarse) {
  #custom-cursor {
    pointer-events: none !important;
  }
  
  /* Ensure buttons are always clickable on mobile */
  .gallery-button,
  button,
  a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}