/* Performance optimizations for reducing main thread blocking */

/* Optimize animations - use compositor-friendly properties */
.lazy-component {
  opacity: 0;
  transform: translateY(20px) translateZ(0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.lazy-component.lazy-loaded {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}



/* Use transform for width animations instead of width property */
.stat-indicator {
  transform: scaleX(0.25) translateZ(0);
  transform-origin: left center;
  transition: transform 0.3s ease-out;
  will-change: transform;
}

.stat-indicator.active {
  transform: scaleX(1) translateZ(0);
}

/* Hardware acceleration for smooth animations */
.transform-gpu {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
}

/* Optimize image loading */
img {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

/* Reduce paint on scroll */
main {
  contain: layout style paint;
}

/* Optimize transitions for better performance */
.transition-all:hover {
  will-change: transform, opacity;
}

/* Gradient animation alternatives using opacity */
.gradient-animated {
  position: relative;
  overflow: hidden;
}

.gradient-animated::before {
  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%; }
}