@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .bg-noise {
    background-image: linear-gradient(
        0deg,
        transparent 24%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.05) 26%,
        transparent 27%,
        transparent 74%,
        rgba(255, 255, 255, 0.05) 75%,
        rgba(255, 255, 255, 0.05) 76%,
        transparent 77%,
        transparent
      ),
      linear-gradient(
        90deg,
        transparent 24%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.05) 26%,
        transparent 27%,
        transparent 74%,
        rgba(255, 255, 255, 0.05) 75%,
        rgba(255, 255, 255, 0.05) 76%,
        transparent 77%,
        transparent
      );
    background-size: 40px 40px;
    opacity: 0.3;
  }

  /* Optional: Add text animation */
  .animate-text {
    background-size: 200% auto;
    animation: shine 2s linear infinite;
  }

  @keyframes shine {
    to {
      background-position: 200% center;
    }
  }
}
