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

@layer utilities {
  .floating-animation {
    animation: float 6s ease-in-out infinite;
  }
  .pulse-glow {
    animation: pulseGlow 3s infinite;
  }
}

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(124, 58, 237, 0.2), 0 0 40px rgba(124, 58, 237, 0.1); }
  50% { box-shadow: 0 0 30px rgba(124, 58, 237, 0.3), 0 0 50px rgba(124, 58, 237, 0.2); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes particle {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

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

/* Basic styles and font setup */
html {
  transition: background-color 0.3s ease;
}

body {
  font-family: 'Inter', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light theme styles - default */
html[data-theme="light"] body,
html:not(.dark) body {
  background-color: #f8fafc !important; /* Slate 50 */
  color: #374151 !important; /* Gray 700 */
}

/* Dark theme styles */
html[data-theme="dark"] body,
html.dark body {
  background-color: #020617 !important; /* Slate 950 */
  color: #d1d5db !important; /* Gray 300 */
}

/* Ensure background gradient follows theme */
html[data-theme="light"] .bg-gradient-to-br,
html:not(.dark) .bg-gradient-to-br {
  background: linear-gradient(to bottom right, #f8fafc, #dbeafe, #f3e8ff) !important;
}

html[data-theme="dark"] .bg-gradient-to-br,
html.dark .bg-gradient-to-br {
  background: linear-gradient(to bottom right, #020617, #020617, #2e1065) !important;
}

/* Fix h3 and other heading visibility in dark mode */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: #f8fafc !important; /* Slate 50 for high contrast */
}

h1, h2, h3, h4, h5, h6 {
  color: #1f2937 !important; /* Gray 800 for light mode */
}

/* Make "Create with AI" card consistent across themes - always dark gradient */
.ai-create-card {
  background: linear-gradient(to bottom right, #2563eb, #7c3aed, #2563eb) !important;
  color: white !important;
}

.ai-create-card h3 {
  color: white !important;
}

.ai-create-card p {
  color: #ddd6fe !important; /* Light purple for description text */
}

/* Improve text contrast for better visibility */
.dark .text-gray-900 {
  color: #f8fafc !important;
}

.dark .text-gray-800 {
  color: #e2e8f0 !important;
}

.dark .text-gray-700 {
  color: #cbd5e1 !important;
}

.dark .text-gray-600 {
  color: #94a3b8 !important;
}

/* Ensure proper contrast for navigation and interactive elements */
.dark .nav-link {
  color: #cbd5e1 !important;
}

.dark .nav-link:hover {
  color: #f8fafc !important;
}

/* Animated gradient text */
.gradient-text {
  background-image: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #e879f9 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-gradient-flow 5s linear infinite;
}

@keyframes text-gradient-flow {
    to {
  background-position: 200% center;
    }
}

/* Glass morphism effect for both themes */
.dark .glass-card {
  background: rgba(23, 31, 58, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(59, 130, 246, 0.1);
  box-shadow: 0 8px 32px rgba(2, 6, 23, 0.3);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(59, 130, 246, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Card hover effect */
.card-hover {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dark .card-hover:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  border-color: rgba(96, 165, 250, 0.2);
}

.card-hover:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  border-color: rgba(96, 165, 250, 0.3);
}

/* Nav link underline effect */
.nav-link {
  position: relative;
  overflow: hidden;
}
.nav-link::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
  transition: width 0.3s ease-in-out;
}
.nav-link:hover::before {
  width: 100%;
}

/* Particle background */
.dark .particle {
  background: rgba(124, 58, 237, 0.3);
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.2);
}

/* Custom scrollbar for better aesthetics */
.dark ::-webkit-scrollbar-track {
  background: #0f172a;
}
.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Animation observer class - Progressive Enhancement Approach */
/* Default state: visible for SSR and non-JS users */
.fade-in-section {
  opacity: 1;
  transform: translateY(0);
}

/* Only apply fade-in animation when JavaScript is available */
.js-animations-enabled .fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform; /* Optimize for animations */
}

.js-animations-enabled .fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto; /* Remove optimization after animation */
}

/* Prioritize sidebar animations */
.js-animations-enabled aside.fade-in-section {
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Reduce motion for articles when there are many */
.js-animations-enabled .many-articles .fade-in-section:not(aside) {
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .js-animations-enabled .fade-in-section {
    opacity: 1;
    transform: translateY(0);
    transition: none;
    will-change: auto;
  }
}

/* Smooth theme transitions for all elements */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Theme toggle button enhancement */
#theme-toggle {
  transition: all 0.3s ease;
}

#theme-toggle:hover {
  transform: scale(1.05);
}

/* Basic Prose styling for article content */
.prose {
  line-height: 1.75;
}
.prose p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  line-height: 1.2;
  font-weight: 700;
}
.prose h1 { font-size: 2.25em; }
.prose h2 { font-size: 1.75em; }
.prose h3 { font-size: 1.5em; }
.prose a {
  color: var(--color-primary-600);
  text-decoration: underline;
  transition: color 0.2s;
}
.prose a:hover {
  color: var(--color-primary-400);
}
.prose strong {
  font-weight: 600;
}
.prose ul, .prose ol {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.75em;
}
.prose ul {
  list-style-type: disc;
}
.prose ol {
  list-style-type: decimal;
}
.prose li > ul, .prose li > ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose blockquote {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  padding-left: 1em;
  border-left: 4px solid var(--color-primary-200);
  font-style: italic;
}
.prose code {
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}
.prose pre {
  background-color: #1e293b; /* Slate 800 */
  color: #e2e8f0; /* Slate 200 */
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  font-size: 0.9em;
}
.prose pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

.dark .prose-invert a {
  color: var(--color-primary-400);
}
.dark .prose-invert a:hover {
  color: var(--color-primary-300);
}
.dark .prose-invert blockquote {
  border-left-color: var(--color-primary-700);
}
.dark .prose-invert code {
  background-color: var(--color-primary-900);
  color: var(--color-primary-200);
}
.dark .prose-invert pre {
  background-color: #0f172a; /* Slate 900 */
}

.stat-highlight {
  color: #2563eb;
  font-weight: 600;
  background-color: #eff6ff;
  padding: 2px 4px;
  border-radius: 4px;
}

.date-highlight {
  color: #dc2626;
  font-weight: 500;
  background-color: #fef2f2;
  padding: 2px 4px;
  border-radius: 4px;
}

.age-highlight {
  color: #7c3aed;
  font-weight: 500;
}

/* Force badge text to always be dark */
.badge-text {
  color: #374151 !important; /* Gray 700 - always dark */
}