/* css/style.css */

/*
   The custom keyframes (fadeInDown, fadeInUp, slideInRight)
   are now directly in the <head> of index.html inside a <style> tag
   with tailwind.config object to ensure CDN version picks them up.
   You can keep other global styles here if needed.
*/

/* Skeleton Loading styles (Tailwind's animate-pulse is key here) */
.skeleton {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  background-color: #e2e8f0; /* bg-gray-200 */
  background-image: linear-gradient(
    90deg,
    #e2e8f0 0px,
    #f7fafc 40px,
    #e2e8f0 80px
  ); /* bg-gray-200 to bg-gray-100 */
  background-size: 600px;
  background-repeat: no-repeat;
}

.dark .skeleton {
  background-color: #4a5568; /* dark:bg-gray-700 */
  background-image: linear-gradient(
    90deg,
    #4a5568 0px,
    #6a7180 40px,
    #4a5568 80px
  ); /* dark:bg-gray-700 to dark:bg-gray-600 */
}

/* Optional: Background pattern for hero section */
.bg-pattern {
  background-image: url('data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23ffffff" fill-opacity="0.1" fill-rule="evenodd"%3E%3Cpath d="M5 0h1L0 6V5zM6 5v1H5z"/%3E%3C/g%3E%3C/svg%3E');
}
