/* Умолчания элементов и раскладка страницы. Компонентные стили живут в самих компонентах. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
	Переход между страницами: короткое растворение. По умолчанию браузер
	держит старую страницу заметно дольше, и переход читается как задержка.
*/
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 120ms;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}

html {
	min-block-size: 100%;
	overflow-y: scroll;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-body);
	color: var(--color-text);
	background: var(--color-background);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Заголовки — антиква, вес 400, плотный трекинг. Bold не используется. */
h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-display);
	text-wrap: balance;
	/* Длинные русские слова («конфиденциальности») иначе вылезают за экран. */
	overflow-wrap: break-word;
	color: var(--color-text);
}

h1 {
	font-size: var(--text-display-xl);
	line-height: var(--lh-tight);
}

h2 {
	font-size: var(--text-display-l);
}

h3 {
	font-size: var(--text-display-m);
}

h4 {
	font-size: var(--text-lg);
}

p,
ul,
ol {
	margin: 0;
	text-wrap: pretty;
	overflow-wrap: break-word;
}

/* На узком экране разрешаем переносы: слово может быть шире колонки.
   Но только в длинных словах — иначе выравнивание строк рвало обычные
   («собира-ется»), лишь бы строки вышли ровнее. */
@media (max-width: 640px) {
	h1,
	h2 {
		hyphens: auto;
		hyphenate-limit-chars: 12 5 5;
	}
}

/* Якоря не должны прятаться под приклеенной шапкой. */
:target {
	scroll-margin-block-start: calc(var(--header-h) + var(--space-6));
}



/* --- Разворот ---
   Заголовок виден всегда, пояснение открывается по клику. Так страница
   читается по смыслу, а подробности не давят объёмом. */
.reveal {
	summary {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--space-4);
		cursor: pointer;
		list-style: none;

		&::-webkit-details-marker {
			display: none;
		}
	}

	.reveal__title {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		min-inline-size: 0;
	}

	.reveal__body {
		margin-block-start: var(--space-4);
		color: var(--color-text-secondary);

		p {
			margin: 0;
		}

		p + p {
			margin-block-start: var(--space-3);
		}
	}
}

/* Знак «плюс», который при раскрытии становится «минусом». */
.reveal__sign {
	position: relative;
	flex: none;
	inline-size: 26px;
	block-size: 26px;
	border-radius: var(--radius-pill);
	background: var(--color-surface-2);

	&::before,
	&::after {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		inline-size: 11px;
		block-size: 1.5px;
		translate: -50% -50%;
		background: var(--color-text-secondary);
		transition: rotate var(--dur-base, 260ms) var(--ease-out);
	}

	&::after {
		rotate: 90deg;
	}
}

.reveal[open] .reveal__sign::after {
	rotate: 0deg;
}

/* --- Общие раскладки ---
   Раньше эти правила жили внутри блока главной страницы, поэтому на остальных
   страницах сетка не работала и карточки растягивались на всю ширину. */
.grid-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--space-4);
}

/* Название обещает три колонки — на широком экране их и должно быть три. */
@media (min-width: 900px) {
	.grid-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-8);
	align-items: flex-end;
	justify-content: space-between;
	margin-block-end: var(--space-6);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text-secondary);
	text-decoration: none;

	&:hover {
		color: var(--color-text);
	}
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--color-surface-2);
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
	white-space: nowrap;
}

/* --- Ритм страниц ---
   Блок не может занимать меньше двух третей экрана: иначе два коротких блока
   слипаются в один вид и страница читается как каша. Содержимое центрируется
   по вертикали, поэтому короткий блок получает воздух, а не пустой хвост. */
main > * {
	min-block-size: min(38svh, 330px);
	align-content: center;
}

/* На телефоне правило снято: страницу листают пальцем, и пустота вокруг
   короткого блока только удлиняет её. */
@media (max-width: 719px) {
	main > * {
		min-block-size: 0;
	}
}

/* Эти блоки — колонки флексбокса, у них центрирование по другой оси. */
main > .faq,
main > .closing-note {
	justify-content: center;
}

img,
svg,
video {
	max-inline-size: 100%;
	block-size: auto;
}

img[width][height] {
	block-size: auto;
}

a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentcolor, transparent 70%);
	text-underline-offset: 0.175em;
	transition: color var(--dur-fast) var(--ease-out),
		text-decoration-color var(--dur-fast) var(--ease-out);

	&:hover {
		text-decoration-color: currentcolor;
	}
}

::selection {
	background: var(--color-accent-soft);
}

:focus-visible {
	outline: none;
	box-shadow: var(--ring-focus);
	border-radius: var(--radius-sm);
}

/* --- Раскладка страницы --- */

main {
	display: flex;
	flex-direction: column;
	gap: var(--section-gap);
	padding-block: var(--section-gap) 0;
}

/* Колонка блока — она же контейнер: блоки перестраиваются по её ширине
   (@container), а не по ширине всего экрана. */
.wrap {
	inline-size: 100%;
	max-inline-size: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	container-type: inline-size;
}

.prose {
	max-inline-size: var(--container-text);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* Надзаголовок: единственное место с прописными и разрядкой. */
.eyebrow {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	/* Зелёный акцент: надзаголовки — самая частая мелкая деталь на странице. */
	color: var(--color-accent-ink);
}

.lead {
	font-size: var(--text-lg);
	color: var(--color-text-secondary);
}

/* На телефоне — как у Vercel: заголовок и живой пример говорят сами, а
   абзац под каждым заголовком превращал страницу в стену текста. Остаются
   абзацы с классом lead--keep: объяснение на первом экране главной и те,
   без которых обрывается фраза заголовка («Мы никогда не…»). Только в блоках
   страниц: текстовые страницы (политика, «Скоро откроется») не трогаем. */
@container (width < 700px) {
	:where(main > section) .lead:not(.lead--keep) {
		display: none;
	}
}

/* --- Карточки и стекло --- */

.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	background: var(--tint-corner);
}

/* Соседние карточки светятся с разных сторон — ряд перестаёт быть штампом. */
.grid-3 > .card:nth-child(3n + 2),
.grid-3 > li:nth-child(3n + 2) .card {
	background: var(--tint-bottom);
}

.grid-3 > .card:nth-child(3n),
.grid-3 > li:nth-child(3n) .card {
	background: var(--tint-right);
}

/* Тот же приём для любой сетки карточек. Шаг цикла — пять, а колонок
   бывает три или четыре: из-за несовпадения подсветка смещается от ряда
   к ряду, и одинаковые углы не встают рядом ни по горизонтали,
   ни по вертикали. */
.cards-vary > li:nth-child(5n + 2) .card,
.cards-vary > .card:nth-child(5n + 2) {
	background: var(--tint-bottom);
}

.cards-vary > li:nth-child(5n + 3) .card,
.cards-vary > .card:nth-child(5n + 3) {
	background: var(--tint-right);
}

.cards-vary > li:nth-child(5n + 4) .card,
.cards-vary > .card:nth-child(5n + 4) {
	background: var(--tint-iris);
}

.cards-vary > li:nth-child(5n) .card,
.cards-vary > .card:nth-child(5n) {
	background: var(--tint-bottom);
}

.glass {
	background: var(--color-glass);
	backdrop-filter: blur(var(--blur-glass)) saturate(140%);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-glass);
}

/* --- Контролы: всегда пилюли --- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font: inherit;
	font-weight: var(--fw-medium);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	background: var(--color-accent);
	color: var(--color-accent-contrast);
	transition: background-color var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-spring);

	&:hover {
		background: var(--color-accent-hover);
		translate: 0 -1px;
	}

	&:active {
		background: var(--color-accent-press);
		scale: 0.97;
	}
}

.button--quiet {
	background: var(--color-surface);
	color: var(--color-text);
	border-color: var(--color-border);

	&:hover {
		background: var(--color-surface-2);
	}
}

.button--ghost {
	background: transparent;
	color: var(--color-text);
	border-color: var(--color-border-strong);

	&:hover {
		background: var(--color-accent-soft);
	}
}

/* Видно только при переходе с клавиатуры. */
.skip-link:not(:focus) {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Иконки: тонкая обводка текущим цветом, заливки нет. */
/* Люм-аватарка (components/lum-avatar.njk): глаза в тон акценту темы. */
.lum-avatar {
	flex: none;
	color: var(--lum-eye-bright);
}

.icon {
	flex: none;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
	Логотип «Цифрового Контура» — монохромная чёрная надпись одним файлом.
	В тёмной теме выворачиваем его, чтобы не пропадал на фоне.
*/
.logo-parent {
	opacity: 0.78;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .logo-parent {
		filter: invert(1);
	}
}

:root[data-theme="dark"] .logo-parent {
	filter: invert(1);
}

/* --- Колонки-чертежи -------------------------------------------------------
   Замена карточкам там, где нужно показать устройство, а не перечислить
   пункты. Коробок нет: колонки разделяет волосяная линия, сверху чертёж во
   всю ширину, под ним заголовок и одна строка. Чертёж рисуется тем же
   штрихом, что иконки, — просто крупнее.
--------------------------------------------------------------------------- */

.figrow {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.figrow {
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
	}

	.figrow--two {
		grid-template-columns: repeat(2, 1fr);
	}

	.figrow--four {
		grid-template-columns: repeat(2, 1fr);
	}

	.figcol + .figcol {
		border-inline-start: 1px solid var(--color-border);
		padding-inline-start: clamp(24px, 3vw, 48px);
	}

	.figcol:not(:last-child) {
		padding-inline-end: clamp(24px, 3vw, 48px);
	}
}

.figcol {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
}

.figcol__index {
	margin: 0;
	font-size: var(--text-xs);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	opacity: 0.7;
}

.figcol__stage {
	display: grid;
	place-items: center;
	margin-block-end: var(--space-3);
}

/* Общая высота сцены нужна только в ряд — чтобы подписи встали на одну
   линию. В одну колонку чертёж живёт по своему размеру. */
@media (min-width: 900px) {
	.figcol__stage {
		block-size: clamp(164px, 16vw, 212px);
	}
}

/* Четыре колонки помещаются в строку только на широком экране; до этого
   они стоят парами, иначе чертежи мельчают до неразличимости. */
@media (max-width: 1179px) {
	/* В два ряда разделитель ставить нельзя: третья колонка начинает новый
	   ряд, а черта по порядку в разметке всё равно ей достаётся. */
	.figrow--four > .figcol + .figcol {
		border-inline-start: 0;
		padding-inline-start: 0;
	}

	.figrow--four > .figcol {
		padding-inline-end: 0;
	}
}

@media (min-width: 1180px) {
	.figrow--four {
		grid-template-columns: repeat(4, 1fr);
	}
}

.figcol h3 {
	margin: 0;
	text-wrap: balance;
}

/* В узкой колонке колонки-чертежи становятся карточками в ленте вбок
   (класс swipe у ряда): рисунок во всю ширину карточки, под ним название
   и доказательство. Миниатюрой слева рисунки было не разглядеть. Подпись
   «фиг.» и пояснение на телефоне лишние. */
@container (width < 700px) {
	.figcol {
		padding: var(--space-4) var(--space-5) var(--space-5);
		border-radius: var(--radius-xl);
		background: var(--wcard);
	}

	.figcol__index,
	.figcol__note {
		display: none;
	}

	.figcol__stage {
		margin: 0 0 var(--space-2);

		svg {
			inline-size: 100%;
			block-size: auto;
		}
	}
}

/* Ответ — вторая по важности строка в колонке, а не сноска: держим его
   на размере основного текста, иначе чертёж перевешивает смысл. */
.figcol__note {
	margin: 0;
	max-inline-size: 42ch;
	font-size: var(--text-lg);
	line-height: 1.45;
	color: var(--color-text-secondary);
}

.figcol__proof + .figcol__note,
.figcol__note + .figcol__note {
	font-size: var(--text-base);
}

.figcol__proof {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	margin-block-start: auto;
	padding-block-start: var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-accent-ink);
}

/* === Виджеты ================================================================
   Карточки с живыми кусочками интерфейса — по мотивам Family. Главное, что
   отличает их от «картинки в рамке»:
   — виджет крупный, как настоящий интерфейс, и не помещается в карточку
     целиком: край обрезает его и растворяет — за ним угадывается приложение;
   — у каждого три-четыре состояния, включая промежуточные: крутится,
     печатает, ждёт проверки — а не просто «было / стало»;
   — настоящие мелочи: время, даты, единицы, счётчики, значки.
   Подпись карточки — внутри неё, внизу, как у Family.
============================================================================ */

.wcard {
	--wcard-pad: clamp(20px, 2vw, 28px);
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-xl);
	background: var(--wcard);
	overflow: hidden;
	isolation: isolate;
}

.wcard__stage {
	position: relative;
	display: grid;
	flex: 1;
	place-items: center;
	min-block-size: clamp(196px, 15vw, 226px);
	padding: var(--wcard-pad) var(--wcard-pad) var(--space-2);
}

.wcard__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--space-3) var(--wcard-pad) var(--wcard-pad);
}

.wcard__title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-lg);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.01em;
}

.wcard__note {
	margin: 0;
	max-inline-size: 38ch;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--color-text-secondary);
}

/* На телефоне у карточки — только название: всё остальное показывает
   виджет над ним. */
@container (width < 700px) {
	.wcard__note {
		display: none;
	}
}

/* Панель виджета — «окно» приложения внутри карточки. */
.wpanel {
	position: relative;
	border: 1px solid var(--wpanel-border);
	border-radius: 20px;
	background: var(--wpanel);
	box-shadow: var(--wpanel-shadow);
}

/* Панель уходит за край карточки и растворяется в ней. */
.wbleed-r {
	justify-self: start;
	inline-size: calc(100% + var(--wcard-pad) + 48px);
	mask-image: linear-gradient(to right, #000 62%, transparent 96%);
}

.wbleed-l {
	justify-self: end;
	inline-size: calc(100% + var(--wcard-pad) + 48px);
	mask-image: linear-gradient(to left, #000 62%, transparent 96%);
}

/* В узкой колонке карточка сама узкая: вынос за край и затухание резали
   текст панели посреди слова. Здесь панель стоит внутри карточки целиком,
   а колонка сцены не шире карточки — иначе длинная строка в панели
   раздвигала её, и край карточки срезал текст. */
@container (width < 700px) {
	.wcard__stage {
		grid-template-columns: minmax(0, 1fr);
	}

	.wbleed-r,
	.wbleed-l {
		justify-self: stretch;
		inline-size: 100%;
		mask-image: none;
	}
}


/* На самых узких телефонах (320 px) макеты экранов в карточках чуть
   мельче: их строки иначе не помещаются в карточку. */
@container (width < 300px) {
	.wcard .wpanel {
		zoom: 0.88;
	}
}

/* --- типографика внутри виджетов --- */

.w-label {
	font-size: 1.0625rem;
	font-weight: var(--fw-semibold);
	letter-spacing: -0.01em;
	color: var(--color-text);
}

.w-sub {
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--color-text-muted);
}

.w-meta {
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	color: var(--color-text-muted);
	white-space: nowrap;
}

/* Значок в цветном круге — как иконки действий в приложении. */
.w-icon {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 38px;
	block-size: 38px;
	border-radius: var(--radius-pill);
	background: var(--sig, var(--sig-blue));
	color: var(--white);

	.icon {
		stroke-width: 2;
	}
}

.w-icon--sm {
	inline-size: 28px;
	block-size: 28px;
}

/* Значок-метка рядом с заголовком: «2 недели», «103 · 112». */
.w-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border: 1px solid currentcolor;
	border-radius: var(--radius-pill);
	font-size: 0.75rem;
	font-weight: var(--fw-medium);
	line-height: 1.4;
	white-space: nowrap;
	opacity: 0.8;
}

/* Кнопка-пилюля, как в приложении. */
.w-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	block-size: 40px;
	padding-inline: 18px;
	border-radius: var(--radius-pill);
	background: var(--sig, var(--color-accent));
	color: var(--white);
	font-size: 0.9375rem;
	font-weight: var(--fw-semibold);
	white-space: nowrap;
}

/* Спиннер — дуга, которая бежит по кругу. */
.w-spinner {
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	border: 2px solid currentcolor;
	border-inline-end-color: transparent;
	border-radius: var(--radius-pill);
}

/* «Печатает…» — три точки. */
.w-typing {
	display: inline-flex;
	gap: 4px;

	i {
		inline-size: 6px;
		block-size: 6px;
		border-radius: var(--radius-pill);
		background: var(--color-text-muted);
	}
}

/* Курсор мыши: подсказывает, что с виджетом кто-то работает. */
.w-cursor {
	position: absolute;
	z-index: 3;
	inline-size: 18px;
	block-size: 22px;
	pointer-events: none;
	filter: drop-shadow(0 1px 1.5px color-mix(in srgb, var(--shadow-color) 35%, transparent));
}

/* Счётчик, который отсчитывает число сам. */
@property --w-count {
	syntax: "<integer>";
	inherits: false;
	initial-value: 0;
}

/* Счётчик заводится на самом элементе, а читается в ::after: псевдоэлемент
   не наследует незарегистрированно-наследуемое значение, а счётчик — видит. */
.w-count {
	counter-reset: w-count var(--w-count);
}

.w-count::after {
	content: counter(w-count);
}

@media (prefers-reduced-motion: no-preference) {
	.w-spinner {
		animation: w-spin 0.8s linear infinite;
	}

	.w-typing i {
		animation: w-typing 1.2s ease-in-out infinite;
	}

	.w-typing i:nth-child(2) {
		animation-delay: 0.15s;
	}

	.w-typing i:nth-child(3) {
		animation-delay: 0.3s;
	}

}

@keyframes w-spin {
	to {
		rotate: 1turn;
	}
}

@keyframes w-typing {
	0%,
	60%,
	100% {
		translate: 0 0;
		opacity: 0.45;
	}

	30% {
		translate: 0 -3px;
		opacity: 1;
	}
}

/* Общие стадии такта для виджетов: элемент виден с первой (с перезапуском
   в начале круга), со второй или с третьей стадии — либо только в одной.
   Без движения всё стоит в третьей стадии, итоговом виде. Сдвиг внутри
   стадии — --w-delay, например для лесенки из клеток. */
.w-only1,
.w-only2,
.w-upto2 {
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	:is(.w-from1, .w-from2, .w-from3, .w-only1, .w-only2, .w-upto2) {
		animation: var(--w-stage-name) var(--beat) var(--ease-out) var(--w-delay, 0s) infinite both;
	}

	.w-from1 { --w-stage-name: w-from1; }
	.w-from2 { --w-stage-name: w-from2; }
	.w-from3 { --w-stage-name: w-from3; }
	.w-only1 { --w-stage-name: w-only1; }
	.w-only2 { --w-stage-name: w-only2; }
	.w-upto2 { --w-stage-name: w-upto2; }
}

@keyframes w-from1 {
	0% {
		opacity: 1;
		translate: 0 0;
	}
	2.5% {
		opacity: 0;
		translate: 0 6px;
	}
	7%,
	100% {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes w-from2 {
	0% {
		opacity: 1;
		translate: 0 0;
	}
	4%,
	33.33% {
		opacity: 0;
		translate: 0 6px;
	}
	40.33%,
	100% {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes w-from3 {
	0% {
		opacity: 1;
		translate: 0 0;
	}
	4%,
	66.67% {
		opacity: 0;
		translate: 0 6px;
	}
	73.67%,
	100% {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes w-only1 {
	0% {
		opacity: 0;
	}
	7%,
	33.33% {
		opacity: 1;
	}
	38%,
	100% {
		opacity: 0;
	}
}

@keyframes w-only2 {
	0%,
	33.33% {
		opacity: 0;
	}
	40.33%,
	66.67% {
		opacity: 1;
	}
	71%,
	100% {
		opacity: 0;
	}
}

@keyframes w-upto2 {
	0% {
		opacity: 0;
	}
	7%,
	66.67% {
		opacity: 1;
	}
	71%,
	100% {
		opacity: 0;
	}
}

/* Очередь карточек (data-sequence, components/motion.njk). Карточка ждёт
   своей очереди пустой, в свою очередь (is-play) проходит стадии один раз
   за --play, потом (is-done) стоит на итоге — это обычный вид виджета. */
@media (prefers-reduced-motion: no-preference) {
	.is-seq > li:not(.is-play, .is-done) :is(.w-from1, .w-from2, .w-from3, .w-only1, .w-only2, .w-upto2) {
		animation: none;
		opacity: 0;
	}

	.is-seq > li.is-done :is(.w-from1, .w-from2, .w-from3, .w-only1, .w-only2, .w-upto2) {
		animation: none;
	}

	.is-seq > li.is-play :is(.w-from1, .w-from2, .w-from3, .w-only1, .w-only2, .w-upto2) {
		animation: var(--w-play-name) var(--play, 2s) var(--ease-out) var(--w-delay, 0s) both;
	}

	.is-seq > li {
		.w-from1 { --w-play-name: w-play-from1; }
		.w-from2 { --w-play-name: w-play-from2; }
		.w-from3 { --w-play-name: w-play-from3; }
		.w-only1 { --w-play-name: w-play-only1; }
		.w-only2 { --w-play-name: w-play-only2; }
		.w-upto2 { --w-play-name: w-play-upto2; }
	}
}

@keyframes w-play-from1 {
	0% {
		opacity: 0;
		translate: 0 6px;
	}
	12%,
	100% {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes w-play-from2 {
	0%,
	30% {
		opacity: 0;
		translate: 0 6px;
	}
	42%,
	100% {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes w-play-from3 {
	0%,
	62% {
		opacity: 0;
		translate: 0 6px;
	}
	74%,
	100% {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes w-play-only1 {
	0% {
		opacity: 0;
	}
	10%,
	32% {
		opacity: 1;
	}
	38%,
	100% {
		opacity: 0;
	}
}

@keyframes w-play-only2 {
	0%,
	32% {
		opacity: 0;
	}
	40%,
	64% {
		opacity: 1;
	}
	70%,
	100% {
		opacity: 0;
	}
}

@keyframes w-play-upto2 {
	0% {
		opacity: 0;
	}
	10%,
	64% {
		opacity: 1;
	}
	70%,
	100% {
		opacity: 0;
	}
}

/* Надпись, которая меняется внутри пилюли. Все варианты лежат в одной
   ячейке; ширину между ними ведёт анимация конкретного виджета. */
.w-morph {
	display: grid;
	/* Колонка равна ширине самой пилюли, а не самой длинной надписи:
	   иначе надпись центровалась в невидимой широкой колонке и обрезалась
	   справа — «Напомн…», «Ставлю». */
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;

	> [data-state] {
		display: inline-flex;
		grid-area: 1 / 1;
		align-items: center;
		justify-self: center;
		gap: 8px;
		white-space: nowrap;
	}
}