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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 217 91% 35%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 217 91% 35%;
    --radius: 0.5rem;
    --crypto-blue: 217 91% 35%;
    --crypto-blue-light: 217 91% 60%;
    --crypto-yellow: 45 93% 58%;
    --crypto-orange: 14 100% 57%;
    --primary-600: 214 91% 54%;
    --primary-700: 214 91% 49%;
    --accent-500: 45 100% 50%;
    --accent-600: 30 100% 44%;
  }

  .dark {
    --background: 217 91% 8%;
    --foreground: 210 40% 98%;
    --card: 217 91% 8%;
    --card-foreground: 210 40% 98%;
    --popover: 217 91% 8%;
    --popover-foreground: 210 40% 98%;
    --primary: 217 91% 35%;
    --primary-foreground: 210 40% 98%;
    --secondary: 217 91% 15%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217 91% 15%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217 91% 15%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217 91% 15%;
    --input: 217 91% 15%;
    --ring: 217 91% 35%;
    --crypto-blue: 217 91% 35%;
    --crypto-blue-light: 217 91% 60%;
    --crypto-yellow: 45 93% 58%;
    --crypto-orange: 14 100% 57%;
    --primary-600: 214 91% 54%;
    --primary-700: 214 91% 49%;
    --accent-500: 45 100% 50%;
    --accent-600: 30 100% 44%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-family: 'Space Grotesk', sans-serif;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

@layer components {
  .gradient-bg {
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--crypto-blue-light)) 100%);
  }
  
  .crypto-card {
    @apply bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl p-6 hover:shadow-xl transition-all duration-300 hover:border-primary/50 hover:-translate-y-1;
  }
  
  .hero-gradient {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
  }

  .grid-bg {
    background-image: 
      linear-gradient(to right, rgba(59, 130, 246, 0.1) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  .brutal-text {
    @apply font-bold tracking-tight text-foreground;
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
  }

  .animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .story-link {
    @apply relative inline-block after:content-[''] after:absolute after:w-full after:scale-x-0 after:h-0.5 after:bottom-0 after:left-0 after:bg-primary after:origin-bottom-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-bottom-left;
  }

  .hover-scale {
    @apply transition-transform duration-200 hover:scale-105;
  }

  .crypto-yellow-gradient {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .crypto-blue-gradient {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Crypto Pattern Background */
  .crypto-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 2px, transparent 2px),
      radial-gradient(circle at 80% 70%, rgba(255,255,255,0.05) 1px, transparent 1px),
      radial-gradient(circle at 40% 80%, rgba(255,255,255,0.08) 1.5px, transparent 1.5px);
    background-size: 50px 50px, 30px 30px, 70px 70px;
    opacity: 0.3;
  }

  /* Large Crypto Coins (120px) */
  .crypto-bitcoin {
    position: absolute;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #f7931a 0%, #ff9500 100%);
    border-radius: 50%;
    opacity: 0.1;
    animation: float 6s ease-in-out infinite;
  }

  .crypto-ethereum {
    position: absolute;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #627eea 0%, #8a92b2 100%);
    border-radius: 50%;
    opacity: 0.1;
    animation: float 6s ease-in-out infinite reverse;
  }

  .crypto-dogecoin {
    position: absolute;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #c2a633 0%, #d4af37 100%);
    border-radius: 50%;
    opacity: 0.1;
    animation: float 8s ease-in-out infinite;
  }

  .crypto-bnb {
    position: absolute;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #f0b90b 0%, #f3ba2f 100%);
    border-radius: 50%;
    opacity: 0.1;
    animation: float 7s ease-in-out infinite reverse;
  }

  /* Small Crypto Coins (60px) */
  .crypto-polkadot-small {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #e6007a 0%, #ff1493 100%);
    border-radius: 50%;
    opacity: 0.15;
    animation: float 5s ease-in-out infinite;
  }

  .crypto-xrp-small {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #23292f 0%, #525860 100%);
    border-radius: 50%;
    opacity: 0.15;
    animation: float 4s ease-in-out infinite reverse;
  }

  .crypto-cardano-small {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #0033ad 0%, #1e3a8a 100%);
    border-radius: 50%;
    opacity: 0.15;
    animation: float 6s ease-in-out infinite;
  }

  .crypto-litecoin-small {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #bfbbbb 0%, #d3d3d3 100%);
    border-radius: 50%;
    opacity: 0.15;
    animation: float 5.5s ease-in-out infinite reverse;
  }

  .crypto-solana-small {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #9945ff 0%, #14f195 100%);
    border-radius: 50%;
    opacity: 0.15;
    animation: float 4.5s ease-in-out infinite;
  }

  .crypto-polygon-small {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #8247e5 0%, #a855f7 100%);
    border-radius: 50%;
    opacity: 0.15;
    animation: float 5.2s ease-in-out infinite reverse;
  }
}

@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.6s ease-out;
  }

  .animate-slide-up {
    animation: slideUp 0.6s ease-out;
  }

  .animate-slide-down {
    animation: slideDown 0.6s ease-out;
  }

  .animate-slide-right {
    animation: slideRight 0.6s ease-out;
  }

  .animate-scale-in {
    animation: scaleIn 0.4s ease-out;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--primary));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary) / 0.8);
}