/* Kaikuse Fitness - Picsil Sport Inspired Athletic Design System */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700;800&display=swap');

:root {
  --brand-yellow: #FFB800;
  --brand-yellow-hover: #E0A000;
  --brand-black: #0A0A0A;
  --brand-dark: #111317;
  --brand-surface: #F4F5F7;
  --brand-border: #E5E7EB;
  --text-primary: #0F172A;
  --text-muted: #64748B;
}

body {
  background-color: #FFFFFF;
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Typography Helpers */
.font-bebas {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.03em;
}

.font-mono-tech {
  font-family: 'JetBrains Mono', monospace;
}

/* Navigation Blur Header */
.nav-picsil {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--brand-border);
}

/* Buttons */
.btn-athletic {
  background-color: var(--brand-black);
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  letter-spacing: 0.03em;
  transition: all 180ms ease-out;
}

.btn-athletic:hover {
  background-color: var(--brand-yellow);
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 184, 0, 0.3);
}

.btn-athletic:active {
  transform: scale(0.97);
}

.btn-athletic-yellow {
  background-color: var(--brand-yellow);
  color: #000000;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  letter-spacing: 0.03em;
  transition: all 180ms ease-out;
  box-shadow: 0 4px 16px rgba(255, 184, 0, 0.25);
}

.btn-athletic-yellow:hover {
  background-color: var(--brand-yellow-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(255, 184, 0, 0.38);
}

.btn-ghost-athletic {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  font-weight: 700;
  backdrop-blur: 4px;
  transition: all 180ms ease-out;
}

.btn-ghost-athletic:hover {
  background: #FFFFFF;
  color: #000000;
  border-color: #FFFFFF;
  transform: translateY(-2px);
}

/* Category Filter Pills */
.cat-pill {
  background-color: #F1F3F5;
  color: #334155;
  border: 1px solid #E2E8F0;
  transition: all 160ms ease-out;
}

.cat-pill:hover {
  background-color: #E2E8F0;
  color: #0F172A;
}

.cat-pill.active {
  background-color: #000000;
  color: #FFFFFF;
  border-color: #000000;
  font-weight: 800;
}

/* Marquee Infinite Ticker */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

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

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F1F3F5;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-yellow);
}

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