/* src/styles/global.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&family=Noto+Serif:wght@400;600;700&display=swap');

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

/* CSS Variables */
:root {
  --nigerian-green: #16a34a;
  --kente-gold: #f59e0b;
  --ankara-red: #dc2626;
  --adire-blue: #2563eb;
}

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

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--nigerian-green);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #15803d;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Animation keyframes */
@keyframes textShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes bounceGentle {
  0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
  40%, 43% { transform: translateY(-10px); }
  70% { transform: translateY(-5px); }
  90% { transform: translateY(-2px); }
}

/* Animation classes */
.animate-text-shine {
  background: linear-gradient(90deg, #ffffff, #e0e7ff, #8b5cf6, #e0e7ff, #ffffff);
  background-size: 300% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShine 8s linear infinite; /* Changed from 4s to 8s */
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-bounce-gentle {
  animation: bounceGentle 2s infinite;
}

.animation-delay-1s {
  animation-delay: 1s;
}

/* Layout classes */
@layer components {
  .section {
    @apply py-16;
  }

  .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Card components */
  .card {
    @apply bg-white rounded-xl shadow-lg overflow-hidden;
  }

  .card-body {
    @apply p-6;
  }

  .card-title {
    @apply text-xl font-bold mb-2;
  }

  /* Button components */
  .btn {
    @apply inline-flex items-center px-6 py-3 rounded-lg font-medium transition-all duration-200 cursor-pointer;
  }

  .btn-lg {
    @apply px-8 py-4 text-lg;
  }

  /* Badge components */
  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
  }

  .badge-lg {
    @apply px-4 py-2;
  }
}

/* Custom utility classes */
@layer utilities {
  .text-shadow-lg {
    text-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  .backdrop-blur-xs {
    backdrop-filter: blur(2px);
  }
}

/* Animation utilities */
[data-animate-on-scroll] {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

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

/* Responsive design adjustments */
@media (max-width: 768px) {
  .section {
    @apply py-8;
  }
  
  .hero-title-shine {
    font-size: 2.5rem !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .animate-text-shine,
  .animate-float,
  .animate-bounce-gentle {
    animation: none;
  }
  
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}