/*
 * LANDING V2 — ДО ЗАПУСКА, ТРИ ПОЛОСЫ (вариант блока «До запуска»).
 * Макет: output/design/landing-v2/all-screens/08-request-to-lead-v4-no-numbers.png.
 *
 * КОНТУР ОБРЕЗАННОЙ ФИГУРЫ РИСУЕТСЯ ДВУМЯ СЛОЯМИ. clip-path срезает и
 * border, поэтому цвет линии лежит на внешней полосе, а заливка — на
 * внутренней, отступившей на толщину линии. Один пиксель отступа и есть
 * видимый контур.
 *
 * ГЕОМЕТРИЯ СТЫКОВ СЧИТАЕТСЯ, А НЕ ПОДБИРАЕТСЯ. Полосы наезжают друг на
 * друга ровно на глубину выреза, поэтому стык k-й полосы стоит в точке
 * k·(ширина полосы) − (k−1)·(вырез). Красная линия с точками берёт те же
 * числа и попадает в стыки при любом числе полос.
 */

.lp .lp-request-v4 {
	--lp-notch: clamp(2rem, 1rem + 3.5vw, 5.5rem);
	/*
	 * ПОЛОСА ОБЯЗАНА БЫТЬ ВИДНА КАК ФИГУРА. Раньше её заливка совпадала
	 * с фоном секции, а контур брал самую тихую линию темы: на экране
	 * оставалась одна красная стрелка в пустоте, и цепочка из трёх шагов
	 * не читалась вовсе — блок рассказывал путь, показывая только середину.
	 * Поэтому обычная полоса стоит на приподнятой поверхности, а её контур
	 * взят на ступень светлее линий разделов.
	 */
	--lp-band-line: var(--lp-line-control);
	--lp-band-fill: var(--lp-frame-surface);
	position: relative;
	overflow-x: clip;
}

/* --- Шапка ------------------------------------------------------------- */

.lp .lp-request-v4__head {
	display: grid;
	gap: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
	margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}

.lp .lp-request-v4__eyebrow {
	margin: 0;
}

/*
 * Заголовок и пояснение стоят рядом и разделены вертикальной линией — она
 * же граница колонок. На узком экране колонки складываются, и линия уходит
 * вместе с ними: висящая под заголовком чёрточка не значит ничего.
 */
.lp .lp-request-v4__head-row {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 22rem);
	gap: clamp(1.25rem, 0.6rem + 2vw, 2.75rem);
	align-items: start;
	justify-content: start;
}

.lp .lp-request-v4__title {
	max-width: none;
	margin: 0;
	font-size: clamp(2rem, 1.1rem + 3.2vw, 3.75rem);
	line-height: 0.94;
	text-transform: uppercase;
	text-wrap: initial;
}

.lp .lp-request-v4__title-line {
	display: block;
}

.lp .lp-request-v4__text {
	margin: 0;
	padding-left: clamp(1.25rem, 0.6rem + 2vw, 2.75rem);
	color: var(--lp-ink-muted);
	/*
	 * Линия взята на ступень светлее линий разделов: она стоит не между
	 * секциями, а между заголовком и пояснением, и на этом расстоянии
	 * самая тихая линия темы просто не видна — разделение пропадало.
	 */
	border-left: 1px solid var(--lp-line-control);
}

/* --- Полосы ------------------------------------------------------------ */

.lp .lp-request-v4__bands {
	/*
	 * Ширина ряда повторяет .lp-container: те же поля по краям и тот же
	 * предел в 1680 пикселей. Иначе за этим пределом полосы уезжали бы
	 * шире заголовка блока и всех соседних секций.
	 *
	 * Поле по краям задано ШИРИНОЙ и внешним отступом, а не внутренним:
	 * стыки полос считаются в процентах от этого блока, а процент у
	 * внутреннего отступа брался бы от всей ширины вместе с полями —
	 * красная линия промахивалась бы мимо стыков тем сильнее, чем шире
	 * экран.
	 */
	position: relative;
	width: calc(100% - var(--lp-gutter) * 2);
	max-width: calc(var(--lp-container) - var(--lp-gutter) * 2);
	margin-inline: auto;
}

.lp .lp-request-v4__list {
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp .lp-request-v4__band {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	min-width: 0;
	/*
	 * Высота задана фигурой, а не текстом: остриё должно читаться как
	 * стрелка, а не как скошенный уголок. Но и запаса сверх этого нет —
	 * при выравнивании по верху лишняя высота становится пустым низом.
	 */
	min-height: clamp(11rem, 8.5rem + 8vw, 15.5rem);
	padding: 1px; /* и есть толщина контура — заливка отступает на него */
	background-color: var(--lp-band-line);
	clip-path: polygon(
		0 0,
		calc(100% - var(--lp-notch)) 0,
		100% 50%,
		calc(100% - var(--lp-notch)) 100%,
		0 100%
	);
}

/*
 * Вторая и последующие полосы въезжают в вырез предыдущей: отрицательное
 * поле ровно на глубину выреза. Их левый край при этом сам становится
 * стрелкой — иначе они закрыли бы остриё соседа прямоугольником.
 */
.lp .lp-request-v4__band + .lp-request-v4__band {
	margin-left: calc(var(--lp-notch) * -1);
	clip-path: polygon(
		0 0,
		calc(100% - var(--lp-notch)) 0,
		100% 50%,
		calc(100% - var(--lp-notch)) 100%,
		0 100%,
		var(--lp-notch) 50%
	);
}

/* Последняя полоса никуда не ведёт — её правый край остаётся прямым. */
.lp .lp-request-v4__band:last-child {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--lp-notch) 50%);
}

.lp .lp-request-v4__band:only-child {
	clip-path: none;
}

.lp .lp-request-v4__band.is-featured {
	--lp-band-line: var(--lp-crimson);
	--lp-band-fill: var(--lp-burgundy-panel);

	z-index: 2;
	/*
	 * Средняя полоса лежит ПОВЕРХ соседних — вырезы соседей уходят под неё.
	 * Тень делает это положение видимым: без неё три плоскости одной
	 * высоты, и наезд читается как ошибка вёрстки, а не как порядок шагов.
	 */
	filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.55));
}

/*
 * СОДЕРЖИМОЕ ПОЛОС ВЫРОВНЕНО ПО ВЕРХУ, А НЕ ПО ЦЕНТРУ. При центрировании
 * высота подписи решала, где встанет название: полоса с двухстрочным
 * пояснением сдвигала своё название вверх, соседняя с однострочным — вниз,
 * и три названия стояли по трём разным уровням. Читатель видит в этом
 * небрежность, а не смысл: шаги равноправны и обязаны начинаться на одной
 * линии при любой длине подписей.
 */
.lp .lp-request-v4__band-inner {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: clamp(0.75rem, 1.5vw, 1.4rem);
	width: 100%;
	height: 100%;
	padding:
		clamp(1.5rem, 3vw, 2.5rem)
		clamp(1.5rem, 3vw, 3rem)
		clamp(1.5rem, 3vw, 2.5rem)
		calc(var(--lp-notch) + clamp(1rem, 2vw, 2rem));
	background-color: var(--lp-band-fill);
	clip-path: inherit;
}

/* Первой полосе нечего обходить слева: вырез там — у соседей, а не у неё. */
.lp .lp-request-v4__band:first-child .lp-request-v4__band-inner {
	padding-left: clamp(1.5rem, 3vw, 3rem);
}

/*
 * СВЕТ ПАДАЕТ СВЕРХУ-СЛЕВА — как на всех плоскостях страницы. Без этой
 * кромки три полосы читались плоскими заливками одного тона, и наезд
 * средней на соседние было не с чем сравнивать: не видно, что лежит выше.
 */
.lp .lp-request-v4__band:not(.is-featured) .lp-request-v4__band-inner {
	background-image: linear-gradient(
		158deg,
		color-mix(in srgb, var(--lp-ink) 7%, transparent),
		transparent 42%
	);
}

/*
 * Последняя полоса — конец пути, и её правый край единственный прямой.
 * Красная кромка отмечает финал так же, как этикетка отмечает начало;
 * без неё цепочка просто обрывалась в темноте.
 */
.lp .lp-request-v4__band:last-child:not(:only-child) .lp-request-v4__band-inner {
	border-right: 2px solid var(--lp-crimson);
}

.lp .lp-request-v4__band.is-featured .lp-request-v4__band-inner {
	background-image: linear-gradient(
		120deg,
		color-mix(in srgb, var(--lp-burgundy-panel) 100%, transparent),
		color-mix(in srgb, var(--lp-burgundy) 42%, var(--lp-burgundy-panel))
	);
}

.lp .lp-request-v4__band-title {
	margin: 0;
	font-size: clamp(1.25rem, 0.85rem + 1.4vw, 2.15rem);
	line-height: 0.96;
	text-transform: uppercase;
}

.lp .lp-request-v4__band-title-line {
	display: block;
}

/*
 * Красная черта под названием шага. Толщина 2px, а не 1: на тёмной заливке
 * однопиксельная линия сливалась с контуром полосы и не читалась как акцент.
 */
.lp .lp-request-v4__band-rule {
	width: 3rem;
	height: 2px;
	background-color: var(--lp-crimson);
}

/*
 * На красной полосе красная же черта невидима — там она светлая.
 * Это не «другой стиль», а та же черта на другом фоне.
 */
.lp .lp-request-v4__band.is-featured .lp-request-v4__band-rule {
	background-color: var(--lp-ink);
}

.lp .lp-request-v4__band-text {
	margin: 0;
	font-size: var(--lp-text-body);
	line-height: 1.5;
	color: var(--lp-ink-muted);
}

.lp .lp-request-v4__band.is-featured .lp-request-v4__band-text {
	color: color-mix(in srgb, var(--lp-ink) 82%, transparent);
}

/* --- Результат разбора --------------------------------------------------- */

/*
 * СТРОКА РЕЗУЛЬТАТА — ПЛИТА, А НЕ ТЕКСТ МЕЖДУ ДВУХ ЛИНИЙ. Раньше она стояла
 * между волосяными линиями и состояла из трёх кусков разного языка: слева
 * заголовок-монумент, посередине мелкая табличка с ячейками, справа кнопка.
 * Ни один из них не был связан с цепочкой полос выше, и низ блока читался
 * как чужой подвал.
 *
 * Теперь это второй объект того же мира, что и полосы: та же поверхность,
 * тот же контур, тот же падающий сверху-слева свет. Блок целиком —
 * «цепочка шагов → плита результата», а не набор строк.
 */
.lp .lp-request-v4__outcome {
	display: grid;
	/*
	 * Перечню отдана самая широкая колонка: он несёт содержание плиты,
	 * а заголовок и кнопка — только рамку смысла вокруг него. При узкой
	 * средней колонке каждое обещание ломалось на три строки и читалось
	 * тяжелее, чем есть.
	 */
	grid-template-columns: minmax(16rem, 0.85fr) minmax(22rem, 1.75fr) auto;
	gap: clamp(1.5rem, 2.6vw, 3rem);
	align-items: center;
	/* Ширина — как у ряда полос, чтобы плита стояла точно под цепочкой. */
	width: calc(100% - var(--lp-gutter) * 2);
	max-width: calc(var(--lp-container) - var(--lp-gutter) * 2);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	margin-inline: auto;
	padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 3rem);
	background-color: var(--lp-frame-surface);
	background-image: linear-gradient(
		158deg,
		color-mix(in srgb, var(--lp-ink) 7%, transparent),
		transparent 42%
	);
	border: 1px solid var(--lp-line-control);
}

.lp .lp-request-v4__outcome-copy {
	display: grid;
	gap: 0.75rem;
}

.lp .lp-request-v4__outcome-copy p,
.lp .lp-request-v4__outcome-title {
	margin: 0;
}

/*
 * Заголовок плиты тише названия блока: он подводит итог, а не открывает
 * тему. В прежнем размере он рвался на четыре коротких строки в своей
 * колонке — рваная лесенка из односложных строк читается как случайность.
 */
.lp .lp-request-v4__outcome-title {
	max-width: 13ch;
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
	line-height: 0.98;
	text-transform: uppercase;
}

/*
 * ПЕРЕЧЕНЬ, А НЕ ТАБЛИЦА. Ячейки со своим фоном и швами в 1px делали из
 * четырёх обещаний служебную таблицу — самый мелкий и самый дробный элемент
 * блока. Обещания важнее подписей под шагами и обязаны читаться не мельче:
 * пункты разделены одной волосяной чертой сверху и стоят на общей плите.
 */
.lp .lp-request-v4__outcome-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 3vw, 2.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp .lp-request-v4__outcome-list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.85rem;
	padding-block: clamp(0.75rem, 1.4vw, 1.1rem);
	font-size: var(--lp-text-body);
	line-height: 1.4;
	color: var(--lp-ink);
	border-top: 1px solid var(--lp-line-strong);
}

/*
 * Первый ряд без верхней черты: она отделяет пункты друг от друга, а не
 * перечень от плиты — у плиты для этого есть собственный контур.
 */
.lp .lp-request-v4__outcome-list li:nth-child(-n+2) {
	border-top: 0;
}

.lp .lp-request-v4__outcome-list li span {
	font-family: var(--lp-font-display);
	line-height: 1.25;
	color: var(--lp-crimson);
}

/*
 * Кнопка — единственное действие блока, и на плите она обязана быть
 * заметно крупнее строки перечня, иначе читается как ещё один пункт.
 */
.lp .lp-request-v4__outcome-cta {
	justify-self: end;
	white-space: nowrap;
}

/* --- Узкие экраны ------------------------------------------------------ */

@media (max-width: 61.25em) {

	.lp .lp-request-v4__head-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp .lp-request-v4__text {
		padding-left: 0;
		border-left: 0;
	}

	.lp .lp-request-v4__outcome {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.lp .lp-request-v4__outcome-title {
		max-width: none;
	}

	.lp .lp-request-v4__outcome-cta {
		justify-self: start;
	}
}

/*
 * Полосы складываются в столбец. Стрелка, направленная вправо, в столбце
 * читалась бы ложью — поэтому вырезы, наезд и красная линия убираются
 * целиком, а не сжимаются. Содержание остаётся полностью: оно в подписях.
 */
@media (max-width: 48em) {

	.lp .lp-request-v4__list {
		display: grid;
		gap: 1px;
	}

	.lp .lp-request-v4__band,
	.lp .lp-request-v4__band + .lp-request-v4__band,
	.lp .lp-request-v4__band:last-child {
		min-height: 0;
		margin-left: 0;
		clip-path: none;
	}

	.lp .lp-request-v4__band-inner,
	.lp .lp-request-v4__band:first-child .lp-request-v4__band-inner {
		padding: clamp(1.5rem, 5vw, 2.25rem);
		clip-path: none;
	}

	/*
	 * В столбце путь заканчивается ВНИЗУ, а не справа: красная кромка
	 * переезжает на нижний край. Оставленная сбоку, она читалась бы
	 * случайной чертой у края экрана.
	 */
	.lp .lp-request-v4__band:last-child:not(:only-child) .lp-request-v4__band-inner {
		border-right: 0;
		border-bottom: 2px solid var(--lp-crimson);
	}

	.lp .lp-request-v4__outcome-list {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * В один столбец без черты остаётся только ПЕРВЫЙ пункт: правило «первый
	 * ряд без черты» считало рядом два пункта, и во втором пункте столбца
	 * появлялся разрыв на месте пропавшего разделителя.
	 */
	.lp .lp-request-v4__outcome-list li:nth-child(2) {
		border-top: 1px solid var(--lp-line-strong);
	}

	.lp .lp-request-v4__outcome-cta {
		width: 100%;
	}

}

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

/*
 * ПОЛОСЫ ВЪЕЗЖАЮТ ПО НАПРАВЛЕНИЮ СТРЕЛКИ. Блок рассказывает путь слева
 * направо, и появление обязано идти туда же: полосы приходят слева, одна за
 * другой, а красная линия следом прочерчивается от первого стыка к острию.
 * Появись они разом или сверху — движение спорило бы с фигурой, которая и
 * так показывает направление.
 *
 * ГЕЙТ ТОТ ЖЕ, ЧТО У ВСЕЙ СТРАНИЦЫ: класс `.lp-js` ставит landing.js, и
 * только если наблюдение действительно состоится. Нет скрипта, нет
 * IntersectionObserver, посетитель просит меньше движения — полосы просто
 * стоят на месте видимыми. Прячет только тот, кто умеет показать обратно.
 *
 * Двигаются `translate` и `opacity`, линия открывается `clip-path` — ни одно
 * из трёх не вызывает пересчёта раскладки.
 */

@media (prefers-reduced-motion: no-preference) {

	.lp-js .lp .lp-request-v4__band {
		/*
		 * Задержка считается из номера полосы: их может быть и две, и
		 * четыре, а :nth-child дал бы жёсткую тройку.
		 */
		--lp-band-delay: calc(var(--lp-i, 0) * 140ms);

		opacity: 0;
		translate: -2.25rem 0;
		transition:
			opacity var(--lp-duration-slow) var(--lp-ease-out) var(--lp-band-delay),
			translate var(--lp-duration-slow) var(--lp-ease-out) var(--lp-band-delay);
	}

	.lp-js .lp .lp-request-v4.is-visible .lp-request-v4__band {
		opacity: 1;
		translate: none;
	}

	/*
	 * ПУЛЬС ВЫДЕЛЕННОЙ ПОЛОСЫ. По ней раз в несколько секунд проходит волна
	 * света — слева направо, к острию, то есть к следующему шагу. Это и есть
	 * сигнал, который раньше несла отдельная красная линия: теперь он идёт
	 * ПО фигуре, а не поперёк подписей.
	 *
	 * САМА ПОЛОСА НЕ ДВИГАЕТСЯ. Толкнуть её вправо нельзя: соседние полосы
	 * входят одна в другую вырезом, и сдвиг на несколько пикселей обнажил бы
	 * остриё предыдущей — вместо движения получилась бы дыра в стыке.
	 *
	 * Волна лежит ПОД текстом: `isolation` замыкает слои внутри полосы,
	 * и отрицательный z-index уводит её за подписи, но выше заливки.
	 *
	 * Две трети цикла — покой. Непрерывно бегущий блик превратил бы блок
	 * в рекламный баннер; редкий проход читается как импульс.
	 */
	.lp .lp-request-v4__band.is-featured .lp-request-v4__band-inner {
		position: relative;
		isolation: isolate;
	}

	.lp .lp-request-v4__band.is-featured .lp-request-v4__band-inner::after {
		position: absolute;
		inset: 0;
		z-index: -1;
		content: '';
		/*
		 * Два слоя: тонкая яркая кромка впереди и мягкий шлейф за ней.
		 * Один только шлейф размазывался по всей полосе и читался сменой
		 * освещения, а не сигналом; кромка даёт волне край, по которому
		 * видно, что именно движется.
		 *
		 * Наклон в 100° — не украшение: полоса кончается остриём, и
		 * строго вертикальная кромка спорила бы с её диагональю.
		 */
		background-image:
			linear-gradient(
				100deg,
				transparent calc(50% - 1.5px),
				color-mix(in srgb, var(--lp-crimson) 62%, transparent) calc(50% - 1.5px),
				color-mix(in srgb, var(--lp-crimson) 62%, transparent) calc(50% + 1.5px),
				transparent calc(50% + 1.5px)
			),
			linear-gradient(
				100deg,
				transparent 30%,
				color-mix(in srgb, var(--lp-crimson) 8%, transparent) 40%,
				color-mix(in srgb, var(--lp-crimson) 32%, transparent) 50%,
				color-mix(in srgb, var(--lp-crimson) 8%, transparent) 60%,
				transparent 70%
			);
		translate: -100% 0;
		/*
		 * Ход равномерный: сигнал идёт с одной скоростью. Плавное
		 * замедление к острию читалось бы затуханием, а не приходом.
		 */
		animation: lp-request-v4-pulse 3.2s linear infinite;
	}

}

/*
 * Волна проходит полосу меньше чем за секунду и ждёт до конца цикла.
 * Прозрачность гасится у обоих краёв: иначе на входе и выходе виден резкий
 * обрыв блика.
 */
@keyframes lp-request-v4-pulse {

	0% {
		opacity: 0;
		translate: -100% 0;
	}

	6% {
		opacity: 1;
	}

	24% {
		opacity: 1;
	}

	30% {
		opacity: 0;
		translate: 100% 0;
	}

	100% {
		opacity: 0;
		translate: 100% 0;
	}
}