/* LUA-3D · 25.09.2026 · 3D-петлі на головній.
 * Розмітку додає functions.php (блок LUA-3D), там само вимикач.
 */

/* ---- Перший екран ---------------------------------------------------------
 * Петля лежить поверх відео теми. Фон петлі #EDECF1 — такий самий у рамки,
 * тож у вузькій рамці діорама стоїть угорі, а знизу лишається місце підпису.
 * Коли грає відео зі звуком (клас lua-3d-reel), усе як було в темі.
 */
.lua-3d-hero {
	background-color: #edecf1;
	/* Шар руху кладе постер у фон рамки inline-стилем. Під зменшеною
	   петлею він видно, тому тут вимкнено. */
	background-image: none !important;
}

.lua-3d-hero > .lua-3d-loop {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 0;
	pointer-events: none;
	transition: opacity .45s ease;
}

.lua-3d-hero .internal_hero__right-content {
	z-index: 10;
}

/* Темний градієнт теми під підписом — лише для відео. */
.lua-3d-hero::before {
	transition: opacity .45s ease;
}

.lua-3d-hero:not(.lua-3d-reel)::before {
	opacity: 0;
}

.lua-3d-hero:not(.lua-3d-reel) > .js-video {
	visibility: hidden;
}

.lua-3d-hero:not(.lua-3d-reel) .internal_hero__right-title {
	color: #000;
}

.lua-3d-hero.lua-3d-reel > .lua-3d-loop {
	opacity: 0;
}

@media (max-width: 1023px) {
	/* Квадратна рамка: діорама менша і вища, підпис стоїть під нею. */
	.lua-3d-hero > .lua-3d-loop {
		transform: translateY(-7%) scale(.86);
	}
}

/* Петлі інших сторінок зняті на білому тлі: multiply дає колір рамки. */
.lua-3d-hero--w > .lua-3d-loop {
	mix-blend-mode: multiply;
}

/* ---- Фото-картки: «Інші послуги», типи обʼєктів на аудиті ----------------
 * Фото лишається в розмітці (тримає розмір), петля лежить поверх нього.
 */
.lua-3d-pic {
	background: #f3f5f5;
}

/* lua-mobile.js (videoPlaceholders) кладе постер відео у фон батьківського
   блоку inline-стилем, на всю площу (cover). Петля тут вписана (contain),
   тож під нею видно другий, більший обʼєкт. Постер показує сам <video>. */
.lua-3d-pic,
.lua-3d-quiz,
.lua-3d-thanks {
	background-image: none !important;
}

/* Рамку першого екрана (inner__image) тема позиціонує сама (absolute
   на десктопі) — її не чіпаємо, інші контейнери статичні. */
.lua-3d-pic:not(.lua-3d-pic--clip) {
	position: relative;
}

.lua-3d-pic > img {
	visibility: hidden;
}

.lua-3d-pic > .lua-3d-loop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* Перший екран з фото (Про нас, База знань, Кейси): тло — як у рамок
   з відео. Рамку Про нас / Бази знань обрізає тема (clip-path контейнера),
   у Кейсів рамки нема — даємо такі ж заокруглення. */
.lua-3d-pic--clip {
	background: #edecf1;
}

/* Фігурна рамка теми (clip-path #inner_image) зрізала кут 3D-сцени, а шар
   руху після розкриття рамки повертав її ривком. Для 3D — просте скруглення,
   як у Кейсів. */
.inner__image.lua-3d-pic--clip {
	overflow: hidden;
	border-radius: 3.2rem;
	clip-path: none;
}

.cases_hero__img.lua-3d-pic {
	overflow: hidden;
	border-radius: 32px;
	background: #edecf1;
}

/* ---- Квіз: петля видимого кроку поверх картинки ------------------------- */
.lua-3d-quiz {
	position: relative;
	background: #f3f5f5;
}

.lua-3d-quiz > img {
	visibility: hidden;
}

.lua-3d-quiz > .lua-3d-loop {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.lua-3d-quiz > .lua-3d-loop.is-on {
	display: block;
}

/* ---- Подяка: невелика петля над заголовком ------------------------------ */
.lua-3d-thanks {
	width: 22rem;
	max-width: 60%;
	margin: 0 0 2.4rem;
}

.lua-3d-thanks > .lua-3d-loop {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	mix-blend-mode: multiply;
}

/* ---- Картки «Рішення під ваш масштаб» -------------------------------------
 * Світла картка, 3D-обʼєкт угорі, текст темний. Білий фон відео зникає
 * через multiply на фоні картки. На ховері обʼєкт стискається вгору,
 * звільняючи місце тексту, що піднімається.
 */
.lua-3d-card {
	background: #f3f5f5;
}

.lua-3d-card::after {
	display: none;
}

.lua-3d-card .specialization_item__bg {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	background: #f3f5f5;
}

.lua-3d-card:hover .specialization_item__bg {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.lua-3d-card .specialization_item__bg img {
	display: none;
}

/* Ширину, відступ і масштаб ховеру точно підбирає lua-3d.js (fitCard) під
   місце до заголовка; 78% / 60% — запасний розмір без JS. */
.lua-3d-card .specialization_item__bg .lua-3d-loop {
	flex: 0 0 auto;
	width: 78%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* Білий фон відео зникає через multiply на фоні картки: так фон збігається
	   з карткою на будь-якому екрані (колір, «зашитий» у відео, на Mac давав
	   світлий квадрат). Шар відео створюється одразу, до ховеру, — інакше
	   на старті анімації Chrome перезбирав його і обʼєкт тремтів. */
	mix-blend-mode: multiply;
	will-change: transform;
	backface-visibility: hidden;
	transform: translateZ(0);
	transform-origin: 50% 0;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.lua-3d-card:hover .specialization_item__bg .lua-3d-loop {
	transform: translateZ(0) scale(var(--lua-3d-hs, .74));
}

/* Стрілки слайдера (десктоп; нижче 1024px тема їх ховає). Кнопки тієї ж
   ваги, що на «Про нас», в один рядок з описом блоку, ліворуч від нього. */
.specialization__top--v2 > .lua-3d-nav {
	align-self: center;
	margin-left: auto;
	margin-right: 4.8rem;
}

.specialization__top--v2 > .lua-3d-nav + .specialization__top_info--v2 {
	margin-left: 0;
}

.lua-3d-card .specialization_item__title,
.lua-3d-card .specialization_item__subtitle,
.lua-3d-card .specialization_item__list b {
	color: #000;
}

.lua-3d-card .specialization_item__list span,
.lua-3d-card .specialization_item__text {
	color: #5f6873;
}

.lua-3d-card .specialization_item__btn {
	background: #fff;
}

@media (max-width: 1023px) {
	.lua-3d-card .specialization_item__bg .lua-3d-loop {
		width: 60%;
	}
}

/* ---- Перший екран Кейсів на телефоні ---------------------------------------
 * Заголовок в один рядок, менші відступи: текст і 3D вміщуються в один екран
 * телефона. Три цифри в один ряд — спільне правило для всього сайту в
 * lua-nav.css, блок LUA-FACTS-ROW. Розміри в rem — до 767px тема рахує rem
 * від ширини екрана, тож пропорції ті самі на будь-якому телефоні. На
 * планшеті rem фіксований і все й так вміщується — там як у теми.
 * !important у заголовка — лише щоб перебити спільний розмір h1 для
 * телефона з lua-fixes.css (body.lua-m h1 … !important).
 */
@media (max-width: 767px) {
	body.lua-m .cases_hero__title {
		font-size: 2.9rem !important;
	}

	.cases_hero__right {
		gap: 2.4rem;
	}

	.cases_hero__left {
		margin-top: 2.4rem;
	}
}

/* ---- Про нас: «Масштаб та досягнення» — глобус замість Spline-карти -------
 * Розмітку Spline functions.php загортає в <template> (lua_3d_geo), у рамку
 * ставить петлю глобуса. Тло прозоре — глобус на білому тлі секції. Білі
 * плашки теми (::before, ::after) ховали логотип Spline — більше не треба,
 * а мобільна плашка закривала б низ глобуса.
 */
.lua-3d-geo {
	background: transparent;
}

.lua-3d-geo::before,
.lua-3d-geo::after {
	display: none;
}

/* Страховка: якщо петлі нема, а Spline на телефоні прибрав lua-mobile.js
   (dropSpline), порожню рамку 725px ховаємо (у розмітці вона лишається). */
.geography__map-mob:not(:has(spline-viewer, .lua-3d-loop)) {
	display: none;
}

@media (max-width: 1023px) {
	/* На телефоні рамка теми 725px заввишки під Spline — глобусу досить
	   квадрата на всю ширину. */
	.geography__map-mob.lua-3d-geo {
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

/* ---- Про нас: живе фото «Понад 10 років досвіду» ----------------------------
 * Відео з того самого кадру лежить поверх фото (functions.php, lua_3d_live)
 * і проявляється, коли справді заграло (lua-3d.js). Кадр той самий — перехід
 * непомітний; без відео (менше руху, енергозбереження) лишається фото.
 * Градієнт і текст теми (.about__info) лежать вище за відео.
 */
.lua-3d-alive > .lua-3d-photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	opacity: 0;
	transition: opacity .8s ease;
}

.lua-3d-alive > .lua-3d-photo.is-live {
	opacity: 1;
}

/* ---- Поява ------------------------------------------------------------------
 * Клас lua-3d-enter ставить lua-3d.js (розділ «Поява»), він же виводить петлю
 * рухом. Без JS класу нема — петлі видно одразу.
 */
html.lua-3d-enter .lua-3d-loop:not(.lua-3d-in),
html.lua-3d-enter .lua-3d-card:not(.lua-3d-card-in) .specialization_item__content > * {
	opacity: 0;
}

@media (max-width: 767px) {
	/* Тема тягне фото кейсів до 525px заввишки (під фігурну рамку фото).
	   3D-обʼєкт квадратний — рамка теж квадратна, без порожнечі зверху й знизу.
	   На планшеті (768–1023) рамка ширша за висоту — лишаємо як у теми. */
	.cases_hero__img.lua-3d-pic > img {
		height: auto;
		min-height: 0;
		aspect-ratio: 1 / 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lua-3d-pic > .lua-3d-loop,
	.lua-3d-hero > .lua-3d-loop,
	.lua-3d-card .specialization_item__bg .lua-3d-loop {
		transition: none;
	}
}
/* LUA-3D-END */