/* Performance & SEO Optimization CSS */

/* Critical Above-the-fold styles */
.hero-section {
    will-change: transform;
    contain: layout;
}

/* Lazy loading and image optimization */
.lazy-load-image {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}

.lazy-load-image.loaded {
    opacity: 1;
}

/* Progressive Web App enhancements */
@media (display-mode: standalone) {
    .pwa-hidden {
        display: none;
    }
}

/* Improved accessibility and SEO */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Performance optimizations */
.animate-scroll {
    animation: scroll 30s linear infinite;
    will-change: transform;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Preload critical resources */
.preload-critical {
    font-display: swap;
}

/* Enhanced hover states for better UX */
.hover-lift {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Modern CSS Grid improvements */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: start;
}

/* Better form styling */
.form-field {
    position: relative;
}

.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label {
    transform: translateY(-1.5rem) scale(0.9);
    color: #2563eb;
}

/* Schema.org microdata styling (hidden but accessible) */
.microdata {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Critical CSS for Core Web Vitals */
.container {
    contain: layout style;
}

/* Optimized modal performance */
.modal-backdrop {
    backdrop-filter: blur(8px);
    will-change: opacity;
}

/* Print styles for better accessibility */
@media print {
    .no-print {
        display: none;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    .page-break {
        page-break-before: always;
    }
}