/* Performance Optimizations CSS */

/* Critical CSS for above-the-fold content - inline in base.html */
/* This file contains non-critical styles that can be loaded asynchronously */

/* Prevent layout shifts and forced reflows */
* {
  box-sizing: border-box;
}

/* Optimize animations to use GPU acceleration */
.hero-gradient,
.gradient-text,
.navbar-blur,
.service-card,
.tech-card,
.partner-card,
.project-card,
.team-member-card {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Optimize transitions */
.service-card,
.tech-card,
.partner-card,
.project-card,
.team-member-card,
.client-logo,
.tech-pill {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Optimize hover effects */
.service-card:hover,
.tech-card:hover,
.partner-card:hover,
.project-card:hover,
.team-member-card:hover {
  transform: translateY(-4px) translateZ(0);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}

.tech-card:hover {
  transform: translateY(-8px) translateZ(0);
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
}

.client-logo:hover {
  transform: scale(1.1) translateZ(0);
  filter: grayscale(0%);
}

.tech-pill:hover {
  transform: translateY(-2px) translateZ(0);
  background: linear-gradient(to right, var(--primary), var(--accent));
  color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Optimize marquee animations */
.clients-marquee {
  will-change: transform;
  transform: translateZ(0);
}

.clients-marquee.fast {
  animation-duration: 15s;
}

.clients-marquee.slow {
  animation-duration: 45s;
}

/* Optimize Lottie animations */
lottie-player {
  will-change: transform;
  transform: translateZ(0);
}

/* Optimize button animations */
.btn-cookie,
.speed-control {
  will-change: transform;
  transform: translateZ(0);
}

.btn-accept:hover,
.btn-reject:hover,
.btn-customize:hover {
  transform: translateY(-2px) translateZ(0);
}

.speed-control:hover {
  transform: translateY(-50%) scale(1.1) translateZ(0);
}

/* Optimize job fair button animations */
.job-fair-button {
  will-change: transform, box-shadow;
  transform: translateZ(0);
}

.job-fair-button:hover {
  transform: scale(1.1) translateZ(0) !important;
}

/* Optimize cookie banner */
.cookie-banner {
  will-change: transform;
  transform: translateZ(0);
}

.cookie-banner.show {
  transform: translateY(0) translateZ(0);
}

/* Optimize mobile menu */
#mobileMenu {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Optimize navbar */
.navbar-blur {
  will-change: backdrop-filter;
  transform: translateZ(0);
}

/* Optimize gradient backgrounds */
.hero-gradient {
  will-change: background;
  transform: translateZ(0);
}

/* Optimize text gradients */
.gradient-text {
  will-change: background-clip;
  transform: translateZ(0);
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
  /* Reduce animation complexity on mobile */
  .service-card:hover,
  .tech-card:hover,
  .partner-card:hover,
  .project-card:hover,
  .team-member-card:hover {
    transform: translateY(-2px) translateZ(0);
  }
  
  .tech-card:hover {
    transform: translateY(-4px) translateZ(0);
  }
  
  /* Optimize marquee for mobile */
  .clients-marquee {
    animation-duration: 20s;
  }
  
  .clients-marquee.fast {
    animation-duration: 10s;
  }

  .clients-marquee.slow {
    animation-duration: 30s;
  }
}

/* Reduce motion for users who prefer it */
@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;
  }
  
  .clients-marquee {
    animation: none;
  }
  
  .job-fair-button {
    animation: none;
  }
  
  .urgency-badge {
    animation: none;
  }
}

/* Optimize for high DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .client-logo,
  .team-member-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Optimize for print */
@media print {
  .hero-gradient,
  .navbar-blur,
  .cookie-banner,
  .speed-control,
  .job-fair-button {
    display: none !important;
  }
  
  .service-card,
  .tech-card,
  .partner-card,
  .project-card,
  .team-member-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* Optimize for dark mode */
@media (prefers-color-scheme: dark) {
  .service-card,
  .tech-card,
  .partner-card,
  .project-card,
  .team-member-card {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #333;
  }
  
  .tech-pill {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }
  
  .client-logo {
    filter: grayscale(100%) brightness(0.8);
  }
  
  .client-logo:hover {
    filter: grayscale(0%) brightness(1);
  }
}

/* Optimize for low-end devices */
@media (max-width: 480px) and (max-height: 800px) {
  /* Reduce animation complexity on low-end devices */
  .service-card,
  .tech-card,
  .partner-card,
  .project-card,
  .team-member-card {
    transition: none;
  }
  
  .service-card:hover,
  .tech-card:hover,
  .partner-card:hover,
  .project-card:hover,
  .team-member-card:hover {
    transform: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  /* Simplify marquee animation */
  .clients-marquee {
    animation-duration: 25s;
  }
}

/* Optimize for slow connections */
@media (prefers-reduced-data: reduce) {
  .lottie-container lottie-player {
    display: none;
  }
  
  .clients-marquee {
    animation: none;
  }
  
  .job-fair-button {
    animation: none;
  }
}

/* Optimize for battery saving */
@media (prefers-reduced-data: reduce) {
  .service-card:hover,
  .tech-card:hover,
  .partner-card:hover,
  .project-card:hover,
  .team-member-card:hover {
    transform: none;
  }
  
  .clients-marquee {
    animation-play-state: paused;
  }
}

/* Optimize for accessibility */
@media (prefers-contrast: high) {
  .service-card,
  .tech-card,
  .partner-card,
  .project-card,
  .team-member-card {
    border: 2px solid #000;
  }
  
  .tech-pill {
    border: 1px solid #000;
  }
}

/* Optimize for forced colors mode */
@media (forced-colors: active) {
  .service-card,
  .tech-card,
  .partner-card,
  .project-card,
  .team-member-card {
    background: Canvas;
    color: CanvasText;
    border: 1px solid ButtonText;
  }
  
  .tech-pill {
    background: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
  }
  
  .gradient-text {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: initial;
  }
  
  .hero-gradient {
    background: Canvas;
  }
}