/* Animated Visible Lazy Loading Styles */
img.lazy-img {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.97);
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                filter 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, filter, transform;
}

img.lazy-img:not(.loaded) {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 75%);
    background-size: 200% 100%;
    animation: lazySkeleton 1.5s infinite linear;
    border-radius: 4px;
}

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

img.lazy-img.loaded {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

/* Font-display swap overrides for FontAwesome Webfonts */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/webfonts/fa-solid-900.woff2') format('woff2');
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/webfonts/fa-brands-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/webfonts/fa-regular-400.woff2') format('woff2');
}