/* ============================================
   PERFORMANCE OPTIMIZATIONS
   Critical CSS et optimisations
   ============================================ */

/* Critical: Above the fold styles */
/* These should be inlined in production */

/* Will-change for animated elements */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

.will-change-scroll {
  will-change: scroll-position;
}

/* GPU acceleration for animations */
.animate-fade-in-up,
.animate-slide-in-right,
.job-card-premium:hover,
.news-card-premium:hover {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Lazy loading images */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Content visibility for long lists */
.content-visibility-auto {
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}

/* Optimize font loading */
@font-face {
  font-family: 'Inter';
  font-display: swap;
}

/* Reduce repaints */
.sticky-element {
  contain: layout style paint;
}

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

/* Reduce layout shifts */
.aspect-ratio-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
}

.aspect-ratio-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Critical rendering path optimization */
.critical-content {
  contain: layout style;
}

/* Defer non-critical styles */
.non-critical {
  content-visibility: auto;
}

/* Optimize transitions */
.optimized-transition {
  transition-property: transform, opacity;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduce paint complexity */
.simple-background {
  background-color: var(--bg-card);
  background-image: none;
}

/* Optimize shadows */
.optimized-shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Simpler shadow for better performance */
}

/* Media queries for performance */
@media (prefers-reduced-motion: reduce) {
  .optimized-transition,
  .animate-fade-in-up,
  .animate-slide-in-right {
    transition: none;
    animation: none;
  }
}

/* Print optimizations */
@media print {
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  a {
    text-decoration: none !important;
  }
}