/* Performance Optimization CSS */
/* This file contains critical CSS optimizations for better performance and Core Web Vitals */

/* Critical Above-the-fold CSS - Consolidated for better performance */
.hero-section,
.hero,
.hero-minimal {
  will-change: transform;
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Core Web Vitals Optimization - Largest Contentful Paint (LCP) */
.hero-content,
.hero-title,
.hero-copy {
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}

/* Image optimization for better LCP - Consolidated selectors */
img,
.logo,
.hero-image,
.mobile-app-image,
.student-id-card {
  content-visibility: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* Critical images should not be lazy loaded */
}

/* Logo specific optimizations */
.logo {
  width: 120px;
  height: 32px;
  contain: layout size;
}

/* Reduce layout shifts - Cumulative Layout Shift (CLS) optimization */
.feature-card,
.bento-item,
.benefit-card {
  min-height: 200px;
  contain: layout style paint;
}

.solution-card,
.team-card,
.timeline-item {
  min-height: 250px;
  contain: layout style paint;
}

/* First Input Delay (FID) optimization - Enhanced for all interactive elements */
.nav-link,
.btn,
.dropdown-trigger,
.dropdown-item,
.mobile-menu-toggle,
.accordion-question {
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  will-change: transform;
}

/* Optimize animations for better 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;
  }
}

/* GPU acceleration for smooth animations - Consolidated and optimized */
.nav-container,
.navbar,
.hero-content,
.feature-card,
.bento-item,
.mockup-container {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* Reduce paint complexity and improve rendering */
.gradient-bg,
.hero-bg,
.hero-grid {
  will-change: auto;
  contain: layout style;
}

/* Optimize scrolling performance */
.scroll-container,
body {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Enhanced mobile-first optimizations */
@media (max-width: 768px) {
  .hero-section,
  .hero,
  .hero-minimal {
    contain: layout style;
    will-change: auto;
  }
  
  .feature-grid,
  .bento-grid,
  .benefits-grid {
    contain: layout;
  }
  
  /* Reduce GPU usage on mobile */
  .mockup-container,
  .phone-mockup {
    -webkit-transform: none;
    transform: none;
    will-change: auto;
  }
  
  /* Optimize touch interactions */
  .btn,
  .nav-link {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Critical section optimizations */
.critical-section,
.features-section,
.about-hero {
  contain: layout style paint;
  content-visibility: auto;
}

/* Font loading optimization */
@media (prefers-reduced-data: reduce) {
  * {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  }
}

/* Preload critical resources and optimize rendering */
.hero-visual,
.mockup-main,
.prototype-frame {
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* Enhanced performance for large lists and grids */
.team-grid,
.story-timeline,
.footer-links {
  contain: layout;
  content-visibility: auto;
}

/* Optimize form elements for better FID */
input,
textarea,
select,
button {
  touch-action: manipulation;
  will-change: auto;
}

/* Memory optimization for animations */
@media (max-width: 480px) {
  .hero-grid,
  .grid-move {
    animation: none;
  }
  
  .pulse,
  .badge-dot {
    animation-duration: 3s;
  }
}

/* Additional browser compatibility fixes */
@supports not (content-visibility: auto) {
  .hero-section,
  .hero-content,
  .hero-title,
  .hero-copy {
    /* Fallback for browsers that don't support content-visibility */
    transform: translateZ(0);
  }
}

/* Fix for Safari and older browsers */
@supports not (contain: layout) {
  .feature-card,
  .bento-item,
  .benefit-card {
    overflow: hidden;
    position: relative;
  }
}