/* Non-Critical CSS - Loaded after page interactive */
@tailwind components;
@tailwind utilities;

/* Professional tech-themed button using CSS custom properties */
.tech-button {
  background: linear-gradient(
    135deg,
    hsl(var(--tech-button-bg)),
    hsl(var(--tech-button-bg-hover))
  );
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 4px 15px hsl(var(--tech-button-bg) / 0.2);
  transition: all 0.3s ease;
}

.tech-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--tech-button-highlight) / 0.3),
    transparent
  );
  transition: left 0.5s ease;
  z-index: -1;
}

.tech-button:hover::before {
  left: 100%;
}

.tech-button:hover {
  box-shadow: 0 8px 25px hsl(var(--tech-button-bg) / 0.4);
  transform: translateY(-2px);
}

/* Article and Content Styles */
.article-content {
  max-width: 70ch;
  margin: 0 auto;
  font-family: var(--font-inter);
  line-height: 1.8;
  color: hsl(var(--foreground-secondary));
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  margin: 2em 0 1em 0;
  font-weight: 700;
  color: hsl(var(--foreground));
  line-height: 1.3;
}

.article-content h1 { font-size: 2.5em; }
.article-content h2 { font-size: 2em; }
.article-content h3 { font-size: 1.5em; }
.article-content h4 { font-size: 1.25em; }

.article-content p {
  margin: 1.5em 0;
  text-align: justify;
  hyphens: auto;
}

.article-content blockquote {
  margin: 2em 0;
  padding: 1em 2em;
  border-left: 4px solid hsl(var(--primary));
  background: hsl(var(--glass-surface) / 0.3);
  border-radius: 0 0.5rem 0.5rem 0;
  font-style: italic;
}

.article-content code {
  background: hsl(var(--glass-elevated) / 0.5);
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-family: var(--font-jetbrains-mono);
  font-size: 0.9em;
}

.article-content pre {
  background: hsl(var(--glass-base) / 0.8);
  padding: 1.5em;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 2em 0;
  border: 1px solid hsl(var(--glass-border) / 0.3);
}

.article-content pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}

.article-content ul,
.article-content ol {
  margin: 1.5em 0;
  padding-left: 2em;
}

.article-content li {
  margin: 0.5em 0;
}

.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 2em auto;
  display: block;
  box-shadow: 0 10px 40px hsl(var(--background) / 0.5);
}

.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  background: hsl(var(--glass-surface) / 0.3);
  border-radius: 0.5rem;
  overflow: hidden;
}

.article-content th,
.article-content td {
  padding: 1em;
  text-align: left;
  border-bottom: 1px solid hsl(var(--glass-border) / 0.2);
}

.article-content th {
  background: hsl(var(--glass-elevated) / 0.5);
  font-weight: 600;
  color: hsl(var(--foreground));
}

/* Rich Text Editor Styles */
.rich-text-editor {
  min-height: 400px;
  border: 1px solid hsl(var(--glass-border) / 0.3);
  border-radius: 0.5rem;
  background: hsl(var(--glass-surface) / 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.rich-text-editor .ProseMirror {
  padding: 1.5rem;
  outline: none;
  font-family: var(--font-inter);
  line-height: 1.6;
  color: hsl(var(--foreground-secondary));
}

.rich-text-editor .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: hsl(var(--foreground-muted));
  pointer-events: none;
  height: 0;
}

/* Section-specific gradient animations */
.hero-gradient-enhanced {
  background: linear-gradient(
    135deg,
    hsl(var(--primary)) 0%,
    hsl(var(--secondary)) 25%,
    hsl(var(--accent)) 50%,
    hsl(var(--primary-bright)) 75%,
    hsl(var(--secondary-bright)) 100%
  );
  background-size: 300% 300%;
  animation: gradientFlow 12s ease-in-out infinite;
}

@keyframes gradientFlow {
  0%, 100% { background-position: 0% 50%; }
  33% { background-position: 100% 0%; }
  66% { background-position: 0% 100%; }
}

.about-gradient {
  background: linear-gradient(
    45deg,
    hsl(var(--secondary)) 0%,
    hsl(var(--accent)) 50%,
    hsl(var(--primary)) 100%
  );
  background-size: 200% 200%;
  animation: aboutPulse 10s ease-in-out infinite;
}

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

.projects-gradient {
  background: linear-gradient(
    90deg,
    hsl(var(--accent)) 0%,
    hsl(var(--primary)) 50%,
    hsl(var(--secondary)) 100%
  );
  background-size: 200% 100%;
  animation: projectsSlide 8s linear infinite;
}

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

/* Enhanced Card Styles */
.enhanced-card {
  background: linear-gradient(
    135deg,
    hsl(var(--glass-base) / 0.1) 0%,
    hsl(var(--glass-surface) / 0.15) 50%,
    hsl(var(--glass-elevated) / 0.1) 100%
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid hsl(var(--glass-border) / 0.2);
  border-radius: 1rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.enhanced-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--primary) / 0.5),
    transparent
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

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

.enhanced-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: hsl(var(--primary) / 0.4);
  background: linear-gradient(
    135deg,
    hsl(var(--glass-surface) / 0.2) 0%,
    hsl(var(--glass-elevated) / 0.25) 50%,
    hsl(var(--primary-muted) / 0.1) 100%
  );
  box-shadow: 
    0 20px 60px hsl(var(--background) / 0.3),
    0 10px 30px hsl(var(--primary) / 0.2);
}

/* Contextual Button Styles */
.contextual-button {
  background: hsl(var(--glass-surface) / 0.8);
  border: 1px solid hsl(var(--glass-border) / 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.contextual-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(
    circle,
    hsl(var(--primary) / 0.2) 0%,
    transparent 70%
  );
  transition: all 0.6s ease;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.contextual-button:hover::after {
  width: 300px;
  height: 300px;
}

.contextual-button:hover {
  border-color: hsl(var(--primary) / 0.5);
  background: hsl(var(--glass-elevated) / 0.9);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px hsl(var(--primary) / 0.2);
}

/* Performance-optimized animations for non-critical elements */
@media (prefers-reduced-motion: no-preference) {
  .animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
  }
  
  .animate-slide-up {
    animation: slideUp 0.8s ease-out forwards;
  }
  
  .animate-scale-in {
    animation: scaleIn 0.5s ease-out forwards;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

/* Utility Classes */
.glass-border {
  border: 1px solid hsl(var(--glass-border) / 0.2);
}

.glass-backdrop {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.text-glow {
  text-shadow: 0 0 20px hsl(var(--primary) / 0.5);
}

.box-glow {
  box-shadow: 0 0 30px hsl(var(--primary) / 0.3);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .enhanced-card {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  
  .contextual-button {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  
  .rich-text-editor {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  
  /* Disable expensive animations on mobile */
  .hero-gradient-enhanced,
  .about-gradient,
  .projects-gradient {
    animation: none;
  }
}