/* Performance optimizations to reduce lag */

/* 1. Reduce animations and effects */
.hero::before {
  animation: enhanced-float 25s ease-in-out infinite alternate;
  animation-play-state: paused; /* Only animate on hover */
}

.hero:hover::before {
  animation-play-state: running;
}

.hero::after {
  animation: none; /* Remove particle animation */
}

/* Use simpler background */
.hero {
  background: linear-gradient(
    135deg,
    rgba(93, 33, 208, 0.08) 0%,
    rgba(255, 218, 74, 0.1) 100%
  );
}

/* Remove or optimize backdrop filter which is performance intensive */
.hero-content {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.9);
}

/* Optimize pulse animation for better performance */
.hero-buttons .primary-btn {
  animation: enhanced-pulse 3s ease-in-out infinite; /* Slower animation */
}

@keyframes enhanced-pulse {
  0%,
  100% {
    box-shadow: 0 8px 20px rgba(93, 33, 208, 0.4);
  }
  50% {
    box-shadow: 0 8px 25px rgba(93, 33, 208, 0.6);
  }
}

/* 2. Optimize transitions */
.hero-content,
.hero-image img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 3. Reduce image size/quality for preview images */
.preview-image img {
  max-width: 100%;
  height: auto;
}

/* 4. Optimize layout shifts to reduce repaints */
.hero-content,
.hero-image,
.feature-card,
.preview-image {
  will-change: transform;
  transform: translateZ(0); /* Forces GPU acceleration */
}

/* 5. Simplify hover effects */
.preview-image:hover {
  transform: translateY(-5px) !important;
}

/* 6. Remove unnecessary calculations from responsive layouts */
@media (max-width: 768px) {
  .hero-content,
  .hero-image {
    transform: none !important;
  }

  .hero-image img {
    transform: none !important;
    transition: box-shadow 0.3s ease;
  }
}