/* Stabilize text containers during font load */
body,
h1, h2, h3, h4, h5, h6,
p, a, span {
  /* Prevent invisible text during font load */
  font-display: swap;
}


/* ===================================================================
   6. CONTAINER STABILIZATION - Prevent collapse/expansion
   =================================================================== */

/* Main content area - minimum height */


/* ===================================================================
   7. TRANSFORM-BASED ANIMATIONS - Use GPU, avoid layout shifts
   =================================================================== */

/* Replace height/width animations with transform */
.expand-animation {
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.3s ease;
  will-change: transform;
}

.expand-animation.collapsed {
  transform: scaleY(0);
}

/* Replace left/right animations with translate */
.slide-animation {
  transform: translateX(0);
  transition: transform 0.3s ease;
  will-change: transform;
}

.slide-animation.hidden {
  transform: translateX(-100%);
}


/* ===================================================================
   8. PERFORMANCE OPTIMIZATIONS
   =================================================================== */

/* Use CSS containment for isolated components */
.resume-template,
.portfolio-item,
.blog-post {
  contain: layout style paint;
}

/* Prevent layout thrashing on scroll */
.sticky-header {
  position: sticky;
  top: 0;
  will-change: transform;
  contain: layout;
}

/* Optimize repaint areas */
.animated-element {
  will-change: transform, opacity;
  /* Never use: will-change: height, width, top, left */
}


/* ===================================================================
   9. RESPONSIVE IMAGE FIXES
   =================================================================== */

/* Prevent CLS on responsive images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Picture element stabilization */
picture {
  display: block;
  position: relative;
  min-height: 200px;
}

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


/* ===================================================================
   10. CRITICAL ABOVE-FOLD CONTENT
   =================================================================== */

/* Hero section - fixed height to prevent shift */
.hero-section,
.page-header {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Navigation - fixed height */
.site-header,
.navbar {
  height: 80px;
  display: flex;
  align-items: center;
}


/* ===================================================================
   11. THIRD-PARTY EMBEDS
   =================================================================== */

/* YouTube, Vimeo embeds - 16:9 aspect ratio */
.video-embed,
iframe[src*="youtube"],
iframe[src*="vimeo"] {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

/* Twitter embeds */
.twitter-tweet {
  min-height: 200px;
}

/* Google Maps */
.google-map,
iframe[src*="google.com/maps"] {
  aspect-ratio: 16 / 9;
  width: 100%;
}


/* ===================================================================
   12. MOBILE SPECIFIC FIXES
   =================================================================== */

@media (max-width: 768px) {
  /* Smaller skeleton heights on mobile */
  img[loading="lazy"] {
    min-height: 150px;
  }

  /* Adjust grid on mobile */
  .template-grid,
  .resume-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    min-height: 300px;
  }

  /* Mobile menu - fixed height */
  .mobile-menu {
    min-height: 50px;
  }
}


/* ===================================================================
   13. PRINT STYLES - Prevent CLS in print view
   =================================================================== */

@media print {
  /* Ensure images have dimensions for print */
  img {
    max-width: 100%;
    height: auto;
    page-break-inside: avoid;
  }
}