/* Skeleton wrapper */
.studiare-skeleton {
    position: relative;
}

/* Hide real content initially */
.studiare-skeleton > * {
    visibility: hidden;
    opacity: 0;
}

/* Skeleton placeholder */
.studiare-skeleton::before {
    content: "";
    display: block;
    width: 100%;
    height: var(--skeleton-height, 80px);
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        #eeeeee 25%,
        #f5f5f5 37%,
        #eeeeee 63%
    );
    background-size: 400% 100%;
    animation: studiare-skeleton-shimmer 2s ease-in-out infinite;
}

/* Remove skeleton when loaded */
.studiare-skeleton.is-loaded::before {
    display: none;
}

.studiare-skeleton.is-loaded > * {
    visibility: visible;
    opacity: 1;
}

/* Animations */
.studiare-skeleton[data-skeleton-animation="fade"].is-loaded > * {
    animation: studiare-fade-in .9s ease-out forwards;
}

.studiare-skeleton[data-skeleton-animation="slide"].is-loaded > * {
    animation: studiare-slide-up .9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.studiare-skeleton[data-skeleton-animation="zoom"].is-loaded > * {
    animation: studiare-zoom-in .85s ease-out forwards;
}

/* Keyframes */
@keyframes studiare-skeleton-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@keyframes studiare-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes studiare-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes studiare-zoom-in {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .studiare-skeleton::before,
    .studiare-skeleton > * {
        animation: none !important;
    }
}