/* Shimmer animation (shared) */
@keyframes skeleton-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
.skeleton-shimmer {
    position: relative;
    overflow: hidden;
    background-color: #e2e2e2;
}
.skeleton-shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: skeleton-shimmer 1.2s infinite;
}

/* 1) Image placeholder */
.skeleton-img {
    position: relative;
}
.skeleton-img .card-image {
    visibility: hidden;
}
.skeleton-img::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 56.25%; /* maintain your image aspect ratio */
}
.skeleton-img.skeleton-shimmer::before {
    background-color: #e2e2e2;
}

/* 2) Text line placeholders */
.skeleton-line {
    display: block;
    height: 1em;
    background-color: #e2e2e2;
    border-radius: 4px;
    margin-bottom: 0.5em;
    position: relative;
    overflow: hidden;
}
.skeleton-line.skeleton-shimmer::after {
    /* reuse shimmer */
    /* inherited by virtue of having .skeleton-shimmer too */
}

/* 3) Button placeholder */
.skeleton-btn {
    display: inline-block;
    width: 4em;
    height: 1.8em;
    background-color: #e2e2e2;
    border-radius: 0.2em;
    position: relative;
    overflow: hidden;
}
.skeleton-btn.skeleton-shimmer::after {
    /* reused shimmer */
}