@tailwind utilities;

@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .grid-pattern {
    background-size: 50px 50px;
    background-image: 
      linear-gradient(to right, rgba(128, 128, 128, 0.1) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(128, 128, 128, 0.1) 1px, transparent 1px);
  }
  
  .cursor-spotlight {
    animation: cursor-spotlight 2s ease infinite;
    pointer-events: none;
  }
  
  /* Animation delay utilities */
  .delay-200 {
    animation-delay: 200ms;
  }
  .delay-400 {
    animation-delay: 400ms;
  }
  .delay-600 {
    animation-delay: 600ms;
  }
  .delay-800 {
    animation-delay: 800ms;
  }
  .delay-1000 {
    animation-delay: 1000ms;
  }
  .delay-1500 {
    animation-delay: 1500ms;
  }
  .delay-2000 {
    animation-delay: 2000ms;
  }
  .delay-3000 {
    animation-delay: 3000ms;
  }
  
  @keyframes cursor-spotlight {
    0%, 100% {
      box-shadow: 0 0 60px 30px rgba(255, 255, 255, 0.1);
    }
    50% {
      box-shadow: 0 0 100px 60px rgba(255, 255, 255, 0.15);
    }
  }
}

/* Enhance page transitions */
body {
  overflow-x: hidden;
}

/* Optimize mouse following element */
.mouse-follow {
  transition: transform 0.1s linear;
  will-change: transform;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
  }
}