/* ─────────────────────────────────────────────────────────────
   Бренд Check You на Slivoteka.

   Логотип и анимация — те же, что на check-you.to (страница премиума):
   парение 4.5 с, два пульсирующих ореола со сдвигом 1.3 с, доводка
   по наведению. Цвет ореола взят из фирменного знака (#fe408d), а не
   из палитры Slivoteka: ореол обязан читаться как свечение РОЗОВОГО
   логотипа, а не как подсветка кнопки сайта.

   ⚠️ Всё, кроме ореола, — на токенах темы: блок живёт и в тёмной теме.
   ⚠️ Анимации выключаются по prefers-reduced-motion — иначе на странице
   с каталогом из 40 карточек постоянное движение мешает читать.
   ───────────────────────────────────────────────────────────── */

:root {
	--cy-glow: 254, 64, 141;   /* #fe408d — фирменный розовый Check You */
}

/* Общая механика логотипа: обёртка + ореолы + сама картинка. */
.cy-badge__logo-wrap,
.cy-note__logo-wrap,
.cy-foot__logo-wrap,
.cy-strip__logo-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	isolation: isolate;
}

.cy-badge__logo,
.cy-note__logo,
.cy-foot__logo,
.cy-strip__logo {
	position: relative;
	z-index: 2;
	display: block;
	will-change: transform;
}

/*
 * ⚠️ Анимации стартуют на ПАУЗЕ и оживают классом .cy-anim-on, который вешает
 * IntersectionObserver (app.js), когда блок попал в зону видимости.
 *
 * Замер до этой правки: главная в полном покое на мобильном вьюпорте —
 * 299 пересчётов стиля и 31,5 % ядра, потому что полоса и подвал крутили
 * три бесконечные анимации, находясь на 6000 px ниже экрана. Стало 0,1 %.
 *
 * Без JS (или до его загрузки) знак просто стоит — это нормальный вид,
 * а не сломанный.
 */
.cy-strip__logo,
.cy-strip__pulse {
	animation-play-state: paused;
}

.cy-anim-on .cy-strip__logo,
.cy-anim-on .cy-strip__pulse {
	animation-play-state: running;
}

.cy-strip__pulse {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 50%;
	pointer-events: none;
	transform-origin: center;
	background: radial-gradient(circle,
		rgba(var(--cy-glow), .38) 0%,
		rgba(var(--cy-glow), .15) 45%,
		rgba(var(--cy-glow), 0) 70%);
	animation: cy-pulse 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
}

.cy-strip__pulse--delay { animation-delay: 1.3s; }

@keyframes cy-float {
	0%, 100% { transform: translateY(0)    rotate(0deg); }
	33%      { transform: translateY(-5px) rotate(1.5deg); }
	66%      { transform: translateY(-3px) rotate(-1.5deg); }
}

@keyframes cy-pulse {
	0%   { transform: scale(.85); opacity: .85; }
	80%  { opacity: .05; }
	100% { transform: scale(2);   opacity: 0; }
}

/* ── Бейдж в шапке: «проект Check You» у названия сайта ─────────── */

.cy-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-left: var(--s-3);
	padding: 4px 10px 4px 6px;
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	background: var(--c-surface);
	color: var(--c-text-muted);
	font-size: var(--fs-xs);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s ease, color .15s ease, transform .15s ease;
}

.cy-badge:hover {
	border-color: var(--c-cy);
	color: var(--c-text);
	transform: translateY(-1px);
}

.cy-badge__logo {
	width: 18px;
	height: 18px;
	filter: drop-shadow(0 1px 3px rgba(var(--cy-glow), .45));
}

.cy-badge__text b { font-weight: 700; }

/* Шапка тесная: бейдж уходит первым, ещё до кнопки «Открыть архив». */
@media (max-width: 1100px) { .cy-badge { display: none; } }

/* ── Полоса: главная и /about/ ──────────────────────────────────── */

.cy-strip {
	margin-top: var(--s-8);
	/* Нижнего воздуха больше верхнего: иначе розовая карточка и подвал
	   читаются одной лентой — они стыковались пиксель в пиксель. */
	padding: var(--s-7) 0 var(--s-8);
	border-top: 1px solid var(--c-border);
	/* Мягкая розовая подложка — фирменный цвет, приглушённый до фона. */
	background:
		radial-gradient(60% 120% at 12% 50%, rgba(var(--cy-glow), .10) 0%, rgba(var(--cy-glow), 0) 70%),
		var(--c-bg);
}

.cy-strip__inner {
	display: flex;
	align-items: center;
	gap: var(--s-6);
	padding: var(--s-6);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	background: var(--c-surface);
	box-shadow: var(--sh-sm);
}

/* Правая колонка: чем основной проект отличается от архива. */
.cy-strip__facts {
	margin: 0 0 0 auto;
	padding: 0 0 0 var(--s-6);
	border-left: 1px solid var(--c-border);
	list-style: none;
	display: grid;
	gap: var(--s-2);
	flex: 0 0 auto;
}

.cy-strip__facts li {
	position: relative;
	padding-left: 22px;
	color: var(--c-text);
	font-size: var(--fs-sm);
	line-height: 1.3;
	white-space: nowrap;
}

/* Галочка рисуется бордюром: лишняя иконка ради трёх строк не нужна. */
.cy-strip__facts li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 3px;
	width: 5px;
	height: 9px;
	border: solid var(--c-cy);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.cy-strip__logo-wrap {
	width: 96px;
	height: 96px;
}

.cy-strip__logo {
	width: 96px;
	height: 96px;
	filter: drop-shadow(0 6px 18px rgba(var(--cy-glow), .35));
	animation: cy-float 4.5s ease-in-out infinite;
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.cy-strip__inner:hover .cy-strip__logo {
	transform: scale(1.08) rotate(-4deg);
	animation-play-state: paused;
}

.cy-strip__body { min-width: 0; }

.cy-strip__eyebrow {
	margin: 0 0 2px;
	color: var(--c-text-soft);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.cy-strip__title {
	margin: 0 0 var(--s-2);
	font-size: var(--fs-h3);
	line-height: 1.1;
	color: var(--c-text);
}

.cy-strip__text {
	max-width: 62ch;
	margin: 0 0 var(--s-4);
	color: var(--c-text-muted);
	font-size: var(--fs-base);
	line-height: 1.6;
}

.cy-strip__actions {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	flex-wrap: wrap;
}

.cy-strip__domain {
	color: var(--c-text-soft);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
}

/* ── Подвал ─────────────────────────────────────────────────────── */

.cy-foot {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-3);
}

.cy-foot__logo-wrap {
	width: 52px;
	height: 52px;
}

/*
 * ⚠️ Знак в подвале НЕ анимирован: подвал стоит на всех страницах сайта,
 * и дочитавший длинную карточку упирается в вечно дышащее розовое пятно.
 * Свечение (drop-shadow) остаётся — движение убрано.
 */
.cy-foot__logo {
	width: 52px;
	height: 52px;
	filter: drop-shadow(0 4px 12px rgba(var(--cy-glow), .3));
}

.cy-foot__eyebrow {
	margin: 0;
	color: var(--c-text-soft);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.cy-foot__name {
	margin: 0;
	color: var(--c-text);
	font-family: var(--ff-display);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.2;
}

/* ── Тонкая строка в карточке записи ────────────────────────────── */

.cy-note {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-top: var(--s-4);
	padding: var(--s-3);
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	background: var(--c-surface);
	color: var(--c-text);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}

.cy-note:hover {
	border-color: var(--c-cy);
	background: var(--c-surface-2);
}

.cy-note__logo {
	width: 26px;
	height: 26px;
	filter: drop-shadow(0 2px 6px rgba(var(--cy-glow), .4));
}

.cy-note__text {
	display: grid;
	gap: 2px;
	min-width: 0;
	font-size: var(--fs-sm);
	line-height: 1.25;
}

.cy-note__sub {
	color: var(--c-text-muted);
	font-size: var(--fs-xs);
	line-height: 1.35;
}

.cy-note__arrow {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--c-text-soft);
}

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

@media (max-width: 720px) {
	.cy-strip {
		margin-top: var(--s-6);
		padding: var(--s-5) 0;
	}
	.cy-strip__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-4);
		padding: var(--s-4);
	}
	.cy-strip__logo-wrap,
	.cy-strip__logo { width: 72px; height: 72px; }
	.cy-strip__facts {
		margin: 0;
		padding: var(--s-4) 0 0;
		border-left: 0;
		border-top: 1px solid var(--c-border);
		width: 100%;
	}
}

/* Между 721 и 900 px карточка уже тесная — список прячем раньше остальных. */
@media (min-width: 721px) and (max-width: 900px) {
	.cy-strip__facts { display: none; }
}

/*
 * Ниже 1024 px боковая колонка карточки перестаёт быть колонкой (entry.css)
 * и растягивается на всю ширину: стрелка с margin-left:auto уезжала к правому
 * краю, оставляя до 650 px пустоты между текстом и ею. Собираем группу по
 * центру — как у соседней кнопки «Сообщить об ошибке».
 */
@media (max-width: 1024px) {
	.cy-note { justify-content: center; }
	.cy-note__arrow { margin-left: 0; }
}

/* ── Уважение к настройке «меньше движения» ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.cy-strip__logo { animation: none; }
	.cy-strip__pulse { animation: none; opacity: 0; }
	.cy-strip__inner:hover .cy-strip__logo { transform: none; }
}