/*
 * Тэглайн под футером.
 *
 * Здесь только площадка и фильтр. Сами капли рисует скрипт на canvas: расставить их можно лишь
 * зная, где легли буквы, а это известно после загрузки шрифта и замера строки в браузере.
 *
 * Шрифт свой, не текстовый. Тэглайн - это картинка из букв, ему нужен жирный округлый гротеск,
 * которого в семействе сайта нет. Загружается только здесь и только для этой надписи.
 */

@font-face {
	font-family: "Akem Tagline";
	font-style: normal;
	font-weight: 800;
	/* block, а не swap: подмена шрифта на лету сместит буквы, а по ним уже расставлены капли. */
	font-display: block;
	src: url("../../fonts/muller-extrabold.woff2") format("woff2");
}

/*
 * ШТОРА. Тэглайн не едет вместе со страницей: он стоит на месте, а страница уходит поверх него
 * вверх и открывает надпись. Разобрано на референсе, устройство там такое же:
 *
 *   .akem-tagline        обычный блок В ПОТОКЕ - он только держит место, чтобы было куда
 *                        доскроллить. Своей высоты у него нет, её ставит скрипт по размеру
 *                        надписи.
 *   .akem-tagline__layer прибит к низу окна и лежит ПОД страницей. Это то, что видно.
 *   #main-container      сама штора: непрозрачная и выше по слою, иначе тэглайн просвечивал бы
 *                        сквозь страницу с самого верха.
 */
.akem-tagline {
	position: relative;
	height: var(--akem-tagline-h, 0px);
}

.akem-tagline__layer {
	position: fixed;
	inset: auto 0 0 0;
	/* Минус первый, как на референсе: слой уходит ПОД содержимое страницы и виден только там,
	   где страница кончилась. На нуле он оказывается в одном стеке со шторой и лезет поверх. */
	z-index: -1;
	padding: var(--akem-space-6) var(--akem-space-3);
	/* The dark block colour of the palette. The green here came from the wembi reference, which the
	   averix palette replaced; it was the last colour on the site from outside the palette. */
	background: var(--akem-ink-strong);
	overflow: hidden;
	text-align: center;
}

#main-container {
	position: relative;
	z-index: 1;
	background: var(--akem-surface);
}

/*
 * Фильтр склеивает соседние капли: размытие сводит их вместе, матрица режет полупрозрачные края,
 * и вместо мутного пятна получается ртуть с чётким контуром. Значение размытия ведёт скрипт -
 * оно зависит от кегля, а кегль от ширины экрана.
 */
.akem-tagline__canvas {
	display: block;
	margin: 0 auto;
	filter: url(#akem-goo);
}

/* Кому анимация мешает - тот видит готовую надпись, скрипт рисует её сразу целиком. */