/*
 * LANDING V2 — ПОСЛЕ ЗАПУСКА.
 * Макет: output/design/landing-v2/all-screens/10-after-launch-v3-no-numbers.png.
 * Отрисовки значков и записей: output/design/landing-v2/screens/10-after-launch/.
 *
 * КРАСНАЯ ШИНА СПРАВА СЧИТАЕТСЯ ОТ ДВУХ ЧИСЕЛ: ширины отступа под неё
 * (--lp-bus-gap) и высоты итоговой полосы (--lp-outcome-h). Высота полосы
 * задана здесь же, а не набегает от текста, — иначе колено шины не попало бы
 * в её середину и стрелка вошла бы мимо.
 *
 * ГРАФИКИ ТЯНУТСЯ ПО ШИРИНЕ, НО НЕ ПО ТОЛЩИНЕ. preserveAspectRatio="none"
 * растягивает кривую на всю строку, а vector-effect держит штрих в один
 * пиксель: без него растянутая по горизонтали кривая стала бы жирной.
 */

.lp .lp-after-launch {
	--lp-inner-gap: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
	--lp-bus-gap: clamp(1.75rem, 1rem + 2.4vw, 4rem);
	--lp-outcome-h: clamp(3.5rem, 2.6rem + 3vw, 5.25rem);
	--lp-outcome-gap: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
	--lp-sign: clamp(3.2rem, 2.4rem + 2.6vw, 4.6rem);

	/*
	 * СВОЙ ТЕМП И СВОЯ КРИВАЯ, А НЕ ОБЩИЕ `--lp-ease-out` И `--lp-duration`.
	 * Общая кривая темы — `cubic-bezier(0.16, 1, 0.3, 1)`: она стартует почти
	 * мгновенно и упирается в конец. На кнопке и на карточке это читается
	 * щелчком и там уместно, а здесь щёлкают сразу восемь вещей подряд —
	 * четыре строки, шина, колено, полоса, — и блок начинает дёргаться.
	 *
	 * `cubic-bezier(0.33, 1, 0.68, 1)` разгоняется мягче и тормозит длиннее,
	 * а ходы стали дольше и короче по расстоянию: движение то же, но его
	 * видно как движение, а не как перескок.
	 */
	--lp-al-ease: cubic-bezier(0.33, 1, 0.68, 1);
	--lp-al-breathe: cubic-bezier(0.4, 0, 0.6, 1);
	--lp-al-in: 700ms;
	--lp-al-step: 120ms;

	/*
	 * ХОД ЛУЧА РАЗВЁРТКИ. Отдельная величина, потому что она задаёт СМЫСЛ
	 * блока: прибор снимает показания, а не мигает лампочкой. Прежние 1,9 с
	 * на всю ширину строки читались вспышкой — глаз замечал, что что-то
	 * мелькнуло, но не успевал увидеть, что это проход по записи.
	 *
	 * Наведение — та же скорость на ту же дистанцию: под курсором луч не
	 * имеет права идти быстрее, иначе повтор выглядит другим явлением.
	 */
	--lp-al-scan: 3.6s;
	--lp-al-scan-hover: 3s;
	--lp-al-hover: 300ms;

	position: relative;
	overflow-x: clip;
}

.lp .lp-after-launch__inner {
	display: grid;
	gap: var(--lp-inner-gap);
}

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

.lp .lp-after-launch__head {
	display: grid;
	gap: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
}

.lp .lp-after-launch__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
}

.lp .lp-after-launch__eyebrow-mark {
	font-family: var(--lp-font-num);
	font-size: var(--lp-text-label);
	color: var(--lp-crimson);
}

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

.lp .lp-after-launch__title {
	max-width: none;
	margin: 0;
	font-size: clamp(1.9rem, 1.1rem + 2.9vw, 3.5rem);
	line-height: 0.94;
	text-transform: uppercase;
	text-wrap: initial;
}

.lp .lp-after-launch__title-line {
	display: block;
}

.lp .lp-after-launch__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-strong);
}

/* --- Строки наблюдения -------------------------------------------------- */

.lp .lp-after-launch__body {
	position: relative;
	padding-right: var(--lp-bus-gap);
}

.lp .lp-after-launch__rows {
	display: grid;
	gap: clamp(0.5rem, 0.3rem + 0.6vw, 0.9rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp .lp-after-launch__row {
	/* Цвет уголков обреза: наведение перекрашивает их одной строкой. */
	--lp-row-line: var(--lp-line-strong);

	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 18rem) minmax(0, 1fr);
	gap: clamp(0.9rem, 0.5rem + 1.4vw, 2rem);
	align-items: center;
	padding: clamp(0.5rem, 0.3rem + 0.7vw, 0.9rem) clamp(0.75rem, 0.4rem + 1.2vw, 1.4rem);
	border: 1px solid transparent;
}

/*
 * Уголки обреза одним псевдоэлементом: восемь несмасштабируемых полосок
 * фоном. Тот же приём, что у рамок в блоках 3 и 4.
 */
.lp .lp-after-launch__row::before {
	--lp-corner: 0.9rem;

	position: absolute;
	inset: 0;
	pointer-events: none;
	content: '';
	background-image:
		linear-gradient(var(--lp-row-line), var(--lp-row-line)),
		linear-gradient(var(--lp-row-line), var(--lp-row-line)),
		linear-gradient(var(--lp-row-line), var(--lp-row-line)),
		linear-gradient(var(--lp-row-line), var(--lp-row-line)),
		linear-gradient(var(--lp-row-line), var(--lp-row-line)),
		linear-gradient(var(--lp-row-line), var(--lp-row-line)),
		linear-gradient(var(--lp-row-line), var(--lp-row-line)),
		linear-gradient(var(--lp-row-line), var(--lp-row-line));
	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-after-launch__sign {
	display: grid;
	place-items: center;
	width: var(--lp-sign);
	height: var(--lp-sign);
	padding: 0.5rem;
	color: var(--lp-ink-muted);
	background-color: var(--lp-field-deep);
	border: 1px solid var(--lp-line-strong);
}

.lp .lp-after-launch__glyph,
.lp .lp-after-launch__sign-image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

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

.lp .lp-after-launch__caption {
	display: grid;
	gap: 0.15rem;
	padding-left: clamp(0.9rem, 0.5rem + 1.4vw, 2rem);
	border-left: 1px dashed var(--lp-line-strong);
}

.lp .lp-after-launch__row-title {
	margin: 0;
	font-size: clamp(1rem, 0.85rem + 0.6vw, 1.375rem);
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.lp .lp-after-launch__row-text {
	margin: 0;
	font-size: var(--lp-text-sm);
	line-height: 1.35;
	color: var(--lp-ink-muted);
}

.lp .lp-after-launch__wave {
	position: relative;
	display: block;
	overflow: hidden;
	height: clamp(2.4rem, 1.6rem + 2.4vw, 3.75rem);
	padding-left: clamp(0.9rem, 0.5rem + 1.4vw, 2rem);
	color: var(--lp-ink-muted);
	border-left: 1px solid var(--lp-line-strong);
}

.lp .lp-after-launch__wave svg {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * Загруженная запись сигнала тянется на всю строку так же, как считанная
 * кривая: fill, а не contain. Файл из макета — вытянутая полоса записи, и
 * вписывание по высоте оставило бы её узкой лентой в середине строки.
 */
.lp .lp-after-launch__wave-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
}

/* Выделенная строка: та, на которую я смотрю сейчас пристальнее прочих. */
.lp .lp-after-launch__row.is-featured {
	background-color: color-mix(in srgb, var(--lp-burgundy) 14%, transparent);
	border-color: color-mix(in srgb, var(--lp-crimson) 45%, transparent);
}

.lp .lp-after-launch__row.is-featured .lp-after-launch__wave {
	color: color-mix(in srgb, var(--lp-crimson) 45%, var(--lp-ink-muted));
}

/*
 * Две пунктирные засечки и прицел на графике выделенной строки: границы
 * участка, который сейчас разбирается. Всё три — фоном одного псевдоэлемента.
 */
.lp .lp-after-launch__row.is-featured .lp-after-launch__wave::after {
	position: absolute;
	inset: 0 0 0 clamp(0.9rem, 0.5rem + 1.4vw, 2rem);
	pointer-events: none;
	content: '';
	background-image:
		repeating-linear-gradient(var(--lp-crimson) 0 4px, transparent 4px 9px),
		repeating-linear-gradient(var(--lp-crimson) 0 4px, transparent 4px 9px),
		radial-gradient(circle, transparent 0 0.42rem, var(--lp-crimson) 0.42rem 0.48rem, transparent 0.5rem);
	background-repeat: no-repeat;
	background-position: 24% 0, 88% 0, 52% 50%;
	background-size: 1px 100%, 1px 100%, 1.2rem 1.2rem;
	opacity: 0.75;
}

/*
 * У загруженной записи выделенной строки засечки и прицел нарисованы внутри
 * файла. Комплект от темы здесь встал бы вторым поверх первого, поэтому
 * снимается вместе с подкраской кривой.
 */
.lp .lp-after-launch__row.is-featured.has-chart .lp-after-launch__wave::after {
	content: none;
}

/* --- Шина справа -------------------------------------------------------- */

/*
 * Точка строки и её отвод к шине. Отвод рисуется от самой точки, а не от
 * шины: иначе при смене отступа он оторвался бы от кружка.
 */
.lp .lp-after-launch__node {
	position: absolute;
	top: 50%;
	right: -0.55rem;
	width: 1.1rem;
	height: 1.1rem;
	background-color: var(--lp-field);
	border: 2px solid var(--lp-crimson);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px var(--lp-field), inset 0 0 0 5px var(--lp-crimson);
	translate: 0 -50%;
}

.lp .lp-after-launch__node::after {
	position: absolute;
	top: 50%;
	left: 100%;
	width: calc(var(--lp-bus-gap) - 0.55rem);
	height: 2px;
	content: '';
	background-color: var(--lp-crimson);
	transform: translateY(-50%);
}

.lp .lp-after-launch__bus {
	position: absolute;
	top: -1.75rem;
	right: 0;
	bottom: calc((var(--lp-outcome-gap) + var(--lp-outcome-h) / 2) * -1);
	width: 2px;
	background-color: var(--lp-crimson);
}

/* Стрелка вверх: наблюдение не заканчивается, оно идёт по кругу. */
.lp .lp-after-launch__bus::before {
	position: absolute;
	top: -0.62rem;
	left: 50%;
	width: 0;
	height: 0;
	content: '';
	border-right: 0.42rem solid transparent;
	border-bottom: 0.66rem solid var(--lp-crimson);
	border-left: 0.42rem solid transparent;
	transform: translateX(-50%);
}

/* Нижнее колено: шина уходит влево, к итоговой полосе. */
.lp .lp-after-launch__bus::after {
	position: absolute;
	right: 0;
	bottom: 0;
	width: calc(var(--lp-bus-gap) - 0.66rem);
	height: 2px;
	content: '';
	background-color: var(--lp-crimson);
}

/* --- Итоговая полоса ---------------------------------------------------- */

.lp .lp-after-launch__outcome {
	position: relative;
	display: grid;
	place-items: center;
	min-height: var(--lp-outcome-h);
	margin: calc(var(--lp-outcome-gap) - var(--lp-inner-gap)) var(--lp-bus-gap) 0 0;
	padding: 0.75rem clamp(1rem, 3vw, 2.5rem);
	text-align: center;
	background-color: color-mix(in srgb, var(--lp-burgundy) 18%, transparent);
	border: 1px solid var(--lp-crimson);
}

/* Внутренняя рамка: двойной контур из макета, один псевдоэлемент. */
.lp .lp-after-launch__outcome::before {
	position: absolute;
	inset: 0.32rem;
	pointer-events: none;
	content: '';
	border: 1px solid color-mix(in srgb, var(--lp-crimson) 55%, transparent);
}

/* Остриё, которым шина входит в полосу. */
.lp .lp-after-launch__outcome::after {
	position: absolute;
	top: 50%;
	right: -0.66rem;
	width: 0;
	height: 0;
	content: '';
	border-top: 0.42rem solid transparent;
	border-right: 0.66rem solid var(--lp-crimson);
	border-bottom: 0.42rem solid transparent;
	transform: translateY(-50%);
}

.lp .lp-after-launch__outcome span {
	position: relative;
	font-family: var(--lp-font-display);
	font-size: clamp(1.05rem, 0.7rem + 1.5vw, 2.1rem);
	font-weight: var(--lp-display-weight);
	letter-spacing: 0.03em;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--lp-crimson);
}

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

@media (max-width: 61.25em) {

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

	.lp .lp-after-launch__text {
		padding-left: 0;
		border-left: 0;
	}

	.lp .lp-after-launch__row {
		grid-template-columns: auto minmax(0, 1fr);
	}

	/*
	 * График в узкой колонке превращается в неразличимую дрожь и мешает
	 * подписи. Он уходит целиком: за ним нет данных, только чертёж сигнала.
	 */
	.lp .lp-after-launch__wave {
		display: none;
	}
}

/*
 * Шина справа держится на том, что строки стоят в ряд по вертикали и у них
 * общий правый край. Когда места нет, она убирается вместе с точками, а
 * итоговая полоса просто встаёт под строками — стрелке некуда входить.
 */
@media (max-width: 48em) {

	.lp .lp-after-launch__body {
		padding-right: 0;
	}

	.lp .lp-after-launch__bus,
	.lp .lp-after-launch__node {
		display: none;
	}

	.lp .lp-after-launch__outcome {
		margin-right: 0;
	}

	.lp .lp-after-launch__outcome::after {
		display: none;
	}
}

/* ====================================================================== */
/* ПОЯВЛЕНИЕ                                                              */
/* ====================================================================== */

/*
 * Блок читается как приборная стойка, и собирается он в том же порядке,
 * в каком по нему идёт сигнал: строки приезжают слева одна за другой, по
 * каждой записи один раз проходит луч развёртки, затем прочерчивается шина
 * справа, её колено уходит влево — и в итоговой полосе загорается то, что
 * я по всему этому меняю.
 *
 * ВСЁ ДЕРЖИТСЯ НА ОДНОМ КЛАССЕ `.is-visible`, который вешает наблюдатель
 * из landing.js на саму секцию. Скрипта нет, наблюдателя нет, посетитель
 * просит меньше движения — класса `.lp-js` на корне тоже нет, и блок просто
 * стоит собранным. Ни одно из правил ниже без `.lp-js` не работает, поэтому
 * сломаться в невидимое состояние блоку нечем.
 *
 * НОМЕР СТРОКИ УЖЕ ЕСТЬ В РАЗМЕТКЕ — `--lp-i`. Задержки считаются от него,
 * а не подбираются по `nth-child`: строк в админке может стать три или две,
 * и очередь пересчитается сама.
 */

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

	/*
	 * ВЪЕЗД ВСЕЙ СЕКЦИИ ПЕРЕБИТ ЗДЕСЬ, А НЕ ПРАВЛЕН В base.css. Общий въезд
	 * `.lp-reveal` — 460 мс по резкой кривой и подъём на 1.25rem. Под ним
	 * тут же играет собственная очередь блока, и два быстрых движения друг
	 * поверх друга читаются рывком. Блок въезжает дольше и ниже ростом, чтобы
	 * очередь строк было видно на спокойном фоне, а не сквозь чужой скачок.
	 *
	 * Правка живёт в файле блока: у остальных двенадцати секций своей очереди
	 * внутри нет, и общий въезд там как раз к месту.
	 */
	.lp-js .lp-after-launch.lp-reveal {
		transform: translateY(0.75rem);
		transition:
			opacity 760ms var(--lp-al-ease),
			transform 760ms var(--lp-al-ease);
	}

	/* --- Строки: приезжают слева, оттуда же приходит и сигнал ---------- */

	/*
	 * ПОЯВЛЕНИЕ ЗДЕСЬ АНИМАЦИЕЙ, А НЕ ПЕРЕХОДОМ, хотя переход был бы короче.
	 * `transition` — сокращение: вторая такая же запись в блоке наведения
	 * ниже стёрла бы первую целиком, и очередь строк пропала бы ровно на тех
	 * машинах, где есть мышь. Анимация и переход живут в разных свойствах и
	 * не спорят: появление — анимация, наведение — переход.
	 */
	.lp-js .lp-after-launch__row {
		opacity: 0;
	}

	.lp-js .lp-after-launch.is-visible .lp-after-launch__row {
		animation: lp-al-row var(--lp-al-in) var(--lp-al-ease) calc(var(--lp-i, 0) * var(--lp-al-step)) 1 both;
	}

	/*
	 * Луч развёртки: одна светлая грань проходит по записи слева направо.
	 * Ширина полосы задана в процентах от строки, поэтому и сдвиг считается
	 * от неё же — 760% от 14% как раз выводят луч за правый край.
	 *
	 * ХОД РАВНОМЕРНЫЙ (linear), а не по общей кривой блока: развёртка идёт
	 * с одной скоростью. Разгон и торможение читались бы как рывок прибора,
	 * а не как снятие показаний, — и на медленном ходу это стало заметно.
	 */
	.lp .lp-after-launch__wave::before {
		position: absolute;
		top: 0;
		bottom: 0;
		left: clamp(0.9rem, 0.5rem + 1.4vw, 2rem);
		width: 14%;
		pointer-events: none;
		content: '';
		background-image: linear-gradient(
			90deg,
			transparent,
			color-mix(in srgb, var(--lp-crimson) 30%, transparent) 62%,
			color-mix(in srgb, var(--lp-ink) 55%, transparent)
		);
		opacity: 0;
	}

	.lp-js .lp-after-launch.is-visible .lp-after-launch__wave::before {
		animation: lp-al-scan var(--lp-al-scan) linear calc(var(--lp-i, 0) * var(--lp-al-step) + 480ms) 1 both;
	}

	/* --- Шина: прочерчивается сверху, следом колено и остриё ----------- */

	.lp-js .lp-after-launch__bus {
		scale: 1 0;
		transform-origin: top center;
		transition: scale 820ms var(--lp-al-ease) 640ms;
	}

	.lp-js .lp-after-launch.is-visible .lp-after-launch__bus {
		scale: 1;
	}

	/*
	 * Стрелка вверх и колено влево живут внутри шины и вместе с ней сплющены
	 * по высоте, пока она растёт. Поэтому они не растут, а проявляются — и
	 * только после того, как шина дошла донизу.
	 */
	.lp-js .lp-after-launch__bus::before {
		opacity: 0;
		transition: opacity 380ms var(--lp-al-ease) 1500ms;
	}

	.lp-js .lp-after-launch.is-visible .lp-after-launch__bus::before {
		opacity: 1;
	}

	.lp-js .lp-after-launch__bus::after {
		scale: 0 1;
		transform-origin: right center;
		transition: scale 380ms var(--lp-al-ease) 1380ms;
	}

	.lp-js .lp-after-launch.is-visible .lp-after-launch__bus::after {
		scale: 1;
	}

	/* --- Итоговая полоса: последняя, ей и заканчивается чтение --------- */

	.lp-js .lp-after-launch__outcome {
		opacity: 0;
	}

	.lp-js .lp-after-launch.is-visible .lp-after-launch__outcome {
		animation: lp-al-outcome var(--lp-al-in) var(--lp-al-ease) 1500ms 1 both;
	}

	.lp-js .lp-after-launch__outcome::after {
		opacity: 0;
		transition: opacity 380ms var(--lp-al-ease) 1820ms;
	}

	.lp-js .lp-after-launch.is-visible .lp-after-launch__outcome::after {
		opacity: 1;
	}

	/*
	 * Точки шины медленно дышат: прибор, который смотрит, а не картинка
	 * прибора. Размах намеренно мал — на краю зрения это фон, а не мигалка.
	 * Разбежка по номеру строки убирает эффект гирлянды.
	 */
	.lp-js .lp-after-launch.is-visible .lp-after-launch__node {
		animation: lp-al-node 4.6s var(--lp-al-breathe) calc(var(--lp-i, 0) * 460ms + 2.4s) infinite;
	}
}

@keyframes lp-al-row {

	from {
		opacity: 0;
		translate: -0.7rem 0;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes lp-al-outcome {

	from {
		opacity: 0;
		translate: 0 0.45rem;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes lp-al-scan {

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

	20% {
		opacity: 1;
	}

	80% {
		opacity: 1;
	}

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

@keyframes lp-al-node {

	0%,
	100% {
		box-shadow: inset 0 0 0 2px var(--lp-field), inset 0 0 0 5px var(--lp-crimson), 0 0 0 0 transparent;
	}

	50% {
		box-shadow:
			inset 0 0 0 2px var(--lp-field),
			inset 0 0 0 5px var(--lp-crimson),
			0 0 0.6rem 0.05rem color-mix(in srgb, var(--lp-crimson) 40%, transparent);
	}
}

/* ====================================================================== */
/* НАВЕДЕНИЕ                                                              */
/* ====================================================================== */

/*
 * Строка под курсором ведёт себя как выбранный канал прибора: уголки обреза
 * и рамка знака алеют, запись разгорается, по ней ещё раз проходит луч,
 * а точка на шине раздувается — видно, какая строка сейчас подключена
 * к общей шине.
 *
 * ВСЁ ЗАПЕРТО В `hover: hover` И `pointer: fine`. На телефоне наведение
 * залипает после касания: строка осталась бы подсвеченной до тех пор, пока
 * не тронут другую, и подсказка превратилась бы в грязь.
 */

@media (hover: hover) and (pointer: fine) {

	.lp .lp-after-launch__row {
		transition:
			background-color var(--lp-al-hover) var(--lp-al-ease),
			border-color var(--lp-al-hover) var(--lp-al-ease);
	}

	.lp .lp-after-launch__row:hover {
		--lp-row-line: var(--lp-crimson);

		background-color: color-mix(in srgb, var(--lp-ink) 4%, transparent);
	}

	.lp .lp-after-launch__row.is-featured:hover {
		background-color: color-mix(in srgb, var(--lp-burgundy) 22%, transparent);
	}

	/* Знак: рамка алеет, чертёж чуть выступает вперёд. */
	.lp .lp-after-launch__sign {
		transition:
			border-color var(--lp-al-hover) var(--lp-al-ease),
			background-color var(--lp-al-hover) var(--lp-al-ease),
			box-shadow var(--lp-al-hover) var(--lp-al-ease);
	}

	.lp .lp-after-launch__glyph,
	.lp .lp-after-launch__sign-image {
		transition: scale var(--lp-al-hover) var(--lp-al-ease);
	}

	.lp .lp-after-launch__row:hover .lp-after-launch__sign {
		background-color: var(--lp-field);
		border-color: var(--lp-crimson);
		box-shadow: 0 0 1.6rem -0.5rem var(--lp-crimson);
	}

	.lp .lp-after-launch__row:hover .lp-after-launch__glyph,
	.lp .lp-after-launch__row:hover .lp-after-launch__sign-image {
		scale: 1.06;
	}

	/* Подпись: пунктир алеет, пояснение выходит из серого. */
	.lp .lp-after-launch__caption {
		transition:
			border-color var(--lp-al-hover) var(--lp-al-ease),
			translate var(--lp-al-hover) var(--lp-al-ease);
	}

	.lp .lp-after-launch__row-text {
		transition: color var(--lp-al-hover) var(--lp-al-ease);
	}

	.lp .lp-after-launch__row:hover .lp-after-launch__caption {
		border-left-color: var(--lp-crimson);
		translate: 0.25rem 0;
	}

	.lp .lp-after-launch__row:hover .lp-after-launch__row-text {
		color: var(--lp-ink);
	}

	/* Запись: разгорается и ещё раз прогоняет луч. */
	.lp .lp-after-launch__wave {
		transition: border-color var(--lp-al-hover) var(--lp-al-ease);
	}

	.lp .lp-after-launch__wave svg,
	.lp .lp-after-launch__wave-image {
		transition: filter var(--lp-al-hover) var(--lp-al-ease);
	}

	.lp .lp-after-launch__row:hover .lp-after-launch__wave {
		border-left-color: var(--lp-crimson);
	}

	.lp .lp-after-launch__row:hover .lp-after-launch__wave svg,
	.lp .lp-after-launch__row:hover .lp-after-launch__wave-image {
		filter: brightness(1.4) contrast(1.08);
	}

	/* Точка: раздувается и светит ярче остальных. */
	.lp .lp-after-launch__node {
		transition:
			scale var(--lp-al-hover) var(--lp-al-ease),
			box-shadow var(--lp-al-hover) var(--lp-al-ease);
	}

	.lp .lp-after-launch__row:hover .lp-after-launch__node {
		scale: 1.22;
	}

	/* Итоговая полоса: глубже заливка и ярче внутренний контур. */
	.lp .lp-after-launch__outcome {
		transition:
			background-color var(--lp-al-hover) var(--lp-al-ease),
			box-shadow var(--lp-al-hover) var(--lp-al-ease);
	}

	.lp .lp-after-launch__outcome::before {
		transition: border-color var(--lp-al-hover) var(--lp-al-ease);
	}

	.lp .lp-after-launch__outcome:hover {
		background-color: color-mix(in srgb, var(--lp-burgundy) 30%, transparent);
		box-shadow: 0 0 2.5rem -1rem var(--lp-crimson);
	}

	.lp .lp-after-launch__outcome:hover::before {
		border-color: var(--lp-crimson);
	}
}

/*
 * Повторный прогон луча под курсором — ОТДЕЛЬНЫМ ИМЕНЕМ, а не тем же
 * с другой длительностью: браузер перезапускает анимацию по смене имени,
 * а смена одной длительности только меняет темп уже сыгранной.
 *
 * Правило стоит внутри своей проверки движения: под
 * `prefers-reduced-motion: reduce` луча нет ни при появлении, ни здесь.
 */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

	.lp-js .lp-after-launch__row:hover .lp-after-launch__wave::before {
		animation: lp-al-scan-hover var(--lp-al-scan-hover) linear 1 both;
	}

	/* Точка под курсором перестаёт дышать: она и так уже выделена. */
	.lp-js .lp-after-launch.is-visible .lp-after-launch__row:hover .lp-after-launch__node {
		animation: none;
	}
}

@keyframes lp-al-scan-hover {

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

	20% {
		opacity: 1;
	}

	80% {
		opacity: 1;
	}

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