/* Skeleton Loading Animation - Premium Dark Theme */
:root {
        --skeleton-base: #1a1a24;
        --skeleton-highlight: #252532;
        --skeleton-shimmer: linear-gradient(90deg,
                        rgba(255, 255, 255, 0) 0%,
                        rgba(255, 255, 255, 0.05) 50%,
                        rgba(255, 255, 255, 0) 100%);
}

.skeleton {
        background-color: var(--skeleton-base);
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        /* Default radius */
        display: inline-block;
        width: 100%;
}

/* The shimmer effect */
.skeleton::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        background-image: var(--skeleton-shimmer);
        animation: skeleton-shimmer 1.5s infinite;
}

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

/* Variations */
.skeleton-text {
        height: 1em;
        margin-bottom: 0.5em;
        border-radius: 4px;
}

.skeleton-title {
        height: 2em;
        margin-bottom: 1em;
        width: 50%;
}

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

.skeleton-button {
        height: 40px;
        width: 120px;
        border-radius: 4px;
}

.skeleton-card {
        padding: 20px;
        border: 1px solid var(--glass-border);
        background: var(--glass-bg);
        border-radius: 20px;
}

/* Helper checks */
.skeleton-full-width {
        width: 100%;
}

/* Dark mode optimization adjustments if needed */
@media (prefers-color-scheme: dark) {
        /* Already dark by default variables */
}