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

@layer utilities {
  .gradient-bmu {
    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 50%, #1e3a5f 100%);
  }
  .gradient-bmu-light {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #ede9fe 100%);
  }
  .gradient-reward {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  }
  .text-gradient-bmu {
    background: linear-gradient(135deg, #0ea5e9, #0369a1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .shadow-bmu {
    box-shadow: 0 20px 60px -10px rgba(3, 105, 161, 0.3);
  }
  .shadow-reward {
    box-shadow: 0 20px 60px -10px rgba(245, 158, 11, 0.3);
  }
  .glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }
  .animate-slide-up {
    animation: slideUp 0.6s ease-out forwards;
  }
  .animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
  }
}

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

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}