/* Seamless navigation's own marks (router.js): the line across the top while a page is on its way (only after
   250 ms, so a quick swap shows nothing) and the screen readers' announcement of the page that arrived. */

.cil-nav-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100000;
    height: 3px;
    background: var(--cil-blue);
    transform: scaleX(0);
    transform-origin: var(--cil-nav-progress-from, right);
    opacity: 0;
    pointer-events: none;
}
html[dir="ltr"] .cil-nav-progress,
body.lang-to-css-ltr .cil-nav-progress { --cil-nav-progress-from: left; }
.cil-nav-progress.is-on {
    opacity: 1;
    animation: cil-nav-progress 8s cubic-bezier(.1, .7, .2, 1) forwards;
}
@keyframes cil-nav-progress {
    from { transform: scaleX(.08); }
    to   { transform: scaleX(.92); }
}
@media (prefers-reduced-motion: reduce) {
    .cil-nav-progress.is-on { animation: none; transform: scaleX(1); }
}

.cil-nav-announcer {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The heading a swap hands the focus to (tabindex -1): no ring for a focus the visitor did not move. */
#cil-page h1[tabindex="-1"]:focus:not(:focus-visible),
#cil-page[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }