/**
 * Grid Follower Ball - Styles (Premium Version with State Awareness)
 * Premium mouse-following ball styling with NUT brand colors
 * 
 * @version 2.0.0 - Smoother easing + state awareness
 * @author NUT Consultancy
 * @colors #E4EEF4 (off-white premium)
 */

/* Main ball - stays below all content */
.grid-ball {
  position: fixed;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e4eef4;
  box-shadow: 
    0 0 10px rgba(228, 238, 244, 0.8),
    0 0 20px rgba(228, 238, 244, 0.5),
    0 0 30px rgba(228, 238, 244, 0.3);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.2s ease, background 0.3s ease, box-shadow 0.3s ease;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.grid-ball.visible {
  opacity: 1;
}

/* Active state when hovering interactive elements (v2.0.0) */
.grid-ball.cursor-active {
  background: rgba(228, 238, 244, 0.9);
  box-shadow: 
    0 0 20px rgba(228, 238, 244, 1),
    0 0 40px rgba(228, 238, 244, 0.6),
    0 0 60px rgba(228, 238, 244, 0.3);
}

/* Trail particles - stays below all content */
.trail-particle {
  position: fixed;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 238, 244, 0.8) 0%, rgba(228, 238, 244, 0.2) 50%, transparent 100%);
  box-shadow: 
    0 0 20px rgba(228, 238, 244, 0.5),
    0 0 40px rgba(228, 238, 244, 0.3);
  filter: blur(4px);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  animation: fadeOutMisty 1.2s ease-out forwards;
}

@keyframes fadeOutMisty {
  0% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(4px);
  }
  50% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1.5);
    filter: blur(8px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
    filter: blur(12px);
  }
}

/* Disable on mobile/touch devices (optional) */
@media (hover: none) and (pointer: coarse) {
  .grid-ball,
  .trail-particle {
    display: none !important;
  }
}