/* ─── Переходы между страницами ─── */

/* Плавная смена содержимого */
#siteContent {
    opacity: 1;
    transition: opacity 0.16s ease;
}

html.is-changing #siteContent { opacity: 0.55; }
html.is-rendering #siteContent { opacity: 0; }

/* Полоска загрузки */

.site-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 9000;
    background: transparent;
    pointer-events: none;
}

.site-progress[hidden] { display: none; }

.site-progress::after {
    content: '';
    display: block;
    height: 100%;
    width: 0;
    opacity: 1;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-teal));
    box-shadow: 0 0 10px var(--accent-blue);
}

/* Ожидание: ползём вперёд с замедлением, конца не достигаем */
.site-progress.is-active::after {
    width: 90%;
    transition: width 8s cubic-bezier(0.05, 0.7, 0.1, 1);
}

/* Завершение: доводим до конца и гасим прозрачностью */
.site-progress.is-done::after {
    width: 100%;
    opacity: 0;
    transition: width 0.2s ease, opacity 0.25s ease 0.15s;
}

/* Тем, кто просил меньше движения, анимацию не показываем */
@media (prefers-reduced-motion: reduce) {
    #siteContent { transition: none; }
    html.is-changing #siteContent,
    html.is-rendering #siteContent { opacity: 1; }
    .site-progress::after { transition: opacity 0.2s ease; }
}