/*
 * ПОСАДОЧНАЯ, БЛОК 4 — СОСТАВ ЗАПУСКА.
 * Макет: output/design/landing-v2/all-screens/04-scope.png.
 * Зависит от landing/tokens.css и landing/base.css.
 *
 * КОМПОЗИЦИЯ. Слева заголовок с пояснением и кнопкой, справа круговая схема:
 * четыре сектора вокруг ядра «Единый запуск», по бокам — выноски этапов.
 *
 * КАК СОБРАНО КОЛЕСО. Сектор — это квадрат в четверть колеса, у которого
 * скруглён ровно один, внешний угол: получается честная четверть круга,
 * а её дуга — обычная граница, поэтому она масштабируется вместе с блоком
 * и не требует ни SVG, ни картинки. Крест радиусов и ядро нарисованы
 * отдельно и лежат поверх секторов.
 *
 * ПОЧЕМУ КОЛЕСО ТОЛЬКО НА ШИРОКОМ ЭКРАНЕ. Ниже 64em выносок негде поставить
 * по бокам, а колесо без них теряет половину смысла: этап читается только
 * вместе с уточнением. Поэтому на узком экране остаётся перечень выносок —
 * то же содержание, честно поставленное в столбик.
 */

.lp .lp-scope__draft {
	--lp-draft-line-y: 12%;
	--lp-draft-line-x: 62%;
	--lp-draft-line-w: min(24%, 26rem);
	--lp-draft-cross-x: 93%;
	--lp-draft-cross-y: 6%;
}

.lp .lp-scope__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
}

/* ---------------------------------------------------------------------- */
/* Заголовок и пояснение                                                  */
/* ---------------------------------------------------------------------- */

.lp .lp-scope__title {
	max-width: none;
	font-size: clamp(2.35rem, 1.3rem + 3.4vw, 4.6rem);
	line-height: 0.94;
	text-wrap: initial; /* переносы задаёт редактор в ACF */
}

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

.lp .lp-scope__text {
	margin-top: var(--lp-space-lg);
	max-width: 24em;
}

.lp .lp-scope__link {
	margin-top: var(--lp-space-xl);
}

/* ---------------------------------------------------------------------- */
/* Выноски этапов                                                         */
/* ---------------------------------------------------------------------- */

.lp .lp-scope__callouts {
	display: grid;
	gap: clamp(1rem, 2vw, 1.75rem);
}

/*
 * Выноска — карточка со срезанным углом, как в макете. Срез смотрит в
 * сторону колеса, поэтому сторона среза задаётся не здесь, а в колоночных
 * правилах ниже.
 */
.lp .lp-scope__callout {
	--lp-callout-notch: 0.85rem;

	position: relative;
	display: grid;
	gap: 0.3rem;
	padding: 1rem 1.25rem 1.15rem;
	border: 1px solid var(--lp-line-strong);
	background: var(--lp-field);
}

.lp .lp-scope__callout-num {
	font-family: var(--lp-font-display);
	font-size: 1.35rem;
	font-weight: var(--lp-display-weight);
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--lp-crimson);
}

.lp .lp-scope__callout-title {
	font-size: clamp(0.95rem, 0.88rem + 0.24vw, 1.1rem);
	letter-spacing: var(--lp-tracking-label);
}

.lp .lp-scope__callout-meta {
	font-size: var(--lp-text-sm);
	line-height: 1.4;
	color: var(--lp-ink-muted);
}

/* ---------------------------------------------------------------------- */
/* Колесо                                                                 */
/* ---------------------------------------------------------------------- */

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

@media (min-width: 64em) {

	.lp .lp-scope__inner {
		grid-template-columns: minmax(18rem, 0.62fr) minmax(40rem, 2.3fr);
		align-items: center;
		gap: clamp(2rem, 3vw, 4.5rem);
	}

	.lp .lp-scope__diagram {
		--lp-wheel: clamp(22rem, 33vw, 36rem);

		position: relative;
	}

	/*
	 * Выноски стоят двумя столбцами, а колесо лежит в просвете между ними.
	 * Просвет — это column-gap, а не третья колонка: колесо выведено из
	 * потока, и держать под него ячейку сетки было бы враньём разметки.
	 */
	.lp .lp-scope__callouts {
		grid-template-columns: repeat(2, minmax(9rem, 1fr));
		column-gap: calc(var(--lp-wheel) + clamp(3rem, 6vw, 7rem));
		row-gap: clamp(8rem, 18vw, 16rem);
		align-items: center;
	}

	.lp .lp-scope__callout:nth-child(1) { grid-area: 1 / 1; }
	.lp .lp-scope__callout:nth-child(2) { grid-area: 1 / 2; }
	.lp .lp-scope__callout:nth-child(3) { grid-area: 2 / 2; }
	.lp .lp-scope__callout:nth-child(4) { grid-area: 2 / 1; }

	/* Пятый этап и дальше — под колесом, во всю ширину: сектора ему не досталось. */
	.lp .lp-scope__callout:nth-child(n + 5) {
		grid-column: 1 / -1;
	}

	/* Левый столбец: срез и провод смотрят вправо, к колесу. */
	.lp .lp-scope__callout:nth-child(1),
	.lp .lp-scope__callout:nth-child(4) {
		clip-path: polygon(
			0 0,
			100% 0,
			100% calc(100% - var(--lp-callout-notch)),
			calc(100% - var(--lp-callout-notch)) 100%,
			0 100%
		);
	}

	.lp .lp-scope__callout:nth-child(2),
	.lp .lp-scope__callout:nth-child(3) {
		clip-path: polygon(
			0 0,
			100% 0,
			100% 100%,
			var(--lp-callout-notch) 100%,
			0 calc(100% - var(--lp-callout-notch))
		);
	}

	/*
	 * Провод от выноски к колесу. Точка на конце — тот же координатный знак,
	 * что и в остальных блоках: линия обрывается не в пустоте, а в замере.
	 */
	.lp .lp-scope__callout::after {
		position: absolute;
		top: 50%;
		width: clamp(1.5rem, 3vw, 3.25rem);
		height: 1px;
		content: '';
		background: var(--lp-crimson);
	}

	.lp .lp-scope__callout:nth-child(1)::after,
	.lp .lp-scope__callout:nth-child(4)::after {
		left: 100%;
	}

	.lp .lp-scope__callout:nth-child(2)::after,
	.lp .lp-scope__callout:nth-child(3)::after {
		right: 100%;
	}

	.lp .lp-scope__callout:nth-child(n + 5)::after {
		content: none;
	}

	.lp .lp-scope__wheel {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
		display: block;
		width: var(--lp-wheel);
		aspect-ratio: 1;
		transform: translate(-50%, -50%);
	}

	/* Крест радиусов. Две линии поверх секторов, но под ядром. */
	.lp .lp-scope__wheel::before,
	.lp .lp-scope__wheel::after {
		position: absolute;
		z-index: 2;
		pointer-events: none;
		content: '';
		background: var(--lp-line-control);
	}

	.lp .lp-scope__wheel::before {
		top: 0;
		bottom: 0;
		left: 50%;
		width: 1px;
	}

	.lp .lp-scope__wheel::after {
		top: 50%;
		right: 0;
		left: 0;
		height: 1px;
	}

	/* Внешние кольца чертежа — сплошное и пунктирное, как в макете. */
	.lp .lp-scope__ring {
		position: absolute;
		inset: clamp(-1.75rem, -2vw, -1.1rem);
		border: 1px solid var(--lp-line-strong);
		border-radius: 50%;
	}

	.lp .lp-scope__ring::before {
		position: absolute;
		inset: 0.65rem;
		content: '';
		border: 1px dashed var(--lp-line);
		border-radius: 50%;
	}

	/*
	 * СЕКТОР — четверть круга. Скруглён ровно внешний угол, дуга рисуется
	 * границами по двум внешним сторонам. Прямые стороны сходятся в центре
	 * колеса и границ не несут: крест радиусов нарисован отдельно, иначе
	 * у соседних секторов линии удвоились бы.
	 */
	/*
	 * Заливка сектора выражена одной величиной — долей бордового в поле.
	 * Так у неё ровно один владелец: первый сектор задаёт свою долю, наведение
	 * поднимает её любому. Два независимых объявления background тут не ужились
	 * бы — то, что ниже, отменяло бы первое, и подсветка гасила бы выделение
	 * первого этапа вместо того, чтобы его усиливать.
	 */
	.lp .lp-scope__sector {
		--lp-sector-fill: 0%;

		position: absolute;
		width: 50%;
		height: 50%;
		background: color-mix(in srgb, var(--lp-burgundy-panel) var(--lp-sector-fill), transparent);
		transform-origin: var(--lp-origin, center);
	}

	.lp .lp-scope__sector--1 {
		/*
		 * Точка вращения — угол сектора, сходящийся в центре колеса. Она
		 * нужна дважды: по ней сектор доворачивается при появлении и по ней
		 * же отходит наружу под курсором. Держать её отдельной переменной
		 * дешевле, чем повторять в каждом из этих правил.
		 */
		--lp-origin: 100% 100%;

		top: 0;
		left: 0;
		border-top: 1px solid var(--lp-crimson);
		border-left: 1px solid var(--lp-crimson);
		border-radius: 100% 0 0;
		/* Первый этап выделен заливкой — с него начинается запуск. */
		--lp-sector-fill: 42%;
	}

	.lp .lp-scope__sector--2 {
		--lp-origin: 0 100%;

		top: 0;
		right: 0;
		border-top: 1px solid var(--lp-crimson);
		border-right: 1px solid var(--lp-crimson);
		border-radius: 0 100% 0 0;
	}

	.lp .lp-scope__sector--3 {
		--lp-origin: 0 0;

		right: 0;
		bottom: 0;
		border-right: 1px solid var(--lp-crimson);
		border-bottom: 1px solid var(--lp-crimson);
		border-radius: 0 0 100%;
	}

	.lp .lp-scope__sector--4 {
		--lp-origin: 100% 0;

		bottom: 0;
		left: 0;
		border-bottom: 1px solid var(--lp-crimson);
		border-left: 1px solid var(--lp-crimson);
		border-radius: 0 0 0 100%;
	}

	/*
	 * Содержимое сектора прижато к ядру: у внешней дуги места нет — там
	 * четверть круга сходит на нет, и строка в два слова туда не встаёт.
	 */
	/*
	 * Содержимое стоит в геометрическом центре четверти. Это единственная
	 * точка, которая гарантированно свободна: ядро закрывает всё ближе к
	 * центру колеса, а у внешней дуги четверть сходит на нет и строка в два
	 * слова туда не встаёт. Привязка к углам такой гарантии не даёт —
	 * подпись уезжала под ядро, стоило ядру чуть подрасти.
	 */
	.lp .lp-scope__sector-inner {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		padding: 10%;
	}

	/* У нижних секторов знак должен смотреть наружу, поэтому порядок обратный. */
	.lp .lp-scope__sector--3 .lp-scope__sector-inner,
	.lp .lp-scope__sector--4 .lp-scope__sector-inner {
		flex-direction: column-reverse;
	}

	.lp .lp-scope__sector-art {
		display: block;
		width: clamp(2.75rem, 4vw, 4.25rem);
		color: var(--lp-ink);
	}

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

	.lp .lp-scope__sector-copy {
		display: flex;
		align-items: baseline;
		gap: 0.6rem;
	}

	.lp .lp-scope__sector-num {
		font-family: var(--lp-font-display);
		font-size: clamp(1.6rem, 2.2vw, 2.35rem);
		font-weight: var(--lp-display-weight);
		line-height: 1;
		color: var(--lp-ink);
	}

	.lp .lp-scope__sector-title {
		max-width: 10ch;
		font-family: var(--lp-font-display);
		font-size: clamp(0.85rem, 0.95vw, 1.05rem);
		font-weight: var(--lp-display-weight-soft);
		line-height: 1.15;
		letter-spacing: var(--lp-tracking-label);
		text-transform: uppercase;
		color: var(--lp-ink);
	}

	/*
	 * ЯДРО. Перекрывает крест радиусов и середину секторов — иначе линии
	 * сошлись бы точкой под подписью. Отсюда и непрозрачный фон поля.
	 */
	.lp .lp-scope__hub {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 3;
		display: grid;
		width: 38%;
		aspect-ratio: 1;
		place-items: center;
		border: 1px solid var(--lp-line-control);
		border-radius: 50%;
		background: var(--lp-field);
		transform: translate(-50%, -50%);
	}

	.lp .lp-scope__hub::before {
		position: absolute;
		inset: 0.5rem;
		content: '';
		border: 1px dashed var(--lp-line-strong);
		border-radius: 50%;
	}

	.lp .lp-scope__hub span {
		position: relative;
		z-index: 1;
		max-width: 7ch;
		font-family: var(--lp-font-display);
		font-size: clamp(1.15rem, 1.5vw, 1.75rem);
		font-weight: var(--lp-display-weight);
		line-height: 0.95;
		text-align: center;
		text-transform: uppercase;
		color: var(--lp-ink);
	}
}

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

@media (prefers-reduced-motion: no-preference) {
	.lp-js .lp-scope__callout {
		--lp-callout-delay: calc(var(--lp-i, 0) * 110ms);

		opacity: 0;
		transform: translateY(0.9rem);
		transition:
			opacity var(--lp-duration-slow) var(--lp-ease-out) var(--lp-callout-delay),
			transform var(--lp-duration-slow) var(--lp-ease-out) var(--lp-callout-delay);
	}

	.lp-js .lp-scope.is-visible .lp-scope__callout {
		opacity: 1;
		transform: none;
	}
}


/* ====================================================================== */
/* КОЛЕСО: НАВЕДЕНИЕ И ПОЯВЛЕНИЕ                                          */
/*                                                                        */
/* СЕКТОР И ЕГО ВЫНОСКА ПОДСВЕЧИВАЮТСЯ ВМЕСТЕ, с какой стороны ни наводи. */
/* Это не украшение: в колесе четыре сектора и четыре выноски по бокам,   */
/* и связь между ними держится только номером. Пока подсвечивалось что-то */
/* одно, эту связь приходилось искать глазами.                            */
/*                                                                        */
/* Связь сделана на :has() у общего родителя, а не скриптом: выноска стоит */
/* в разметке ПОСЛЕ колеса, и обратной связи «предыдущий сосед» в CSS нет. */
/* Браузер без :has() просто не свяжет пару — подсветится наведённое,      */
/* и блок останется рабочим.                                              */
/* ====================================================================== */

@media (min-width: 64em) {

	/*
	 * Наведение поднимает долю заливки, отводит сектор наружу от ядра и
	 * добавляет свечение по дуге. Отвод считается от той же точки вращения,
	 * что и доворот при появлении, поэтому сектор отходит строго по радиусу,
	 * а не вбок.
	 */
	.lp .lp-scope__sector:hover,
	.lp .lp-scope__diagram:has(.lp-scope__callout:nth-child(1):hover) .lp-scope__sector--1,
	.lp .lp-scope__diagram:has(.lp-scope__callout:nth-child(2):hover) .lp-scope__sector--2,
	.lp .lp-scope__diagram:has(.lp-scope__callout:nth-child(3):hover) .lp-scope__sector--3,
	.lp .lp-scope__diagram:has(.lp-scope__callout:nth-child(4):hover) .lp-scope__sector--4 {
		--lp-sector-fill: 64%;

		z-index: 2;
		scale: 1.035;
		box-shadow: 0 0 2.5rem color-mix(in srgb, var(--lp-crimson) 22%, transparent);
	}

	/* Знак и номер этапа набирают яркость вместе с сектором. */
	.lp .lp-scope__sector:hover .lp-scope__sector-art,
	.lp .lp-scope__diagram:has(.lp-scope__callout:nth-child(1):hover) .lp-scope__sector--1 .lp-scope__sector-art,
	.lp .lp-scope__diagram:has(.lp-scope__callout:nth-child(2):hover) .lp-scope__sector--2 .lp-scope__sector-art,
	.lp .lp-scope__diagram:has(.lp-scope__callout:nth-child(3):hover) .lp-scope__sector--3 .lp-scope__sector-art,
	.lp .lp-scope__diagram:has(.lp-scope__callout:nth-child(4):hover) .lp-scope__sector--4 .lp-scope__sector-art {
		scale: 1.08;
	}

	.lp .lp-scope__sector:hover .lp-scope__sector-num,
	.lp .lp-scope__diagram:has(.lp-scope__callout:nth-child(1):hover) .lp-scope__sector--1 .lp-scope__sector-num,
	.lp .lp-scope__diagram:has(.lp-scope__callout:nth-child(2):hover) .lp-scope__sector--2 .lp-scope__sector-num,
	.lp .lp-scope__diagram:has(.lp-scope__callout:nth-child(3):hover) .lp-scope__sector--3 .lp-scope__sector-num,
	.lp .lp-scope__diagram:has(.lp-scope__callout:nth-child(4):hover) .lp-scope__sector--4 .lp-scope__sector-num {
		color: var(--lp-crimson);
	}

	/* Обратная сторона пары: наведение на сектор поднимает его выноску. */
	.lp .lp-scope__callout:hover,
	.lp .lp-scope__diagram:has(.lp-scope__sector--1:hover) .lp-scope__callout:nth-child(1),
	.lp .lp-scope__diagram:has(.lp-scope__sector--2:hover) .lp-scope__callout:nth-child(2),
	.lp .lp-scope__diagram:has(.lp-scope__sector--3:hover) .lp-scope__callout:nth-child(3),
	.lp .lp-scope__diagram:has(.lp-scope__sector--4:hover) .lp-scope__callout:nth-child(4) {
		border-color: var(--lp-crimson);
		background: color-mix(in srgb, var(--lp-burgundy-panel) 26%, var(--lp-field));
	}

	.lp .lp-scope__sector-art,
	.lp .lp-scope__sector-num,
	.lp .lp-scope__callout {
		transform-origin: center;
	}
}

@media (prefers-reduced-motion: no-preference) {
	@media (min-width: 64em) {

		/*
		 * ПОЯВЛЕНИЕ КОЛЕСА. Кольца проступают, секторы доворачиваются к своим
		 * местам вокруг ядра, ядро встаёт последним — колесо собирается,
		 * а не возникает целиком.
		 *
		 * Поворот и увеличение разведены по отдельным свойствам rotate и
		 * scale, а не сложены в один transform. Иначе они делили бы один
		 * переход: доворот при появлении длинный, отвод под курсором должен
		 * быть коротким, и в общем transform один из них всегда оказывался
		 * бы неправильной длительности.
		 */
		.lp-js .lp-scope__ring {
			opacity: 0;
			scale: 0.92;
			transition:
				opacity 620ms var(--lp-ease-out),
				scale 620ms var(--lp-ease-out);
		}

		.lp-js .lp-scope.is-visible .lp-scope__ring {
			opacity: 1;
			scale: 1;
		}

		.lp-js .lp-scope__sector {
			opacity: 0;
			rotate: -9deg;
			transition:
				opacity 620ms var(--lp-ease-out) var(--lp-sector-delay, 0ms),
				rotate 620ms var(--lp-ease-out) var(--lp-sector-delay, 0ms),
				scale 240ms var(--lp-ease),
				background-color 240ms var(--lp-ease),
				box-shadow 240ms var(--lp-ease);
		}

		.lp-js .lp-scope.is-visible .lp-scope__sector {
			opacity: 1;
			rotate: 0deg;
		}

		.lp-js .lp-scope__sector--1 { --lp-sector-delay: 120ms; }
		.lp-js .lp-scope__sector--2 { --lp-sector-delay: 200ms; }
		.lp-js .lp-scope__sector--3 { --lp-sector-delay: 280ms; }
		.lp-js .lp-scope__sector--4 { --lp-sector-delay: 360ms; }

		/* Содержимое сектора проступает, когда сектор уже встал на место. */
		.lp-js .lp-scope__sector-inner {
			opacity: 0;
			transition: opacity 460ms var(--lp-ease-out) calc(var(--lp-sector-delay, 0ms) + 220ms);
		}

		.lp-js .lp-scope.is-visible .lp-scope__sector-inner {
			opacity: 1;
		}

		/*
		 * Ядро держит собственный transform: центрирование через
		 * translate(-50%, -50%) обязано остаться в нём. Отдельное свойство
		 * scale применилось бы РАНЬШЕ transform и сместило бы ядро с центра.
		 */
		.lp-js .lp-scope__hub {
			opacity: 0;
			transform: translate(-50%, -50%) scale(0.82);
			transition:
				opacity 520ms var(--lp-ease-out) 420ms,
				transform 520ms var(--lp-ease-out) 420ms;
		}

		.lp-js .lp-scope.is-visible .lp-scope__hub {
			opacity: 1;
			transform: translate(-50%, -50%);
		}

		/* Плавность наведения у знака, номера и выноски. */
		.lp .lp-scope__sector-art {
			transition: scale 240ms var(--lp-ease);
		}

		.lp .lp-scope__sector-num {
			transition: color 240ms var(--lp-ease);
		}

		.lp .lp-scope__callout {
			transition:
				opacity var(--lp-duration-slow) var(--lp-ease-out) var(--lp-callout-delay, 0ms),
				transform var(--lp-duration-slow) var(--lp-ease-out) var(--lp-callout-delay, 0ms),
				border-color 240ms var(--lp-ease),
				background-color 240ms var(--lp-ease);
		}
	}
}

/*
 * СВОЙ ЗНАЧОК СЕКТОРА. Занимает то же место, что и чертёж: сектор — четверть
 * круга, и место под знак в нём ровно одно.
 */
.lp .lp-scope__sector-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
}