/* Рентген-сканер скрытых инженерных работ */
.xray-section {
	background: #111;
	position: relative;
	overflow: hidden;
}

.xray-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
	pointer-events: none;
}

.xray-section .heading-block h2,
.xray-section .heading-block .h2 {
	color: #fff;
	font-weight: 600;
}

.xray-kicker {
	color: #4cc9f0;
	letter-spacing: .28em;
	text-transform: uppercase;
	font-size: .75rem;
	font-weight: 600;
}

.xray-stage {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 2 / 1;
	background: #1a1a1a;
	box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
	cursor: none;
	touch-action: none;
}

.xray-stage img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
	user-select: none;
}

.xray-rough {
	z-index: 1;
}

.xray-finish {
	z-index: 2;
	-webkit-mask-image: none;
	mask-image: none;
	will-change: -webkit-mask-image, mask-image;
}

.xray-hud {
	position: absolute;
	inset: 14px;
	z-index: 4;
	pointer-events: none;
	border: 1px solid rgba(76,201,240,.18);
	border-radius: 12px;
}

.xray-hud span {
	position: absolute;
	width: 22px;
	height: 22px;
	border: 2px solid #4cc9f0;
}

.xray-hud .c-tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.xray-hud .c-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.xray-hud .c-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.xray-hud .c-br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.xray-lens {
	position: absolute;
	z-index: 3;
	width: 300px;
	height: 300px;
	margin: -150px 0 0 -150px;
	border-radius: 50%;
	border: 1.5px solid rgba(76,201,240,.85);
	box-shadow: 0 0 0 8px rgba(76,201,240,.08), 0 0 24px rgba(76,201,240,.35), inset 0 0 40px rgba(76,201,240,.12);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

.xray-stage.is-scanning .xray-lens {
	opacity: 1;
}

.xray-lens::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: #4cc9f0;
	box-shadow: 0 0 12px #4cc9f0;
}

.xray-hotspot {
	position: absolute;
	z-index: 5;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	background: #4cc9f0;
	box-shadow: 0 0 0 0 rgba(76,201,240,.7);
	animation: xray-pulse 2s infinite;
	cursor: pointer;
}

.xray-hotspot:focus {
	outline: none;
}

.xray-hs-1 { left: 18%; top: 78%; }
.xray-hs-2 { left: 52%; top: 44%; }
.xray-hs-3 { left: 82%; top: 22%; }

.xray-ofis .xray-hs-1 { left: 16%; top: 56%; }
.xray-ofis .xray-hs-2 { left: 36%; top: 44%; }
.xray-ofis .xray-hs-3 { left: 52%; top: 18%; }

@keyframes xray-pulse {
	0% { box-shadow: 0 0 0 0 rgba(76,201,240,.7); }
	70% { box-shadow: 0 0 0 16px rgba(76,201,240,0); }
	100% { box-shadow: 0 0 0 0 rgba(76,201,240,0); }
}

.xray-tip {
	position: absolute;
	z-index: 6;
	width: 260px;
	padding: 16px 18px;
	border-radius: 14px;
	background: rgba(17,17,17,.55);
	border: 1px solid rgba(255,255,255,.28);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
	pointer-events: none;
	text-align: left;
}

.xray-hotspot.is-open .xray-tip,
.xray-hotspot:hover .xray-tip,
.xray-hotspot:focus .xray-tip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.xray-hs-1 .xray-tip { left: 28px; bottom: 8px; }
.xray-hs-2 .xray-tip { left: 50%; bottom: 28px; margin-left: -130px; }
.xray-hs-3 .xray-tip { right: 28px; top: 8px; }

.xray-tip strong {
	display: block;
	font-size: .95rem;
	font-weight: 600;
	margin-bottom: .35rem;
	color: #4cc9f0;
}

.xray-tip span {
	display: block;
	font-size: .875rem;
	line-height: 1.5;
	color: rgba(255,255,255,.9);
}

@media (max-width: 991.98px) {
	.xray-stage { aspect-ratio: 16 / 10; }
	.xray-tip { width: 210px; }
	.xray-hs-2 .xray-tip { margin-left: -105px; }
}

@media (max-width: 767.98px) {
	.xray-stage { aspect-ratio: 4 / 3; cursor: auto; }
	.xray-lens { width: 200px; height: 200px; margin: -100px 0 0 -100px; }

	.xray-hs-1 .xray-tip,
	.xray-hs-2 .xray-tip,
	.xray-hs-3 .xray-tip {
		left: 50%;
		right: auto;
		top: auto;
		bottom: 28px;
		margin-left: -105px;
	}
}

@media (max-width: 767.98px) {
	.xray-hotspot { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	.xray-hotspot { animation: none; }
	.xray-finish,
	.xray-tip { transition: none; }
}