/* Font Display Optimization for better FCP */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2') format('woff2');
}

@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/exo2/v20/7cH1v4okm5zmbvwkAx_sfcEuiD8jvvOcNg.woff2') format('woff2');
}

@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/exo2/v20/7cH1v4okm5zmbvwkAx_sfcEuiD8jvnmdNg.woff2') format('woff2');
}

/* Critical CSS for above-the-fold content */
.fonts-loaded body {
    font-family: 'Roboto', sans-serif;
}

.fonts-loaded .title, 
.fonts-loaded h1, 
.fonts-loaded h2, 
.fonts-loaded h3, 
.fonts-loaded h4, 
.fonts-loaded h5, 
.fonts-loaded h6 {
    font-family: 'Exo 2', sans-serif;
}

/* Optimize layout shifts */
.lazy-container {
    background-color: #f5f5f5;
    background-image: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.lazyloaded.lazy-container {
    animation: none;
    background: none;
}

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

/* Reduce CLS with aspect ratios */
.ratio-5-3::before { padding-bottom: 60%; }
.ratio-5-4::before { padding-bottom: 80%; }
.ratio-2-3::before { padding-bottom: 150%; }
.ratio-21-10::before { padding-bottom: 47.62%; }
.ratio-1-1::before { padding-bottom: 100%; }