/**
 * Performance Enhancement CSS
 * Optimizes rendering performance and reduces layout shifts
 */

/* ============================================
   CSS Containment for Performance
   ============================================ */

/* Contain layout calculations to improve rendering */
.card,
.card-gal,
.partner-logo,
.info-item {
  contain: layout style paint;
}

.hero-slider__slide {
  contain: layout;
}

.mobile-nav-overlay {
  contain: layout style;
}

.section {
  contain: layout;
}

/* ============================================
   Content Visibility for Lazy Rendering
   ============================================ */

/* Defer rendering of off-screen content */
.section:not(.hero) {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

.card-gal {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

.partner-logo {
  content-visibility: auto;
  contain-intrinsic-size: 150px 80px;
}

/* ============================================
   Will-Change Optimization
   ============================================ */

/* Use will-change sparingly for critical animations */
.hero-slider__container {
  will-change: transform;
}

.mobile-nav-overlay.active {
  will-change: transform, opacity;
}

.hero-slider__nav:hover,
.hero-slider__dot:hover {
  will-change: transform;
}

/* Remove will-change after animation completes */
.hero-slider__container:not(.transitioning) {
  will-change: auto;
}

/* ============================================
   GPU Acceleration
   ============================================ */

/* Force GPU acceleration for smooth animations */
.hero-slider__slide,
.mobile-nav-overlay,
.partners-track {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ============================================
   Reduce Layout Shifts (CLS Optimization)
   ============================================ */

/* Reserve space for images to prevent layout shift */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Aspect ratio boxes for images */
.image-container {
  position: relative;
  overflow: hidden;
}

.image-container::before {
  content: '';
  display: block;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

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

/* Hero slider aspect ratio */
.hero-slider {
  aspect-ratio: 16 / 9;
  min-height: 600px;
  max-height: 900px;
}

/* ============================================
   Font Loading Optimization
   ============================================ */

/* Prevent FOIT (Flash of Invisible Text) */
.fonts-loading body {
  font-family: system-ui, -apple-system, sans-serif;
}

.fonts-loaded body {
  font-family: var(--default-font);
}

/* Font display swap for web fonts */
@font-face {
  font-family: 'Montserrat';
  font-display: swap;
}

/* ============================================
   Lazy Loading States
   ============================================ */

/* Image lazy loading states */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

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

/* Blur-up effect for images */
img.lazy-loading {
  filter: blur(10px);
  transition: filter 0.3s ease-in-out;
}

img.lazy-complete {
  filter: blur(0);
}

/* ============================================
   Reduced Motion Support
   ============================================ */

@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;
  }
  
  /* Disable parallax and complex animations */
  .hero-slider__container {
    transition: none !important;
  }
  
  .partners-track {
    animation: none !important;
  }
}

/* ============================================
   Connection-Based Optimizations
   ============================================ */

/* Slow connection optimizations */
.slow-connection .hero-slider__slide img,
.save-data .hero-slider__slide img {
  image-rendering: auto;
  filter: none;
}

.slow-connection .partners-track,
.save-data .partners-track {
  animation-duration: 60s !important;
}

.slow-connection [data-aos],
.save-data [data-aos] {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================
   Critical CSS Loaded State
   ============================================ */

.critical-css-loaded .section {
  opacity: 1;
  transform: none;
}

/* ============================================
   Scroll Performance
   ============================================ */

/* Use passive scroll listeners */
.scroll-container {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Smooth scrolling with performance consideration */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================================
   Paint Optimization
   ============================================ */

/* Reduce paint areas */
.header {
  will-change: transform;
  transform: translateZ(0);
}

.sticky-header-active .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999995;
}

/* ============================================
   Composite Layers
   ============================================ */

/* Create composite layers for frequently animated elements */
.hero-slider,
.mobile-nav-overlay,
.scroll-top {
  isolation: isolate;
}

/* ============================================
   Text Rendering Optimization
   ============================================ */

body {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  text-rendering: optimizeLegibility;
}

/* ============================================
   Image Rendering Optimization
   ============================================ */

img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

img.photo {
  image-rendering: auto;
}

/* ============================================
   Skeleton Screens for Loading States
   ============================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

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

/* ============================================
   Intersection Observer Animations
   ============================================ */

[data-aos] {
  opacity: 0;
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

[data-aos].animate-in {
  opacity: 1;
  transform: none;
}

/* ============================================
   Resource Loading Priorities
   ============================================ */

/* Prioritize above-the-fold content */
.hero-slider img:first-child {
  loading: eager;
  fetchpriority: high;
}

/* Defer below-the-fold images */
.section:not(.hero) img {
  loading: lazy;
  decoding: async;
}

/* ============================================
   Print Optimization
   ============================================ */

@media print {
  /* Remove unnecessary elements for printing */
  .mobile-nav-toggle,
  .mobile-nav-overlay,
  .hero-slider__nav,
  .hero-slider__pagination,
  .scroll-top,
  .privacy-popup {
    display: none !important;
  }
  
  /* Optimize for print */
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
  }
  
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
}

/* ============================================
   Dark Mode Support (Future Enhancement)
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
  
  /* Dark mode optimizations can be added here */
}

/* ============================================
   High Contrast Mode Support
   ============================================ */

@media (prefers-contrast: high) {
  * {
    border-color: currentColor !important;
  }
  
  img {
    filter: contrast(1.2);
  }
}

/* ============================================
   Browser-Specific Optimizations
   ============================================ */

/* Safari-specific optimizations */
@supports (-webkit-backdrop-filter: blur(10px)) {
  .mobile-nav-overlay {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* Firefox-specific optimizations */
@-moz-document url-prefix() {
  img {
    image-rendering: -moz-crisp-edges;
  }
}

/* Edge-specific optimizations */
@supports (-ms-ime-align: auto) {
  .hero-slider {
    -ms-overflow-style: none;
  }
}

/* ============================================
   Performance Monitoring Classes
   ============================================ */

.perf-critical {
  /* Mark critical rendering path elements */
  contain: strict;
  content-visibility: auto;
}

.perf-defer {
  /* Mark elements that can be deferred */
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* ============================================
   Accessibility Performance
   ============================================ */

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent-color);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-to-main:focus {
  top: 0;
}

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}