/*
 * LANDING V2 — СКВОЗНАЯ ЛИНИЯ СТРАНИЦЫ. Разметка: inc/lp-spine.php.
 *
 * ГДЕ ОНА СТОИТ. В левом поле — там же, где у чертежа поле подшивки. На
 * широком экране поле считается от контейнера, а не от окна: содержимое
 * ограничено 1680 px и стоит по центру, и линия, прижатая к краю окна,
 * оторвалась бы от страницы на добрую сотню пикселей. На узком — от края
 * окна, потому что там контейнер и окно совпадают. Обе меры берёт max().
 *
 * ЧТО АНИМИРУЕТСЯ. Только `transform` и `opacity`: пересчёта раскладки при
 * прокрутке не происходит вовсе. Высота алой части задана масштабом по
 * вертикали, а не свойством height, ровно поэтому.
 *
 * БЕЗ СКРИПТА остаётся один серый рельс — поле чертежа. Он ничего не
 * обещает и не выглядит сломанным, поэтому прятать его не нужно.
 */

/*
 * Линия раскрывается по всей странице, поэтому её родитель обязан быть
 * системой отсчёта. Правило стоит здесь, а не в base.css: класс `.lp` носит
 * ещё и всплывающее окно заявки, а ему своя система отсчёта ни к чему.
 */
main.lp {
	position: relative;
}

.lp-spine {
	position: absolute;
	top: 0;
	bottom: 0;
	left: max(
		calc(var(--lp-gutter) / 2),
		calc(50% - var(--lp-container) / 2 + var(--lp-gutter) / 2)
	);
	z-index: 3;
	width: 1px;
	pointer-events: none;
}

.lp-spine__rail {
	position: absolute;
	inset: 0;
	background-color: var(--lp-line-strong);
	opacity: 0.7;
}

/*
 * Алая часть — весь рельс, сжатый по вертикали к нулю. Скрипт разжимает её
 * до места читателя. Масштаб не трогает раскладку, поэтому прокрутка ничего
 * не пересчитывает.
 */
.lp-spine__fill {
	position: absolute;
	inset: 0;
	background-color: var(--lp-crimson);
	transform: scaleY(0);
	transform-origin: top center;
}

/* Засечки на границах блоков — линейка чертежа. Ставит их скрипт. */
.lp-spine__tick {
	position: absolute;
	left: 0;
	width: 0.375rem;
	height: 1px;
	background-color: var(--lp-line-strong);
}

.lp-spine__tick.is-passed {
	background-color: var(--lp-crimson);
}

/*
 * Голова линии. До запуска скрипта её нет: точка, стоящая в самом верху
 * страницы и никуда не едущая, читалась бы браком.
 */
.lp-spine__head {
	position: absolute;
	top: 0;
	left: 50%;
	display: grid;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: -0.25rem;
	margin-left: -0.25rem;
	place-items: center;
	color: var(--lp-crimson);
	opacity: 0;
}

.lp-spine.is-live .lp-spine__head {
	opacity: 1;
}

.lp-spine__dot {
	width: 100%;
	height: 100%;
	background-color: var(--lp-crimson);
	border-radius: 50%;
}

/* --- Заявка принята ---------------------------------------------------- */

/*
 * Галочка ставится ТОЛЬКО по подтверждённому сервером ответу формы. Ни
 * клиентская валидация, ни сетевая ошибка, ни отказ сервера класса
 * `.is-success` не дают. Текстовый статус формы остаётся главным
 * подтверждением — галочка декоративна и лежит в aria-hidden.
 */
.lp-spine__check {
	position: absolute;
	width: 1.5rem;
	height: 1.5rem;
	opacity: 0;
	scale: 0.6;
}

.lp-spine.is-success .lp-spine__dot {
	opacity: 0;
	transition: opacity var(--lp-duration) var(--lp-ease-out);
}

.lp-spine.is-success .lp-spine__check {
	opacity: 1;
	scale: 1;
	transition:
		opacity 560ms var(--lp-ease-out),
		scale 560ms var(--lp-ease-out);
}

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

/*
 * На телефоне поле — 20 px, и линия с засечками встаёт к самому краю. Голова
 * там мельче: восьмипиксельная точка у края экрана выглядит грязью, а не
 * отметкой.
 */
@media (max-width: 47.9375em) {

	.lp-spine__tick {
		width: 0.25rem;
	}

	.lp-spine__head {
		width: 0.375rem;
		height: 0.375rem;
		margin-top: -0.1875rem;
		margin-left: -0.1875rem;
	}
}