/**
 * Performance Optimization CSS
 * Reduces CLS (Cumulative Layout Shift) and improves rendering performance
 */

/* ========================================
   1. PREVENT LAYOUT SHIFT (CLS)
   ======================================== */

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

/* Aspect ratio boxes for images - prevents CLS */
.aspect-ratio-box {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
}

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

/* Common aspect ratios */
.aspect-16-9 { padding-bottom: 56.25%; }
.aspect-4-3 { padding-bottom: 75%; }
.aspect-1-1 { padding-bottom: 100%; }
.aspect-21-9 { padding-bottom: 42.857%; }

/* ========================================
   2. FONT OPTIMIZATION
   ======================================== */

/* Use font-display: swap for better FCP */
@font-face {
  font-display: swap;
}

/* System font fallback stack */
body {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
               "Helvetica Neue", Arial, sans-serif;
}

/* ========================================
   3. LAZY LOADING PLACEHOLDER
   ======================================== */

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

.lazy.loaded {
  filter: blur(0);
}

/* Placeholder for lazy images */
.img-placeholder {
  background: linear-gradient(
    90deg,
    #f0f0f0 0%,
    #e0e0e0 50%,
    #f0f0f0 100%
  );
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
}

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

/* ========================================
   4. REDUCE REPAINTS & REFLOWS
   ======================================== */

/* Use transform and opacity for animations (GPU accelerated) */
.animate-smooth {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Contain layout changes */
.contain-layout {
  contain: layout;
}

.contain-paint {
  contain: paint;
}

.contain-strict {
  contain: strict;
}

/* ========================================
   5. CRITICAL RENDERING PATH
   ======================================== */

/* Ensure above-the-fold content renders first */
.above-fold {
  content-visibility: auto;
}

/* Defer offscreen content rendering */
.below-fold {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* ========================================
   6. PREVENT LAYOUT SHIFT IN NAVIGATION
   ======================================== */

/* Fixed header height to prevent CLS */
header {
  min-height: 72px; /* Adjust based on your header */
}

/* Navigation items should have defined dimensions */
nav a, nav button {
  display: inline-block;
}

/* ========================================
   7. OPTIMIZE IMAGES FOR PERFORMANCE
   ======================================== */

/* Decode images asynchronously */
img {
  decoding: async;
}

/* Prioritize LCP image */
.lcp-image {
  decoding: auto; /* Decode synchronously for LCP */
}

/* ========================================
   8. SMOOTH SCROLLING WITHOUT JANK
   ======================================== */

/* Use CSS containment for scroll containers */
.scroll-container {
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ========================================
   9. SKELETON SCREENS (REDUCE PERCEIVED LOAD TIME)
   ======================================== */

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 25%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

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

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton-heading {
  height: 2em;
  margin-bottom: 1em;
  width: 60%;
}

/* ========================================
   10. REDUCE JAVASCRIPT-INDUCED CLS
   ======================================== */

/* Reserve space for elements that will be injected via JS */
[data-dynamic-content] {
  min-height: 100px;
}

/* ========================================
   11. OPTIMIZE FOR MOBILE (RESPONSIVE IMAGES)
   ======================================== */

/* Mobile-first approach */
@media (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
  }
}

/* ========================================
   12. PRINT OPTIMIZATION
   ======================================== */

@media print {
  .lazy { filter: none !important; }
  img { page-break-inside: avoid; }
}

/* ========================================
   13. REDUCE ANIMATION PERFORMANCE IMPACT
   ======================================== */

/* Respect user preference for 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;
  }
}

/* ========================================
   14. WEB VITALS SPECIFIC OPTIMIZATIONS
   ======================================== */

/* Improve LCP - Ensure hero section loads fast */
.hero-section {
  contain: layout style;
}

/* Improve FID - Reduce input delay */
button, a, input, textarea {
  touch-action: manipulation;
}

/* Improve CLS - Fixed dimensions for common elements */
.logo {
  width: 150px;
  height: 40px;
}

.icon {
  width: 24px;
  height: 24px;
}