/* Core Web Vitals Optimization CSS */

/* Prevent CLS for images */
img {
    height: auto;
}

/* Skeleton Loading utility for lazy load */
.skeleton-box {
    display: inline-block;
    position: relative;
    overflow: hidden;
    background-color: #DDDBDD;
}
.skeleton-box::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
    animation: shimmer 2s infinite;
    content: '';
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Apply font-display swap globally to ensure text remains visible during webfont load */
@font-face {
    font-display: swap;
}

/* Optimize below the fold sections rendering */
.footer-section, .below-fold {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}