/* ==========================================================================
   Премиум-слой: анимации появления, слайдеры, лайтбокс, декоративные детали.
   Подключается ТОЛЬКО на фронте (в редакторе блоки должны быть видимы сразу).
   ========================================================================== */

/* ---------- Появление при скролле ---------- */

/* Прятать контент можно ТОЛЬКО когда скрипт анимаций реально запустился,
   иначе при сбое загрузки JS страница осталась бы пустой. */
html.bl-js .bl-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
	transition-delay: var(--bl-reveal-delay, 0ms);
	will-change: opacity, transform;
}
html.bl-js .bl-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.bl-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Swiper: премиальное оформление ---------- */

.bl-swiper { position: relative; padding-bottom: 3.25rem; }
/* Карточка в каруселях сама является слайдом, поэтому направление обязательно
   вертикальное: без него содержимое карточки разворачивалось в строку.
   Растягивание по высоте даёт flex, выравнивание детей по ширине — stretch по умолчанию. */
.bl-swiper .swiper-slide { height: auto; display: flex; flex-direction: column; }

.bl-swiper .swiper-pagination {
	bottom: 0;
	--swiper-pagination-color: var(--bl-accent);
	--swiper-pagination-bullet-inactive-color: currentColor;
	--swiper-pagination-bullet-inactive-opacity: .22;
	--swiper-pagination-bullet-size: 8px;
	--swiper-pagination-bullet-horizontal-gap: 5px;
}

.bl-swiper-nav {
	display: flex;
	gap: .6rem;
	justify-content: flex-end;
	margin-bottom: 1.25rem;
}
.bl-swiper-prev,
.bl-swiper-next {
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 50%;
	border: 1px solid var(--bl-border);
	background: var(--bl-surface);
	color: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.bl-swiper-prev:hover,
.bl-swiper-next:hover {
	background: var(--bl-accent);
	border-color: var(--bl-accent);
	color: var(--bl-accent-contrast);
	transform: translateY(-2px);
}
.bl-swiper-prev.swiper-button-disabled,
.bl-swiper-next.swiper-button-disabled { opacity: .35; pointer-events: none; }
.bl-swiper-prev svg, .bl-swiper-next svg { width: 18px; height: 18px; }

/* ---------- Hero-слайдер (fade) ---------- */

.bl-swiper-fade { position: relative; }
.bl-swiper-fade .swiper-pagination {
	--swiper-pagination-color: #fff;
	--swiper-pagination-bullet-inactive-color: #fff;
	--swiper-pagination-bullet-inactive-opacity: .45;
}

/* ---------- Параллакс ---------- */

.bl-parallax { background-position: center calc(50% + var(--bl-parallax-shift, 0px)); }

/* ---------- Декоративные детали премиум-уровня ---------- */

/* Мягкое свечение акцентом за ключевыми секциями */
.bl-glow::after {
	content: "";
	position: absolute;
	width: 46vw;
	max-width: 620px;
	aspect-ratio: 1;
	right: -12vw;
	top: -18%;
	background: radial-gradient(circle, color-mix(in srgb, var(--bl-accent) 26%, transparent) 0%, transparent 68%);
	pointer-events: none;
	z-index: 0;
	filter: blur(8px);
}

/* Тонкая линия-разделитель между секциями одного тона */
.bl-block + .bl-block.bl-hairline { border-top: 1px solid var(--bl-border); }

/* Наведение на карточки: мягкий подъём */
.bl-card-hover {
	transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s ease, border-color .28s ease;
}
.bl-card-hover:hover {
	transform: translateY(-6px);
	box-shadow: var(--bl-shadow-medium);
	border-color: color-mix(in srgb, var(--bl-accent) 35%, var(--bl-border));
}

/* Изображения: лёгкий зум внутри кропа */
.bl-media-crop img { transition: transform .5s cubic-bezier(.2, .8, .3, 1); }
.bl-zoom-parent:hover .bl-media-crop img { transform: scale(1.05); }

/* Акцентная подсветка первого слова заголовка секции */
.bl-heading em { font-style: normal; color: var(--bl-accent); }

/* ---------- GLightbox: подгоняем под тему ---------- */

.glightbox-container .gslide-description { background: rgba(16, 16, 25, .92); }
.glightbox-clean .gslide-title { font-size: 1.05rem; font-weight: 650; }