/* ============================================================
   hg-loader — индикатор ожидания «Лаки-многоточие»
   Заменяет оформление штатного окна ожидания Битрикса BX.showWait().
   Разметку внутрь окна кладёт /js/hg-loader.js.

   Подключается напрямую из footer.php с ?v=filemtime — НЕ через
   IncludeTimestamp::GetTimestamp(), иначе при наличии .min-версии
   отдастся она (хелпер сравнивает не время, а сам факт существования).
   ============================================================ */

/* ---------- 1. Сброс старой жёлтой крутилки ---------- */
/* Старое правило лежит в styles-uncompressed.css и
   styles_uncompressed_only_listing.css (три кольца, border-top-color: yellow).
   Те файлы не трогаем — перебиваем отсюда, файл подключается позже. */

div[id^="wait_"] {
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	text-indent: 0 !important;
	animation: none !important;
	-webkit-animation: none !important;
	-moz-animation: none !important;
	-o-animation: none !important;

	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%);
	z-index: 10000;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;

	/* окно ожидания ничего не перехватывает — клики уходят на страницу как раньше */
	pointer-events: none;
	max-width: 90vw;
}

/* три кольца рисовались псевдоэлементами — убираем */
div[id^="wait_"]::before,
div[id^="wait_"]::after {
	content: none !important;
	display: none !important;
	animation: none !important;
}

/* ---------- 2. Мордочки ---------- */

.hg-loader__faces {
	display: flex;
	align-items: flex-end;
	gap: 7px;
}

.hg-loader__face {
	display: block;
	width: 40px;
	height: 29px; /* пропорция маскота 730 : 534 */
	animation: hg-loader-jump 1.25s cubic-bezier(.4, 0, .5, 1) infinite;
}

.hg-loader__face:nth-child(2) { animation-delay: .14s; }
.hg-loader__face:nth-child(3) { animation-delay: .28s; }

@keyframes hg-loader-jump {
	0%, 58%, 100% { transform: translateY(0); }
	26%           { transform: translateY(-40%); }
}

/* ---------- 3. Моргание ----------
   Веко — прямоугольник цвета шерсти с тёмной линией ресниц, обрезанный
   по глазнице, едет сверху вниз.
   ВАЖНО: clip-path висит на НЕПОДВИЖНОЙ обёртке <g>, а не на самом веке.
   Если повесить его на подвижный элемент, окно обрезки уезжает вместе
   с ним и веко не рисуется вообще (transform при этом выглядит верным). */

.hg-loader__face .hg-lid {
	animation: hg-loader-blink 2.4s infinite;
}

/* мордочки моргают вразнобой — иначе три одинаковые куклы в такт */
.hg-loader__face:nth-child(2) .hg-lid { animation-delay: -.9s; }
.hg-loader__face:nth-child(3) .hg-lid { animation-delay: -1.7s; }

@keyframes hg-loader-blink {
	0%, 86%, 100% { transform: translateY(0); }
	90%, 93%      { transform: translateY(140px); } /* единицы viewBox, не пиксели экрана */
	98%           { transform: translateY(0); }
}

/* ---------- 4. Подпись ---------- */

.hg-loader__caption {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: #474a55; /* графитовый из брендбука */
	text-align: center;
	max-width: 260px;
}

/* ---------- 5. Мелкие экраны ---------- */

@media (max-width: 480px) {
	.hg-loader__face { width: 34px; height: 25px; }
	.hg-loader__caption { font-size: 12px; max-width: 200px; }
}

/* ---------- 6. Уважаем системную настройку «меньше движения» ---------- */

@media (prefers-reduced-motion: reduce) {
	.hg-loader__face,
	.hg-loader__face .hg-lid {
		animation: none !important;
	}
}