/*
 * Анимация появления блоков при прокрутке (reveal.js). Включается в Elementor без кода:
 * элемент → Расширенные → CSS-классы:
 *   hb-reveal          — подъём снизу с увеличением 92% → 100%, фото внутри чуть «доезжает» (карточки)
 *   hb-reveal-up       — подъём снизу (заголовки)
 *   hb-reveal-down     — съезжает сверху (заголовки)
 *   hb-reveal-fade     — только проявление (кнопки, прочее)
 *   hb-reveal-mask     — «шторка» на фото: открывается слева направо, снимок уменьшается 112% → 100% (виджет «Изображение»)
 *   hb-reveal-mask-up  — то же, шторка снизу вверх
 *   hb-reveal-stagger  — на текстовом виджете: абзацы появляются по очереди
 *   hb-parallax        — фото медленно сдвигается внутри рамки при прокрутке (виджет «Изображение»; на телефоне выключено)
 *   hb-hover-lift      — карточка приподнимается при наведении (можно отдельно от hb-reveal)
 * Блоки, появившиеся на экране одновременно, идут по очереди в порядке страницы (шаг — STEP в reveal.js).
 * Доп. задержка — Расширенные → Атрибуты: data-hb-delay|200 (мс).
 * Встроенную «Анимацию входа» Elementor на этих элементах выключать (иначе она перекрыта — см. конец файла).
 * Класс hb-js на <html> ставит functions.php: без JS блоки не скрываются.
 */
:root {
	--hb-reveal-duration: .9s;   /* длительность появления */
	--hb-reveal-shift: 24px;     /* насколько блок «подъезжает» */
	--hb-reveal-scale: .92;      /* начальный размер hb-reveal */
	--hb-reveal-ease: cubic-bezier(.22, 1, .36, 1); /* быстрое начало, мягкая остановка */
	--hb-mask-duration: 1.25s;   /* шторка — как «Анимация входа» Elementor (карточки специальностей, slideInUp) */
	--hb-mask-ease: ease;        /* та же кривая, что у карточек: мягкий разгон и торможение */
	--hb-mask-scale: 1.06;       /* начальный размер снимка под шторкой */
	--hb-stagger-step: 100ms;    /* шаг между абзацами hb-reveal-stagger */
}

/* масштаб фото задаётся переменными: шторка (--hb-mscale) и параллакс (--hb-pscale, --hb-py) не перебивают друг друга */
@property --hb-mscale {
	syntax: '<number>';
	inherits: true;
	initial-value: 1;
}

.hb-js :is(.hb-reveal, .hb-reveal-up, .hb-reveal-down, .hb-reveal-fade):not(.is-done) {
	transition:
		opacity calc(var(--hb-reveal-duration) * .8) ease-out var(--hb-delay, 0ms),
		transform var(--hb-reveal-duration) var(--hb-reveal-ease) var(--hb-delay, 0ms);
}
.hb-js :is(.hb-reveal, .hb-reveal-up, .hb-reveal-down, .hb-reveal-fade):not(.is-in) {
	opacity: 0;
}
.hb-js .hb-reveal:not(.is-in) {
	transform: translateY(var(--hb-reveal-shift)) scale(var(--hb-reveal-scale));
}
.hb-js .hb-reveal-up:not(.is-in) {
	transform: translateY(var(--hb-reveal-shift));
}
.hb-js .hb-reveal-down:not(.is-in) {
	transform: translateY(calc(var(--hb-reveal-shift) * -1));
}

/* Фото внутри карточки «доезжает» чуть дольше самой карточки — эффект глубины */
.hb-js .hb-reveal:not(.is-done) img {
	transition: transform calc(var(--hb-reveal-duration) * 1.5) var(--hb-reveal-ease) var(--hb-delay, 0ms);
}
.hb-js .hb-reveal:not(.is-in) img {
	transform: scale(1.06);
}

/* Шторка: рамка открывается, снимок внутри одновременно уменьшается до своего размера */
.hb-js :is(.hb-reveal-mask, .hb-reveal-mask-up):not(.is-done) {
	clip-path: inset(0);
	transition: clip-path var(--hb-mask-duration) var(--hb-mask-ease) var(--hb-delay, 0ms),
		--hb-mscale var(--hb-mask-duration) var(--hb-mask-ease) var(--hb-delay, 0ms);
}
.hb-js .hb-reveal-mask:not(.is-in) {
	clip-path: inset(0 100% 0 0);
	--hb-mscale: var(--hb-mask-scale);
}
.hb-js .hb-reveal-mask-up:not(.is-in) {
	clip-path: inset(100% 0 0 0);
	--hb-mscale: var(--hb-mask-scale);
}

/* Абзацы по очереди: номер абзаца (--hb-i) ставит reveal.js */
.hb-js .hb-reveal-stagger:not(.is-done) > * {
	transition:
		opacity calc(var(--hb-reveal-duration) * .8) ease-out calc(var(--hb-delay, 0ms) + var(--hb-i, 0) * var(--hb-stagger-step)),
		transform var(--hb-reveal-duration) var(--hb-reveal-ease) calc(var(--hb-delay, 0ms) + var(--hb-i, 0) * var(--hb-stagger-step));
}
.hb-js .hb-reveal-stagger:not(.is-in) > * {
	opacity: 0;
	transform: translateY(16px);
}

/* Параллакс: снимок чуть крупнее рамки, сдвиг --hb-py задаёт reveal.js (только ≥768px) */
.hb-parallax {
	overflow: hidden;
}
@media (min-width: 768px) {
	.hb-js .hb-parallax {
		--hb-pscale: 1.1;
	}
}
.hb-js :is(.hb-reveal-mask, .hb-reveal-mask-up, .hb-parallax) img {
	transform: translate3d(0, var(--hb-py, 0px), 0) scale(calc(var(--hb-pscale, 1) * var(--hb-mscale)));
	will-change: transform;
}

/* Наведение: после появления (is-done), чтобы не мешать анимации */
.hb-hover-lift {
	transition: transform .35s var(--hb-reveal-ease), filter .35s ease;
}
.hb-hover-lift:hover {
	transform: translateY(-6px);
	filter: drop-shadow(0 14px 18px rgba(15, 35, 71, .18)); /* тень по форме карточки, вместе с круглым фото */
}

/* Если на элементе осталась «Анимация входа» Elementor — она отключается, работает наша */
.hb-js :is(.hb-reveal, .hb-reveal-up, .hb-reveal-down, .hb-reveal-fade, .hb-reveal-mask, .hb-reveal-mask-up, .hb-reveal-stagger).elementor-invisible {
	visibility: visible;
}
.hb-js :is(.hb-reveal, .hb-reveal-up, .hb-reveal-down, .hb-reveal-fade, .hb-reveal-mask, .hb-reveal-mask-up, .hb-reveal-stagger).animated {
	animation-name: none;
}

/* Системная настройка «уменьшить движение» — блоки сразу на месте, без параллакса */
@media (prefers-reduced-motion: reduce) {
	.hb-js :is(.hb-reveal, .hb-reveal-up, .hb-reveal-down, .hb-reveal-fade, .hb-reveal-mask, .hb-reveal-mask-up),
	.hb-js .hb-reveal-stagger > *,
	.hb-js :is(.hb-reveal, .hb-reveal-mask, .hb-reveal-mask-up, .hb-parallax) img {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
	.hb-hover-lift:hover {
		transform: none;
	}
}