/* Custom utilities and animations for mampalphp */
/* These complement Tailwind CDN with custom classes */

.gradient-brand {
  background: linear-gradient(135deg, #FF5722 0%, #FF7043 100%);
}

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

/* Brand color utilities */
.text-brand { color: #FF5722 !important; }
.bg-brand { background-color: #FF5722 !important; }
.border-brand { border-color: #FF5722 !important; }
.hover\:text-brand:hover { color: #FF5722 !important; }
.hover\:bg-brand:hover { background-color: #FF5722 !important; }
.hover\:border-brand:hover { border-color: #FF5722 !important; }

/* Surface colors */
.bg-surface-1 { background-color: #0d1117 !important; }
.bg-surface-2 { background-color: #161b22 !important; }
.bg-surface-3 { background-color: #21262d !important; }
.text-surface-1 { color: #0d1117 !important; }
.text-surface-2 { color: #161b22 !important; }
.text-surface-3 { color: #21262d !important; }
.border-surface { border-color: #30363d !important; }

/* Background / foreground */
.bg-background { background-color: #0d1117 !important; }
.bg-foreground { background-color: #e6edf3 !important; }
.text-foreground { color: #e6edf3 !important; }
.bg-border { background-color: #30363d !important; }
.text-border { color: #30363d !important; }

/* Custom text colors */
.text-text-1 { color: #e6edf3 !important; }
.text-text-2 { color: #8b949e !important; }
.text-text-3 { color: #484f58 !important; }

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-up {
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.animate-fade-up-delay-1 {
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.animate-fade-up-delay-2 {
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both;
}
.animate-fade-up-delay-3 {
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}
.animate-fade-in {
  animation: fadeIn 0.5s ease both;
}

/* Glow effect */
.glow-brand {
  box-shadow: 0 0 24px rgba(255, 87, 34, 0.25);
}

/* KOL card hover */
.kol-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}
.kol-card {
  transition: all 0.2s ease;
}

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

/* Tier color badges */
.bg-pink-500\/20 { background-color: rgba(236, 72, 153, 0.2) !important; }
.text-pink-400 { color: #f472b6 !important; }
.border-pink-500\/30 { border-color: rgba(236, 72, 153, 0.3) !important; }
.bg-purple-500\/20 { background-color: rgba(168, 85, 247, 0.2) !important; }
.text-purple-400 { color: #c084fc !important; }
.border-purple-500\/30 { border-color: rgba(168, 85, 247, 0.3) !important; }
.bg-blue-500\/20 { background-color: rgba(59, 130, 246, 0.2) !important; }
.text-blue-400 { color: #60a5fa !important; }
.border-blue-500\/30 { border-color: rgba(59, 130, 246, 0.3) !important; }
.bg-amber-500\/20 { background-color: rgba(245, 158, 11, 0.2) !important; }
.text-amber-400 { color: #fbbf24 !important; }
.border-amber-500\/30 { border-color: rgba(245, 158, 11, 0.3) !important; }
.bg-green-500\/20 { background-color: rgba(34, 197, 94, 0.2) !important; }
.text-green-400 { color: #4ade80 !important; }
.border-green-500\/30 { border-color: rgba(34, 197, 94, 0.3) !important; }