/**
 * MPC Demo Repository - Custom CSS
 * For styles that cannot be achieved with Tailwind utilities
 *
 * NOTE: This file is NOT processed by Tailwind when using CDN.
 * Do NOT use @apply directives here - they won't work with CDN!
 * Use vanilla CSS or Tailwind CSS variables instead.
 */

/* ============================================
   GEOMETRIC PATTERNS (Mauritanian Cultural Elements)
   ============================================ */

.geometric-pattern {
  background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="%2300A859" fill-opacity="0.05"><rect x="0" y="0" width="10" height="10"/><rect x="20" y="0" width="10" height="10"/><rect x="40" y="0" width="10" height="10"/><rect x="60" y="0" width="10" height="10"/><rect x="80" y="0" width="10" height="10"/><rect x="10" y="10" width="10" height="10"/><rect x="30" y="10" width="10" height="10"/><rect x="50" y="10" width="10" height="10"/><rect x="70" y="10" width="10" height="10"/><rect x="90" y="10" width="10" height="10"/></g></svg>');
  background-size: 100px 100px;
}

.pattern-stars {
  background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient id="star-glow"><stop offset="0%" stop-color="%23FFD700" stop-opacity="0.8"/><stop offset="100%" stop-color="%23FFD700" stop-opacity="0"/></radialGradient></defs><circle cx="20" cy="20" r="3" fill="url(%23star-glow)"/><circle cx="80" cy="30" r="2" fill="url(%23star-glow)"/><circle cx="40" cy="70" r="2.5" fill="url(%23star-glow)"/><circle cx="70" cy="85" r="2" fill="url(%23star-glow)"/></svg>');
  background-size: 100px 100px;
}

/* ============================================
   ANIMATIONS
   ============================================ */

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

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(0, 168, 89, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 168, 89, 0.6);
  }
}

@keyframes counter-up {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animation classes */
.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.animate-slide-in {
  animation: slideInFromLeft 0.8s ease-out;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-counter {
  animation: counter-up 0.8s ease-out;
}

/* ============================================
   SCROLL BEHAVIOR
   ============================================ */

html {
  scroll-behavior: smooth;
}

/* ============================================
   CUSTOM SCROLLBAR (WebKit browsers)
   ============================================ */

::-webkit-scrollbar {
  width: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: #00a859;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #008f4d;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .no-print,
  nav,
  footer,
  button {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 3px solid #00a859;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Card hover effect - moved from @utility to support pseudo-classes */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow:
    0 20px 40px rgba(0, 168, 89, 0.15),
    0 10px 20px rgba(0, 0, 0, 0.08);
}

/* Text shadow for better readability on dark backgrounds */
.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.text-shadow-strong {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Golden glow effect */
.glow-golden {
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.glow-green {
  box-shadow: 0 0 15px rgba(0, 168, 89, 0.5);
}

/* ============================================
   RESPONSIVE IMAGES
   ============================================ */

img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   LOADING SPINNER (for future use)
   ============================================ */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  border: 3px solid rgba(0, 168, 89, 0.1);
  border-top-color: #00a859;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.8s linear infinite;
}