/* ============================================
   Page Transitions — Soybean Admin inspired
   .NET Core MVC — Drop into wwwroot/css/
   ============================================ */

/* ---------- NProgress Top Loading Bar ---------- */
#nprogress {
    pointer-events: none;
}

    #nprogress .bar {
        background: #f26f33;
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
    }

    #nprogress .peg {
        display: block;
        position: absolute;
        right: 0px;
        width: 100px;
        height: 100%;
        box-shadow: 0 0 10px #f26f33, 0 0 5px #f26f33;
        opacity: 1;
        transform: rotate(3deg) translate(0px, -4px);
    }

    #nprogress .spinner {
        display: none; /* hide spinner — bar only */
    }

/* ---------- Page Overlay (fade-out on leave) ---------- */
#page-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: var(--transition-bg, #fff);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

[data-theme="dark"] #page-transition-overlay {
    --transition-bg: #141414;
}

#page-transition-overlay.leaving {
    opacity: 1;
    pointer-events: all;
}

/* ---------- Main Content Transition ---------- */
#app-content,
.page-content,
main,
.main-content {
    animation: pageEnter 0.28s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Slide variants (optional, add class to <main>) ---------- */
.transition-slide-left {
    animation: slideFromRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.transition-slide-right {
    animation: slideFromLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.transition-fade {
    animation: fadeIn 0.25s ease backwards;
}

.transition-zoom {
    animation: zoomIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---------- Nav link active feedback ---------- */
.nav-link,
a[asp-action],
a[asp-page] {
    transition: opacity 0.15s ease;
}

    .nav-link.is-navigating,
    a[asp-action].is-navigating,
    a[asp-page].is-navigating {
        opacity: 0.5;
        pointer-events: none;
    }

/* ---------- Reduced motion support ---------- */
@media (prefers-reduced-motion: reduce) {
    #app-content, .page-content, main, .main-content {
        animation: none;
    }

    #nprogress .bar {
        transition: none;
    }

    #page-transition-overlay {
        transition: none;
    }
}