/* =============================================
   SKELETON SCREENS - Loading placeholders
   ============================================= */

/* Base skeleton */
.skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

/* Animation shimmer */
.skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.05),
        transparent
    );
    animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Skeleton types */
.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-text.small {
    height: 12px;
}

.skeleton-text.large {
    height: 24px;
}

.skeleton-title {
    height: 32px;
    width: 60%;
    margin-bottom: 16px;
    border-radius: 6px;
}

.skeleton-button {
    height: 48px;
    width: 150px;
    border-radius: 8px;
}

.skeleton-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.skeleton-card {
    padding: 24px;
    background: rgba(26, 26, 46, 0.5);
    border-radius: 12px;
    margin-bottom: 16px;
}

/* Skeleton layouts */

/* Test result skeleton */
.skeleton-test-result {
    text-align: center;
    padding: 40px 20px;
}

.skeleton-test-result .skeleton-avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
}

.skeleton-test-result .skeleton-title {
    width: 80%;
    margin: 0 auto 16px;
}

.skeleton-test-result .skeleton-text {
    width: 90%;
    margin: 0 auto 8px;
}

/* Type list skeleton */
.skeleton-type-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.skeleton-type-card {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 12px;
    padding: 24px;
}

.skeleton-type-card .skeleton-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 16px;
}

/* Profile skeleton */
.skeleton-profile {
    display: flex;
    gap: 24px;
    padding: 24px;
    background: rgba(26, 26, 46, 0.5);
    border-radius: 12px;
}

.skeleton-profile-info {
    flex: 1;
}

.skeleton-profile .skeleton-avatar {
    width: 100px;
    height: 100px;
}

/* Question skeleton */
.skeleton-question {
    padding: 24px;
    background: rgba(26, 26, 46, 0.5);
    border-radius: 12px;
    margin-bottom: 16px;
}

.skeleton-question .skeleton-text {
    width: 85%;
    margin-bottom: 24px;
}

.skeleton-question .skeleton-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.skeleton-question .skeleton-button {
    width: 120px;
    height: 44px;
}

/* Stats skeleton */
.skeleton-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.skeleton-stat-card {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.skeleton-stat-card .skeleton-number {
    height: 48px;
    width: 80px;
    margin: 0 auto 12px;
    border-radius: 8px;
}

/* Navigation skeleton */
.skeleton-nav {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: rgba(26, 26, 46, 0.5);
}

.skeleton-nav-item {
    height: 40px;
    width: 100px;
    border-radius: 8px;
}

/* Form skeleton */
.skeleton-form {
    padding: 24px;
    background: rgba(26, 26, 46, 0.5);
    border-radius: 12px;
}

.skeleton-form .skeleton-input {
    height: 48px;
    margin-bottom: 16px;
    border-radius: 8px;
}

.skeleton-form .skeleton-label {
    height: 14px;
    width: 100px;
    margin-bottom: 8px;
    border-radius: 4px;
}

/* Content skeleton */
.skeleton-content {
    padding: 24px;
}

.skeleton-paragraph {
    margin-bottom: 24px;
}

.skeleton-paragraph .skeleton-text:last-child {
    width: 75%;
}

/* Loading state helper */
.loading-skeleton {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fade in when content loads */
.skeleton-fade-out {
    animation: skeleton-fade-out 0.3s ease-out forwards;
}

@keyframes skeleton-fade-out {
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

.content-fade-in {
    animation: content-fade-in 0.5s ease-out forwards;
}

@keyframes content-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}