/* 
  skeleton.css
  Estilos utilitários para animação de carregamento (Pulse)
*/

@keyframes pulse {
    0% {
        background-color: rgb(39 39 42 / 0.5); /* #27272a */
    }
    50% {
        background-color: rgb(63 63 70 / 0.8); /* #3f3f46 */
    }
    100% {
        background-color: rgb(39 39 42 / 0.5);
    }
}

.skeleton {
    animation: pulse 1.5s infinite ease-in-out;
    border-radius: 4px;
    display: inline-block;
}

/* Tamanhos pré-definidos para conveniência */
.skeleton-text {
    height: 1rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

.skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: 1rem;
}

.skeleton-avatar {
    border-radius: 9999px;
    width: 40px;
    height: 40px;
}

.skeleton-cover {
    aspect-ratio: 3/4;
    width: 100%;
}