/* Performance optimizations for Core Web Vitals */

/* Critical rendering optimizations */
* {
    box-sizing: border-box;
}

/* Prevent layout shift with image containers */
.responsive-image {
    display: block;
    max-width: 100%;
    height: auto;
}

.image-container {
    position: relative;
    overflow: hidden;
}

.image-container::before {
    content: "";
    display: block;
    padding-bottom: var(--aspect-ratio, 56.25%); /* 16:9 default */
}

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

/* Reduce layout shift for lazy loaded images */
img[loading="lazy"] {
    min-height: 1px;
}

/* Optimized animations for 60fps */
@media (prefers-reduced-motion: no-preference) {
    .smooth-transition {
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        will-change: transform, opacity;
    }
    
    .smooth-transition:hover {
        transform: translateY(-2px);
    }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Optimize for high contrast mode */
@media (prefers-contrast: high) {
    .btn-primary {
        border: 2px solid currentColor;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #ffffff;
        --bg-color: #121212;
        --card-bg: #1e1e1e;
    }
}

/* Resource hints CSS */
.preload-fonts {
    font-display: swap;
}