@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@400;500;600;700&family=Barlow+Condensed:wght@300;400;600;700;800&display=swap');

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

@layer base {
  :root {
    --background: 100 30% 3%;
    --foreground: 72 30% 93%;

    --card: 90 20% 4%;
    --card-foreground: 72 30% 93%;

    --popover: 90 20% 4%;
    --popover-foreground: 72 30% 93%;

    --primary: 73 100% 50%;
    --primary-foreground: 100 30% 3%;

    --secondary: 90 15% 6%;
    --secondary-foreground: 72 30% 93%;

    --muted: 80 12% 8%;
    --muted-foreground: 75 12% 44%;

    --accent: 30 100% 50%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;

    --border: 73 100% 50% / 0.08;
    --input: 73 100% 50% / 0.12;
    --ring: 73 100% 50%;

    --radius: 0rem;

    --lime: 73 100% 50%;
    --lime-glow: 73 100% 62%;
    --orange: 30 100% 50%;
    --orange-glow: 20 100% 55%;
    --dark-bg: 100 30% 3%;
    --dark-bg2: 90 20% 4%;
    --dark-bg3: 85 25% 5%;

    --font-display: 'Bebas Neue', sans-serif;
    --font-condensed: 'Barlow Condensed', sans-serif;
    --font-body: 'Rajdhani', sans-serif;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-family: var(--font-body);
    overflow-x: hidden;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: hsl(var(--dark-bg)); }
::-webkit-scrollbar-thumb { background: hsl(var(--lime)); border-radius: 2px; }

/* Animations */
@keyframes float-ball {
  0% { transform: translateY(110vh) rotate(0deg) translateX(0); }
  100% { transform: translateY(-20vh) rotate(720deg) translateX(60px); }
}
@keyframes streak {
  from { transform: translateX(-100%); }
  to { transform: translateX(50%); }
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 60px hsla(73,100%,50%,0.15), 0 0 120px hsla(73,100%,50%,0.08); }
  50% { box-shadow: 0 0 80px hsla(73,100%,50%,0.3), 0 0 160px hsla(73,100%,50%,0.12); }
}
@keyframes bounce-deco {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-20px) rotate(10deg); }
}
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes preIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes preFill {
  from { width: 0; }
  to { width: 100%; }
}

.animate-float-ball { animation: float-ball linear infinite; }
.animate-streak { animation: streak 3s linear infinite; }
.animate-ticker { animation: ticker 25s linear infinite; }
.animate-spin-slow { animation: spin-slow 25s linear infinite; }
.animate-pulse-glow { animation: pulse-glow 4s ease-in-out infinite; }
.animate-bounce-deco { animation: bounce-deco 3s ease-in-out infinite alternate; }

/* Reveal on scroll */
.reveal-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Clip path for buttons */
.clip-skew {
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.clip-skew-sm {
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.clip-badge {
  clip-path: polygon(0 0, 100% 0, 100% 70%, 85% 100%, 0 100%);
}