/*!
 * Hilbert House — hh-3d-defer.css  v1.0.0
 * Заглушка над сценой 3D-модели, пока model-viewer не готов.
 * Стиль: hairline-разделители, Guards Red, геометрический минимализм.
 * Никаких transform на интерактивных элементах при hover.
 */

.h3d-stage,
.vsd-model-viewer-frame {
	--hh3d-accent: #af0b0b;
	--hh3d-ink: #14181c;
	--hh3d-muted: rgba(20, 24, 28, .45);
	--hh3d-line: rgba(20, 24, 28, .14);
	--hh3d-veil-bg: #fff;
	--hh3d-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Тёмный вариант: повесить класс на .h3d-stage */
.h3d-stage.is-dark {
	--hh3d-ink: #f2f4f6;
	--hh3d-muted: rgba(242, 244, 246, .5);
	--hh3d-line: rgba(242, 244, 246, .16);
	--hh3d-veil-bg: #14181c;
}

/* Пока модель не готова — прячем пустой холст, чтобы не мигал */
.hh3d-stage--pending model-viewer {
	opacity: 0;
}

.hh3d-stage--ready model-viewer {
	opacity: 1;
	transition: opacity .45s var(--hh3d-ease);
}

/* ------------------------------------------------------------------ */
/* Заглушка                                                            */
/* ------------------------------------------------------------------ */

.hh3d-veil {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hh3d-veil-bg);
	opacity: 1;
	transition: opacity .4s var(--hh3d-ease);
	pointer-events: none;
}

.hh3d-veil[data-state="idle"] {
	pointer-events: auto;
}

.hh3d-veil[data-state="done"] {
	opacity: 0;
}

.hh3d-veil__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: min(240px, 60%);
	text-align: center;
}

.hh3d-veil__title {
	margin: 0;
	font-size: 11px;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hh3d-muted);
}

/* Hairline-полоса прогресса */
.hh3d-veil__bar {
	position: relative;
	width: 100%;
	height: 1px;
	overflow: hidden;
	background: var(--hh3d-line);
}

.hh3d-veil__bar > span {
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	width: 0;
	background: var(--hh3d-accent);
	transition: width .25s var(--hh3d-ease);
}

/* Разбор GLB блокирует главный поток -> прогресс тут неинформативен.
   Индетерминированная полоса на CSS-анимации идёт в компоситоре
   и продолжает двигаться даже когда JS занят. */
.hh3d-veil[data-state="build"] .hh3d-veil__bar > span {
	width: 40%;
	transition: none;
	animation: hh3d-sweep 1.15s var(--hh3d-ease) infinite;
	will-change: transform;
}

@keyframes hh3d-sweep {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(250%); }
}

.hh3d-veil__status {
	margin: 0;
	min-height: 1em;
	font-size: 11px;
	line-height: 1;
	letter-spacing: .08em;
	font-variant-numeric: tabular-nums;
	color: var(--hh3d-muted);
}

.hh3d-veil[data-state="error"] .hh3d-veil__status {
	color: var(--hh3d-accent);
	letter-spacing: .02em;
}

.hh3d-veil[data-state="idle"] .hh3d-veil__bar,
.hh3d-veil[data-state="idle"] .hh3d-veil__status {
	display: none;
}

/* Кнопка ручной загрузки — только смена цвета/обводки на hover */
.hh3d-veil__btn {
	display: none;
	margin: 0;
	padding: 12px 26px;
	border: 1px solid var(--hh3d-line);
	border-radius: 0;
	background: transparent;
	color: var(--hh3d-ink);
	font: inherit;
	font-size: 11px;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .3s var(--hh3d-ease), color .3s var(--hh3d-ease);
}

.hh3d-veil[data-state="idle"] .hh3d-veil__btn {
	display: inline-block;
}

.hh3d-veil__btn:hover,
.hh3d-veil__btn:focus-visible {
	border-color: var(--hh3d-accent);
	color: var(--hh3d-accent);
}

.hh3d-veil__btn:focus-visible {
	outline: 1px solid var(--hh3d-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.hh3d-veil,
	.hh3d-veil__bar > span,
	.hh3d-stage--ready model-viewer {
		transition-duration: .01ms;
	}
	.hh3d-veil[data-state="build"] .hh3d-veil__bar > span {
		animation: none;
		width: 100%;
		opacity: .4;
	}
}