/* TL_PAGE_TRANSITIONS_V1
   1. Full page loads inside the site cross-fade: the browser keeps the old page on screen until the
      new one is ready, then fades (Chrome/Edge 126+, Safari 18.2+; other browsers simply ignore it).
   2. While a page changes without reload (soft navigation), a thin bar at the top shows progress
      and the old results dim instead of disappearing. */
@view-transition {
    navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .18s;
}

html.tl-soft-nav-busy #main-content {
    opacity: .55;
    transition: opacity .15s ease .1s;
    pointer-events: none;
}
html.tl-soft-nav-busy body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 2147483000;
    height: 3px;
    background: linear-gradient(90deg, transparent, #007aff, transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: tl-soft-nav-bar 1s linear infinite;
}
@keyframes tl-soft-nav-bar {
    from { background-position: 140% 0; }
    to { background-position: -40% 0; }
}
html.tl-soft-nav-done #main-content {
    animation: tl-soft-nav-in .2s ease;
}
@keyframes tl-soft-nav-in {
    from { opacity: .55; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    html.tl-soft-nav-busy body::before, html.tl-soft-nav-done #main-content { animation: none; }
}