/* =============================================================
   PIARNYA — Неоновая вывеска «ПИАРНЯ» для тёмной зоны hero
   Изоляция: префикс .piarnya-neon. Монтируется в #hero-neon-slot
   (см. hero.php/hero.css). Фирменные цвета: маджента (ближний
   свет) → пурпур (дальний свет), как в общем градиенте сайта.
   Принцип: стена сама по себе мертва — всё «интересное» на ней
   это свет от букв. Ничто на фоне не анимируется независимо
   от состояния вывески.
   Зависит от: variables.css (--_magenta-500, --_purple-500, --_cyan-500)
   ============================================================= */
.piarnya-neon {
	--pn-magenta: var(--_magenta-500, #CC1FA0);
	--pn-purple:  var(--_purple-500,  #7B2FBE);
	--pn-cyan:    var(--_cyan-500,    #00C8D4);

	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* База стены: почти чёрная, низ чуть глубже */
	background: linear-gradient(0deg, #07040B 0%, #0E0817 100%);
	/* размер слова считается от ширины слота (видимой части тёмной зоны) */
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* ── СТАТИЧНЫЙ ФОН СТЕНЫ (не зависит от вкл/выкл) ───────────── */

/* Зерно штукатурки — едва различимое, без узоров */
.piarnya-neon__grain {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 180px 180px;
	mix-blend-mode: overlay;
	opacity: .6;
	pointer-events: none;
}

/* Виньетка: едва теплее в центре, заметно глубже к краям */
.piarnya-neon__vignette {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 62% 46% at 50% 42%, rgba(255, 224, 196, 0.02) 0%, transparent 60%),
		radial-gradient(ellipse 120% 100% at 50% 50%, transparent 50%, rgba(2, 1, 5, 0.55) 100%);
	pointer-events: none;
}

/* ── СВЕТОВЫЕ СЛОИ НА СТЕНЕ (живут от вывески: on/off) ──────── */
.piarnya-neon__light {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* лёгкое дыхание ambient-света, амплитуда 0.95–1 */
	animation: piarnya-neon-breathe 4s ease-in-out infinite;
}

.piarnya-neon__wash,
.piarnya-neon__pool {
	position: absolute;
	inset: 0;
	opacity: 1;
	will-change: opacity;
	/* включение: стена «наливается» светом после вспышки букв */
	transition: opacity 1.4s ease-out .35s;
}

/* Широкий мягкий пурпурный заплыв за словом (дальний свет) */
.piarnya-neon__wash {
	background: radial-gradient(
		ellipse 75% 52% at 50% 40%,
		rgba(123, 47, 190, 0.10) 0%,
		rgba(123, 47, 190, 0.04) 45%,
		transparent 70%
	);
}

/* «Лужица» света под словом — ближний, тёплый маджента-оттенок */
.piarnya-neon__pool {
	background: radial-gradient(
		ellipse 36% 50% at 50% 72%,
		rgba(204, 31, 160, 0.09) 0%,
		rgba(204, 31, 160, 0.03) 42%,
		transparent 72%
	);
}

/* Выключено: гаснут ВСЕ световые слои стены */
.piarnya-neon.is-off .piarnya-neon__wash,
.piarnya-neon.is-off .piarnya-neon__pool {
	opacity: 0;
	transition: opacity .55s ease-out .2s; /* чуть после первых погасших букв */
}

.piarnya-neon.is-off .piarnya-neon__light { animation: none; }

@keyframes piarnya-neon-breathe {
	0%, 100% { opacity: .95; }
	50%      { opacity: 1; }
}

/* ── ВЫВЕСКА: провод, кронштейны, слово ─────────────────────── */
.piarnya-neon__fixture {
	position: relative;
	z-index: 1;
	text-align: center;
}

/* Провод от «потолка» к вывеске */
.piarnya-neon__wire {
	position: absolute;
	left: 50%;
	bottom: 100%;
	width: 2px;
	height: 24vh;
	transform: translateX(-50%);
	background: linear-gradient(180deg, transparent 0%, #2E2438 85%, #3A2E48 100%);
	pointer-events: none;
}

.piarnya-neon__word {
	position: relative;
	display: flex;
	justify-content: center;
	font-family: 'Manrope', system-ui, sans-serif; /* как в шапке hero */
	font-weight: 800;
	font-size: 18.24cqi; /* было 15.2cqi — +20% */
	letter-spacing: 0.04em;
	line-height: 1;
	white-space: nowrap;
	user-select: none;
	cursor: default;
}

@supports not (font-size: 1cqi) {
	.piarnya-neon__word { font-size: clamp(58px, 12vw, 120px); } /* было 48/10vw/100 — +20% */
}

/* Монтажные кронштейны над буквами */
.piarnya-neon__bracket {
	position: absolute;
	top: -22px;
	width: 4px;
	height: 26px;
	border-radius: 2px;
	background: linear-gradient(180deg, #241B30 0%, #3A2E48 50%, #241B30 100%);
	pointer-events: none;
}

.piarnya-neon__bracket:nth-of-type(1) { left: 14%; }
.piarnya-neon__bracket:nth-of-type(2) { left: 50%; }
.piarnya-neon__bracket:nth-of-type(3) { left: 86%; }

/* Точка крепления троса — маленький светодиод, гаснет вместе с вывеской */
.piarnya-neon__bracket::before {
	content: '';
	position: absolute;
	top: -3px;
	left: 50%;
	transform: translateX(-50%);
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #4CFAE1;
	box-shadow: 0 0 4px rgba(76, 250, 225, 0.55);
	animation: piarnya-neon-led-pulse 4.6s ease-in-out infinite;
}

/* независимый сдвиг фазы: у каждой точки свой период 4–6s */
.piarnya-neon__bracket:nth-of-type(1)::before { animation-duration: 4.4s; animation-delay: 0s; }
.piarnya-neon__bracket:nth-of-type(2)::before { animation-duration: 5.2s; animation-delay: .8s; }
.piarnya-neon__bracket:nth-of-type(3)::before { animation-duration: 5.8s; animation-delay: 1.6s; }

@keyframes piarnya-neon-led-pulse {
	0%, 100% { opacity: .55; }
	50%      { opacity: .8; } /* амплитуда минимальная */
}

/* Точки — часть питания вывески: гаснут вместе с ней */
.piarnya-neon.is-off .piarnya-neon__bracket::before {
	opacity: 0;
	animation: none;
	transition: opacity .35s ease;
}

/* ── БУКВА ──────────────────────────────────────────────────── */
/* Сам текст буквы — тёмный силуэт трубки (виден при выкл).
   ::after — «включённая» копия: белое ядро + фирменные хвосты.
   ::before — локальное пятно света на стене за буквой (hover). */
.piarnya-neon__letter {
	position: relative;
	display: inline-block;
	color: rgba(255, 255, 255, 0.04); /* едва угадываемый силуэт */
	transition: transform .3s ease;
}

/* Пятно света на стене за буквой — оживает на hover */
.piarnya-neon__letter::before {
	content: '';
	position: absolute;
	left: -55%;
	top: -55%;
	width: 210%;
	height: 210%;
	border-radius: 50%;
	background: radial-gradient(
		circle closest-side,
		rgba(204, 31, 160, 0.20) 0%,
		rgba(123, 47, 190, 0.09) 45%,
		transparent 72%
	);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

/* Включённая буква: резкий белый штрих + свечение ВОКРУГ, не поверх.
   Ядро тонкое (2px), чтобы буквы читались чётко на крупном кегле;
   ближний слой — маджента, дальний — пурпур (фирменный переход). */
.piarnya-neon__letter::after {
	content: attr(data-char);
	position: absolute;
	inset: 0;
	color: #fff;
	text-shadow:
		0 0 2px  rgba(255, 255, 255, 0.95),
		0 0 6px  rgba(255, 255, 255, 0.35),
		0 0 12px var(--pn-magenta),
		0 0 28px var(--pn-magenta),
		0 0 60px var(--pn-purple),
		0 0 120px rgba(123, 47, 190, 0.6);
	opacity: 1;
	will-change: opacity;
	transition: opacity .12s linear, filter .3s ease;
}

/* Выключение: буквы гаснут ПО ОЧЕРЕДИ, stagger ~70ms.
   ⚠ nth-child считает позицию СРЕДИ ВСЕХ соседей в .piarnya-neon__word,
   а перед буквами стоят 3 span.piarnya-neon__bracket — поэтому
   буквы это реально 4-й..9-й ребёнок (П,И,А,Р,Н,Я), а не 1-й..6-й. */
.piarnya-neon.is-off .piarnya-neon__letter::after { opacity: 0; }

.piarnya-neon.is-off .piarnya-neon__letter:nth-child(4)::after { transition-delay: 0ms;   } /* П */
.piarnya-neon.is-off .piarnya-neon__letter:nth-child(5)::after { transition-delay: 70ms;  } /* И */
.piarnya-neon.is-off .piarnya-neon__letter:nth-child(6)::after { transition-delay: 140ms; } /* А */
.piarnya-neon.is-off .piarnya-neon__letter:nth-child(7)::after { transition-delay: 210ms; } /* Р */
.piarnya-neon.is-off .piarnya-neon__letter:nth-child(8)::after { transition-delay: 280ms; } /* Н */
.piarnya-neon.is-off .piarnya-neon__letter:nth-child(9)::after { transition-delay: 350ms; } /* Я — последняя, отражение синхронизировано с ней */

/* ── ВКЛЮЧЕНИЕ: 1–2 коротких мигания → ровный свет навсегда ─── */
.piarnya-neon.is-igniting .piarnya-neon__letter::after {
	animation: piarnya-neon-ignite 1.05s linear both;
}

/* И, Р, Я (2-я/4-я/6-я буквы = реальные дети 5/7/9) запаздывают
   на кадр — живой разнобой без хаоса */
.piarnya-neon.is-igniting .piarnya-neon__letter:nth-child(5)::after,
.piarnya-neon.is-igniting .piarnya-neon__letter:nth-child(7)::after,
.piarnya-neon.is-igniting .piarnya-neon__letter:nth-child(9)::after {
	animation-delay: .05s;
}

@keyframes piarnya-neon-ignite {
	0%   { opacity: 0; }
	42%  { opacity: 0; }    /* темнота перед стартом */
	46%  { opacity: 1; }    /* вспышка 1 */
	54%  { opacity: .12; }
	64%  { opacity: 1; }    /* вспышка 2 */
	72%  { opacity: .35; }
	100% { opacity: 1; }    /* ровный свет */
}

/* ── HOVER ПО БУКВЕ (только десктоп с мышью) ────────────────── */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {

	.piarnya-neon.is-on .piarnya-neon__letter:hover {
		transform: scale(1.02);
	}

	/* буква разгорается + пятно на стене за ней */
	.piarnya-neon.is-on .piarnya-neon__letter:hover::after {
		filter: brightness(1.3);
	}

	.piarnya-neon.is-on .piarnya-neon__letter:hover::before {
		opacity: 1;
	}
}

/* ── ПОДПИСЬ ПОД СЛОВОМ ────────────────────────────────────────
   Та же двухслойная схема, что у букв «ПИАРНЯ»: сам сегмент —
   всегда видимый тёмный силуэт (погашенная трубка), ::after —
   слой свечения, который гаснет/мерцает при включении вместе
   со словом. Разбито на 5 сегментов, чтобы мерцание при включении
   шло вразнобой по сегментам, а не одним плоским блоком. */
.piarnya-neon__tagline {
	position: relative;
	z-index: 1;
	margin: 15.3cqi 0 0; /* было 18cqi — выше примерно на 15% */
	font-family: 'Manrope', system-ui, sans-serif;
	font-weight: 800; /* было 300 — теперь как у слова «ПИАРНЯ» */
	font-size: clamp(13px, 2.2cqi, 15px);
	letter-spacing: 0.4em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
}

.piarnya-neon__tagline-seg,
.piarnya-neon__tagline-sep {
	position: relative;
	display: inline-block;
	color: rgba(255, 255, 255, 0.05); /* погашенный силуэт — как у букв слова */
}

/* Та же формула свечения, что у букв слова (белое ядро →
   маджента → пурпур), радиусы пропорционально меньше под
   размер текста ~15px против ~130px у слова */
.piarnya-neon__tagline-seg::after,
.piarnya-neon__tagline-sep::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	color: #fff;
	text-shadow:
		0 0 1px  rgba(255, 255, 255, 0.95),
		0 0 3px  rgba(255, 255, 255, 0.4),
		0 0 6px  var(--pn-magenta),
		0 0 14px var(--pn-magenta),
		0 0 28px var(--pn-purple),
		0 0 50px rgba(123, 47, 190, 0.65);
	opacity: 1;
	will-change: opacity;
	transition: opacity .3s linear;
}

/* ВЫКЛЮЧЕНИЕ: сегменты гаснут по очереди следом за буквами слова
   (первый — через 500ms, как и раньше у всей строки целиком) */
.piarnya-neon.is-off .piarnya-neon__tagline-seg::after,
.piarnya-neon.is-off .piarnya-neon__tagline-sep::after {
	opacity: 0;
}
.piarnya-neon.is-off .piarnya-neon__tagline-seg:nth-child(1)::after { transition-delay: 500ms; }
.piarnya-neon.is-off .piarnya-neon__tagline-sep:nth-child(2)::after { transition-delay: 550ms; }
.piarnya-neon.is-off .piarnya-neon__tagline-seg:nth-child(3)::after { transition-delay: 600ms; }
.piarnya-neon.is-off .piarnya-neon__tagline-sep:nth-child(4)::after { transition-delay: 650ms; }
.piarnya-neon.is-off .piarnya-neon__tagline-seg:nth-child(5)::after { transition-delay: 700ms; }

/* ВКЛЮЧЕНИЕ: тот же кейфрейм мерцания, что у букв слова,
   у каждого сегмента — свой сдвиг, вразнобой */
.piarnya-neon.is-igniting .piarnya-neon__tagline-seg::after,
.piarnya-neon.is-igniting .piarnya-neon__tagline-sep::after {
	animation: piarnya-neon-ignite 1.05s linear both;
}
.piarnya-neon.is-igniting .piarnya-neon__tagline-seg:nth-child(1)::after { animation-delay: 0s; }
.piarnya-neon.is-igniting .piarnya-neon__tagline-sep:nth-child(2)::after { animation-delay: .04s; }
.piarnya-neon.is-igniting .piarnya-neon__tagline-seg:nth-child(3)::after { animation-delay: .08s; }
.piarnya-neon.is-igniting .piarnya-neon__tagline-sep:nth-child(4)::after { animation-delay: .03s; }
.piarnya-neon.is-igniting .piarnya-neon__tagline-seg:nth-child(5)::after { animation-delay: .07s; }

/* ── ТУМБЛЕР «ПИТАНИЕ ВЫВЕСКИ» ──────────────────────────────── */
.piarnya-neon__toggle-wrap {
	position: relative;
	z-index: 1;
	margin-top: 16px; /* зазор от строки-тега, отражение уже отработано выше */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.piarnya-neon__toggle-label {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(204, 31, 160, 0.45);
	transition: color 0.4s ease;
	user-select: none;
}

.piarnya-neon.is-on .piarnya-neon__toggle-label {
	color: rgba(0, 200, 212, 0.6);
}

.piarnya-neon__toggle {
	position: relative;
	width: 52px;
	height: 28px;
	border-radius: 14px;
	background: rgba(42, 24, 64, 0.6);
	border: 1px solid rgba(204, 31, 160, 0.18);
	cursor: pointer;
	transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
	-webkit-tap-highlight-color: transparent;
}

.piarnya-neon__toggle:hover { border-color: rgba(204, 31, 160, 0.4); }

.piarnya-neon__toggle:focus-visible {
	outline: 2px solid var(--pn-cyan);
	outline-offset: 3px;
}

.piarnya-neon.is-on .piarnya-neon__toggle {
	background: rgba(0, 200, 212, 0.08);
	border-color: rgba(0, 200, 212, 0.3);
	box-shadow: 0 0 12px rgba(0, 200, 212, 0.12);
}

.piarnya-neon__toggle-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: linear-gradient(145deg, #3A2255 0%, #2A1840 100%);
	border: 1px solid rgba(204, 31, 160, 0.25);
	box-shadow: inset 0 1px 2px rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.4);
	transition: transform .35s cubic-bezier(.22,1,.36,1), background .35s ease,
	            border-color .35s ease, box-shadow .35s ease;
	will-change: transform;
}

.piarnya-neon.is-on .piarnya-neon__toggle-knob {
	transform: translateX(24px);
	background: linear-gradient(145deg, #33D6E0 0%, #00A3AC 100%);
	border-color: rgba(0, 200, 212, 0.5);
	box-shadow: inset 0 1px 2px rgba(255,255,255,.2),
	            0 0 8px rgba(0,200,212,.35), 0 2px 6px rgba(0,0,0,.3);
}

/* Светодиод слева — виден при включённом (рычаг справа) */
.piarnya-neon__toggle-led {
	position: absolute;
	top: 50%;
	left: 9px;
	transform: translateY(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(0, 200, 212, 0);
	box-shadow: 0 0 4px rgba(0, 200, 212, 0);
	transition: background .4s ease, box-shadow .4s ease;
}

.piarnya-neon.is-on .piarnya-neon__toggle-led {
	background: rgba(0, 200, 212, 0.8);
	box-shadow: 0 0 4px rgba(0, 200, 212, 0.5);
}

/* ── МОБИЛЬНЫЙ (≤768px): ховера нет, слово ~85% ширины ──────── */
@media (max-width: 768px) {
	.piarnya-neon__word { font-size: 16cqi; }

	@supports not (font-size: 1cqi) {
		.piarnya-neon__word { font-size: clamp(36px, 13vw, 68px); }
	}

	/* Тег: было letter-spacing 0.4em/nowrap — рассчитано на широкий
	   десктопный слот (~680px). На узком мобильном (320-430px) это
	   растягивало строку до 600px+ и обрезало её по бокам. Плюс
	   зазор от слова уменьшен, чтобы тумблер уместился в узкую
	   мобильную неоновую полосу (200-260px высотой). */
	.piarnya-neon__tagline {
		margin-top: 8cqi;
		padding-inline: 12px;
		letter-spacing: .15em;
		font-size: clamp(9px, 2.4cqi, 12px);
		white-space: normal;
		line-height: 1.5;
	}

	.piarnya-neon__toggle-wrap { margin-top: 10px; }
}

/* ── PREFERS-REDUCED-MOTION ─────────────────────────────────── */
/* Без мерцаний и дыхания: статичное включённое состояние,
   тумблер переключает мгновенно */
@media (prefers-reduced-motion: reduce) {
	.piarnya-neon__light { animation: none !important; }

	.piarnya-neon.is-igniting .piarnya-neon__letter::after,
	.piarnya-neon.is-igniting .piarnya-neon__tagline-seg::after,
	.piarnya-neon.is-igniting .piarnya-neon__tagline-sep::after {
		animation: none !important;
	}

	.piarnya-neon__letter,
	.piarnya-neon__letter::before,
	.piarnya-neon__letter::after,
	.piarnya-neon__wash,
	.piarnya-neon__pool,
	.piarnya-neon__tagline-seg::after,
	.piarnya-neon__tagline-sep::after,
	.piarnya-neon__toggle-knob {
		transition: none !important;
	}

	.piarnya-neon__bracket::before { animation: none !important; }
}