/* public/css/skeleton.css */

/* --- Animation --- */
.skeleton-box {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    border-radius: 8px;
    width: 100%;
    animation: loading 1.5s infinite ease-in-out;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Shapes --- */
.sk-logo { height: 80px; width: 80px; border-radius: 50%; margin: 0 auto 15px; }
.sk-title { height: 24px; width: 70%; margin: 10px auto; border-radius: 4px; }
.sk-text { height: 16px; width: 90%; margin: 5px auto; border-radius: 4px; }
.sk-text-sm { height: 14px; width: 60%; margin: 5px auto; border-radius: 4px; }

/* --- Fade In Animation for Content --- */
.fade-in-content {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}