body.aj-app-mode-enabled {
    --aj-app-ease: cubic-bezier(0.19, 1, 0.22, 1);
}

.aj-app-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    transform: scaleX(0.08);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    z-index: 2147483000;
    background: linear-gradient(90deg, #1d4ed8 0%, #60a5fa 48%, #1d4ed8 100%);
    box-shadow: 0 0 18px rgba(29, 78, 216, 0.45);
    transition: transform 0.72s var(--aj-app-ease), opacity 0.2s ease;
}

.admin-bar .aj-app-progress {
    top: 32px;
}

html[data-aj-app-loading="true"] .aj-app-progress {
    opacity: 1;
    transform: scaleX(0.72);
}

html[data-aj-app-incoming="true"] .aj-app-progress {
    opacity: 0;
    transform: scaleX(1);
}

body.aj-app-mode-enabled .ape-synergy-header-slot,
body.aj-app-mode-enabled #ape-main-canvas,
body.aj-app-mode-enabled .ape-synergy-footer-slot {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform, opacity, filter;
}

html[data-aj-app-loading="true"] body.aj-app-mode-enabled .ape-synergy-header-slot,
html[data-aj-app-loading="true"] body.aj-app-mode-enabled #ape-main-canvas,
html[data-aj-app-loading="true"] body.aj-app-mode-enabled .ape-synergy-footer-slot {
    filter: saturate(0.97);
}

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: aj-app-page-out 0.24s var(--aj-app-ease) both;
}

::view-transition-new(root) {
    animation: aj-app-page-in 0.38s var(--aj-app-ease) both;
}

@keyframes aj-app-page-out {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 0;
        transform: translateY(-16px) scale(0.986);
    }
}

@keyframes aj-app-page-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(1.008);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 782px) {
    .admin-bar .aj-app-progress {
        top: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aj-app-progress,
    body.aj-app-mode-enabled .ape-synergy-header-slot,
    body.aj-app-mode-enabled #ape-main-canvas,
    body.aj-app-mode-enabled .ape-synergy-footer-slot {
        transition: none !important;
        animation: none !important;
    }

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