/* Non-critical carousel CSS - Can be loaded after first paint */
/* This will be loaded asynchronously */

/* Complex animations that are not critical for initial render */
.animation {
  animation: scrollUpDown 100s linear infinite;
  will-change: transform;
  contain: layout;
}

@keyframes scrollUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1000%);
  }
}

.animate-light {
  animation: lightOpenClose 2s linear infinite;
  will-change: opacity;
  contain: layout;
}

@keyframes lightOpenClose {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.animate-car {
  animation: carDarkWhite 2s linear infinite;
  will-change: opacity;
  contain: layout;
}

@keyframes carDarkWhite {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.25;
  }
  100% {
    opacity: 0;
  }
}

/* Enhanced hover effects with GPU acceleration */
.bg-image-size:hover {
  -webkit-transform: scale(1.5, 1.5);
  transform: scale(1.5, 1.5);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  will-change: transform;
  backface-visibility: hidden;
}