@tailwind base;
@tailwind components;
@tailwind utilities;


.csard-gradient {
  background: linear-gradient(135deg, #2563eb 0%, #ef4444 100%);
}
@keyframes float {
  0%, 100% { transform: translateY(0);}
  50% { transform: translateY(-16px);}
}
.animate-float {
  animation: float 3s ease-in-out infinite;
}


.featured-panel .featured-content {
  pointer-events: none;
}
.featured-panel.active .featured-content {
  max-height: 500px;
  pointer-events: auto;
}
.featured-panel .featured-toggle svg {
  transform: rotate(0deg);
}
.featured-panel.active .featured-toggle svg {
  transform: rotate(180deg);
}



@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(40px);}
  100% { opacity: 1; transform: translateY(0);}
}
.animate-fade-in-up {
  animation: fade-in-up 1s cubic-bezier(.4,0,.2,1) both;
}
.animate-fade-in-up.delay-100 { animation-delay: 0.1s; }
.animate-fade-in-up.delay-200 { animation-delay: 0.2s; }

 .scrollbar-hide::-webkit-scrollbar { display: none; }
  .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

  /* Test if CSS is working */
#css-test {
  background: limegreen !important;
  color: white !important;
  font-size: 2rem !important;
  text-align: center !important;
  padding: 1rem !important;
}