:root {
    --kalp-nav-duration: 380ms;
    --kalp-nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --kalp-nav-translate: 12px;
    --kalp-nav-progress: 0%;
}

html,
body {
    background-color: #ffffff;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--kalp-nav-duration);
    animation-timing-function: var(--kalp-nav-ease);
    animation-fill-mode: both;
}

::view-transition-old(root) {
    animation-name: kalp-nav-fade-out;
}

::view-transition-new(root) {
    animation-name: kalp-nav-fade-in;
}

@keyframes kalp-nav-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(calc(-1 * var(--kalp-nav-translate)));
    }
}

@keyframes kalp-nav-fade-in {
    from {
        opacity: 0;
        transform: translateY(var(--kalp-nav-translate));
    }

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

.kalp-nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    pointer-events: none;
    z-index: 2147483647;
    opacity: 0;
    transition: opacity 180ms ease;
}

.kalp-nav-progress__bar {
    width: var(--kalp-nav-progress);
    height: 100%;
    background: linear-gradient(90deg, #0f766e 0%, #22c55e 55%, #84cc16 100%);
    transition: width 160ms linear;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.55);
}

.kalp-nav-skeleton {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
    background:
        linear-gradient(110deg,
            rgba(241, 245, 249, 0.95) 8%,
            rgba(226, 232, 240, 0.96) 18%,
            rgba(241, 245, 249, 0.95) 33%) 0 0 / 220% 100%,
        linear-gradient(#edf2f7 20px, transparent 20px) 5% 14% / 90% 52px no-repeat,
        linear-gradient(#edf2f7 16px, transparent 16px) 5% 32% / 68% 40px no-repeat,
        linear-gradient(#edf2f7 16px, transparent 16px) 5% 44% / 74% 40px no-repeat,
        linear-gradient(#edf2f7 16px, transparent 16px) 5% 56% / 80% 40px no-repeat,
        linear-gradient(#edf2f7 16px, transparent 16px) 5% 68% / 62% 40px no-repeat,
        #f6f8fb;
    animation: kalp-nav-shimmer 1.3s linear infinite;
}

@keyframes kalp-nav-shimmer {
    to {
        background-position: -120% 0, 5% 14%, 5% 32%, 5% 44%, 5% 56%, 5% 68%, 0 0;
    }
}

html.kalp-nav-loading .kalp-nav-progress,
html.kalp-nav-pending .kalp-nav-progress {
    opacity: 1;
}

html.kalp-nav-loading .kalp-nav-skeleton,
html.kalp-nav-pending .kalp-nav-skeleton {
    opacity: 0; /* disabled - causes double-load flash */
}

html.kalp-nav-loading body,
html.kalp-nav-pending body {
    cursor: progress;
}

@media (max-width: 768px) {
    :root {
        --kalp-nav-duration: 320ms;
        --kalp-nav-translate: 10px;
    }

    .kalp-nav-skeleton {
        background:
            linear-gradient(110deg,
                rgba(241, 245, 249, 0.95) 8%,
                rgba(226, 232, 240, 0.96) 18%,
                rgba(241, 245, 249, 0.95) 33%) 0 0 / 240% 100%,
            linear-gradient(#edf2f7 18px, transparent 18px) 6% 16% / 86% 48px no-repeat,
            linear-gradient(#edf2f7 14px, transparent 14px) 6% 34% / 76% 34px no-repeat,
            linear-gradient(#edf2f7 14px, transparent 14px) 6% 46% / 80% 34px no-repeat,
            linear-gradient(#edf2f7 14px, transparent 14px) 6% 58% / 72% 34px no-repeat,
            #f6f8fb;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --kalp-nav-duration: 120ms;
        --kalp-nav-translate: 0px;
    }

    ::view-transition-old(root),
    ::view-transition-new(root),
    .kalp-nav-skeleton {
        animation-duration: 1ms;
        animation-iteration-count: 1;
    }

    .kalp-nav-progress,
    .kalp-nav-skeleton,
    .kalp-nav-progress__bar {
        transition-duration: 1ms;
    }
}