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

:root {
  --background: #0d0d0d;
  --foreground: #f2f2f2;
  --card: #141414;
  --primary: #d91818;
  --secondary: #1f1f1f;
  --muted-foreground: #999999;
  --border: #2e2e2e;
}

body {
  background-color: var(--background);
  color: var(--foreground);
}

.bg-background { background-color: var(--background); }
.bg-card { background-color: var(--card); }
.bg-secondary\/50 { background-color: rgba(31, 31, 31, 0.5); }
.text-foreground { color: var(--foreground); }
.text-primary { color: var(--primary); }
.text-muted-foreground { color: var(--muted-foreground); }
.border-border { border-color: var(--border); }

.font-display { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.04em; }
.font-body { font-family: 'Inter', sans-serif; }

.text-gradient-red {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(135deg, #d91818, #ff8c00);
}

/* Animaciones */
.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}