/* Custom styles for smooth scroll-in effects (for all sections and cards) */
.fade-in {
  opacity: 0;
  transform: translateY(
    30px
  ); /* Increased translate for more noticeable animation */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
html {
  scroll-behavior: smooth;
}
/* Style for the sticky header shadow */
.header-sticky {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Style for the dark mode header shadow */
.dark .header-sticky {
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.05);
}
/* Modal backdrop styles */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}
/* New style for active filter button */
.filter-btn.active {
  background-color: var(
    --primary
  ); /* Uses Tailwind primary color via CSS variable */
  color: white;
  box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.4),
    0 2px 4px -2px rgba(16, 185, 129, 0.4);
}
/* Fallback for primary color variable (Tailwind only sets CSS variables for colors if configured in the HTML script tag) */
:root {
  --primary: #10b981;
}