/* ER.IIIBA.RU — бесшовные переходы (/js/nf-spa.js): полоса загрузки, анимация смены страницы, служебное. */

/* полоса загрузки вверху (появляется, если переход длится дольше ~150 мс) */
#nf-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 5000;
	pointer-events: none;
	background: var(--primary);
	box-shadow: 0 0 8px color-mix(in oklch, var(--primary) 60%, transparent);
	transform-origin: 0 50%;
	transform: scaleX(0);
	transition: transform .25s ease-out, opacity .3s ease .1s;
}
#nf-progress[hidden] { display: none; }
#nf-progress.is-done { opacity: 0; }

/* объявление заголовка новой страницы для скринридеров */
.nf-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* после перехода фокус переносится на <main> — без рамки */
#main:focus { outline: none; }

/* View Transitions: шапка, нижняя панель и чат не «мигают», меняется только содержимое;
   слой анимации не перехватывает клики — страница под ним уже новая */
::view-transition { pointer-events: none; }
html.nf-vt .nb-header { view-transition-name: nf-header; }
html.nf-vt .nb-tabbar { view-transition-name: nf-tabbar; }
html.nf-vt #nb-chat-panel.is-open { view-transition-name: nf-chat; }
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .12s;
	animation-timing-function: ease-out;
}
::view-transition-group(nf-header),
::view-transition-group(nf-tabbar),
::view-transition-group(nf-chat) { animation-duration: 0s; }

/* без View Transitions — короткое проявление нового содержимого */
#main.nf-enter { animation: nf-enter .18s ease-out; }
@keyframes nf-enter {
	from { opacity: .35; }
	to { opacity: 1; }
}

/* пока идёт переход — курсор ожидания на ссылках не меняем, но и двойной клик не нужен */
html[aria-busy="true"] { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
	#nf-progress { transition: none; }
	#main.nf-enter { animation: none; }
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) { animation: none !important; }
}