/* Performance Optimizations */

/* Lazy loading for images */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Optimize font loading */
@font-face {
    font-family: 'Inter';
    font-display: swap;
    src: local('Inter'), url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
}

/* Critical CSS for above-the-fold content */
.hero-section {
    min-height: 60vh;
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Defer non-critical animations */
@media (prefers-reduced-motion: reduce) {
    .animation-pulse,
    .transform,
    .transition-transform {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Optimize button interactions */
.btn-optimized {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Reduce layout shifts */
.img-container {
    position: relative;
    overflow: hidden;
}

.img-container::before {
    content: '';
    display: block;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

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