/* Performance Optimization Styles for Elexive Website */

/* Performance improvements for images */
img,
picture {
  /* Prevent layout shift */
  max-width: 100%;
  height: auto;
  /* Note: loading="lazy" should be set in HTML, not CSS */
}

/* Reduce paint complexity */
* {
  box-sizing: border-box;
}

/* Optimize for users who prefer reduced motion */
@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;
  }
}

/* Performance-focused utility classes */
.will-change-transform {
  will-change: transform;
}

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

/* Lazy loading fade-in animation */
.fade-in-lazy {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.fade-in-lazy.loaded {
  opacity: 1;
}

/* Performance-optimized button styles */
.btn-performance {
  /* Enable hardware acceleration */
  transform: translateZ(0);
  /* Optimize repaints */
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Optimize hover states for performance */
.btn-performance:hover {
  transform: translateZ(0) scale(1.02);
}

/* Print optimizations */
@media print {
  .no-print {
    display: none !important;
  }

  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.4;
  }

  h1,
  h2,
  h3 {
    page-break-after: avoid;
  }
}

/* Optimize focus indicators for accessibility and performance */
*:focus-visible {
  outline: 2px solid #0055ff;
  outline-offset: 2px;
  /* Use box-shadow instead of outline for better performance */
  box-shadow: 0 0 0 2px #0055ff;
}