/* ================================================
PERFORMANCE OPTIMIZATIONS - CRITICAL FIXES
Added: January 2026
Target: Lighthouse 90+, CLS < 0.1, Zero non-composited animations
================================================ */

/* Performance variables */
:root {
  --transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Respect user motion preferences */
@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;
  }
}

/* GPU-only transitions for links */
a {
  transition: opacity var(--transition-fast), 
              transform var(--transition-fast) !important;
}

/* ================================================
NAVBAR DROPDOWN - GPU OPTIMIZED
================================================ */
.main-nav nav .navbar-nav .nav-item .dropdown-menu {
  transform: translateY(-10px) translateZ(0) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, 
              transform 0.3s ease,
              visibility 0.3s !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
  pointer-events: none;
  contain: layout style paint;
}

.main-nav nav .navbar-nav .nav-item:hover > .dropdown-menu {
  transform: translateY(0) translateZ(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu li a {
  transition: opacity 0.2s ease,
              transform 0.2s ease !important;
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu li a:hover {
  transform: translateX(5px) translateZ(0) !important;
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
  transform: translateX(-10px) translateZ(0) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease,
              transform 0.3s ease !important;
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu li:hover > .dropdown-menu {
  transform: translateX(0) translateZ(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ================================================
ACCORDION OPTIMIZATION
================================================ */
.accordion-item {
  contain: layout;
}

.accordion-button {
  transition: opacity var(--transition-fast) !important;
}

.accordion-button i {
  transition: transform var(--transition-fast) !important;
  transform: rotate(0deg) translateZ(0);
}

.accordion-button:not(.collapsed) i {
  transform: rotate(180deg) translateZ(0) !important;
}

.accordion-collapse:not(.show) {
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px) translateZ(0);
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              transform 0.3s ease;
}

.accordion-collapse.show {
  max-height: 1000px;
  opacity: 1;
  transform: translateY(0) translateZ(0);
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease,
              transform 0.4s ease;
}

.accordion-collapse.collapsing {
  height: auto !important;
  max-height: 1000px;
  opacity: 0.5;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease !important;
}

/* ================================================
BUTTON OPTIMIZATION
================================================ */
.default-button {
  transition: transform 0.3s cubic-bezier(0.33, 0.11, 0.02, 0.99),
              opacity 0.3s ease !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.default-button::before,
.default-button::after {
  display: none !important;
}

.default-button:hover {
  transform: scale(1.05) translateY(-2px) translateZ(0) !important;
  opacity: 0.95;
}

.read-more-btn {
  transition: transform 0.3s cubic-bezier(0.33, 0.11, 0.02, 0.99),
              opacity 0.3s ease !important;
  transform: translateZ(0);
}

.read-more-btn:hover {
  transform: translateX(5px) translateZ(0) !important;
  opacity: 0.8;
}

/* ================================================
CARD HOVER EFFECTS
================================================ */
.service-card,
.blog-card,
.team-card,
.product-card,
.pricing-card,
.testimonial-card {
  transition: transform var(--transition-smooth),
              opacity var(--transition-fast) !important;
  transform: translateZ(0);
  contain: layout style paint;
}

.service-card:hover,
.blog-card:hover,
.product-card:hover {
  transform: translateY(-5px) translateZ(0) !important;
}

.team-card:hover {
  transform: translateY(-10px) translateZ(0) !important;
}

.pricing-card:hover {
  transform: translateY(-5px) translateZ(0) !important;
}

/* ================================================
IMAGE TRANSFORMS
================================================ */
.service-card .service-card-img img,
.blog-card .blog-card-img img {
  transition: transform 0.4s ease !important;
  transform: translateZ(0);
}

.service-card:hover .service-card-img img,
.blog-card:hover .blog-card-img img {
  transform: scale(1.05) translateZ(0) !important;
}

/* ================================================
ICON ANIMATIONS
================================================ */
.service-card:hover .service-card-text-area .main-icon,
.features-card:hover img {
  transform: scale(1.1) translateZ(0) !important;
  transition: transform var(--transition-fast) !important;
}

/* ================================================
REMOVE INFINITE ANIMATIONS
================================================ */
.intro-video-play-area a::before,
.intro-video-play-area a::after {
  animation: none !important;
}

.intro-video-play-area a {
  box-shadow: 0 0 0 0 rgba(3, 4, 94, 0.3);
  transition: transform 0.3s ease;
}

.intro-video-play-area a:hover {
  transform: scale(1.1) translateZ(0) !important;
}

/* ================================================
PRICING CARDS
================================================ */
.pricing-card h2,
.pricing-card h6 {
  transition: opacity var(--transition-fast) !important;
}

.pricing-card:hover h2 {
  animation: none !important;
  opacity: 0.9;
}

/* ================================================
PROGRESS INDICATOR
================================================ */
.progress-wrap {
  transition: opacity 0.3s ease,
              transform 0.3s ease !important;
  transform: translateZ(0);
}

.progress-wrap.active-progress {
  opacity: 1;
  transform: translateY(0) translateZ(0) !important;
}

.progress-wrap:hover {
  transform: scale(1.1) translateZ(0) !important;
}

/* ================================================
STICKY NAVBAR
================================================ */
.sticky {
  transition: transform 0.3s ease,
              opacity 0.3s ease !important;
  animation: none !important;
}

/* ================================================
IMAGE CLS PREVENTION
================================================ */
img {
  max-width: 100% !important;
  height: auto !important;
}

.blog-card-img,
.service-card-img,
.product-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  contain: layout;
}

.blog-card-img img,
.service-card-img img,
.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card-img {
  aspect-ratio: 1/1;
  overflow: hidden;
  contain: layout;
}

.testimonial-intro-area img {
  width: 70px;
  height: 70px;
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* ================================================
MOBILE OPTIMIZATION
================================================ */
@media (max-width: 768px) {
  /* Disable complex animations on mobile */
  .service-card:hover,
  .blog-card:hover,
  .team-card:hover,
  .pricing-card:hover {
    transform: none !important;
  }
  
  .service-card:hover .service-card-img img,
  .blog-card:hover .blog-card-img img {
    transform: translateZ(0) !important;
  }
  
  /* Simplify all transitions */
  * {
    transition-duration: 0.2s !important;
  }
  
  /* Disable will-change on mobile */
  * {
    will-change: auto !important;
  }
}

/* ================================================
FORCE GPU ACCELERATION
================================================ */
.dropdown-menu,
.accordion-collapse,
.default-button,
.service-card,
.blog-card,
.team-card,
.testimonial-card,
.pricing-card {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ================================================
CONTENT VISIBILITY
================================================ */
.section-content,
.blog-card,
.service-card,
.testimonial-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* ================================================
DISABLE PROBLEMATIC KEYFRAMES
================================================ */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0) translateZ(0);
  }
  50% {
    transform: translateY(-10px) translateZ(0);
  }
}

@keyframes jello {
  0%, 100% {
    transform: scale(1) translateZ(0);
  }
  50% {
    transform: scale(1.05) translateZ(0);
  }
}

@keyframes breathe {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

/* ================================================
END PERFORMANCE OPTIMIZATIONS
================================================ */