@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/*

This file is for your own custom component styles and overrides.

If you're using @apply or other Tailwind directives here, you need to make sure they
appear above the Tailwind imports above.
*/

/* Page image loading styles */
.page-image-placeholder {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

.page-image-loaded {
  animation: fade-in 0.3s ease-in-out;
}

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

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Smooth transitions for page elements */
.page-element {
  transition: all 0.2s ease-in-out;
}

.page-element:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}