html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: #ffffff;
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: "Oswald", "Bebas Neue", sans-serif;
  letter-spacing: 0.02em;
}

/* Gradient text */
.text-gradient {
  background: linear-gradient(135deg, #e01e26 0%, #ff6b00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Animated stripe */
@keyframes stripeMove {
  from { background-position: 0 0; }
  to { background-position: 60px 0; }
}
.stripe-bg {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(224, 30, 38, 0.9) 0 20px,
    rgba(255, 255, 255, 0.9) 20px 40px
  );
  animation: stripeMove 4s linear infinite;
}

/* Fade in animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fadeUp 0.8s ease-out both;
}

/* Marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track {
  animation: marquee 30s linear infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #e01e26; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #b3161c; }

/* Card hover glow (red) */
.card-glow {
  transition: all 0.3s ease;
  position: relative;
}
.card-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent, rgba(224, 30, 38, 0.6), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
}
.card-glow:hover::before {
  opacity: 1;
}
.card-glow:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -24px rgba(224, 30, 38, 0.45);
}

/* Hero overlay pattern (dark hero only) */
.hero-overlay {
  background:
    linear-gradient(135deg, rgba(11, 15, 25, 0.95) 0%, rgba(11, 15, 25, 0.7) 50%, rgba(11, 15, 25, 0.9) 100%),
    radial-gradient(circle at 20% 30%, rgba(224, 30, 38, 0.25), transparent 50%);
}

/* Section reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Navbar scrolled state */
#navbar.scrolled {
  background-color: rgba(255,255,255,0.98);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

/* Hide scrollbar for category filter row */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

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