/* Главная. Секции добавляются по порядку; токены в base.css */

/* Hero: розовый фон с halftone, кот справа на десктопе */
.hero {
	position: relative;
	overflow: clip;
	min-height: calc(100svh - var(--header-h));
	background:
		radial-gradient(circle at center, rgb(255 255 255 / 0.35) 1.5px, transparent 2px) 0 0 / 14px 14px,
		var(--color-pink);
}

.hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* иначе кот и таймер распирают колонку шире экрана на 375px */
	align-content: start;
	gap: var(--space-md);
	padding-top: var(--space-lg);
}

.hero__text {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: start;
	gap: var(--space-sm);
}

.hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.3rem 0.9rem 0.3rem 0.7rem;
	background: var(--color-ink);
	border-radius: var(--radius-pill);
	color: var(--color-white);
	font-size: var(--fs-small);
	font-weight: 700;
	rotate: -2deg;
}

.hero__kicker::before {
	content: '';
	width: 1em;
	height: 1em;
	background: var(--color-pink);
	clip-path: var(--star);
}

/* Состояние ярмарки: «места закончились» (белая наклейка) и призыв после ярмарки (зелёная) */
.hero__notice {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: 34rem;
	margin: 0;
	padding: 0.65rem 1rem 0.65rem 0.65rem;
	background: var(--color-white);
	border: var(--border-strong);
	border-radius: var(--radius-md);
	box-shadow: 4px 4px 0 var(--color-ink);
	color: var(--color-ink);
	font-weight: 700;
	line-height: 1.35;
	rotate: -1deg;
}

.hero__notice--past {
	background: var(--color-green);
	color: var(--color-white);
	rotate: 1deg;
}

.hero__notice-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--color-red-btn);
	border: 2px solid var(--color-ink);
	border-radius: 50%;
	color: var(--color-white);
	font-size: 1.4rem;
	animation: notice-flip 5s var(--ease-out) infinite;
}

.hero__notice--past .hero__notice-icon {
	background: var(--color-pink);
	color: var(--color-green-dark);
	animation-name: notice-pop;
	animation-duration: 3.2s;
}

/* Телефон: плашка компактнее, чтобы кнопки остались в первом экране */
@media (max-width: 639px) {
	.hero__notice {
		gap: 0.6rem;
		padding: 0.5rem 0.75rem 0.5rem 0.5rem;
		font-size: var(--fs-small);
	}

	.hero__notice-icon {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 1.15rem;
	}
}

/* Песочные часы переворачиваются, хлопушка подпрыгивает; между рывками покой */
@keyframes notice-flip {
	0%, 70% { rotate: 0deg; }
	90%, 100% { rotate: 180deg; }
}

@keyframes notice-pop {
	0%, 60%, 100% { translate: 0 0; rotate: 0deg; }
	70% { translate: 0 -5px; rotate: -12deg; }
	80% { translate: 0 0; rotate: 10deg; }
	90% { rotate: -4deg; }
}

/* Логотип-заголовок: декоративный дубль, смысловой h1 ниже */
.hero__logo {
	margin: 0;
	transform: rotate(-3deg) skewX(-4deg); /* как логотип в шапке */
	transform-origin: left bottom;
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 9vw, 6.5rem);
	line-height: 0.95;
	text-transform: uppercase;
}

.hero__logo-top,
.hero__logo-beri {
	display: inline-block;
	color: var(--color-green);
	/* Объёмная «наклейка» как цифры на 404: цвет, затем красная и белая подложки */
	text-shadow: 0.04em 0.04em 0 var(--color-red), 0.08em 0.08em 0 var(--color-white);
}

.hero__logo-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2em;
}

.hero__logo-beri {
	color: var(--color-red);
	text-shadow: 0.04em 0.04em 0 var(--color-green), 0.08em 0.08em 0 var(--color-white);
}

.hero__sticker {
	padding: 0.1em 0.4em 0.15em;
	background: var(--color-white);
	border: var(--border-strong);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
	color: var(--color-red-deep);
	font-family: var(--font-accent);
	font-size: 0.6em;
	font-weight: 400;
	text-shadow: none;
	rotate: -4deg;
	animation: sticker-wiggle 4s ease-in-out infinite;
}

.hero__title {
	margin: 0;
	font-family: var(--font-text);
	font-size: clamp(1.25rem, 3.2vw, 2.25rem);
	font-weight: 800;
	line-height: 1.15;
}

.hero__subtitle {
	max-width: 36rem;
	margin: 0;
}

.hero__facts p {
	margin: 0;
}

/* Дата крупно, как заголовок; время красным */
.hero__when {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.5em;
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 4.5vw, 3.25rem);
	line-height: 1.1;
}

.hero__date {
	color: var(--color-green);
	text-transform: uppercase;
}

.hero__time {
	color: var(--color-red-deep);
}

.hero__place {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 700;
}

.hero__place::before {
	content: '';
	flex: none;
	width: 1.1em;
	height: 1.1em;
	background: var(--color-green);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.500a2.500 2.500 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
	margin-top: var(--space-sm);
}

/* Телефон: подзаголовок прячем, чтобы кот поднялся выше и кнопки остались в первом экране */
@media (max-width: 639px) {
	.hero__subtitle {
		display: none;
	}
}

/* Узкий экран: кнопки компактнее, чтобы остаться в одном ряду (на 320 px перенесутся сами) */
@media (max-width: 429px) {
	.hero__actions {
		gap: var(--space-sm);
	}

	.hero__actions .btn,
	.hero__actions .btn--ghost {
		padding-inline: 1rem;
		font-size: 0.875rem;
	}

	.hero__actions .btn--ghost::before {
		display: none;
	}
}

@media (max-width: 380px) {
	.hero__actions .btn,
	.hero__actions .btn--ghost {
		padding-inline: 0.75rem;
		font-size: 0.8125rem;
	}
}

/* «Задать вопрос»: белая наклейка с жёсткой тенью; при наведении вдавливается и заливается зелёным, пузырь-иконка подпрыгивает */
.hero__actions .btn--ghost {
	padding-inline: 1.25rem;
	background: var(--color-white);
	border-color: var(--color-ink);
	box-shadow: 3px 3px 0 var(--color-ink);
	color: var(--color-ink);
	text-decoration: none;
	rotate: 1.5deg;
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast), rotate var(--dur-base) var(--ease-out);
}

.hero__actions .btn--ghost::before {
	content: '';
	width: 1.15em;
	height: 1.15em;
	background: currentcolor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-8l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
	.hero__actions .btn--ghost:hover {
		background: var(--color-green);
		border-color: var(--color-green);
		box-shadow: 1px 1px 0 var(--color-ink);
		color: var(--color-white);
		rotate: -1.5deg;
		transform: translate(2px, 2px);
	}

	.hero__actions .btn--ghost:hover::before {
		transform: translateY(-3px) rotate(-10deg) scale(1.15);
	}
}

.hero__actions .btn--ghost:active {
	box-shadow: none;
	transform: translate(3px, 3px);
}

.hero__note {
	max-width: 30rem;
	margin: 0;
	font-size: var(--fs-small);
}

/* Мобила: кот под текстом, ≤40% высоты экрана, обрезан снизу */
.hero__stage {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: 40svh;
	overflow: clip;
	pointer-events: none;
}

/* Звёздное сияние за котом */
.hero__burst {
	position: absolute;
	top: 68%;
	left: 64%;
	width: min(62vw, 16rem);
	aspect-ratio: 1;
	background: rgb(255 255 255 / 0.4);
	clip-path: var(--burst);
	translate: -50% -50%;
	animation: burst-spin 40s linear infinite;
}

/* Кот в обёртке: дыхание и блики в очках живут на ней, картинка остаётся целой для входа GSAP */
.hero__figure {
	position: relative;
	flex: none;
	aspect-ratio: 1;
	height: 46svh;
	margin-top: -8svh; /* верх файла прозрачный: поднимаем кота к тексту */
	transform-origin: 50% 100%;
	animation: cat-breathe 5s ease-in-out infinite;
	filter: drop-shadow(0 14px 18px rgb(17 17 17 / 0.22));
}

.hero__cat {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: contain;
	object-position: top;
}

/* Блик в линзах: положение в процентах от файла кота (1254×1254) */
.hero__glint {
	position: absolute;
	width: 6%;
	aspect-ratio: 1;
	background: var(--color-white);
	clip-path: var(--star);
	opacity: 0;
	translate: -50% -50%;
	animation: glint 6s ease-in-out infinite;
}

.hero__glint--l { left: 54.6%; top: 36%; }
.hero__glint--r { left: 67.8%; top: 31.9%; width: 7%; animation-delay: 0.45s; }

/* Мерцание — на ::before: сам элемент двигает GSAP, он не должен «запечь» в transform середину мерцания */
.hero__star {
	position: absolute;
	width: var(--s, 2rem);
	height: var(--s, 2rem);
	pointer-events: none;
}

.hero__star::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--c, var(--color-white));
	clip-path: var(--star);
	animation: star-twinkle 3s ease-in-out infinite;
	animation-delay: var(--delay, 0s);
}

/* Звёзды трёх цветов афиши: красная, белая, зелёная */
.hero__star--a,
.hero__star--d { --c: var(--color-red); }
.hero__star--c,
.hero__star--e { --c: var(--color-green); }

.hero__star--b { --delay: -1s; }
.hero__star--c { --delay: -2s; }

.hero__star--a { --s: 2.5rem; top: 8%; right: 8%; }
.hero__star--b { --s: 1.25rem; top: 45%; right: 4%; }
.hero__star--c { --s: 1.75rem; bottom: 12%; left: 6%; }
.hero__star--d,
.hero__star--e { display: none; }

@media (min-width: 1024px) {
	.hero__inner {
		grid-template-columns: 1fr;
		align-items: center;
		min-height: calc(100svh - var(--header-h));
		padding-block: var(--space-xl);
	}

	.hero__text {
		max-width: 54%;
		gap: var(--space-md);
	}

	.hero__logo {
		font-size: clamp(4rem, 8.2vw, 8rem);
	}

	.hero__title {
		font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	}

	/* Как на макете: кот у правого нижнего края, срез файла уходит за экран */
	.hero__stage {
		position: absolute;
		right: 0;
		bottom: 0;
		height: auto;
		margin: 0;
		overflow: visible;
	}

	.hero__figure {
		width: min(50vw, 88svh);
		height: auto;
		margin-top: 0;
	}

	.hero__burst {
		top: 40%;
		left: 60%;
		width: min(48vw, 42rem);
	}

	.hero__star--a { --s: 4.5rem; top: 8%; right: 5%; }
	.hero__star--b { --s: 2rem; top: 40%; right: auto; left: 46%; }
	.hero__star--d { --s: 3rem; display: block; top: 18%; left: 52%; }
	.hero__star--e { --s: 1.5rem; display: block; top: 62%; right: 3%; }
}

/* Десктоп: таймер выходит из колонки текста и висит наклейкой над котом (там пусто), колонка слева становится ниже */
@media (min-width: 1024px) {
	.hero .timer {
		--cell-w: 5.1rem;
		position: absolute;
		top: 0;
		left: calc(100% + var(--space-md));
		z-index: 2;
		gap: var(--space-sm);
		padding: var(--space-md) var(--space-md) var(--space-sm);
		rotate: 2.5deg;
		transform-origin: 50% 0;
	}

	.hero .timer__num {
		font-size: 3rem;
	}

	/* Полоска скотча: наклейка «приклеена» к hero */
	.hero .timer::before {
		content: '';
		position: absolute;
		top: -0.9rem;
		left: 50%;
		width: 5rem;
		height: 1.6rem;
		background: rgb(255 255 255 / 0.7);
		border: 1px dashed rgb(17 17 17 / 0.25);
		translate: -50% 0;
		rotate: -4deg;
	}
}

@media (min-width: 1280px) {
	.hero .timer {
		--cell-w: 5.7rem;
	}

	.hero .timer__label {
		font-size: 1.5rem;
	}

	.hero .timer__num {
		font-size: 3.5rem;
	}
}

/* Зерно: тайл шума больше hero, прыгает шагами ~10 к/с (transform), как плёночное */
.hero__grain {
	position: absolute;
	inset: -4rem;
	z-index: 2;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .07 0 0 0 0 .07 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.07;
	pointer-events: none;
	animation: grain-jitter 1s steps(1) infinite;
}

@keyframes grain-jitter {
	0% { translate: 0 0; }
	10% { translate: -2.5rem 1.5rem; }
	20% { translate: 1.5rem -2rem; }
	30% { translate: -1rem -2.5rem; }
	40% { translate: 2.5rem 1rem; }
	50% { translate: -2rem -1rem; }
	60% { translate: 1rem 2.5rem; }
	70% { translate: -2.5rem -2.5rem; }
	80% { translate: 2rem -1.5rem; }
	90% { translate: -1.5rem 2rem; }
}

@keyframes glint {
	0%, 82%, 100% { scale: 0; rotate: 0deg; opacity: 0; }
	90% { scale: 1.3; rotate: 45deg; opacity: 1; }
	96% { scale: 0.6; rotate: 90deg; opacity: 0.7; }
}

@keyframes burst-spin {
	to { rotate: 360deg; }
}

@keyframes cat-breathe {
	50% { scale: 1.02; rotate: 0.8deg; }
}

@keyframes star-twinkle {
	50% { scale: 0.55; rotate: 20deg; opacity: 0.6; }
}

@keyframes sticker-wiggle {
	50% { rotate: -2deg; }
}

/* Бесконечные анимации стоят, пока hero вне экрана или вкладка скрыта (класс ставит home-hero.js) */
.hero.is-paused *,
.hero.is-paused *::before {
	animation-play-state: paused;
}

/* Бегущая строка под hero: чёрная лента, ровные края (спека §2.2) */
.marquee {
	position: relative;
	overflow: hidden;
	padding-block: clamp(0.75rem, 2vw, 1.25rem);
	background: var(--color-ink);
	color: var(--color-pink);
	border-block: var(--border-strong);
	-webkit-user-select: none;
	user-select: none;
}

.marquee__track {
	display: flex;
	width: max-content;
	animation: marquee-run 40s linear infinite;
	will-change: transform;
}

.marquee__group {
	display: flex;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.marquee__item {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.25rem);
	padding-right: clamp(1rem, 3vw, 2.25rem);
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 3.2vw, 2.25rem);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Звёздочки чередуют бренд-цвета и медленно вращаются */
.marquee__star {
	flex-shrink: 0;
	width: 0.8em;
	height: 0.8em;
	fill: var(--color-white);
	animation: burst-spin 8s linear infinite;
}

.marquee__item:nth-child(3n + 2) .marquee__star { fill: var(--color-red); }
.marquee__item:nth-child(3n) .marquee__star { fill: var(--color-green); }

@keyframes marquee-run {
	to { transform: translateX(-50%); }
}

/* Пауза вне экрана и в фоновой вкладке (класс ставит home-marquee.js) */
.marquee.is-paused *,
.marquee.is-paused *::before {
	animation-play-state: paused;
}

/* Reduced motion: статичная лента, видны первые пункты; второй группы нет */
@media (prefers-reduced-motion: reduce) {
	.marquee__track,
	.marquee__star {
		animation: none;
	}

	.marquee__group:nth-child(2) {
		display: none;
	}

	.marquee__item:nth-child(n + 4) {
		display: none;
	}
}

/* Условия и стоимость: розовая секция с halftone, белые карточки окон (спека §2.6, MASTER §5) */
.section {
	padding-block: var(--section-y);
}

.pricing {
	position: relative;
	overflow: clip;
	background:
		radial-gradient(circle at center, rgb(255 255 255 / 0.35) 1.5px, transparent 2px) 0 0 / 14px 14px,
		var(--color-pink);
}

.pricing__head {
	display: grid;
	gap: var(--space-xs);
	margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.pricing__head h2 {
	margin: 0;
	text-transform: uppercase;
}

.pricing__lead {
	margin: 0;
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	font-weight: 700;
}

.pricing__grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 2.25rem);
	margin: 0;
	padding: 1.25rem 0 0;
	list-style: none;
}

@media (min-width: 640px) {
	.pricing__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.pricing__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Ценник на верёвочке: li качается (GSAP) вокруг крюка, .price-card__tag — сам ценник с дыркой и перфорацией */
.price-card {
	--stub: 4.25rem; /* высота отрывного корешка с датой */
	--string: 2.75rem; /* длина верёвочки над ценником */
	position: relative;
	padding-top: var(--string);
	transform-origin: 50% 0;
}

/* Верёвочка от крюка вниз, сквозь дырку */
.price-card::before {
	content: '';
	position: absolute;
	z-index: 2;
	top: 0.35rem;
	left: 50%;
	width: 3px;
	height: calc(var(--string) + 1.5rem);
	margin-left: -1.5px;
	background: repeating-linear-gradient(135deg, var(--color-red-deep) 0 3px, var(--color-rope) 3px 6px);
	border-radius: 2px;
	pointer-events: none;
}

/* Крюк */
.price-card::after {
	content: '';
	position: absolute;
	z-index: 2;
	top: 0;
	left: 50%;
	width: 0.9rem;
	height: 0.9rem;
	margin-left: -0.45rem;
	background: var(--color-ink);
	border: 3px solid var(--color-white);
	border-radius: 50%;
}

.price-card__tag {
	position: relative;
	display: grid;
	gap: 0.15rem;
	min-height: 15rem;
	padding: 3.4rem var(--space-lg) 0;
	color: var(--color-ink);
	filter: drop-shadow(0 3px 0 rgb(196 30 69 / 0.28));
	rotate: var(--tilt, 0deg);
	transform-origin: 50% 0;
	transition: rotate 0.5s var(--ease-out), scale var(--dur-base) var(--ease-out);
}

.price-card:nth-child(4n + 1) { --tilt: -1.2deg; }
.price-card:nth-child(4n + 2) { --tilt: 0.9deg; }
.price-card:nth-child(4n + 3) { --tilt: -0.7deg; }
.price-card:nth-child(4n) { --tilt: 1.3deg; }

/* Форма ценника: скошенные верхние углы, выбитая дырка, вырезы перфорации по бокам корешка */
.price-card__tag::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--color-white);
	clip-path: polygon(0 1.6rem, 1.6rem 0, calc(100% - 1.6rem) 0, 100% 1.6rem, 100% 100%, 0 100%);
	-webkit-mask:
		radial-gradient(circle 0.6rem at 50% 1.75rem, #0000 96%, #000),
		radial-gradient(circle 0.7rem at 0 calc(100% - var(--stub)), #0000 96%, #000),
		radial-gradient(circle 0.7rem at 100% calc(100% - var(--stub)), #0000 96%, #000);
	-webkit-mask-composite: source-in;
	mask:
		radial-gradient(circle 0.6rem at 50% 1.75rem, #0000 96%, #000),
		radial-gradient(circle 0.7rem at 0 calc(100% - var(--stub)), #0000 96%, #000),
		radial-gradient(circle 0.7rem at 100% calc(100% - var(--stub)), #0000 96%, #000);
	mask-composite: intersect;
}

@media (hover: hover) {
	.price-card:hover .price-card__tag {
		rotate: calc(var(--tilt, 0deg) * -2.5);
	}
}

.price-card__label {
	margin: 0;
	font-size: var(--fs-h3);
	text-transform: uppercase;
}

.price-card__price {
	display: grid;
	justify-items: start;
	margin: 0.25rem 0 var(--space-md);
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1;
}

.price-card__from {
	font-family: var(--font-text);
	font-size: var(--fs-small);
	font-weight: 700;
	opacity: 0.7;
}

.price-card__big {
	font-size: clamp(2.1rem, 3.1vw, 2.9rem);
	color: var(--color-red-deep);
	white-space: nowrap;
}

.price-card__upto {
	margin-top: 0.3rem;
	font-size: 1.15rem;
	white-space: nowrap;
}

/* Отрывной корешок: пунктир перфорации и дата оплаты */
.price-card__stub {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: var(--stub);
	margin: 0;
	margin-top: auto;
	border-top: 2px dashed rgb(17 17 17 / 0.35);
	font-size: var(--fs-small);
	font-weight: 700;
	line-height: 1.3;
}

.price-card__stub .icon {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-green);
}

/* Прошедшее окно: ценник приглушён, цены зачёркнуты, состояние словами в корешке */
.price-card--past {
	opacity: 0.55;
}

.price-card--past .price-card__big,
.price-card--past .price-card__upto {
	color: inherit;
}

/* Текущее окно: единственный зелёный ценник, крупнее, со штампом «Сейчас» */
.price-card--current .price-card__tag {
	color: var(--color-white);
	scale: 1.03;
	transform-origin: 50% 50%;
}

/* Увеличение не должно вылезать за контейнер: крайний ценник растёт внутрь сетки */
.price-card--current:first-child .price-card__tag {
	transform-origin: 0 50%;
}

.price-card--current:last-child .price-card__tag {
	transform-origin: 100% 50%;
}

.price-card--current .price-card__tag::before {
	background:
		radial-gradient(circle at center, rgb(255 255 255 / 0.14) 1.5px, transparent 2px) 0 0 / 12px 12px,
		var(--color-green);
}

.price-card--current .price-card__big {
	color: var(--color-white);
}

.price-card--current .price-card__stub {
	border-top-color: rgb(255 255 255 / 0.6);
}

.price-card--current .price-card__stub .icon {
	color: var(--color-pink);
}

.price-card__stamp {
	position: absolute;
	top: 1.1rem;
	right: -0.6rem;
	padding: 0.3rem 0.9rem;
	background: var(--color-red-btn);
	border: 2px solid var(--color-white);
	border-radius: var(--radius-pill);
	color: var(--color-white);
	font-family: var(--font-accent);
	font-size: 1.2rem;
	font-weight: 400;
	rotate: 8deg;
	box-shadow: var(--shadow-btn);
}

.pricing__notes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg) var(--space-2xl);
	margin-top: clamp(2rem, 5vw, 3.5rem);
}

.pricing__list {
	display: grid;
	flex: 1 1 28rem;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pricing__list li {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-weight: 600;
}

.pricing__icon {
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.25rem;
}

.icon {
	width: 1em;
	height: 1em;
}

.pricing__cta {
	flex: 0 0 auto;
	min-height: 52px;
	padding-inline: 2rem;
	font-size: 1.0625rem;
}

@media (max-width: 639px) {
	.pricing__cta {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.price-card__tag {
		transition: none;
	}
}

/* Карточки до появления сдвинуты по x (GSAP), наклейки выступают за край: страница не должна шире экрана */
.about,
.for-whom,
.benefits,
.terms,
.after-approval {
	overflow-x: clip;
}

/* Общая шапка секции: заголовок + лид */
.section-head {
	display: grid;
	gap: var(--space-xs);
	margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.section-head h2 {
	margin: 0;
}

.section-head__lead {
	margin: 0;
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	font-weight: 700;
}

/* ——— О ярмарке (pink-soft + halftone) ——— */
.about {
	background:
		radial-gradient(circle at center, rgb(253 183 211 / 0.55) 1.5px, transparent 2px) 0 0 / 16px 16px,
		var(--color-pink-soft);
}

.about__inner {
	display: grid;
	gap: clamp(2.5rem, 6vw, 4rem);
	align-items: center;
}

@media (min-width: 900px) {
	.about__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(3rem, 6vw, 6rem);
	}

	/* Нет программы: текст на всю ширину */
	.about__inner--solo {
		grid-template-columns: minmax(0, 1fr);
	}
}

.about__media {
	position: relative;
	width: min(100%, 26rem);
	margin-inline: auto;
	padding: 0.5rem 0.75rem 2rem;
}

/* Мини-афиша: розовый лист в белой рамке, программа столбиком между тонкими линейками, как на афише */
.about__poster {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background:
		radial-gradient(circle at center, rgb(236 47 89 / 0.22) 1.5px, transparent 2px) 0 0 / 14px 14px,
		var(--color-pink);
	border: 4px solid var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card), 0.9rem 0.9rem 0 var(--color-green);
	rotate: -2.5deg;
	transition: rotate 0.6s var(--ease-out);
}

@media (hover: hover) {
	.about__media:hover .about__poster {
		rotate: 0.8deg;
	}
}

.about__poster-title {
	margin: 0;
	padding-bottom: var(--space-md);
	border-bottom: 2px solid var(--color-ink);
	color: var(--color-red-deep);
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1;
	text-transform: uppercase;
}

/* Наклейка «Поддержи локальное!» шлёпается на угол рамки */
.about__sticker {
	position: absolute;
	right: -0.25rem;
	bottom: 0.25rem;
	z-index: 2;
	padding: 0.45rem 1.1rem 0.5rem;
	background: var(--color-red-btn);
	border: 3px solid var(--color-white);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-btn);
	color: var(--color-white);
	font-family: var(--font-accent);
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	line-height: 1.1;
	rotate: 6deg;
	animation: sticker-wiggle 4s ease-in-out infinite;
}

.about__star {
	position: absolute;
	z-index: 1;
	width: var(--s, 2rem);
	height: var(--s, 2rem);
	pointer-events: none;
}

.about__star::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--c, var(--color-red));
	clip-path: var(--star);
	animation: star-twinkle 3s ease-in-out infinite;
	animation-delay: var(--delay, 0s);
}

.about__star--a { --s: 2.75rem; top: -0.25rem; right: 0.25rem; }
.about__star--b { --s: 1.5rem; top: 38%; left: -0.5rem; --c: var(--color-green); --delay: -1s; }
.about__star--c { --s: 1.9rem; bottom: 18%; right: -0.75rem; --c: var(--color-pink); --delay: -2s; }

.about__kicker {
	margin: 0 0 var(--space-sm);
	color: var(--color-green);
	font-family: var(--font-display);
	font-size: var(--fs-small);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.about__body h2 {
	max-width: 18ch;
}

.about__text {
	max-width: 62ch;
	font-size: clamp(1rem, 1.5vw, 1.1875rem);
}

.about__text > :last-child {
	margin-bottom: 0;
}

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

.about__program {
	display: grid;
	gap: 0.85rem;
	margin: 0;
	padding: var(--space-lg) 0 var(--space-md);
	border-bottom: 2px solid var(--color-ink);
	list-style: none;
}

.about__program li {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	line-height: 1.1;
	text-transform: uppercase;
}

.about__badge {
	width: 2.6rem;
	height: 2.6rem;
	font-size: 1.3rem;
}

.about-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.45rem 1rem;
	background: var(--color-pink-soft);
	border: var(--border);
	border-radius: var(--radius-pill);
	font-size: var(--fs-small);
	font-weight: 600;
	transition: translate var(--dur-base) var(--ease-out);
}

.about-chip .icon {
	flex-shrink: 0;
	width: 1.15rem;
	height: 1.15rem;
	color: var(--color-green);
}

/* Факты (дата, место, частота) заметнее программы: зелёная заливка */
.about-chip--fact {
	background: var(--color-green);
	border-color: var(--color-green);
	color: var(--color-white);
	font-weight: 700;
}

.about-chip--fact .icon {
	color: var(--color-pink);
}

@media (hover: hover) {
	.about-chip:hover {
		translate: 0 -3px;
	}
}

/* ——— Кому подойдёт (pink + halftone) ——— */
.for-whom {
	padding-bottom: calc(var(--section-y) + 1.5rem);
	background:
		radial-gradient(circle at center, rgb(255 255 255 / 0.35) 1.5px, transparent 2px) 0 0 / 14px 14px,
		var(--color-pink);
}

.for-whom__grid {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 768px) {
	.for-whom__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.for-card {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	transition: translate var(--dur-base) var(--ease-out), rotate var(--dur-base) var(--ease-out);
}

/* Цветная «лента» сверху: зелёная — приглашаем, красная — не рассматриваем */
.for-card::before {
	content: '';
	position: absolute;
	inset: 0 1.5rem auto;
	height: 0.4rem;
	background: var(--accent);
	border-radius: 0 0 var(--radius-pill) var(--radius-pill);
}

/* Пара «да / нет» ровная: без наклона и одной высоты — наклон оставлен декору */
.for-card--yes { --accent: var(--color-green); }
.for-card--no { --accent: var(--color-red-deep); }

@media (hover: hover) {
	.for-card:hover {
		translate: 0 -6px;
	}
}

.for-card__title {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: var(--space-lg);
	color: var(--accent);
}

.for-card__badge {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 3rem;
	height: 3rem;
	background: var(--accent);
	border-radius: 50%;
	color: var(--color-white);
	font-size: 1.6rem;
	box-shadow: 0 6px 14px -6px var(--accent);
}

.for-card__list {
	display: grid;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.for-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px dashed rgb(17 17 17 / 0.2);
	font-weight: 600;
}

.for-card__list li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.for-card__list .icon {
	flex-shrink: 0;
	width: 1.35rem;
	height: 1.35rem;
	margin-top: 0.15rem;
	color: var(--accent);
	stroke-width: 3;
}

.for-whom__note,
.terms__note {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	max-width: 52rem;
	margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
	padding: 1rem 1.5rem;
	background: var(--color-pink);
	border: 2px dashed var(--color-ink);
	border-radius: var(--radius-md);
	font-weight: 700;
	rotate: -0.4deg;
}

.for-whom__note {
	background: var(--color-pink-soft); /* секция сама розовая */
}

.for-whom__note .icon,
.terms__note .icon {
	flex-shrink: 0;
	width: 1.6rem;
	height: 1.6rem;
}

/* ——— Преимущества (pink-soft, наклонный верх ≈2°: розовый предыдущей секции виден в треугольнике) ——— */
.benefits {
	--slant: clamp(0.75rem, 3.5vw, 4rem);
	margin-top: calc(-1 * var(--slant));
	padding-top: calc(var(--section-y) + var(--slant));
	background: var(--color-pink-soft);
	clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
}

.benefits__grid {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.benefits__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.benefits__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.benefit {
	--tone: var(--color-green);
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	background: var(--color-white);
	border-radius: var(--radius-lg);
	transition: translate var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base);
}

.benefit:nth-child(even) {
	--tone: var(--color-red-btn);
}

/* Огромный номер на фоне: декор, едва заметный */
.benefit__num {
	position: absolute;
	top: -0.35rem;
	right: 0.75rem;
	color: var(--color-pink);
	font-family: var(--font-display);
	font-size: 5.5rem;
	line-height: 1;
	pointer-events: none;
	transition: translate var(--dur-base) var(--ease-out), scale var(--dur-base) var(--ease-out);
}

.benefit__icon {
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: var(--space-lg);
	font-size: 1.75rem;
	rotate: -4deg;
	transform-origin: 50% -0.5rem; /* качается на петельке */
	transition: rotate var(--dur-base) var(--ease-out), scale var(--dur-base) var(--ease-out);
}

.benefit__title {
	position: relative;
	font-size: clamp(1.2rem, 1.7vw, 1.45rem);
}

.benefit__text {
	position: relative;
	margin: 0;
}

@media (hover: hover) {
	.benefit:hover {
		translate: 0 -6px;
		background: var(--color-white);
		box-shadow: var(--shadow-card), inset 0 0 0 2px var(--color-pink);
	}

	.benefit:hover .benefit__icon {
		rotate: 4deg;
		scale: 1.1;
	}

	.benefit:hover .benefit__num {
		translate: 0 6px;
		scale: 1.08;
	}
}

/* Бесконечные мерцание/дыхание стоят вне экрана (класс ставит home-about.js) */
.about.is-paused *,
.about.is-paused *::before {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.about__poster,
	.for-card,
	.benefit,
	.benefit__icon,
	.benefit__num,
	.about-chip {
		transition: none;
	}

	.about__sticker,
	.about__star::before {
		animation: none;
	}
}

/* ——— Что дают / что нужно (pink-soft): две «карточки-билета» с наклейкой-тегом ——— */
.terms {
	background: var(--color-pink-soft);
}

.terms__grid {
	display: grid;
	gap: clamp(2rem, 4vw, 2.5rem);
}

@media (min-width: 768px) {
	.terms__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

.terms-card {
	--accent: var(--color-green);
	--tint: var(--color-pink-soft);
	position: relative;
	margin-top: 1rem;
	padding: clamp(2rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
	background: var(--color-white);
	border: var(--border-strong);
	border-radius: var(--radius-lg);
	box-shadow: 0.6rem 0.6rem 0 var(--color-pink);
	transition: translate var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), rotate var(--dur-base) var(--ease-out);
}

.terms-card--give { rotate: -0.6deg; }

.terms-card--need {
	--accent: var(--color-red-deep);
	rotate: 0.6deg;
}

@media (hover: hover) {
	.terms-card:hover {
		translate: -3px -5px;
		rotate: 0deg;
		box-shadow: 0.9rem 0.9rem 0 var(--color-pink);
	}
}

/* Наклейка на углу карточки */
.terms-card__tag {
	position: absolute;
	top: -1.1rem;
	left: 1.5rem;
	padding: 0.35rem 1rem;
	background: var(--accent);
	border-radius: var(--radius-pill);
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	rotate: -3deg;
	box-shadow: 0 6px 12px -6px var(--accent);
}

.terms-card__title {
	margin-bottom: var(--space-lg);
	color: var(--accent);
}

.terms-card__list {
	display: grid;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.terms-card__list li {
	display: flex;
	align-items: center;
	gap: 0.95rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px dashed rgb(17 17 17 / 0.2);
	font-weight: 600;
}

.terms-card__list li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.terms-card__icon {
	--badge: var(--accent);
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.4rem;
	transform-origin: 50% -0.5rem;
	transition: rotate var(--dur-base) var(--ease-out), scale var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
	.terms-card__list li:hover .terms-card__icon {
		rotate: -8deg;
		scale: 1.1;
	}
}

.terms__note {
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
	background: var(--color-pink-soft);
	rotate: 0.4deg;
}

/* ——— После одобрения заявки (pink + halftone): шаги-стикеры на пунктирной линии ——— */
.after-approval {
	background:
		radial-gradient(circle at center, rgb(255 255 255 / 0.35) 1.5px, transparent 2px) 0 0 / 14px 14px,
		var(--color-pink);
}

.after-approval__track {
	--num: clamp(3.25rem, 8vw, 4.25rem);
	position: relative;
	max-width: 56rem;
	margin: 0 auto;
}

/* Линия-соединитель проходит через центры номеров: пунктир под маской, маску «рисует» JS (stroke-dashoffset) */
.after-approval__line {
	position: absolute;
	top: calc(var(--num) / 2);
	left: 0;
	width: var(--num);
	height: calc(100% - var(--num));
	overflow: visible;
}

.after-approval__line > line {
	stroke: var(--color-green);
	stroke-width: 3;
	stroke-dasharray: 7 7;
}

.after-approval__steps {
	position: relative;
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.approval-step {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(0.85rem, 2.5vw, 1.5rem);
}

.approval-step__num {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: var(--num);
	height: var(--num);
	background: var(--color-green); /* все шаги зелёные: цвет не должен выглядеть статусом; красный — только финиш (последний шаг) */
	border: var(--border-strong);
	border-radius: 50%;
	box-shadow: 3px 3px 0 var(--color-ink);
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: calc(var(--num) * 0.5);
	line-height: 1;
	rotate: -6deg;
}

.approval-step:nth-child(even) .approval-step__num {
	rotate: 6deg;
}

/* Финиш: последний шаг красный, со штампом «Готово!» (цифра крупная — белый на красном допустим) */
.approval-step:last-child .approval-step__num {
	background: var(--color-red-btn);
}

.approval-step:last-child .approval-step__text {
	position: relative;
	border: 2px solid var(--color-red-btn);
	padding-right: 6.5rem;
}

.approval-step:last-child .approval-step__text::after {
	content: 'Готово!' / '';
	position: absolute;
	top: 50%;
	right: 0.9rem;
	padding: 0.1rem 0.6rem;
	background: var(--color-red-btn);
	border-radius: 0.5rem;
	color: var(--color-white);
	font-family: var(--font-accent);
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.3;
	translate: 0 -50%;
	rotate: 6deg;
}

.approval-step__text {
	flex: 1;
	padding: 0.9rem 1.25rem;
	background: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	font-weight: 700;
	rotate: 0.4deg;
	transition: translate var(--dur-base) var(--ease-out), rotate var(--dur-base) var(--ease-out);
}

.approval-step:nth-child(even) .approval-step__text {
	rotate: -0.4deg;
}

@media (hover: hover) {
	.approval-step:hover .approval-step__text {
		translate: 6px 0;
		rotate: 0deg;
	}
}

.after-approval__memo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	max-width: 56rem;
	margin: clamp(2rem, 5vw, 3rem) auto 0;
	padding: 1.1rem 1.75rem;
	background: var(--color-green);
	border-radius: var(--radius-md);
	box-shadow: 0.4rem 0.4rem 0 var(--color-ink);
	color: var(--color-white);
	font-size: clamp(1.05rem, 1.8vw, 1.25rem);
	font-weight: 800;
	rotate: -0.8deg;
}

.after-approval__memo .icon {
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	stroke-width: 3;
}

@media (prefers-reduced-motion: reduce) {
	.terms-card,
	.terms-card__icon,
	.approval-step__text {
		transition: none;
	}
}

/* ——— Тизер конкурса (зелёный + halftone, наклонный низ ≈2°): приз-билет, кот в очках на розовой вспышке ——— */
.contest {
	--slant: clamp(0.75rem, 3.5vw, 4rem);
	position: relative;
	z-index: 1;
	overflow: clip;
	margin-bottom: calc(-1 * var(--slant));
	padding-block: var(--section-y) calc(var(--section-y) + var(--slant));
	background:
		radial-gradient(circle at center, rgb(255 255 255 / 0.12) 1.5px, transparent 2px) 0 0 / 16px 16px,
		var(--color-green);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
	color: var(--color-white);
}

.contest + .after-approval {
	padding-top: calc(var(--section-y) + clamp(0.75rem, 3.5vw, 4rem));
}

.contest__inner {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

@media (min-width: 900px) {
	.contest__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	}
}

.contest__kicker {
	display: inline-block;
	margin: 0 0 var(--space-md);
	padding: 0.35rem 1rem;
	background: var(--color-white);
	border-radius: var(--radius-pill);
	color: var(--color-green-deep);
	font-family: var(--font-display);
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	rotate: -3deg;
}

.contest__nowrap {
	white-space: nowrap;
}

.contest h2 {
	max-width: 14ch;
	text-transform: uppercase;
	text-shadow: 3px 3px 0 var(--color-green-dark);
}

.contest__text {
	max-width: 38rem;
	font-size: clamp(1.05rem, 1.8vw, 1.2rem);
	font-weight: 600;
}

/* Приз: белый билет с жёсткой тенью, кубок в красном кружке-наклейке */
.contest__prize {
	position: relative;
	max-width: 34rem;
	margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 clamp(1.25rem, 2.5vw, 1.5rem);
	padding: 1.25rem 1.5rem 1.25rem 5.5rem;
	background: var(--color-white);
	border: var(--border-strong);
	border-radius: var(--radius-md);
	box-shadow: 0.4rem 0.4rem 0 var(--color-ink);
	color: var(--color-ink);
	rotate: -1.2deg;
}

.contest__prize-icon {
	position: absolute;
	top: 50%;
	left: -1rem;
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	background: var(--color-red-btn);
	border: var(--border-strong);
	border-radius: 50%;
	box-shadow: 3px 3px 0 var(--color-ink);
	color: var(--color-white);
	font-size: 2.25rem;
	translate: 0 -50%;
	rotate: -10deg;
}

.contest__prize-label {
	margin: 0 0 0.25rem;
	color: var(--color-red-deep);
	font-size: var(--fs-small);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.contest__prize-text {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.6vw, 1.75rem);
	line-height: 1.15;
	text-wrap: balance;
}

/* Кнопка: белая наклейка, при наведении вдавливается и розовеет */
.contest__btn {
	background: var(--color-white);
	border-color: var(--color-ink);
	box-shadow: 4px 4px 0 var(--color-ink);
	color: var(--color-ink);
	font-size: 1.0625rem;
	padding-inline: 2rem;
}

@media (hover: hover) {
	.contest__btn:hover {
		background: var(--color-pink);
		box-shadow: 1px 1px 0 var(--color-ink);
		transform: translate(3px, 3px);
	}
}

.contest__btn:focus-visible {
	outline-color: var(--color-white);
}

/* Сцена справа: розовая вспышка, кот, искры в линзах и звёзды вокруг */
.contest__stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(18.5rem, 82vw, 30rem);
}

.contest__burst {
	position: absolute;
	inset: 4% 0;
	margin: auto;
	width: min(100%, clamp(17rem, 78vw, 28rem));
	aspect-ratio: 1;
	background: var(--color-pink);
	clip-path: var(--burst);
	animation: contest-spin 50s linear infinite;
}

/* Вспышка — «окно»: её clip-path обрезает кота, он вылезает из неё снизу. Окно вращается, поэтому кот внутри крутится в обратную сторону и стоит на месте. */
.contest__spin {
	position: absolute;
	inset: 0;
	animation: contest-spin 50s linear infinite reverse;
}

.contest__cat {
	position: absolute;
	top: 0%;
	left: 50%;
	width: 106%;
	margin-left: -71%; /* в festive-cat прозрачные поля слева и сверху: центрируем кота во вспышке (не translate: его сбрасывает GSAP) */
	filter: drop-shadow(0 14px 18px rgb(17 17 17 / 0.3));
}

/* Покачивание на картинке, а не на обёртке: обёртку двигает GSAP при появлении */
.contest__cat img {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: 50% 100%;
	animation: contest-sway 5s ease-in-out infinite;
}

/* Белые искры поверх звёзд в очках: пульсируют по очереди */
.contest__glint {
	position: absolute;
	width: 6%;
	aspect-ratio: 1;
	background: var(--color-white);
	clip-path: var(--star);
	translate: -50% -50%;
	animation: contest-glint 2.4s ease-in-out infinite;
}

.contest__glint--l { left: 54.6%; top: 36%; }
.contest__glint--r { left: 67.8%; top: 31.9%; width: 7%; animation-delay: -1.2s; }

.contest__star {
	position: absolute;
	width: var(--s, 2rem);
	height: var(--s, 2rem);
}

.contest__star::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--c, var(--color-white));
	clip-path: var(--star);
	animation: contest-twinkle 3s ease-in-out infinite;
	animation-delay: var(--delay, 0s);
}

.contest__star--a { --s: 2.75rem; top: 4%; left: 12%; }
.contest__star--b { --s: 1.5rem; top: 22%; right: 6%; --delay: -1s; }
.contest__star--c { --s: 2rem; bottom: 10%; right: 12%; --delay: -2s; }
.contest__star--d { --s: 1.25rem; bottom: 28%; left: 4%; --delay: -1.5s; }

@keyframes contest-spin {
	to { rotate: 360deg; }
}

@keyframes contest-sway {
	50% { rotate: 1.5deg; scale: 1.015; }
}

@keyframes contest-glint {
	0%, 100% { scale: 0.45; rotate: 0deg; opacity: 0.55; }
	50% { scale: 1.15; rotate: 45deg; opacity: 1; }
}

@keyframes contest-twinkle {
	50% { scale: 0.55; rotate: 20deg; opacity: 0.6; }
}

/* Бесконечные анимации стоят вне экрана и в фоновой вкладке (класс ставит home-sections.js) */
.contest.is-paused *,
.contest.is-paused *::before {
	animation-play-state: paused;
}

/* Десктоп: сцена тянется на высоту текста, кот и вспышка крупнее */
@media (min-width: 900px) {
	.contest__stage {
		align-self: stretch;
		min-height: 34rem;
	}

	.contest__burst {
		width: min(100%, 36rem);
	}

}

@media (max-width: 639px) {
	.contest__prize {
		padding: 1.1rem 1.1rem 1.1rem 4.25rem;
	}

	.contest__prize-icon {
		left: -0.75rem;
		width: 3.75rem;
		height: 3.75rem;
		font-size: 1.85rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.contest__burst,
	.contest__spin,
	.contest__cat img,
	.contest__glint,
	.contest__star::before {
		animation: none;
	}

	.contest__glint {
		scale: 0.8;
	}
}