/* Component Skeleton Loaders */
/* Prevents layout shift and provides visual feedback while components load */

/* Header placeholder skeleton */
#header-placeholder {
    min-height: 73px;
    background: linear-gradient(90deg,
        rgba(236, 127, 19, 0.05) 25%,
        rgba(236, 127, 19, 0.1) 50%,
        rgba(236, 127, 19, 0.05) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-bottom: 1px solid rgba(236, 127, 19, 0.2);
}

#header-placeholder.component-loaded {
    background: none;
    animation: none;
    border-bottom: none;
    min-height: 0;
}

/* Footer placeholder skeleton */
#footer-placeholder {
    min-height: 180px;
    background: linear-gradient(90deg,
        rgba(236, 127, 19, 0.05) 25%,
        rgba(236, 127, 19, 0.1) 50%,
        rgba(236, 127, 19, 0.05) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-top: 1px solid rgba(236, 127, 19, 0.2);
}

#footer-placeholder.component-loaded {
    background: none;
    animation: none;
    border-top: none;
    min-height: 0;
}

/* Skeleton loading animation */
@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    #header-placeholder,
    #footer-placeholder {
        background: linear-gradient(90deg,
            rgba(236, 127, 19, 0.1) 25%,
            rgba(236, 127, 19, 0.15) 50%,
            rgba(236, 127, 19, 0.1) 75%);
        border-color: rgba(236, 127, 19, 0.3);
    }
}

/* Lazy Loading Image Styles */
/* Ensure smooth rendering when images load */
img[loading="lazy"],
img[loading="eager"] {
    /* Prevent layout shift while image loads */
    background-color: rgba(236, 127, 19, 0.05);

    /* Smooth transition when image appears */
    transition: opacity 0.2s ease-in-out;
}

/* Dark mode background for loading images */
@media (prefers-color-scheme: dark) {
    img[loading="lazy"],
    img[loading="eager"] {
        background-color: rgba(236, 127, 19, 0.1);
    }
}