/* 
  Performance Optimizations CSS
  - Fast critical rendering
  - Button pulse animations for conversion
  - Image and resource strategy
*/

/* Preload font strategy for better CLS */
@font-face {
	font-family: 'Manrope';
	src: url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
	font-weight: 400;
	font-display: swap;
}

/* Reduce layout shift from images */
img {
	aspect-ratio: auto;
	display: block;
	max-width: 100%;
	height: auto;
}

/* Optimize form performance */
input,
select,
textarea {
	will-change: transform;
}

/* Smooth scrolling for better UX */
html {
	scroll-behavior: smooth;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

/* Hide visually but keep accessible */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Content visibility for off-screen elements */
.off-screen {
	content-visibility: auto;
}

/* GPU acceleration for animations */
.scm-btn-primary,
.theme-btn,
.scm-service-card {
	transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000px;
}

/* Container queries for responsive components */
@supports (container-type: inline-size) {
	.scm-service-card {
		container-type: inline-size;
	}
}

/* Efficient repaint strategy */
@media (prefers-reduced-motion: no-preference) {
	.scm-btn-primary:hover,
	.theme-btn:hover {
		transform: using transform instead of width/height;
	}
}