/*
 * AV-Security — «Услуги», section 04 «Комплексный подход»: 2.5D scene.
 * ----------------------------------------------------------------------------
 * Loaded after services-complex.css ('25d' mode, inc/services.php), which
 * keeps the layout grid, stages, labels, markers, tooltip, tools, panel and cards;
 * this file adds the image layer, system highlights, pins and device
 * points, the three stage looks, and lighter type / cards on top of it.
 *
 * Spacing scale (one system for the section): 0.5 / 0.75 / 1 / 1.25 /
 * 1.5 rem; radii 6 px (controls) and 10 px (panels, cards).
 *
 * Stage accent (--av-cx-stage): 01 survey red, 02 design blue,
 * 03 operation teal. System colours (guard amber, cameras blue, access
 * teal, pult violet) only on stage 03 and on pins / cards.
 */

.av-cx {
	--av-cx-r: 10px;
	--av-cx-r-sm: 6px;
	--av-cx-stage: #3d8bff;
	--av-cx-design: #6fb6ff;
}

.av-cx[data-av-cx-stage="1"] {
	--av-cx-stage: #f0485c;
}

.av-cx[data-av-cx-stage="2"] {
	--av-cx-stage: #5aa9ff;
}

.av-cx[data-av-cx-stage="3"] {
	--av-cx-stage: #4fe0c0;
}

/* Phones: the scene follows the picture's proportions (one whole complex). */
@media (max-width: 599px) {
	.av-cx {
		--av-cx-h: 78vw;
	}
}

/* ------------------------------------------------------------ Image layer */

.av-cx__view {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

/* Zoomed in: the picture pans in every direction (two fingers / drag). */
.av-cx__view.is-zoomed {
	touch-action: none;
}

.av-cx__view.is-dragging {
	cursor: grabbing;
}

.av-cx__world {
	position: absolute;
	top: 0;
	left: 0;
	width: 1672px;
	height: 941px;
	transform-origin: 0 0;
	will-change: transform;
}

.av-cx__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	pointer-events: none;
	-webkit-user-drag: none;
}

.av-cx__layers {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.av-cx[data-av-cx="25d"] .av-cx__risks {
	display: none;
}

.av-cx[data-av-cx="25d"] .av-cx__scene {
	background: #07111f;
}

/* ------------------------------------------------------------ System highlights
   Image pixels (they scale with the picture). Layer opacity is set by the
   script; stage 03 look by default, stage 02 below. */

.av-cx__dim {
	fill: #050d18;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.av-cx__layer {
	opacity: 0;
}

.av-cx__fence,
.av-cx__fence-glow {
	fill: none;
	stroke: var(--av-cx-c);
	stroke-linejoin: round;
}

.av-cx__fence {
	stroke-width: 3;
	stroke-dasharray: 14 10;
	animation: av-cx-march 1.6s linear infinite;
}

.av-cx__fence-glow {
	stroke-width: 12;
	opacity: 0.28;
	filter: url(#av-cx-glow);
}

.av-cx__wave {
	fill: none;
	stroke: var(--av-cx-c);
	stroke-width: 2.5;
	transform-box: fill-box;
	transform-origin: center;
	animation: av-cx-wave 2.7s ease-out infinite;
}

/* Links to the pult — stage 03 only. */
.av-cx__comm {
	stroke: var(--av-cx-c);
	stroke-width: 2;
	stroke-dasharray: 4 10;
	stroke-linecap: round;
	opacity: 0;
	animation: av-cx-march 1.4s linear infinite reverse;
}

.av-cx[data-av-cx-stage="3"] .av-cx__comm {
	opacity: 0.75;
}

.av-cx__cone {
	mix-blend-mode: screen;
}

.av-cx__ring {
	fill: rgba(79, 224, 192, 0.12);
	stroke: var(--av-cx-c);
	stroke-width: 2.5;
}

.av-cx__ring--pulse {
	fill: none;
	transform-box: fill-box;
	transform-origin: center;
	animation: av-cx-wave 2.2s ease-out infinite;
}

.av-cx__route {
	fill: none;
	stroke: var(--av-cx-c);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 2 12;
	opacity: 0.9;
	animation: av-cx-march 1.2s linear infinite;
}

.av-cx__walker {
	fill: var(--av-cx-c);
	stroke: #fff;
	stroke-width: 2.5;
	opacity: 0;
}

.av-cx.is-live .av-cx__walker {
	opacity: 1;
}

.av-cx__scan {
	fill: rgba(240, 72, 92, 0.06);
	stroke: #ff6b78;
	stroke-width: 3;
	opacity: 0;
}

.av-cx__truck {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.av-cx__truck-halo {
	fill: rgba(255, 255, 255, 0.18);
}

.av-cx__truck-dot {
	fill: #fff;
}

/* Stage 02 — design: equipment drawn in one blue, outlines, nothing moves. */
.av-cx[data-av-cx-stage="2"] .av-cx__layer {
	--av-cx-c: var(--av-cx-design) !important;
}

.av-cx[data-av-cx-stage="2"] .av-cx__cone {
	fill: rgba(111, 182, 255, 0.07);
	stroke: var(--av-cx-design);
	stroke-width: 2;
	stroke-dasharray: 8 6;
	mix-blend-mode: normal;
}

.av-cx[data-av-cx-stage="2"] .av-cx__ring {
	fill: none;
	stroke-dasharray: 6 5;
}

.av-cx[data-av-cx-stage="2"] .av-cx__ring--pulse,
.av-cx[data-av-cx-stage="2"] .av-cx__wave,
.av-cx[data-av-cx-stage="2"] .av-cx__fence-glow {
	display: none;
}

.av-cx[data-av-cx-stage="2"] .av-cx__fence,
.av-cx[data-av-cx-stage="2"] .av-cx__route {
	animation: none;
}

@keyframes av-cx-march {
	to {
		stroke-dashoffset: -48;
	}
}

@keyframes av-cx-wave {
	0% {
		opacity: 0.9;
		transform: scale(0.4);
	}

	100% {
		opacity: 0;
		transform: scale(2.4);
	}
}

/* ------------------------------------------------------------ Overlay order */

.av-services-page .av-cx__call {
	z-index: 3;
}

.av-cx__pin,
.av-services-page .av-cx__marker {
	z-index: 2;
}

/* The pin marks the anchor; the label's own anchor dot is not needed. */
.av-cx[data-av-cx="25d"] .av-cx__anchor {
	display: none;
}

/* ------------------------------------------------------------ System pins
   The always-visible markers (stages 02–03). Accent from .av-cx__call--*. */

.av-services-page .av-cx__pin {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	padding: 0;
	border: 1.5px solid var(--av-cx-a-line);
	border-radius: 50%;
	background-color: rgba(8, 20, 36, 0.84);
	box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.85);
	color: var(--av-cx-a);
	cursor: pointer;
	pointer-events: auto;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: opacity 0.3s ease, scale 0.3s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.av-cx__pin .av-svc-icon {
	width: 20px;
	height: 20px;
}

/* Touch: 48 px hit area around the 40 px pin. */
.av-cx__pin::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
}

.av-services-page .av-cx__pin.is-on {
	border-color: var(--av-cx-a);
}

.av-services-page .av-cx__pin:hover {
	scale: 1.08;
	border-color: var(--av-cx-a);
}

.av-services-page .av-cx__pin[aria-pressed="true"] {
	border-color: var(--av-cx-a);
	background-color: var(--av-cx-a);
	color: #07111f;
}

.av-services-page .av-cx__pin.is-dim {
	opacity: 0.5;
}

.av-services-page .av-cx__pin.is-hidden {
	opacity: 0;
	scale: 0.5;
	pointer-events: none;
}

.av-services-page .av-cx__pin:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	border-radius: 50%;
}

/* ------------------------------------------------------------ Device points */

.av-services-page .av-cx__point {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background-color: var(--av-cx-c);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--av-cx-c) 28%, transparent), 0 0 12px var(--av-cx-c);
	cursor: pointer;
	pointer-events: none;
	opacity: 0;
	scale: 0.4;
	transition: opacity 0.35s ease, scale 0.35s ease;
}

.av-cx[data-av-cx-stage="2"] .av-cx__point {
	--av-cx-c: var(--av-cx-design) !important;
}

.av-services-page .av-cx__point.is-on {
	pointer-events: auto;
	opacity: 1;
	scale: 1;
}

.av-services-page .av-cx__point.is-on.is-dim {
	opacity: 0.3;
}

.av-services-page .av-cx__point.is-on:hover,
.av-services-page .av-cx__point.is-on:focus-visible,
.av-services-page .av-cx__point.is-on[aria-expanded="true"] {
	scale: 1.4;
	opacity: 1;
}

.av-cx__point::before {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
}

.av-cx__point::after {
	content: "";
	position: absolute;
	inset: -4px;
	border: 2px solid var(--av-cx-c);
	border-radius: 50%;
	opacity: 0;
}

.av-cx__point.is-ping::after {
	animation: av-cx-ping 1.2s ease-out 2;
}

/* The data list of device texts is never shown. */
.av-cx__points {
	display: none;
}

/* ------------------------------------------------------------ Type */

.av-services-page .av-cx__step-title {
	font-size: 1.0625rem;
}

.av-services-page .av-cx__step-text {
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* Active stage circle in the stage accent. */
.av-cx[data-av-cx] .av-cx__step.is-on .av-cx__step-num {
	border-color: var(--av-cx-stage);
	background-color: color-mix(in srgb, var(--av-cx-stage) 32%, #0a1a2b);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--av-cx-stage) 22%, transparent), 0 0 22px color-mix(in srgb, var(--av-cx-stage) 45%, transparent);
}

.av-services-page .av-cx__tip {
	width: 300px;
	padding: 1rem 1.25rem;
	border-radius: var(--av-cx-r);
}

.av-services-page .av-cx__tip p {
	font-size: 0.9375rem;
	line-height: 1.5;
}

.av-services-page .av-cx .av-cx__tip .av-cx__tip-title {
	margin-bottom: 0.5rem;
	font-size: 1.0625rem;
}

.av-services-page .av-cx__tip-need span {
	min-height: 1.75rem;
	padding: 0 0.75rem;
	font-size: 0.8125rem;
}

.av-services-page .av-cx__call {
	gap: 0.75rem;
	padding: 0.5rem 1rem 0.5rem 0.5rem;
	border-radius: var(--av-cx-r);
}

.av-services-page .av-cx__call-title {
	font-size: 0.9375rem;
}

.av-services-page .av-cx__call-text {
	font-size: 0.8125rem;
}

/* ------------------------------------------------------------ Status panel */

.av-services-page .av-cx__hud {
	margin-top: 1rem;
	border-top: 2px solid var(--av-cx-stage);
	border-radius: var(--av-cx-r);
}

.av-services-page .av-cx .av-cx__hud-kicker {
	font-size: 0.75rem;
	color: var(--av-cx-stage);
}

.av-services-page .av-cx .av-cx__hud-count {
	font-size: 0.9375rem;
}

.av-services-page .av-cx__hud-count strong {
	font-size: 1.75rem;
}

.av-services-page .av-cx .av-cx__hud-text {
	font-size: 0.9375rem;
}

.av-services-page .av-cx .av-cx__hud-systems {
	font-size: 0.875rem;
}

.av-services-page .av-cx__feed li {
	font-size: 0.875rem;
}

/* ------------------------------------------------------------ Service cards
   Light: no panel fill, thin line, big icon on top; on — the system colour. */

.av-services-page .av-cx__cards {
	gap: 0.75rem;
	margin-top: 1rem;
}

.av-services-page .av-cx__card {
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto 1fr auto;
	grid-template-areas:
		"icon switch"
		"title title"
		"text text"
		"closes closes";
	gap: 0.5rem;
	padding: 1.25rem;
	border: 1px solid rgba(150, 175, 215, 0.14);
	border-radius: var(--av-cx-r);
	background-color: rgba(255, 255, 255, 0.025);
}

.av-services-page .av-cx__card:hover {
	border-color: rgba(150, 175, 215, 0.32);
	background-color: rgba(255, 255, 255, 0.04);
}

.av-services-page .av-cx__card.is-on {
	border-color: color-mix(in srgb, var(--av-cx-c) 55%, transparent);
	background-color: color-mix(in srgb, var(--av-cx-c) 7%, transparent);
}

.av-services-page .av-cx .av-cx__card-icon {
	grid-area: icon;
	margin-bottom: 0.25rem;
	opacity: 0.85;
}

.av-services-page .av-cx__card-icon .av-svc-icon {
	width: 2.5rem;
	height: 2.5rem;
}

.av-services-page .av-cx__card.is-on .av-cx__card-icon {
	color: var(--av-cx-c);
	opacity: 1;
}

.av-services-page .av-cx .av-cx__card-title {
	grid-area: title;
	align-self: end;
	font-size: 1.0625rem;
	font-weight: 600;
}

.av-services-page .av-cx .av-cx__switch {
	grid-area: switch;
	align-self: start;
}

.av-services-page .av-cx__card .av-cx__switch[aria-checked="true"] {
	border-color: var(--av-cx-c);
	background-color: color-mix(in srgb, var(--av-cx-c) 75%, #0a1a2b);
}

.av-services-page .av-cx .av-cx__card-text {
	grid-area: text;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.av-services-page .av-cx .av-cx__card-closes {
	grid-area: closes;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
}

/* Wide: the zoom buttons keep clear of the site's «Наверх» button. */
@media (min-width: 1200px) {
	.av-services-page .av-cx__tools {
		right: max(var(--av-cx-edge), 5.5rem);
	}
}

/* ------------------------------------------------------------ Narrow screens
   Controls bottom-left: clear of the site's «Наверх» button (bottom-right). */

@media (max-width: 1199px) {
	.av-services-page .av-cx__tools {
		right: auto;
		bottom: 0.75rem;
		left: var(--av-cx-edge);
	}
}

@media (max-width: 599px) {
	.av-services-page .av-cx__tool--reset span {
		display: none;
	}

	.av-services-page .av-cx__tool--reset {
		width: 2.75rem;
		padding: 0;
	}

	.av-services-page .av-cx__card {
		padding: 1rem 1.25rem;
	}

	.av-services-page .av-cx__card-icon .av-svc-icon {
		width: 2.25rem;
		height: 2.25rem;
	}
}

/* ------------------------------------------------------------ Motion */

@media (prefers-reduced-motion: reduce) {
	.av-cx__fence,
	.av-cx__route,
	.av-cx__comm,
	.av-cx__wave,
	.av-cx__ring--pulse {
		animation: none;
	}

	.av-cx__wave,
	.av-cx__ring--pulse {
		display: none;
	}

	.av-services-page .av-cx__point,
	.av-services-page .av-cx__pin,
	.av-cx__dim,
	.av-cx__truck {
		transition: none;
	}
}