/* Custom styles for animations and gradients */
:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 15%;

  --card: 0 0% 100%;
  --card-foreground: 240 10% 15%;

  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 15%;

  --primary: 14 100% 57%;
  --primary-foreground: 0 0% 100%;

  --secondary: 280 70% 60%;
  --secondary-foreground: 0 0% 100%;

  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;

  --accent: 330 80% 55%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;

  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 14 100% 57%;

  --radius: 0.75rem;

  /* Custom gradient colors */
  --gradient-start: 14 100% 57%;
  --gradient-mid: 330 80% 55%;
  --gradient-end: 280 70% 60%;
  
  /* Shadow with brand color */
  --shadow-colored: 14 100% 57%;
}

.dark {
  --background: 240 10% 8%;
  --foreground: 0 0% 98%;

  --card: 240 10% 12%;
  --card-foreground: 0 0% 98%;

  --popover: 240 10% 12%;
  --popover-foreground: 0 0% 98%;

  --primary: 14 100% 57%;
  --primary-foreground: 0 0% 100%;

  --secondary: 280 70% 60%;
  --secondary-foreground: 0 0% 100%;

  --muted: 240 10% 20%;
  --muted-foreground: 240 5% 65%;

  --accent: 330 80% 55%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 100%;

  --border: 240 10% 20%;
  --input: 240 10% 20%;
  --ring: 14 100% 57%;
}

/* Custom gradient classes */
.gradient-primary {
  background: linear-gradient(135deg, hsl(var(--gradient-start)), hsl(var(--gradient-mid)));
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(var(--gradient-mid)), hsl(var(--gradient-end)));
}

.gradient-full {
  background: linear-gradient(135deg, hsl(var(--gradient-start)), hsl(var(--gradient-mid)), hsl(var(--gradient-end)));
}

.text-gradient {
  background: linear-gradient(135deg, hsl(var(--gradient-start)), hsl(var(--gradient-mid)), hsl(var(--gradient-end)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Custom animation classes */
.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
  opacity: 0;
}

.animate-slide-up {
  animation: slideUp 0.8s ease-out forwards;
  opacity: 0;
  transform: translateY(20px);
}

.animate-scale-in {
  animation: scaleIn 0.6s ease-out forwards;
  opacity: 0;
  transform: scale(0.95);
}

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

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -10px hsl(var(--shadow-colored) / 0.3);
}

.shadow-glow {
  box-shadow: 0 10px 40px -10px hsl(var(--shadow-colored) / 0.4);
}

/* Keyframe animations */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

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

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

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

/* Mobile menu animation */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mobile-menu.open {
  max-height: 400px;
}

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

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

/* Focus styles */
.focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}