/* Performance Optimization Styles */

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

.aspect-ratio-box > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Optimize font loading */
@font-face {
  font-family: 'Poppins';
  font-display: swap;
  src: local('Poppins');
}

/* Reduce paint complexity */
.will-change-transform {
  will-change: transform;
}

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

/* GPU acceleration for animations */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Optimize images */
img {
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Lazy loading placeholder */
img[loading="lazy"] {
  background: rgba(255, 255, 255, 0.05);
  min-height: 100px;
}

/* Reduce repaints on scroll */
.fixed-element {
  transform: translateZ(0);
  will-change: transform;
}

/* Optimize animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Critical CSS - Above the fold optimization */
.above-fold {
  content-visibility: auto;
  contain-intrinsic-size: 500px;
}

/* Defer non-critical content */
.below-fold {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

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

/* Reduce layout thrashing */
.no-layout-shift {
  contain: layout style paint;
}

/* Optimize backdrop filters */
.backdrop-blur {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  will-change: backdrop-filter;
}

/* Performance-friendly shadows */
.optimized-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Contain paint for complex elements */
.paint-containment {
  contain: paint;
}

/* Optimize gradients */
.optimized-gradient {
  background-image: linear-gradient(135deg, #0a0a0a 0%, #1a1f2e 100%);
  background-attachment: fixed;
  will-change: transform;
}

/* Reduce composite layers */
.composite-layer {
  transform: translateZ(0);
  isolation: isolate;
}

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

/* Prevent layout shifts from web fonts */
.font-loading {
  font-display: swap;
  size-adjust: 100%;
}

/* Optimize hover states */
@media (hover: hover) {
  .hover-optimized:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
  }
}

/* Touch optimization */
@media (hover: none) {
  .touch-optimized:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* Reduce paint on scroll */
.scroll-optimized {
  pointer-events: none;
}

.scroll-optimized * {
  pointer-events: auto;
}

/* Optimize video elements */
video {
  object-fit: cover;
  will-change: transform;
}

/* Reduce memory usage */
.memory-efficient {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* Optimize for mobile */
@media (max-width: 768px) {
  .mobile-optimized {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  
  /* Reduce animations on mobile */
  .mobile-reduce-animation {
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
  }
}

/* Preload critical resources */
.preload-hint {
  content: '';
  display: none;
}

/* Optimize table rendering */
table {
  table-layout: fixed;
  width: 100%;
}

/* Reduce JavaScript execution blocking */
.defer-render {
  content-visibility: auto;
}

/* Optimize flexbox */
.flex-optimized {
  display: flex;
  will-change: auto;
}

/* Grid optimization */
.grid-optimized {
  display: grid;
  will-change: auto;
}

/* Reduce paint complexity for borders */
.optimized-border {
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
}

/* Optimize position sticky */
.sticky-optimized {
  position: sticky;
  top: 0;
  will-change: transform;
}

/* Performance monitoring helper */
.perf-marker {
  display: none;
}