/* Performance Optimizations - 60fps Animations and Efficient Rendering */

/* ============================================
   1. GPU ACCELERATION FOR SMOOTH ANIMATIONS
   ============================================ */

/* Force GPU acceleration for frequently animated elements */
.stat-card,
.service-card,
.team-member,
.methodology-step,
.btn,
.nav__menu,
.nav__toggle,
.contact__info-item,
.benefit-item {
  will-change: transform, opacity !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  perspective: 1000px !important;
}

/* GPU-optimized transforms only */
.stat-card:hover,
.service-card:hover,
.team-member:hover,
.btn:hover {
  transform: translateZ(0) translateY(-4px) !important;
}

/* ============================================
   2. OPTIMIZED ANIMATION TIMING FUNCTIONS
   ============================================ */

/* Use hardware-accelerated cubic-bezier for smooth animations */
:root {
  --timing-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
  --timing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --timing-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --timing-ease-in: cubic-bezier(0.4, 0.0, 1, 1);
}

/* Apply optimized timing to all transitions */
* {
  transition-timing-function: var(--timing-smooth) !important;
}

.btn,
.stat-card,
.service-card {
  transition: transform 0.2s var(--timing-smooth), 
              box-shadow 0.2s var(--timing-smooth),
              opacity 0.2s var(--timing-smooth) !important;
}

/* ============================================
   3. EFFICIENT KEYFRAME ANIMATIONS
   ============================================ */

/* Optimized fade-in animation using opacity and transform only */
@keyframes optimizedFadeInUp {
  0% {
    opacity: 0;
    transform: translateZ(0) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) translateY(0);
  }
}

/* Optimized scale animation */
@keyframes optimizedScale {
  0% {
    transform: translateZ(0) scale(0.95);
  }
  100% {
    transform: translateZ(0) scale(1);
  }
}

/* Optimized slide animation */
@keyframes optimizedSlideIn {
  0% {
    transform: translateZ(0) translateX(-20px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0) translateX(0);
    opacity: 1;
  }
}

/* Optimized pulse animation for loading states */
@keyframes optimizedPulse {
  0%, 100% {
    opacity: 1;
    transform: translateZ(0) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translateZ(0) scale(1.02);
  }
}

/* Replace heavy animations with optimized versions */
.scroll-animate.animate {
  animation: optimizedFadeInUp 0.6s var(--timing-smooth) forwards !important;
}

.service-card-animate {
  animation: optimizedScale 0.4s var(--timing-smooth) forwards !important;
}

/* ============================================
   4. CONTAIN LAYOUT AND PAINT OPERATIONS
   ============================================ */

/* Use CSS containment for better performance */
.section {
  contain: layout style !important;
}

.card,
.stat-card,
.service-card,
.team-member,
.methodology-step {
  contain: layout style paint !important;
}

.nav__menu,
.language-dropdown {
  contain: layout style paint !important;
}

/* Contain layout for grid containers */
.stats__grid,
.services__grid,
.team-grid,
.benefits-grid {
  contain: layout !important;
}

/* ============================================
   5. OPTIMIZED LOADING ANIMATIONS
   ============================================ */

/* Efficient loading spinner */
.loading-spinner {
  width: 40px !important;
  height: 40px !important;
  border: 3px solid rgba(124, 58, 237, 0.2) !important;
  border-top: 3px solid var(--primary-color, #7c3aed) !important;
  border-radius: 50% !important;
  animation: optimizedSpin 1s linear infinite !important;
  will-change: transform !important;
  transform: translateZ(0) !important;
}

@keyframes optimizedSpin {
  0% {
    transform: translateZ(0) rotate(0deg);
  }
  100% {
    transform: translateZ(0) rotate(360deg);
  }
}

/* Skeleton loading animation */
.skeleton {
  background: linear-gradient(90deg, 
    rgba(124, 58, 237, 0.1) 25%, 
    rgba(124, 58, 237, 0.2) 50%, 
    rgba(124, 58, 237, 0.1) 75%) !important;
  background-size: 200% 100% !important;
  animation: skeletonLoading 1.5s ease-in-out infinite !important;
  will-change: background-position !important;
}

@keyframes skeletonLoading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ============================================
   6. OPTIMIZED HOVER EFFECTS
   ============================================ */

/* Use transform instead of changing multiple properties */
.btn:hover,
.stat-card:hover,
.service-card:hover,
.team-member:hover {
  transform: translateZ(0) translateY(-2px) !important;
}

/* Optimized box-shadow transitions */
.card:hover,
.btn:hover {
  box-shadow: 0 10px 25px rgba(124, 58, 237, 0.15) !important;
}

/* Remove expensive hover effects on touch devices */
@media (hover: none) {
  .btn:hover,
  .stat-card:hover,
  .service-card:hover,
  .team-member:hover,
  .contact__info-item:hover {
    transform: translateZ(0) !important;
    box-shadow: initial !important;
  }
}

/* ============================================
   7. SCROLL PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Optimize scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Use passive event listeners for scroll events (handled in JS) */
.scroll-animate {
  will-change: transform, opacity !important;
  transform: translateZ(0) !important;
}

/* Optimize intersection observer elements */
.scroll-animate,
.scroll-animate-left,
.scroll-animate-right,
.scroll-animate-scale {
  contain: layout style !important;
}

/* ============================================
   8. MEMORY MANAGEMENT
   ============================================ */

/* Clear will-change after animations complete */
.animate-complete {
  will-change: auto !important;
}

/* Optimize images for performance */
img {
  content-visibility: auto !important;
  contain-intrinsic-size: 300px 200px !important;
}

/* ============================================
   9. REDUCED MOTION ADAPTATIONS
   ============================================ */

/* Respect user's motion preferences while maintaining performance */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Maintain GPU acceleration but remove motion */
  .btn:hover,
  .stat-card:hover,
  .service-card:hover {
    transform: translateZ(0) !important;
  }
  
  /* Keep loading indicators functional */
  .loading-spinner {
    animation: none !important;
    border-top-color: var(--primary-color, #7c3aed) !important;
    opacity: 0.8 !important;
  }
}

/* ============================================
   10. PROGRESSIVE ENHANCEMENT
   ============================================ */

/* Fallbacks for browsers without advanced features */
@supports not (contain: layout) {
  .section,
  .card {
    overflow: hidden !important;
  }
}

@supports not (will-change: transform) {
  .stat-card,
  .btn,
  .service-card {
    transform: translateZ(0) !important;
  }
}

/* ============================================
   11. CRITICAL ANIMATIONS ONLY
   ============================================ */

/* Prioritize critical user feedback animations */
.btn:active {
  transform: translateZ(0) translateY(0) scale(0.98) !important;
  transition: transform 0.1s var(--timing-smooth) !important;
}

.form-group input:focus,
.form-group textarea:focus {
  transform: translateZ(0) scale(1.01) !important;
  transition: transform 0.2s var(--timing-smooth), 
              border-color 0.2s var(--timing-smooth),
              box-shadow 0.2s var(--timing-smooth) !important;
}

/* ============================================
   12. PERFORMANCE MONITORING HELPERS
   ============================================ */

/* Add performance markers for debugging */
.perf-critical {
  --perf-start: perf-critical-start;
  --perf-end: perf-critical-end;
}

/* Optimize font rendering */
.section__title,
.hero__title,
.nav__link {
  font-display: swap !important;
  text-rendering: optimizeSpeed !important;
}

/* ============================================
   13. COMPOSITOR LAYERS
   ============================================ */

/* Force compositor layers for frequently changing elements */
.nav__menu.show-menu,
.language-dropdown.show,
.modal.active {
  transform: translateZ(0) !important;
  opacity: 1 !important;
  will-change: transform, opacity !important;
}

/* Optimize layer management */
.header.scrolled {
  transform: translateZ(0) !important;
  will-change: transform, background-color !important;
}