/* Image Loading Optimization - Prevents Layout Shift (CLS) */

/* Ensure images maintain aspect ratio while loading */
.pgi-image img,
.tt-mi-item-inner img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Prevent layout shift during image load */
.pgi-image-wrap {
	contain: layout;
}

/* Add smooth transition for image appearance */
.pgi-image img {
	opacity: 1;
	transition: opacity 0.3s ease-in;
	display: block;
}

/* Hide lazy-loaded images until they're loaded (only if they don't have loaded class) */
.pgi-image img[loading="lazy"]:not(.loaded) {
	opacity: 0;
}

/* Show lazy-loaded images once loaded */
.pgi-image img[loading="lazy"].loaded {
	opacity: 1;
}

/* Always show images that are already complete or don't use lazy loading */
.pgi-image img:not([loading="lazy"]),
.pgi-image img[loading="eager"],
.pgi-image img.complete {
	opacity: 1;
}

/* Ensure loaded images are always visible */
.pgi-image img.loaded {
	opacity: 1 !important;
}

/* Ensure proper aspect ratio containers */
.pgi-image.ttgr-height {
	overflow: hidden;
}

/* Optimize image rendering */
.pgi-image img,
.tt-mi-item-inner img {
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	image-rendering: optimize-quality;
}

/* Prevent jitteriness during Isotope layout */
.isotope-items-wrap {
	will-change: transform;
}

.isotope-item {
	backface-visibility: hidden;
	transform: translateZ(0);
}

/* Scroll Performance Optimization */
html {
	scroll-behavior: auto; /* Let Lenis handle smooth scrolling */
}

body {
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

/* Optimize scrolling performance */
#body-inner,
#tt-content-wrap {
	will-change: scroll-position;
	transform: translateZ(0); /* Force GPU acceleration */
}

/* Reduce repaints during scroll */
.tt-section,
.portfolio-grid-item {
	contain: layout style paint;
}

/* Optimize GSAP animations during scroll */
[class*="tt-anim-"],
[class*="tt-text-reveal"] {
	will-change: transform, opacity;
	backface-visibility: hidden;
}