@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Tailwind v4 setup is injected via CDN in index.php, so we only need to provide specific custom animations here that were mapped in Tailwind config originally */

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin: 0;
  padding: 0;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Marquee Animation */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-33.3333%); }
}

.animate-marquee {
  animation: marquee 35s linear infinite;
  display: flex;
  width: max-content;
}

/* UI Interaction Animations equivalent to animate-in */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInFromBottom {
  from { transform: translateY(1.25rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInFromRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.fade-in { 
  animation: fadeIn 0.2s ease-out forwards; 
}
.slide-in-from-bottom-5 { 
  animation: slideInFromBottom 0.3s ease-out forwards; 
}
.slide-in-from-right { 
  animation: slideInFromRight 0.3s ease-out forwards; 
}