/* Keep the original app.css entrance animations. A document crossfade or
   nested entrance animations would composite the same content repeatedly. */
@view-transition { navigation: none; }

html.stc-theme-frontend.stc-motion-ui::before {
    content: "";
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 2147483647;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #173c33, #217a59, #59b98b);
    pointer-events: none;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
}

html.stc-theme-frontend.stc-motion-ui.stc-page-waiting::before {
    opacity: 1;
    animation: stc-navigation-progress 8s cubic-bezier(.16, 1, .3, 1) both;
}

html.stc-theme-frontend.stc-motion-ui.stc-page-ready::before {
    opacity: 0;
    transform: scaleX(1);
    transition: transform .18s ease-out, opacity .18s ease;
}

@keyframes stc-navigation-progress {
    from { transform: scaleX(.04); }
    25% { transform: scaleX(.4); }
    to { transform: scaleX(.9); }
}

@media (prefers-reduced-motion: reduce) {
    html.stc-theme-frontend.stc-motion-ui.stc-page-waiting::before {
        animation: none;
        transform: scaleX(.72);
    }
    html.stc-theme-frontend.stc-motion-ui.stc-page-ready::before { transition: none; }
}

@media print {
    html.stc-theme-frontend.stc-motion-ui::before { display: none; }
    html.stc-theme-frontend.stc-motion-ui * { animation: none !important; }
}