/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Custom animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

/* Floating animations for persona backgrounds */
@keyframes float-0 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(20px, -30px) rotate(5deg) scale(1.05);
  }
  50% {
    transform: translate(-15px, -50px) rotate(-3deg) scale(0.95);
  }
  75% {
    transform: translate(-25px, -20px) rotate(3deg) scale(1.02);
  }
}

@keyframes float-1 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(-30px, 25px) rotate(-5deg) scale(1.08);
  }
  66% {
    transform: translate(25px, -35px) rotate(4deg) scale(0.92);
  }
}

@keyframes float-2 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  40% {
    transform: translate(35px, 20px) rotate(6deg) scale(0.98);
  }
  80% {
    transform: translate(-20px, 40px) rotate(-4deg) scale(1.06);
  }
}

@keyframes pulse-glow {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 0.15;
  }
  50% {
    transform: scale(1.2) translate(10px, -10px);
    opacity: 0.25;
  }
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.15;
  }
}

.animate-float-slow {
  animation: float-0 20s ease-in-out infinite;
}

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Line clamp 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;
}

/* Detailed Analysis Styling */
.detailed-analysis {
  max-width: none;
  color: #1f2937;
  line-height: 1.75;
}

.detailed-analysis h3 {
  font-size: 1.875rem;
  font-weight: 700;
  color: #111827;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.detailed-analysis h3:first-child {
  margin-top: 0;
}

.detailed-analysis h4 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.detailed-analysis p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #374151;
  font-size: 1.125rem;
  line-height: 1.75;
}

.detailed-analysis ul {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
  list-style-type: disc;
}

.detailed-analysis li {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  color: #374151;
  font-size: 1.125rem;
  line-height: 1.75;
  padding-left: 0.375rem;
}

.detailed-analysis strong {
  font-weight: 700;
  color: #111827;
}

.detailed-analysis em {
  font-style: italic;
  color: #4b5563;
}

.detailed-analysis blockquote {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  border-left: 4px solid var(--persona-color, #6b7280);
  font-style: italic;
  color: #4b5563;
  font-size: 1.125rem;
  background-color: #f9fafb;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  border-radius: 0.25rem;
}