/* Light same-tab page transition. Keep the GMT canvas visible during the crossfade. */
@view-transition {
    navigation: auto;
}

::view-transition-group(root) {
    background-color: #f4f7fb;
    isolation: isolate;
}

::view-transition-old(root) {
    animation: gmt-page-out 120ms ease-out both;
    mix-blend-mode: normal;
}

::view-transition-new(root) {
    animation: gmt-page-in 180ms cubic-bezier(.2, .7, .2, 1) both;
    mix-blend-mode: normal;
}

@keyframes gmt-page-out {
    to { opacity: 0; }
}

@keyframes gmt-page-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gmt-navigation-progress {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(90deg, #14865a, #48b47c);
    box-shadow: 0 1px 5px rgba(20, 134, 90, .22);
    transition: width 180ms ease-out, opacity 100ms ease-out;
}

.gmt-navigation-progress.is-starting {
    width: 72%;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(root),
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
    .gmt-navigation-progress { transition-duration: .01ms !important; }
}