/* ── Navigation progress bar ─────────────────────────────── */
#spa-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(90deg, #8B5CF6, #F472B6, #a78bfa, #F472B6);
    background-size: 200% 100%;
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.45);
    transition:
        width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease;
}

#spa-progress.is-active {
    width: 72%;
    opacity: 1;
    animation: spa-progress-flow 1.4s ease-in-out infinite;
}

#spa-progress.is-done {
    width: 100%;
    opacity: 0;
    animation: none;
}

@keyframes spa-progress-flow {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ── Main content area ───────────────────────────────────── */
#spa-main.spa-exit,
#spa-main.spa-enter {
    will-change: opacity, transform;
}

/* Persistent chrome — never part of page snapshots */
#navbar,
#mob-bottom-nav,
.maintenance-banners {
    view-transition-name: none;
}

/* No smooth document scroll during route swap (would hide #spa-main transition) */
html.spa-navigating {
    scroll-behavior: auto !important;
}

/* Freeze navbar paint only during content swap (original design restored after) */
html.spa-navigating #navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.spa-navigating #navbar,
html.spa-navigating #navbar * {
    transition: none !important;
    animation: none !important;
}

#navbar.spa-nav-lock,
#navbar.spa-nav-lock * {
    transition: none !important;
}

/* Profile tab content — lighter swap inside the shell */
#profile-content.spa-exit,
#profile-content.spa-enter {
    will-change: opacity, transform;
}

#profile-content.spa-exit {
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

#profile-content.spa-enter {
    opacity: 0;
    transform: translateY(8px);
}

#profile-content.spa-enter.spa-ready {
    opacity: 1;
    transform: none;
    transition:
        opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

#profile-content:not(.spa-exit):not(.spa-enter) {
    opacity: 1;
    transform: none;
    visibility: visible;
}

/* Children use .spa-reveal; parent must not clip during stagger */
#profile-content.spa-reveal-host,
#spa-main[data-page="cart"] main {
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    #profile-content.spa-exit,
    #profile-content.spa-enter {
        transform: none;
        transition: opacity 0.01ms linear;
    }
}

/* Fallback: exit */
#spa-main.spa-exit {
    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fallback: enter (initial state) */
#spa-main.spa-enter {
    opacity: 0;
    transform: translateY(12px);
}

/* Fallback: enter (animate to visible) */
#spa-main.spa-enter.spa-ready {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Failsafe — never leave main content invisible after navigation */
#spa-main:not(.spa-exit):not(.spa-enter) {
    opacity: 1;
    transform: none;
    visibility: visible;
}

/* Staggered block reveal (cart, profile, …) */
.spa-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--spa-reveal-delay, 0ms);
}

.spa-reveal.spa-reveal--visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .spa-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── View Transitions API (unused — kept for reference) ─────── */
@keyframes spa-vt-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}

@keyframes spa-vt-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

::view-transition-group(spa-main) {
    animation-duration: 0.36s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(spa-main) {
    animation: spa-vt-out 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
    z-index: 1;
}

::view-transition-new(spa-main) {
    animation: spa-vt-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.04s both;
    z-index: 2;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #spa-main,
    #spa-progress {
        transition: none !important;
        animation: none !important;
    }

    #spa-main.spa-exit,
    #spa-main.spa-enter {
        opacity: 1;
        transform: none;
    }

    ::view-transition-old(spa-main),
    ::view-transition-new(spa-main),
    ::view-transition-group(spa-main) {
        animation: none !important;
    }
}