/* Skeleton Loader - HostCraft OS Technical Upgrade */

.skeleton {
    display: inline-block;
    vertical-align: middle;
    border-radius: 4px; /* Sharper, technical edges */
    color: transparent !important;
    user-select: none;
    pointer-events: none;
    position: relative;
    overflow: hidden;
    
    /* Base Color: Zinc-900/800 blend */
    background-color: #161618; 
    
    /* Ensure height matches text if element is empty */
    min-height: 1em;
}

/* Optimized Shimmer Effect */
.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        transparent 0,
        rgba(255, 255, 255, 0.02) 20%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 80%
    );
    /* Snappy 1.4s duration for a high-performance feel */
    animation: hostcraft-shimmer 1.4s infinite;
}

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

/* Pulse modification for smaller elements (like dots/badges) */
.skeleton-pulse {
    animation: hostcraft-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes hostcraft-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Transition for when data finally loads */
.skeleton-transition {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    animation: none !important;
    background: transparent !important;
}

/* Utility to remove skeleton once data is injected */
.skeleton-done {
    background: transparent !important;
    color: inherit !important;
    animation: none !important;
}
.skeleton-done::after {
    display: none !important;
}