/* Полоса объявлений под шапкой. Макет «Баннер объявления · 12a»,
   «Сатиновая складка»: полоса читается как натянутый сатин — мягкие
   вертикальные складки в тени зелёного, золотая нить по верхней кромке
   и медленный блик, проходящий по ткани.

   Зелёный взят фирменный `#1D3A37`, а не `#14322B` из макета: макеты этой
   серии рисовались до того, как 23.08 все зелёные привели к одному, и рядом
   в шапке живёт тот же `--tk-deep`. Две разные зелени в одном экране видно.

   Разметку печатает inc/announcement-bar.php, закрытие — assets/announce.js. */

.tk-ann {
	--tk-ann-deep: #1D3A37;
	--tk-ann-deep-0: rgba(29, 58, 55, 0);
	--tk-ann-cream: #F7F4EF;
	--tk-ann-gold: #E7C48C;

	position: relative;
	height: 52px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--tk-ann-deep);
	/* Переход служит двум состояниям: сжатой шапке, которая уводит полосу
	   в ноль, и закрытию крестиком (assets/announce.js сводит те же высоту
	   и поля инлайном). Поля в списке — ради полосы в раме витрины: там
	   высота собрана из них. */
	transition: height 380ms var(--tk-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		padding 380ms var(--tk-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		opacity 260ms ease;
}

/* Сжатая шапка прячет строку меню — полоса уходит вместе с ней, иначе под
   66-пиксельной шапкой висело бы ещё 52px хрома. Наверху страницы, где
   объявление и должны прочитать, оно видно целиком. Вернуть постоянный
   показ — убрать этот блок. */
.tk-head.is-condensed .tk-ann {
	height: 0;
	min-height: 0;
	opacity: 0;
	visibility: hidden;
}

/* ---------- ткань ---------- */

.tk-ann__folds,
.tk-ann__shade,
.tk-ann__sheen,
.tk-ann__thread {
	position: absolute;
	pointer-events: none;
}

/* Складки: пара тёмных провалов и один светлый гребень на каждые 104px. */
.tk-ann__folds {
	inset: 0;
	background: repeating-linear-gradient(90deg,
		rgba(0, 0, 0, 0.16) 0px,
		rgba(0, 0, 0, 0) 26px,
		rgba(247, 244, 239, 0.05) 52px,
		rgba(0, 0, 0, 0) 78px,
		rgba(0, 0, 0, 0.16) 104px);
}

.tk-ann__shade {
	inset: 0;
	background: linear-gradient(to bottom, rgba(247, 244, 239, 0.10), rgba(0, 0, 0, 0.14));
}

/* Блик. В макете он сдвигался на -40%…140% собственной ширины, то есть
   при ширине в 26% полосы успевал пройти только её левую четверть;
   подпись к макету обещает блик, который проходит ПО ткани, поэтому здесь
   он идёт из-за левого края за правый. Период тот же — 12 секунд. */
.tk-ann__sheen {
	top: 0;
	bottom: 0;
	left: 0;
	width: 26%;
	background: linear-gradient(105deg,
		transparent,
		rgba(231, 196, 140, 0.20) 45%,
		rgba(247, 244, 239, 0.28) 55%,
		transparent);
	animation: tk-ann-sheen 12s ease-in-out infinite;
}

@keyframes tk-ann-sheen {
	from { transform: translateX(-100%); }
	to   { transform: translateX(400%); }
}

/* Золотая нить по верхней кромке — та же, что у сжатой шапки, только ярче
   к середине. */
.tk-ann__thread {
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(to right,
		rgba(231, 196, 140, 0),
		rgba(231, 196, 140, 0.75) 45%,
		rgba(231, 196, 140, 0.75) 55%,
		rgba(231, 196, 140, 0));
}

/* ---------- лента ---------- */

/* Обёртка ленты и крестика. В шапке она для раскладки прозрачна: тянется
   на всю полосу, и всё внутри стоит там же, где стояло до её появления.
   Заведена ради главной, где та же пара становится пилюлей, — см.
   assets/home.css. Крестик по-прежнему считает свой абсолют от .tk-ann:
   обёртке position не задан. */
.tk-ann__inner {
	flex: 1;
	min-width: 0;
	align-self: stretch;
	display: flex;
	align-items: center;
}

.tk-ann__track {
	position: relative;
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

/* Список напечатан дважды, поэтому сдвиг на половину ширины возвращает
   ленту в исходное положение и шва не видно.

   Длительность приходит инлайном из inc/announcement-bar.php и считается
   от числа фраз — иначе короткий список пролетал бы быстрее длинного.
   40s здесь только запасной вариант, на случай если разметку напечатают мимо
   этой функции. */
.tk-ann__run {
	display: flex;
	width: max-content;
	animation: tk-ann-marquee 40s linear infinite;
}

.tk-ann:hover .tk-ann__run { animation-play-state: paused; }

@keyframes tk-ann-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.tk-ann__copy { display: flex; }

.tk-ann__item {
	display: flex;
	align-items: center;
	gap: 28px;
	padding-right: 28px;
	white-space: nowrap;
}

.tk-ann__text {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--tk-ann-cream);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

/* Через одну фраза приглушена — лента читается как чередование, а не как
   сплошная строка капслоком. */
.tk-ann__item.is-dim .tk-ann__text { color: rgba(247, 244, 239, 0.62); }

.tk-ann__dash {
	width: 16px;
	height: 1px;
	flex: none;
	background: rgba(231, 196, 140, 0.6);
}

/* ---------- одна фраза ---------- */

/* Когда объявление одно, лента не едет: в полосу помещается две с половиной
   копии фразы разом, и повтор читается как сбой отрисовки. Разметку для этого
   случая печатает inc/announcement-bar.php — там один .tk-ann__item без
   обёрток ленты и без чёрточки-разделителя. Вся фактура остаётся.

   Поля по 52px с обеих сторон: справа под крестиком, слева столько же,
   чтобы фраза стояла ровно по середине полосы, а не по середине остатка. */
.tk-ann.is-still .tk-ann__track {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 52px;
}

.tk-ann.is-still .tk-ann__item {
	gap: 0;
	padding-right: 0;
	text-align: center;
}

/* ---------- крестик ---------- */

/* Кнопка сидит на растушёвке в цвет полосы: лента уезжает под неё, а не
   упирается в край. */
.tk-ann .tk-ann__close {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 46px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(247, 244, 239, 0.7);
	background: linear-gradient(to left, var(--tk-ann-deep) 55%, var(--tk-ann-deep-0));
	transition: opacity 200ms ease;
}

.tk-ann .tk-ann__close:hover,
.tk-ann .tk-ann__close:focus-visible {
	opacity: 0.75;
	background: linear-gradient(to left, var(--tk-ann-deep) 55%, var(--tk-ann-deep-0));
	color: var(--tk-ann-cream);
}

.tk-ann .tk-ann__close svg { display: block; }

/* ---------- телефон ---------- */

/* Прежняя плашка печаталась на телефоне вторым блоком со своей вёрсткой.
   Здесь тот же элемент: лента одинаково хорошо едет на любой ширине,
   меняются только рост и кегль. */
@media only screen and (max-width: 767px) {
	.tk-ann { height: 40px; }
	.tk-ann__text { font-size: 10px; letter-spacing: 0.18em; }
	.tk-ann__item { gap: 20px; padding-right: 20px; }
	.tk-ann .tk-ann__close { width: 38px; }

	/* Строку меню на телефоне тема не печатает, и шапка не сжимается
	   в ту же сторону — полосу гасить не за чем. */
	.tk-head.is-condensed .tk-ann {
		height: 40px;
		min-height: 0;
		opacity: 1;
		visibility: visible;
	}

	/* Одна фраза в 375px по ширине не влезает — там, где лента её прокручивала,
	   неподвижной остаётся только перенос. Поэтому на телефоне у полосы
	   с одной фразой высота по содержимому, а 40px становятся минимумом. */
	.tk-ann.is-still,
	.tk-head.is-condensed .tk-ann.is-still {
		height: auto;
		min-height: 40px;
	}

	.tk-ann.is-still .tk-ann__track { padding: 7px 44px; }

	.tk-ann.is-still .tk-ann__text {
		white-space: normal;
		line-height: 1.5;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tk-ann,
	.tk-ann__run,
	.tk-ann__sheen { animation: none; transition: none; }

	/* Без движения лента должна читаться с первой фразы. */
	.tk-ann__run { transform: none; }
}