/**
 * Animation Performance Fix
 * Fixes animation speed differences between mobile and desktop
 * Forces consistent GPU acceleration across all devices
 */

/* Force GPU acceleration on gradient animations */
.animate-gradient,
[animate="gradient"],
.preloader-wrapper.v2.animate-gradient {
  /* Force GPU acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  
  /* Optimize rendering */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  
  /* Tell browser this will animate */
  will-change: background-position;
  
  /* Prevent flickering */
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}

/* Normalize animation timing across devices */
@media screen and (max-width: 768px) {
  .animate-gradient,
  [animate="gradient"] {
    /* Slow down animation on mobile to compensate for higher refresh rates */
    animation-duration: 24s !important;
  }
}

/* Force GPU acceleration on marquee/scroll animations */
.marquee-content,
.marquee-content.scroll,
.animation-title {
  /* Force GPU acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  
  /* Optimize rendering */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  
  /* Tell browser this will animate */
  will-change: transform;
}

/* Adjust marquee timing for mobile */
@media screen and (max-width: 768px) {
  .marquee-content.scroll {
    /* Slow down marquee on mobile */
    animation-duration: 15s !important;
  }
}

/* Fix for high refresh rate displays */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  .animate-gradient,
  [animate="gradient"] {
    animation-duration: 28s !important;
  }
  
  .marquee-content.scroll {
    animation-duration: 18s !important;
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .animate-gradient,
  [animate="gradient"],
  .marquee-content,
  .marquee-content.scroll {
    animation: none !important;
  }
}

/* Ensure smooth animations on all devices */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Prevent animation jank on scroll */
body {
  -webkit-overflow-scrolling: touch;
}

/* Fix for iOS devices specifically */
@supports (-webkit-touch-callout: none) {
  .animate-gradient,
  [animate="gradient"] {
    animation-duration: 32s !important;
  }
  
  .marquee-content.scroll {
    animation-duration: 20s !important;
  }
}

/* Add smooth transition for all animated elements */
.animate-gradient,
[animate="gradient"],
.marquee-content,
.marquee-content.scroll {
  transition: none !important; /* Prevent double animations */
}