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

@layer base {
  :root {
    --background: 0 0% 0%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 72.2% 50.6%;
    --primary-foreground: 0 85.7% 97.3%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 72.2% 50.6%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    background: radial-gradient(circle at 20% 80%, rgba(220, 38, 38, 0.15) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(239, 68, 68, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(185, 28, 28, 0.08) 0%, transparent 50%),
      linear-gradient(135deg, #000000 0%, #0a0000 25%, #000000 50%, #0a0000 75%, #000000 100%);
    background-attachment: fixed;
  }
}

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

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
  background: #dc2626;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b91c1c;
}

/* Smooth animations */
* {
  transition: all 0.2s ease-in-out;
}

/* Enhanced gradient backgrounds */
.bg-fire-gradient {
  background: radial-gradient(circle at 30% 70%, rgba(220, 38, 38, 0.2) 0%, transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(239, 68, 68, 0.15) 0%, transparent 60%),
    linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.9) 100%);
}

.bg-ember-gradient {
  background: radial-gradient(ellipse at top, rgba(220, 38, 38, 0.1) 0%, transparent 70%),
    radial-gradient(ellipse at bottom, rgba(185, 28, 28, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(10, 0, 0, 0.9) 50%, rgba(0, 0, 0, 0.95) 100%);
}

.bg-lava-glow {
  background: radial-gradient(circle at 50% 50%, rgba(239, 68, 68, 0.12) 0%, transparent 50%),
    conic-gradient(
      from 0deg at 50% 50%,
      rgba(220, 38, 38, 0.05) 0deg,
      transparent 60deg,
      rgba(185, 28, 28, 0.08) 120deg,
      transparent 180deg,
      rgba(220, 38, 38, 0.05) 240deg,
      transparent 300deg,
      rgba(239, 68, 68, 0.06) 360deg
    );
}

/* Animated background gradients */
@keyframes fireGlow {
  0%,
  100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.bg-animated-fire {
  position: relative;
  overflow: hidden;
}

.bg-animated-fire::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(220, 38, 38, 0.1) 0%, transparent 70%),
    radial-gradient(circle at 80% 20%, rgba(239, 68, 68, 0.08) 0%, transparent 50%);
  animation: fireGlow 4s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* Subtle moving gradients */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.bg-shifting-ember {
  background: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(20, 0, 0, 0.8) 25%,
    rgba(0, 0, 0, 0.9) 50%,
    rgba(15, 0, 0, 0.85) 75%,
    rgba(0, 0, 0, 0.9) 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

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

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Ensure modal is properly positioned on mobile */
@media (max-width: 768px) {
  .fixed.inset-0 {
    padding: 1rem;
  }
}