@import "tailwindcss";

/* Explicitly include our HTML + JS so Tailwind v4's scanner picks up
   utility classes referenced inside template strings in app.js/data.js */
@source "../index.html";
@source "../js";

@layer base {
  html, body {
    scroll-behavior: smooth;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Manrope', 'Inter', sans-serif;
  }
}

.font-body {
  font-family: 'Inter', sans-serif;
}

.font-devanagari {
  font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
}

.font-poppins {
  font-family: 'Poppins', sans-serif;
}

/* Floating animation for hero products */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-1deg); }
}

@keyframes pulse-slow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

.animate-float { animation: float 5s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 7s ease-in-out infinite; }
.animate-pulse-slow { animation: pulse-slow 6s ease-in-out infinite; }

/* Custom Brand Color Utilities */
.bg-brand-blue { background-color: #0057B8; }
.text-brand-blue { color: #0057B8; }
.border-brand-blue { border-color: #0057B8; }

.bg-brand-orange { background-color: #F47C20; }
.text-brand-orange { color: #F47C20; }
.border-brand-orange { border-color: #F47C20; }

.bg-brand-gold { background-color: #FFC107; }
.text-brand-gold { color: #FFC107; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f8fafc; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #0057B8; }

::selection { background-color: #F47C20; color: #ffffff; }

/* Simple fade/slide-in utility replacements for animate-in classes */
.fade-in-anim { animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.slide-in-right-anim { animation: slideInRight 0.25s ease-out; }
@keyframes slideInRight {
  from { transform: translateX(24px); opacity: 0.6; }
  to { transform: translateX(0); opacity: 1; }
}

.slide-in-top-anim { animation: slideInTop 0.2s ease-out; }
@keyframes slideInTop {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Thin scrollbar for catalogue thumbnail strip */
.scrollbar-thin::-webkit-scrollbar { height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }