/* public/css/app.css */
/* Modern CSS3 Enhancements for Tailwind Project */

@layer base {
  :root {
    /* Define smooth, global transition for all interactive elements */
    --tw-transition-duration: 0.2s;
    --tw-transition-timing: cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  /* Smooth scrolling for anchor links */
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Add subtle fade-in animation for page load */
  body {
    opacity: 0;
    animation: fadeIn 0.6s ease-out forwards;
  }

  /* Ensure all images are responsive and look crisp */
  img {
    @apply max-w-full h-auto;
    content-visibility: auto; /* Modern performance optimization */
  }
}

@layer components {
  /* Modern Card Component Base */
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden;
    transition: transform var(--tw-transition-duration) var(--tw-transition-timing),
                box-shadow var(--tw-transition-duration) var(--tw-transition-timing);
  }

  .card:hover {
    @apply shadow-md;
    transform: translateY(-2px);
  }

  /* Modern Button Base */
  .btn {
    @apply inline-flex items-center justify-center rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
    transform: translateZ(0); /* Enable GPU acceleration */
  }

  .btn-primary {
    @apply bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-sm hover:shadow-md;
  }

  .btn-primary:hover {
    @apply from-indigo-700 to-purple-700;
    transform: translateY(-1px);
  }

  /* Floating WhatsApp Button Animation */
  a[href*="wa.me"] {
    animation: float 3s ease-in-out infinite;
  }

  /* Modern Form Input */
  .form-input,
  .form-textarea {
    @apply block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 transition-colors duration-200;
    transition: border-color var(--tw-transition-duration) var(--tw-transition-timing),
                box-shadow var(--tw-transition-duration) var(--tw-transition-timing);
  }
}

@layer utilities {
  /* Utility for glassmorphism effect */
  .glass {
    @apply bg-white bg-opacity-20 backdrop-blur-lg backdrop-filter border border-white border-opacity-20;
  }

  /* Utility for smooth inner shadow */
  .inner-shadow {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  /* Utility for skeleton loading shimmer */
  .skeleton {
    @apply bg-gray-200 rounded;
    animation: shimmer 1.5s infinite;
  }
}

/* Keyframe Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Modern Scrollbar (Webkit Browsers) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-50 rounded-full;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}