/* Performance Optimizations for Featured Projects and Latest Insights */

/* Reduce animation complexity - apply to existing elements */
.hover\:scale-105:hover {
  transform: scale(1.02) !important; /* Reduced from 1.05 */
}

.hover\:scale-110:hover {
  transform: scale(1.05) !important; /* Reduced from 1.10 */
}

/* More efficient hover effects using transform instead of box-shadow */
.hover-lift {
  transform: translateY(0);
  transition: transform 0.15s ease-out;
  will-change: transform;
}

.hover-lift:hover {
  transform: translateY(-3px);
}

/* Optimize heavy blur effects */
.blur-3xl {
  --tw-blur: blur(32px) !important; /* Reduced from 64px */
}

/* Reduce transition duration for snappier feel */
.transition-all {
  transition-duration: 0.2s !important; /* Reduced from 0.3s */
}

/* Lazy loading styles */
.lazy-image {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lazy-image.loaded {
  opacity: 1;
}

/* Loading skeleton for projects */
.project-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.dark .project-skeleton {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200% 100%;
}

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

/* Reduce paint complexity */
.backdrop-blur-md {
  backdrop-filter: blur(6px) !important; /* Reduced from 12px */
}

.backdrop-blur-sm {
  backdrop-filter: blur(2px) !important; /* Reduced from 4px */
}

/* Optimize expensive transforms */
.animate-pulse {
  animation-duration: 3s !important; /* Slower pulse */
}

.animate-bounce {
  animation-duration: 2s !important; /* Slower bounce */
}

/* Container queries for better responsive performance */
@container (max-width: 768px) {
  .hover\:scale-105:hover,
  .hover\:scale-110:hover {
    transform: none !important;
  }
}

/* Reduce complexity for mobile devices */
@media (max-width: 768px) {
  .blur-3xl,
  .backdrop-blur-md,
  .backdrop-blur-sm {
    filter: none !important;
    backdrop-filter: none !important;
  }
  
  .animate-pulse,
  .animate-bounce {
    animation: none !important;
  }
  
  /* Disable heavy transforms on mobile */
  .hover\:scale-105:hover,
  .hover\:scale-110:hover,
  .group-hover\:scale-110 {
    transform: none !important;
  }
}

/* Performance-optimized grid layouts */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
  gap: 2rem;
  contain: layout style;
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
  gap: 1.5rem;
  contain: layout style;
}

/* Optimize scroll performance */
.scroll-container {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0); /* Force GPU acceleration */
}

/* Reduce repaints during filtering */
.filter-transition {
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  will-change: opacity, transform;
}

.filter-transition.hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

/* Critical loading styles */
.content-loading {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Intersection Observer optimizations */
.fade-in-observer {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-observer.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Memory optimization for large lists */
.virtual-item {
  contain: strict;
  will-change: transform;
}

/* Optimize font rendering */
.font-display-optional {
  font-display: optional;
}

/* Reduce layout shifts */
.aspect-ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
  aspect-ratio: 4 / 3;
}

/* Performance hints for browsers */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Optimize hover states */
@media (hover: hover) and (pointer: fine) {
  .hover-only\:scale-105:hover {
    transform: scale(1.02);
    transition: transform 0.15s ease-out;
  }
}

/* Fallback for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .animate-pulse,
  .animate-bounce,
  .animate-spin {
    animation: none !important;
  }
}