/**
 * Performance Optimizations CSS
 *
 * This stylesheet contains CSS performance enhancements including:
 * - CSS Containment for better rendering performance
 * - Content-visibility for off-screen elements
 * - Will-change optimization hints
 *
 * @package Temenos
 */

/* ========================================================================
   CSS Containment - Isolate blocks for better browser paint performance
   ======================================================================== */

/**
 * Apply containment to WordPress blocks
 * This tells the browser that the block's layout, style, and paint
 * are independent from the rest of the page
 */
.wp-block {
	contain: layout style paint;
}

/* Specific block containment optimizations */
.card,
.card-collection,
.content-collection,
.lottie-animation,
.pardot-form,
.hero,
.accordian,
.media-text,
.key-stats,
.client-logos,
.icon-content,
.quote {
	contain: layout style paint;
}

/* ========================================================================
   Content Visibility - Defer rendering of off-screen content
   ======================================================================== */

/**
 * Use content-visibility for below-the-fold sections
 * This significantly improves initial rendering time
 */
.content-collection:not(:first-of-type),
.card-collection:not(:first-of-type) {
	content-visibility: auto;
	contain-intrinsic-size: 0 500px;
}

/* ========================================================================
   Animation Performance Hints
   ======================================================================== */

/**
 * Only use will-change for elements that are actually animating
 * Overuse of will-change can hurt performance
 */
.lottie-animation.lottie-initialized canvas {
	will-change: transform;
}

/* Remove will-change when animation completes */
.lottie-animation.animation-complete canvas {
	will-change: auto;
}

/* Optimize transforms for better animation performance */
.has-animation,
.fade-in,
.slide-in {
	will-change: transform, opacity;
}

.has-animation.animation-complete,
.fade-in.animation-complete,
.slide-in.animation-complete {
	will-change: auto;
}

/* ========================================================================
   Render Performance - Hardware Acceleration
   ======================================================================== */

/**
 * Force hardware acceleration for transformed elements
 */
.modal,
.drawer,
.overlay,
.sticky-header {
	transform: translateZ(0);
	backface-visibility: hidden;
}

/* ========================================================================
   Interaction Performance
   ======================================================================== */

/**
 * Touch-action optimization for better scroll performance
 */
.scrollable-container,
.card-collection,
.content-collection {
	touch-action: pan-y;
}

/* ========================================================================
   Font Loading Optimization
   ======================================================================== */

/**
 * Font rendering optimizations
 */
body {
	font-display: swap;
	text-rendering: optimizeSpeed;
}

/* Only use optimizeLegibility for headings where it matters */
h1, h2, h3 {
	text-rendering: optimizeLegibility;
}

/* ========================================================================
   Image Performance
   ======================================================================== */

/**
 * Optimize image decoding
 */
img {
	decoding: async;
}

/* Prioritize above-the-fold images */
.hero img,
.page-header img {
	decoding: sync;
}

/* ========================================================================
   Reduced Motion Support
   ======================================================================== */

/**
 * Respect user's motion preferences
 * Disable expensive animations 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;
		will-change: auto !important;
	}

	.lottie-animation canvas {
		will-change: auto !important;
	}
}

/* ========================================================================
   Lazy Loading Enhancements
   ======================================================================== */

/**
 * Provide visual feedback for lazy-loading elements
 */
.js-lazy:not([src]),
img[loading="lazy"]:not([src]) {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
}

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

/* Stop shimmer animation once loaded */
.js-lazy[src],
img[loading="lazy"][src] {
	animation: none;
	background: none;
}