/**
 * Hero Slider - Animation Styles
 * WHMCS Twenty-One Template
 */

/* Slide Transitions - GPU Accelerated */
.hero-slide {
  /* Use only GPU-accelerated properties: opacity and transform */
  /* visibility transitions immediately to prevent overlap issues */
  transition: opacity 500ms ease-in-out, visibility 0ms linear 500ms;
  /* Force hardware acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Active slide visibility is immediate, opacity fades in */
.hero-slide.active {
  transition: opacity 500ms ease-in-out, visibility 0ms linear 0ms;
}

/* Navigation Button Animations - GPU Accelerated */
.hero-nav {
  /* Specify exact properties instead of 'all' for better performance */
  transition: background-color 300ms ease, transform 300ms ease, opacity 300ms ease;
  /* Force hardware acceleration */
  transform: translateY(-50%) translateZ(0);
  backface-visibility: hidden;
}

.hero-nav:active {
  /* Use transform for scaling - GPU accelerated */
  transform: translateY(-50%) scale(0.95) translateZ(0);
}

/* Pagination Dot Animations - GPU Accelerated */
.hero-pagination-dot {
  /* Specify exact properties instead of 'all' for better performance */
  transition: background-color 300ms ease, transform 300ms ease, opacity 300ms ease;
  /* Force hardware acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.hero-pagination-dot:active {
  /* Use transform for scaling - GPU accelerated */
  transform: scale(0.9) translateZ(0);
}

/* Content Animation (optional enhancement) - GPU Accelerated */
.hero-slide-text > * {
  /* Use only GPU-accelerated properties */
  transition: opacity 400ms ease-in-out 200ms, transform 400ms ease-in-out 200ms;
  /* Force hardware acceleration */
  backface-visibility: hidden;
}

.hero-slide:not(.active) .hero-slide-text > * {
  opacity: 0;
  /* Use translate3d for GPU acceleration */
  transform: translate3d(0, 20px, 0);
}

.hero-slide.active .hero-slide-text > * {
  opacity: 1;
  /* Use translate3d for GPU acceleration */
  transform: translate3d(0, 0, 0);
}

/* Visual Element Animation - GPU Accelerated */
.hero-slide-visual {
  /* Use only GPU-accelerated properties */
  transition: opacity 400ms ease-in-out 300ms, transform 400ms ease-in-out 300ms;
  /* Force hardware acceleration */
  backface-visibility: hidden;
}

.hero-slide:not(.active) .hero-slide-visual {
  opacity: 0;
  /* Use translate3d for GPU acceleration */
  transform: translate3d(30px, 0, 0);
}

.hero-slide.active .hero-slide-visual {
  opacity: 1;
  /* Use translate3d for GPU acceleration */
  transform: translate3d(0, 0, 0);
}

/* GPU Acceleration Hints - Applied only during transitions */
.hero-slide.transitioning,
.hero-slide-text.transitioning > *,
.hero-slide-visual.transitioning {
  /* Only hint will-change during actual transitions to avoid memory issues */
  will-change: transform, opacity;
}

/* Remove will-change after transition completes to free up resources */
.hero-slide:not(.transitioning),
.hero-slide-text:not(.transitioning) > *,
.hero-slide-visual:not(.transitioning) {
  will-change: auto;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide-text > *,
  .hero-slide-visual,
  .hero-nav,
  .hero-pagination-dot {
    transition: none !important;
    animation: none !important;
  }
  
  .hero-slide:not(.active) .hero-slide-text > *,
  .hero-slide:not(.active) .hero-slide-visual {
    opacity: 0;
    transform: none;
  }
  
  .hero-slide.active .hero-slide-text > *,
  .hero-slide.active .hero-slide-visual {
    opacity: 1;
    transform: none;
  }
}

/* Loading State */
.hero-slider.loading .hero-slide {
  opacity: 0;
}

.hero-slider.loading .hero-nav,
.hero-slider.loading .hero-pagination {
  pointer-events: none;
  opacity: 0.5;
}

/* Hover Effects - GPU Accelerated */
.btn-hero {
  /* Specify exact properties instead of 'all' for better performance */
  transition: background-color 300ms ease, color 300ms ease, transform 300ms ease;
  /* Force hardware acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.btn-hero:hover {
  /* Use transform for any hover effects - GPU accelerated */
  transform: translateZ(0) scale(1.02);
}

.hero-slide-features li {
  /* Use only GPU-accelerated properties */
  transition: transform 200ms ease;
  /* Force hardware acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.hero-slide-features li:hover {
  /* Use translate3d for GPU acceleration */
  transform: translate3d(4px, 0, 0);
}