/*
 * LANDING V2 — ЕДИНАЯ СИСТЕМА.
 * Радиальная схема: четыре рабочих модуля сходятся в единое ядро.
 */

.lp .lp-system {
	position: relative;
	overflow: hidden;
}

.lp .lp-system::before {
	position: absolute;
	inset: 0;
	pointer-events: none;
	content: '';
	background-image:
		linear-gradient(var(--lp-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--lp-line) 1px, transparent 1px);
	background-size: 2.75rem 2.75rem;
	opacity: 0.12;
	-webkit-mask-image: radial-gradient(circle at 68% 50%, #000, transparent 66%);
	mask-image: radial-gradient(circle at 68% 50%, #000, transparent 66%);
}

.lp .lp-system__draft {
	--lp-draft-line-y: 13%;
	--lp-draft-line-x: 4%;
	--lp-draft-line-w: min(28%, 29rem);
	--lp-draft-cross-x: 92%;
	--lp-draft-cross-y: 17%;
}

.lp .lp-system__inner {
	position: relative;
	z-index: 1;
}

.lp .lp-system__layout {
	display: grid;
	gap: clamp(3rem, 6vw, 7rem);
}

.lp .lp-system__intro {
	display: grid;
	align-content: start;
	gap: clamp(2rem, 4vw, 3.25rem);
}

/*
 * Заголовок держит ровно две строки макета. Переносы стоят в ACF, поэтому
 * кегль подобран так, чтобы самая длинная из них — «Один ответственный.» —
 * укладывалась в колонку целиком: иначе она ломается на третью строку и
 * двухчастная формула «одна система / один ответственный» перестаёт читаться.
 */
.lp .lp-system__title {
	max-width: none;
	font-size: clamp(2rem, 1.2rem + 1.9vw, 2.9rem);
	line-height: 0.98;
	text-wrap: initial;
}

.lp .lp-system__title-line {
	display: block;
}

.lp .lp-system__foot {
	position: relative;
	display: grid;
	justify-items: start;
	gap: 1.5rem;
	max-width: 29rem;
	padding-top: 1.65rem;
	border-top: 1px solid var(--lp-line-strong);
}

.lp .lp-system__foot::before {
	position: absolute;
	top: -0.25rem;
	left: 0;
	width: 0.5rem;
	height: 0.5rem;
	content: '';
	border: 1px solid var(--lp-crimson);
	border-radius: 50%;
	background: var(--lp-field);
}

.lp .lp-system__text {
	max-width: 27em;
}

/* Схема --------------------------------------------------------------- */

.lp .lp-system__scheme {
	position: relative;
	display: grid;
	gap: 1.5rem;
	min-width: 0;
}

.lp .lp-system__connections {
	display: none;
}

.lp .lp-system__hub {
	position: relative;
	display: grid;
	width: 8.5rem;
	aspect-ratio: 1;
	margin-inline: auto;
	place-items: center;
	border: 1px solid var(--lp-line-control);
	border-radius: 50%;
	background: var(--lp-field);
	color: var(--lp-ink);
}

.lp .lp-system__hub::before,
.lp .lp-system__hub::after {
	position: absolute;
	pointer-events: none;
	content: '';
	border-radius: 50%;
}

.lp .lp-system__hub::before {
	inset: 0.55rem;
	border: 1px dashed var(--lp-line-control);
}

.lp .lp-system__hub::after {
	inset: 1.05rem;
	border: 1px solid var(--lp-burgundy);
	opacity: 0.62;
}

/*
 * Внешнее кольцо ядра. В макете колец четыре: тонкое внешнее с зазором,
 * затем сплошное, пунктирное и бордовое. Четвёртое дорисовано тенью, чтобы
 * не заводить ради одной окружности лишний элемент в разметку.
 */
.lp .lp-system__hub {
	box-shadow:
		0 0 0 0.42rem var(--lp-field),
		0 0 0 calc(0.42rem + 1px) var(--lp-line-strong);
}

.lp .lp-system__hub span {
	position: relative;
	z-index: 1;
	max-width: 6ch;
	font-family: var(--lp-font-display);
	font-size: 1.25rem;
	font-weight: var(--lp-display-weight-soft);
	line-height: 0.95;
	text-align: center;
	text-transform: uppercase;
}

.lp .lp-system__rail {
	display: grid;
	gap: 1.25rem;
}

.lp .lp-system__node {
	display: grid;
	gap: 0.7rem;
	min-width: 0;
}

.lp .lp-system__node-label {
	letter-spacing: var(--lp-tracking-label);
	text-align: left;
}

/*
 * РАМА УЗЛА — ЧЕРТЁЖ, А НЕ ЭКРАН. В макете 03 у окон прямые углы и
 * прицельные уголки по периметру: это выкладка на планшете, а не физический
 * монитор, которому по DESIGN.md полагается скругление --lp-radius-frame.
 * Отсюда и overflow: visible — уголки вынесены за габарит рамы.
 */
.lp .lp-system__node-frame {
	position: relative;
	display: block;
	width: 100%;
	max-width: 20rem;
	border: 1px solid var(--lp-line-control);
	background: rgb(14 14 15 / 0.9);
	color: var(--lp-ink-muted);
	transition:
		border-color 220ms ease,
		color 220ms ease,
		transform 320ms var(--lp-ease-out);
}

/*
 * Четыре уголка одним псевдоэлементом: восемь несмасштабируемых полосок
 * фоном. Четыре отдельных элемента в разметке ради декора здесь не нужны —
 * читалке они всё равно не видны.
 */
.lp .lp-system__node-frame::after {
	--lp-corner: 0.85rem;

	position: absolute;
	inset: -0.55rem;
	pointer-events: none;
	content: '';
	background-image:
		linear-gradient(var(--lp-line-strong), var(--lp-line-strong)),
		linear-gradient(var(--lp-line-strong), var(--lp-line-strong)),
		linear-gradient(var(--lp-line-strong), var(--lp-line-strong)),
		linear-gradient(var(--lp-line-strong), var(--lp-line-strong)),
		linear-gradient(var(--lp-line-strong), var(--lp-line-strong)),
		linear-gradient(var(--lp-line-strong), var(--lp-line-strong)),
		linear-gradient(var(--lp-line-strong), var(--lp-line-strong)),
		linear-gradient(var(--lp-line-strong), var(--lp-line-strong));
	background-repeat: no-repeat;
	background-position:
		0 0, 0 0,
		100% 0, 100% 0,
		0 100%, 0 100%,
		100% 100%, 100% 100%;
	background-size:
		1px var(--lp-corner), var(--lp-corner) 1px,
		1px var(--lp-corner), var(--lp-corner) 1px,
		1px var(--lp-corner), var(--lp-corner) 1px,
		1px var(--lp-corner), var(--lp-corner) 1px;
}

.lp .lp-system__art {
	display: block;
	width: 100%;
	height: auto;
}

.lp .lp-system__art .is-signal {
	stroke: var(--lp-crimson);
}

.lp .lp-system__node--search {
	order: -1;
	justify-items: center;
}

.lp .lp-system__node--search .lp-system__node-frame {
	display: none;
}

.lp .lp-system__node--search .lp-system__node-label {
	color: var(--lp-crimson);
	text-align: center;
}

.lp .lp-system__node:not(.lp-system__node--search):hover .lp-system__node-frame {
	border-color: var(--lp-crimson);
	color: var(--lp-ink);
	transform: translateY(-0.25rem);
}

/* Обратный контур ------------------------------------------------------ */

.lp .lp-system__loop {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 0.25rem;
}

.lp .lp-system__loop-line {
	display: none;
}

/*
 * В макете подпись петли стоит в собственной рамке — она разрывает пунктир
 * обратной связи, а не лежит на нём. Без рамки штрих проходил насквозь и
 * подпись читалась как случайно попавший на линию текст.
 */
.lp .lp-system__loop-label {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.9rem;
	border: 1px solid var(--lp-burgundy);
	background: var(--lp-field);
}

@media (min-width: 64em) {
	.lp .lp-system__layout {
		grid-template-columns: minmax(24rem, 0.68fr) minmax(42rem, 1.5fr);
		align-items: center;
	}

	.lp .lp-system__scheme {
		display: block;
		min-height: 42rem;
	}

	/*
	 * Осевой крест через ядро — координатная разметка макета. Пунктир идёт
	 * дальше габаритов схемы влево и вправо, как на чертеже, поэтому линия
	 * вынесена за inset, а не нарисована рамкой.
	 */
	.lp .lp-system__scheme::before {
		position: absolute;
		top: 50%;
		right: -8vw;
		left: -8vw;
		z-index: 0;
		height: 1px;
		pointer-events: none;
		content: '';
		background: repeating-linear-gradient(to right, var(--lp-line-strong) 0 0.4rem, transparent 0.4rem 0.95rem);
		opacity: 0.7;
	}

	.lp .lp-system__scheme::after {
		position: absolute;
		top: 8%;
		bottom: 8%;
		left: 50%;
		z-index: 0;
		width: 1px;
		pointer-events: none;
		content: '';
		background: repeating-linear-gradient(to bottom, var(--lp-line-strong) 0 0.4rem, transparent 0.4rem 0.95rem);
		opacity: 0.55;
	}

	.lp .lp-system__connections {
		position: absolute;
		inset: 0;
		z-index: 0;
		display: block;
		width: 100%;
		height: 100%;
		overflow: visible;
		fill: var(--lp-crimson);
		stroke: var(--lp-crimson);
		stroke-width: 1.15;
		opacity: 0.78;
		vector-effect: non-scaling-stroke;
	}

	.lp .lp-system__connections path {
		fill: none;
		vector-effect: non-scaling-stroke;
	}

	.lp .lp-system__connections .is-source {
		stroke-dasharray: 0.7 0.9;
	}

	.lp .lp-system__hub {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 3;
		width: clamp(10rem, 13vw, 15rem);
		margin: 0;
		transform: translate(-50%, -50%);
	}

	.lp .lp-system__hub span {
		font-size: clamp(1.3rem, 1.55vw, 2rem);
	}

	.lp .lp-system__rail {
		position: absolute;
		inset: 0;
		display: block;
	}

	.lp .lp-system__node {
		position: absolute;
		z-index: 2;
		width: clamp(11rem, 15vw, 16rem);
	}

	.lp .lp-system__node-label {
		text-align: center;
	}

	.lp .lp-system__node-frame {
		max-width: none;
		background: var(--lp-field);
	}

	.lp .lp-system__node--search {
		top: 0;
		left: 50%;
		width: auto;
		transform: translateX(-50%);
	}

	.lp .lp-system__node--page {
		top: 2.75rem;
		left: 1.5%;
	}

	.lp .lp-system__node--ads {
		top: 2.75rem;
		right: 1.5%;
	}

	.lp .lp-system__node--chart {
		bottom: 4.5rem;
		left: 1.5%;
	}

	.lp .lp-system__node--done {
		right: 1.5%;
		bottom: 4.5rem;
	}

	.lp .lp-system__loop {
		position: absolute;
		right: 20%;
		bottom: 0;
		left: 20%;
		z-index: 2;
		padding-top: 2.4rem;
	}

	.lp .lp-system__loop-line {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		display: block;
		height: 2.45rem;
		border: 1px dashed var(--lp-burgundy);
		border-top: 0;
	}

	.lp .lp-system__loop-line::before,
	.lp .lp-system__loop-line::after {
		position: absolute;
		top: -0.15rem;
		width: 0.42rem;
		height: 0.42rem;
		content: '';
		border-top: 1px solid var(--lp-burgundy);
		border-left: 1px solid var(--lp-burgundy);
	}

	.lp .lp-system__loop-line::before {
		left: 0;
		transform: translateX(-50%) rotate(45deg);
	}

	.lp .lp-system__loop-line::after {
		right: 0;
		transform: translateX(50%) rotate(-45deg);
	}
}

@media (min-width: 64em) and (max-width: 78em) {
	.lp .lp-system__layout {
		grid-template-columns: minmax(17rem, 0.58fr) minmax(38rem, 1.42fr);
		gap: 3rem;
	}

	.lp .lp-system__scheme {
		min-height: 37rem;
	}

	.lp .lp-system__node {
		width: 11.5rem;
	}
}

@media (max-width: 63.99em) {
	.lp .lp-system__scheme {
		padding-top: 0.5rem;
	}

	.lp .lp-system__rail {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp .lp-system__node--search {
		grid-column: 1 / -1;
	}
}

@media (max-width: 39.99em) {
	.lp .lp-system__rail {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp .lp-system__node-frame {
		max-width: none;
	}
}

/* Появление ----------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.lp-js .lp-system__hub {
		opacity: 0;
		transition:
			opacity 520ms var(--lp-ease-out) 120ms,
			transform 620ms var(--lp-ease-out) 120ms;
	}

	.lp-js .lp-system.is-visible .lp-system__hub {
		opacity: 1;
	}

	@media (min-width: 64em) {
		.lp-js .lp-system__hub {
			transform: translate(-50%, -50%) scale(0.82);
		}

		.lp-js .lp-system.is-visible .lp-system__hub {
			transform: translate(-50%, -50%) scale(1);
		}
	}

	.lp-js .lp-system__node {
		opacity: 0;
		transform: translateY(0.8rem);
		transition:
			opacity 520ms var(--lp-ease-out) calc(180ms + var(--lp-node-i, 0) * 90ms),
			transform 520ms var(--lp-ease-out) calc(180ms + var(--lp-node-i, 0) * 90ms);
	}

	.lp-js .lp-system.is-visible .lp-system__node {
		opacity: 1;
		transform: none;
	}

	@media (min-width: 64em) {
		.lp-js .lp-system__node--search,
		.lp-js .lp-system.is-visible .lp-system__node--search {
			transform: translateX(-50%);
		}
	}
}

/*
 * СВОЙ ЗНАЧОК УЗЛА. Загруженный владельцем файл встаёт на место чертежа
 * и получает те же габариты: рама узла рассчитана на квадрат 160×120,
 * и картинка обязана лечь в него, а не растянуть раму под себя.
 */
.lp .lp-system__node-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 160 / 120;
	object-fit: contain;
	padding: 12%;
}