/* Enhanced Hero Section Styles */

/* Add subtle animations for hero images */
.hero-image-main {
  transform: translateZ(0);
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hero-image-main:hover {
  transform: scale(1.03) translateZ(0);
}

.hero-image-secondary {
  transform: rotate(-6deg) translateZ(0);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-image-secondary:hover {
  transform: rotate(0) scale(1.08) translateZ(0);
  z-index: 30;
}

.hero-image-accent {
  transform: rotate(12deg) translateZ(0);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-image-accent:hover {
  transform: rotate(0) scale(1.15) translateZ(0);
  z-index: 30;
}

/* Add smooth scroll for better UX */
html {
  scroll-behavior: smooth;
}

/* Improve focus outlines for accessibility */
a:focus, button:focus {
  outline: 2px solid rgba(99, 102, 241, 0.6);
  outline-offset: 2px;
}

/* Enhanced image loading effect */
@keyframes imageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-section img {
  animation: imageFadeIn 0.5s ease-in-out;
}

/* Optimize hero section for mobile */
@media (max-width: 768px) {
  .hero-stack {
    transform: scale(0.9);
  }
}