frontend/src/index.css

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

:root {
  --font-serif: "Crimson Pro", serif;
  --font-sans: "Inter", sans-serif;
}

body {
  font-family: var(--font-sans);
}

.font-serif {
  font-family: var(--font-serif);
}

@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
  }
  
  .animate-slide-up {
    animation: slideUp 0.5s ease-out forwards;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }
  
  .animation-delay-4000 {
    animation-delay: 4s;
  }
  
  .animation-delay-500 {
    animation-delay: 500ms;
  }

  /* Custom Scrollbar Utilities */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .bg-noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.4'/%3E%3C/svg%3E");
  }
  
  .bg-dot-pattern {
    background-image: radial-gradient(circle, #6366f1 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    opacity: 0.4;
  }
  .dark .bg-dot-pattern {
    opacity: 0.2;
  }
}

/* Global Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d4d4d8; /* zinc-300 */
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.dark ::-webkit-scrollbar-thumb {
  background-color: #3f3f46; /* zinc-700 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a1a1aa; /* zinc-400 */
}

.dark ::-webkit-scrollbar-thumb:hover {
  background-color: #52525b; /* zinc-600 */
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}

@keyframes spin-reverse-slower {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
.animate-spin-reverse-slower {
  animation: spin-reverse-slower 12s linear infinite;
}

@keyframes bounce-slight {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.animate-bounce-slight {
  animation: bounce-slight 2s ease-in-out infinite;
}

@keyframes ping-slow {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping-slow {
  animation: ping-slow 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}