/* Mutual Horizon - Modern Dark Theme Styles */

/* Base Styles */
* {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Traffic Light Styles - Modern Glass Morphism */
.traffic-light-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}

.traffic-light-active {
  @apply border-opacity-100 shadow-2xl;
  box-shadow: 0 0 40px rgba(var(--tw-shadow-color), 0.4);
}

.traffic-light-inactive {
  @apply border-slate-600 bg-slate-800/30 border-opacity-50;
}

/* Enhanced Traffic Light States */
.green-active {
  @apply bg-gradient-to-br from-green-400 to-emerald-600 border-green-400 shadow-green-500;
  animation: pulse-glow-green 2s infinite;
}

.yellow-active {
  @apply bg-gradient-to-br from-yellow-400 to-orange-500 border-yellow-400 shadow-yellow-500;
  animation: pulse-glow-yellow 2s infinite;
}

.red-active {
  @apply bg-gradient-to-br from-red-400 to-rose-600 border-red-400 shadow-red-500;
  animation: pulse-glow-red 2s infinite;
}

@keyframes pulse-glow-green {
  0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.4), 0 0 40px rgba(34, 197, 94, 0.2); }
  50% { box-shadow: 0 0 30px rgba(34, 197, 94, 0.6), 0 0 60px rgba(34, 197, 94, 0.3); }
}

@keyframes pulse-glow-yellow {
  0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2); }
  50% { box-shadow: 0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3); }
}

@keyframes pulse-glow-red {
  0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.4), 0 0 40px rgba(239, 68, 68, 0.2); }
  50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.6), 0 0 60px rgba(239, 68, 68, 0.3); }
}

/* Source Cards - Modern Glass Morphism Design */
.source-card {
  @apply bg-slate-800/40 border border-slate-700/50 rounded-xl p-6 
         backdrop-blur-sm hover:border-slate-600/50 
         transition-all duration-300 hover:transform hover:scale-[1.02] 
         hover:shadow-xl group;
}

.source-card:hover {
  background: rgba(30, 41, 59, 0.6);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.1);
}

.reliability-bar {
  @apply w-full h-3 bg-slate-700/50 rounded-full overflow-hidden backdrop-blur-sm;
}

.reliability-fill {
  @apply h-full transition-all duration-500 relative overflow-hidden;
}

.reliability-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.reliability-high {
  @apply bg-gradient-to-r from-emerald-500 to-green-400;
}

.reliability-medium {
  @apply bg-gradient-to-r from-yellow-500 to-orange-400;
}

.reliability-low {
  @apply bg-gradient-to-r from-red-500 to-rose-400;
}

/* Bias Indicators - Modern Gradient Pills */
.bias-indicator {
  @apply inline-flex px-3 py-1.5 text-xs font-semibold rounded-full 
         backdrop-blur-sm border transition-all duration-300 hover:scale-105;
}

.bias-left {
  @apply bg-gradient-to-r from-blue-500/20 to-blue-600/20 
         text-blue-300 border-blue-500/30 hover:border-blue-400/50;
}

.bias-center {
  @apply bg-gradient-to-r from-slate-500/20 to-slate-600/20 
         text-slate-300 border-slate-500/30 hover:border-slate-400/50;
}

.bias-right {
  @apply bg-gradient-to-r from-red-500/20 to-red-600/20 
         text-red-300 border-red-500/30 hover:border-red-400/50;
}

.bias-mixed {
  @apply bg-gradient-to-r from-yellow-500/20 to-orange-500/20 
         text-yellow-300 border-yellow-500/30 hover:border-yellow-400/50;
}

/* Mindset Analysis - Advanced Gradient Animations */
.mindset-scout {
  @apply bg-gradient-to-r from-emerald-400 via-blue-500 to-cyan-400;
  background-size: 200% 200%;
  animation: gradient-flow 3s ease infinite;
}

.mindset-balanced {
  @apply bg-gradient-to-r from-yellow-400 via-orange-500 to-amber-400;
  background-size: 200% 200%;
  animation: gradient-flow 3s ease infinite;
}

.mindset-soldier {
  @apply bg-gradient-to-r from-red-400 via-rose-500 to-pink-400;
  background-size: 200% 200%;
  animation: gradient-flow 3s ease infinite;
}

@keyframes gradient-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Claim Cards - Modern Glass Morphism with Gradient Borders */
.claim-card {
  @apply border-l-4 pl-6 py-4 rounded-r-xl backdrop-blur-sm 
         transition-all duration-300 hover:transform hover:translate-x-2
         relative overflow-hidden;
}

.claim-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.claim-card:hover::before {
  opacity: 1;
}

.claim-verified {
  @apply border-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20;
}

.claim-verified::before {
  background: linear-gradient(45deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.1));
}

.claim-disputed {
  @apply border-red-400 bg-red-500/10 hover:bg-red-500/20;
}

.claim-disputed::before {
  background: linear-gradient(45deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
}

.claim-unverified {
  @apply border-yellow-400 bg-yellow-500/10 hover:bg-yellow-500/20;
}

.claim-unverified::before {
  background: linear-gradient(45deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.1));
}

/* Modern Loading Animations */
.pulse-slow {
  animation: pulse-modern 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-modern {
  0%, 100% { 
    opacity: 0.8; 
    transform: scale(1);
  }
  50% { 
    opacity: 1; 
    transform: scale(1.05);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Interactive Chain Nodes - Enhanced Hover Effects */
.chain-node {
  @apply cursor-pointer transition-all duration-300 hover:scale-110 
         hover:shadow-lg hover:shadow-blue-500/25 relative group;
}

.chain-node::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(45deg, transparent, rgba(59, 130, 246, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.chain-node:hover::before {
  opacity: 1;
}

.chain-node:hover .node-tooltip {
  @apply opacity-100 scale-100;
}

.node-tooltip {
  @apply opacity-0 scale-95 transition-all duration-300 transform-gpu;
}

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

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, rgba(59, 130, 246, 0.6), rgba(99, 102, 241, 0.6));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, rgba(59, 130, 246, 0.8), rgba(99, 102, 241, 0.8));
}

/* Glass Morphism Utilities */
.glass {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.glass-strong {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Focus Styles - Modern Accessibility */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:ring-offset-2 focus:ring-offset-slate-900;
}



/* Responsive Design */
@media (max-width: 640px) {
  .traffic-light-container {
    scale: 0.9;
    flex-direction: column;
    gap: 1rem;
  }
  
  .glass, .glass-strong {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .traffic-light-container div {
    @apply border-4 border-white;
  }
  
  .source-card, .claim-card {
    @apply border-2 border-white/50;
  }
  
  .glass, .glass-strong {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.3);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .animate-gradient,
  .animate-float,
  .animate-pulse-soft,
  .gradient-flow,
  .shimmer {
    animation: none !important;
  }
}

/* Performance Optimizations */
.transform-gpu {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.animate-performance {
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
}