@keyframes skeleton-shimmer {
    0% { background-position: 0 200% }
    100% { background-position: 0 -200% }
}

.skeleton-loading {
    /* Glassy gray theme */
    background: linear-gradient(180deg, 
        rgba(200, 200, 200, 0.1) 25%, 
        rgba(200, 200, 200, 0.25) 50%, 
        rgba(200, 200, 200, 0.1) 75%
    );
    background-color: #f1f1f1; /* Light gray base for better visibility on white */
    background-size: 100% 200%;
    animation: skeleton-shimmer 2s infinite ease-in-out;
    backdrop-filter: blur(4px); /* Glassy effect */
}

.image-wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: max-content;
    overflow: hidden;
    border-radius: 8px; /* Standard for cards */
}

/* Rounded for actors/avatars */
.image-wrapper:has(.mini-actor-img),
.image-wrapper:has(.actor-card img),
.image-wrapper:has(.author-avatar) {
    border-radius: 50%;
}

/* Match cover photo radius if different */
.image-wrapper:has(.cover-photo) {
    border-radius: 5px;
}

.image-wrapper img {
    display: block;
}

/* Specific elements background for extra fallback */
.card .movice-image, 
.episode-img, 
.mini-actor-img, 
.movie-image, 
.actor-card img {
    background: linear-gradient(180deg, 
        rgba(200, 200, 200, 0.1) 25%, 
        rgba(200, 200, 200, 0.25) 50%, 
        rgba(200, 200, 200, 0.1) 75%
    );
    background-color: #f1f1f1;
    background-size: 100% 200%;
    animation: skeleton-shimmer 2s infinite ease-in-out;
}

/* Specific for covers - slightly lighter to contrast with background */
.cover-photo, .skeleton-cover {
    background: linear-gradient(180deg, 
        rgba(220, 220, 220, 0.1) 25%, 
        rgba(220, 220, 220, 0.25) 50%, 
        rgba(220, 220, 220, 0.1) 75%
    );
    background-color: #f9f9f9;
    background-size: 100% 200%;
    animation: skeleton-shimmer 2s infinite ease-in-out;
}

/* Stop shimmer when src is present (browser has started/finished loading) */
img[src]:not([src='']):not([src^='data:image']):not([loading="lazy"]),
img.loaded {
    animation: none !important;
    background: none !important;
}

/* Global aspect ratios */
.movice-image, .episode-img { aspect-ratio: 2/3; object-fit: cover; }
.cover-photo { aspect-ratio: 16/9; object-fit: cover; }
.mini-actor-img, .actor-card img { aspect-ratio: 1/1; object-fit: cover; }