/* DS Skeleton Loader — фронтенд */

:root {
	--dssl-base: #e9edf1;
	--dssl-shine: #ffffff;
	--dssl-radius: 8px;
	--dssl-speed: 1.4s;
	--dssl-fade: 350ms;
	--dssl-opacity: 1;
	--dssl-shine-opacity: .55;
	--dssl-shine-angle: 90deg;
}

/* Слой заглушки поверх скрытого блока */
.dssl-skeleton-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 5;
	opacity: var(--dssl-opacity);
	/* Плашки не выходят за блок и не влияют на раскладку страницы. */
	overflow: hidden;
	contain: layout paint;
}

/* position задаём только блокам, у которых он статический: собственные
   absolute/sticky у секции перебивать нельзя. Класс ставит скрипт. */
.dssl-host--rel { position: relative; }

.dssl-box {
	position: absolute;
	background: var(--dssl-base);
	border-radius: var(--dssl-radius);
	overflow: hidden;
}

.dssl-box--round { border-radius: 50%; }

/* Блик — одна полоса шириной с блок: её положение и фаза у всех плашек
   совпадают, поэтому по блоку идёт единая волна, а не россыпь вспышек. */
.dssl-box::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--dssl-x, 0px));
	width: var(--dssl-hw, 100%);
	transform: translate3d(-100%, 0, 0);
	background: linear-gradient(
		var(--dssl-shine-angle),
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0) 35%,
		var(--dssl-shine) 50%,
		rgba(255, 255, 255, 0) 65%,
		rgba(255, 255, 255, 0) 100%
	);
	opacity: var(--dssl-shine-opacity);
	animation: dssl-shine var(--dssl-speed) ease-in-out infinite;
}

@keyframes dssl-shine {
	to { transform: translate3d(100%, 0, 0); }
}

/* Режим «Пульсация»: блик выключен, сами плашки мигают прозрачностью. */
.dssl-anim-pulse .dssl-box::after { display: none; }
.dssl-anim-pulse .dssl-box { animation: dssl-pulse var(--dssl-speed) ease-in-out infinite; }

@keyframes dssl-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .45; }
}

/* Режим «Без анимации»: статичные плашки. */
.dssl-anim-none .dssl-box::after { display: none; }

/* Плавное появление настоящего контента */
.dssl-revealed > *:not(.dssl-skeleton-layer) {
	animation: dssl-fade-in var(--dssl-fade) ease both;
}

@keyframes dssl-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ------------------------------------------------------------------
 * AJAX-подгрузка
 * --------------------------------------------------------------- */

.dssl-ajax-busy { pointer-events: none; }

/* Режим «Приглушение»: контент бледнеет, сверху идёт блик. */
.dssl-ajax-busy:not(.dssl-ajax-skeleton) {
	position: relative;
}

.dssl-ajax-busy:not(.dssl-ajax-skeleton) > *:not(.dssl-skeleton-layer) {
	opacity: .25;
	transition: opacity .2s ease;
}

.dssl-ajax-busy:not(.dssl-ajax-skeleton)::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	pointer-events: none;
	background: linear-gradient(
		var(--dssl-shine-angle),
		rgba(255, 255, 255, 0) 0%,
		var(--dssl-shine) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	opacity: .5;
	animation: dssl-shine var(--dssl-speed) ease-in-out infinite;
}

/* Режим «Скелетон»: контент прячется, на его месте — обычная заглушка. */
.dssl-ajax-skeleton > *:not(.dssl-skeleton-layer) {
	opacity: 0 !important;
	transition: opacity .15s ease;
}

@media (prefers-reduced-motion: reduce) {
	.dssl-box,
	.dssl-box::after,
	.dssl-ajax-busy::after {
		animation: none;
	}
	.dssl-revealed > *:not(.dssl-skeleton-layer) {
		animation: none;
	}
}