/* Navigation Loading Skeleton - Shows immediately while navigation loads */

/* Show skeleton while loading (empty or not yet fully rendered) */
#navigation-placeholder:empty::before,
#navigation-placeholder:not(.nav-loaded)::before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: rgba(10, 10, 15, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(14, 165, 233, 0.1);
    z-index: 1000;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* Light theme skeleton */
[data-theme="light"] #navigation-placeholder:empty::before,
[data-theme="light"] #navigation-placeholder:not(.nav-loaded)::before {
    background: rgba(248, 250, 252, 0.95);
    border-bottom: 1px solid rgba(71, 85, 105, 0.1);
}

/* Logo skeleton - matches actual nav logo position (nav-container padding:20px + logo offset ~20px = 40px) */
#navigation-placeholder:empty::after,
#navigation-placeholder:not(.nav-loaded)::after {
    content: 'PC';
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10px;
    left: 40px;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #0ea5e9, #3b82f6);
    color: white;
    font-weight: bold;
    font-size: 12px;
    border-radius: 50%;
    z-index: 1001;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* Light theme logo skeleton */
[data-theme="light"] #navigation-placeholder:empty::after,
[data-theme="light"] #navigation-placeholder:not(.nav-loaded)::after {
    background: linear-gradient(135deg, #475569, #64748b);
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Hide actual navigation until fully loaded - COMPLETELY OFF SCREEN */
#navigation-placeholder:not(.nav-loaded) .navbar {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Show navigation with smooth fade-in once loaded */
#navigation-placeholder.nav-loaded .navbar {
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    transition: opacity 0.2s ease-in;
}

/* Hide skeleton once navigation is loaded */
#navigation-placeholder.nav-loaded::before,
#navigation-placeholder.nav-loaded::after {
    display: none;
}