/* ==========================================================================
   Apexi OS — Zero-Refresh Single Page Application (SPA) Transitions
   Modern View Transitions API + High-Performance CSS Fallbacks
   ========================================================================== */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 180ms cubic-bezier(0.16, 1, 0.3, 1) both spa-fade-out;
}

::view-transition-new(root) {
    animation: 220ms cubic-bezier(0.16, 1, 0.3, 1) both spa-fade-in;
}

@keyframes spa-fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.998);
    }
}

@keyframes spa-fade-in {
    from {
        opacity: 0;
        transform: scale(0.998);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Sleek Neon Top Progress Bar (NProgress-grade Instant Visual Feedback)
   ══════════════════════════════════════════════════════════════════════════ */
#spa-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
    z-index: 99999;
    transition: width 0.2s ease, opacity 0.3s ease;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.75), 0 0 4px rgba(236, 72, 153, 0.5);
    opacity: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Smooth Fallback Cross-Fade (For browsers without startViewTransition)
   ══════════════════════════════════════════════════════════════════════════ */
.spa-fallback-fade-out {
    opacity: 0 !important;
    transform: translateY(-3px) !important;
    transition: opacity 180ms ease-out, transform 180ms ease-out !important;
}

.spa-fallback-fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 220ms ease-in, transform 220ms ease-in !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Inside-Panel Instant Tab Navigation Enhancements
   ══════════════════════════════════════════════════════════════════════════ */
.spa-tab-transition {
    transition: opacity 0.16s ease, transform 0.16s ease;
}

/* Ensure #spa-container fills view gracefully without layout jump */
#spa-container {
    width: 100%;
    min-height: 100%;
}