/* Shared continuity layer for the H5 multi-page journey. */
@view-transition {
    navigation: auto;
}

:root {
    --page-flow-duration: 220ms;
    --page-flow-ease: cubic-bezier(.22, .72, .24, 1);
}

::view-transition-old(root) {
    animation: page-flow-out 140ms ease both;
}

::view-transition-new(root) {
    animation: page-flow-in var(--page-flow-duration) var(--page-flow-ease) both;
}

html.page-flow-ready body {
    animation: page-flow-in var(--page-flow-duration) var(--page-flow-ease) both;
}

html.page-flow-leaving body {
    opacity: .94;
    transition: opacity 110ms ease;
    pointer-events: none;
}

.page-flow-progress {
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    border-radius: 0 999px 999px 0;
    background: #007aff;
    box-shadow: 0 0 10px rgba(0, 122, 255, .3);
    opacity: 0;
    pointer-events: none;
    transition: width 420ms cubic-bezier(.2, .72, .25, 1), opacity 140ms ease;
}

html.page-flow-leaving .page-flow-progress {
    width: 76%;
    opacity: 1;
}

html.page-flow-arrived .page-flow-progress {
    width: 100%;
    opacity: 0;
    transition: width 120ms ease, opacity 180ms ease 80ms;
}

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

@keyframes page-flow-out {
    from { opacity: 1; }
    to { opacity: .96; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    html.page-flow-ready body {
        animation: none !important;
    }

    html.page-flow-leaving body,
    .page-flow-progress {
        transition: none !important;
        transform: none !important;
    }
}