/*!
 * Стихи — лента: сцена для плеера радио (Dead Cat Radio). Пока звучит трек спектакля, панель плеера
 * внизу сайта — сцена: тёмная коробка с лучом прожектора, бархатные кулисы по краям, ламбрекен
 * с золотой бахромой над панелью, рампа внизу, театральные маски у обложки, золото вместо красного.
 * Классы ставит assets/js/stihi-stage.js: .pl-stage-on у панели и у <html>, .pl-stage-opening — занавес раздвигается.
 */

html .dcr-bar.pl-stage-on {
	--pl-cw: 46px; /* ширина кулисы */
	--dcr-bg: #170b09;
	--dcr-text: #f4e7cf;
	--dcr-muted: #c9a988;
	--dcr-line: #3d1f16;
	--dcr-hover: #2b140f;
	--dcr-accent: #e0b24a;
	--dcr-accent-text: #1c0f05;
	--dcr-art-filter: sepia(0.25) contrast(1.05);
	--dcr-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
	--dcr-pop-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
	--dcr-viz: rgba(224, 178, 74, 0.16);
	background:
		radial-gradient(60% 150% at 50% -45%, rgba(255, 214, 140, 0.24), rgba(255, 214, 140, 0) 70%),
		linear-gradient(180deg, #24100c 0%, #120706 100%);
	border-top-color: #5a2a17;
}
html .dcr-bar.pl-stage-on.dcr-theme-night {
	--dcr-text: #dcc6a2;
	--dcr-muted: #9c7f62;
	--dcr-accent: #b98e3e;
	background:
		radial-gradient(60% 150% at 50% -45%, rgba(255, 200, 120, 0.12), rgba(255, 200, 120, 0) 70%),
		linear-gradient(180deg, #160906 0%, #0a0403 100%);
}
@media (max-width: 1099px) {
	html .dcr-bar.pl-stage-on { --pl-cw: 26px; }
}
@media (max-width: 640px) {
	html .dcr-bar.pl-stage-on { --pl-cw: 14px; }
}

/* Содержимое панели — между кулисами. */
html .dcr-bar.pl-stage-on .dcr-bar-row {
	padding-left: calc(var(--pl-cw) + 10px);
	padding-right: calc(var(--pl-cw) + 8px);
}
html .dcr-bar.pl-stage-on .dcr-bar-title {
	font-family: "Yeseva One", "Prata", Georgia, "Times New Roman", serif;
	font-weight: 400;
	letter-spacing: 0.01em;
}
html .dcr-bar.pl-stage-on .dcr-bar-sub {
	font-family: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12px;
}
html .dcr-bar.pl-stage-on .dcr-bar-play {
	background: radial-gradient(circle at 35% 30%, #f8df8e, #e0b24a 55%, #a87822);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 18px rgba(224, 178, 74, 0.35);
}
html .dcr-bar.pl-stage-on .dcr-bar-fill {
	background: linear-gradient(90deg, #a87822, #f8df8e);
}

/* Обложка — в золотой раме, у неё маски. */
html .dcr-bar.pl-stage-on .dcr-bar-art {
	position: relative;
	overflow: visible;
	border-radius: 4px;
	background-color: #efe7d6;
	box-shadow: 0 0 0 2px #e0b24a, 0 0 0 4px rgba(0, 0, 0, 0.5), 0 0 16px rgba(224, 178, 74, 0.3);
}
.dcr-bar .pl-stage__masks {
	display: none;
}
html .dcr-bar.pl-stage-on .pl-stage__masks {
	display: block;
	position: absolute;
	right: -14px;
	bottom: -8px;
	width: 32px;
	height: 23px;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
	pointer-events: none;
}
.dcr-bar .pl-stage__comedy,
.dcr-bar .pl-stage__tragedy {
	transition: opacity 0.4s;
}
html .dcr-bar.pl-stage-on:not(.dcr-bar-playing) .pl-stage__comedy { opacity: 0.55; }
html .dcr-bar.pl-stage-on.dcr-bar-playing .pl-stage__tragedy { opacity: 0.6; }

/* Сцена: кулисы, рампа и раздвигающийся занавес — поверх панели, но мимо нажатий. */
.dcr-bar .pl-stage,
.dcr-bar .pl-stage-valance {
	display: none;
}
html .dcr-bar.pl-stage-on .pl-stage {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 3;
	overflow: hidden;
	pointer-events: none;
}
.dcr-bar .pl-stage__defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
.dcr-bar .pl-stage__wing {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--pl-cw, 46px);
	transition: transform 0.6s cubic-bezier(0.5, 0, 0.3, 1);
}
.dcr-bar .pl-stage__wing--l {
	left: 0;
	transform-origin: 0 50%;
}
.dcr-bar .pl-stage__wing--r {
	right: 0;
	transform-origin: 100% 50%;
}
.dcr-bar .pl-stage__wing--r .pl-stage__drape {
	transform: scaleX(-1);
}
.dcr-bar .pl-stage__drape {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: none;
}
/* Пауза — кулисы чуть сдвигаются, свет гаснет. */
html .dcr-bar.pl-stage-on:not(.dcr-bar-playing) .pl-stage__wing { transform: scaleX(1.3); }
html .dcr-bar.pl-stage-on:not(.dcr-bar-playing) .pl-stage__ramp { opacity: 0.25; }

.dcr-bar .pl-stage__ramp {
	position: absolute;
	left: var(--pl-cw, 46px);
	right: var(--pl-cw, 46px);
	bottom: 0;
	height: 3px;
	background: radial-gradient(circle, rgba(255, 226, 150, 0.95) 0 1.1px, rgba(255, 226, 150, 0) 1.9px) 0 50% / 16px 3px repeat-x;
	box-shadow: 0 -4px 14px rgba(255, 200, 110, 0.28);
	opacity: 0.9;
	transition: opacity 0.6s;
}

/* Ламбрекен с бахромой — над верхним краем панели. */
html .dcr-bar.pl-stage-on .pl-stage-valance {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	z-index: 1;
	height: 13px;
	margin-bottom: 1px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='13' viewBox='0 0 24 13'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234a0710'/%3E%3Cstop offset='1' stop-color='%23a2222e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0H24V3Q24 11 12 11Q0 11 0 3Z' fill='url(%23g)'/%3E%3Cpath d='M0 3Q0 10.2 12 10.2Q24 10.2 24 3' fill='none' stroke='%23e0b24a' stroke-width='1.1'/%3E%3Ccircle cx='12' cy='11.6' r='1.3' fill='%23e0b24a'/%3E%3C/svg%3E") 0 0 / 24px 13px repeat-x;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
	pointer-events: none;
}
html .dcr-bar.pl-stage-on.dcr-bar-popup .pl-stage-valance {
	opacity: 0.35; /* открыты меню или программа — ламбрекен не мешает */
}

/* Занавес раздвигается один раз — когда спектакль начинается (дальше открыт, см. stihi-stage.js). */
.dcr-bar .pl-stage__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 51%;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.5)),
		repeating-linear-gradient(90deg, #4c0710 0, #8f1924 9px, #b02a35 13px, #6a0d17 19px, #4c0710 24px);
	transform: translateX(-102%);
}
.dcr-bar .pl-stage__panel--l {
	left: 0;
	box-shadow: 6px 0 14px rgba(0, 0, 0, 0.5);
}
.dcr-bar .pl-stage__panel--r {
	right: 0;
	transform: translateX(102%);
	box-shadow: -6px 0 14px rgba(0, 0, 0, 0.5);
}
html .dcr-bar.pl-stage-on.pl-stage-opening .pl-stage__panel--l {
	animation: pl-stage-open-l 1.15s cubic-bezier(0.7, 0, 0.25, 1) both;
}
html .dcr-bar.pl-stage-on.pl-stage-opening .pl-stage__panel--r {
	animation: pl-stage-open-r 1.15s cubic-bezier(0.7, 0, 0.25, 1) both;
}
@keyframes pl-stage-open-l { 0%, 12% { transform: translateX(0); } 100% { transform: translateX(-102%); } }
@keyframes pl-stage-open-r { 0%, 12% { transform: translateX(0); } 100% { transform: translateX(102%); } }

/* Очередь — программка спектакля. */
html .dcr-bar.pl-stage-on .dcr-bar-queue,
html .dcr-bar.pl-stage-on .dcr-bar-extra {
	border-color: #6b3a1c;
	background:
		radial-gradient(120% 60% at 50% 0%, rgba(255, 214, 140, 0.1), rgba(255, 214, 140, 0) 70%),
		#1b0d0a;
}
html .dcr-bar.pl-stage-on .dcr-bar-qhead {
	padding-top: 14px;
	border-bottom: 1px solid #4a2416;
	font-family: "Yeseva One", "Prata", Georgia, serif;
	font-weight: 400;
	font-size: 17px;
	color: #f0d28a;
}
html .dcr-bar.pl-stage-on .dcr-bar-qnum {
	font-family: "Yeseva One", Georgia, serif;
	color: #c9a05a;
}
html .dcr-bar.pl-stage-on .dcr-bar-qitem[aria-current="true"] {
	color: #f0d28a;
	background: rgba(224, 178, 74, 0.1);
}

/* Кнопки в нижнем углу экрана (их поднимает над панелью плагин радио) — ещё и над ламбрекеном. */
html.dcr-bar-on.pl-stage-on .stihi-progress { bottom: calc(1rem + 14px + var(--dcr-bar-h, 72px)); }
@media (max-width: 900px) {
	html.dcr-bar-on.pl-stage-on .tcs-feed .tcs-kw-toggle { bottom: calc(30px + var(--dcr-bar-h, 62px)); }
}

@media (prefers-reduced-motion: reduce) {
	.dcr-bar .pl-stage__wing,
	.dcr-bar .pl-stage__ramp,
	.dcr-bar .pl-stage__comedy,
	.dcr-bar .pl-stage__tragedy { transition: none; }
	html .dcr-bar.pl-stage-on.pl-stage-opening .pl-stage__panel--l,
	html .dcr-bar.pl-stage-on.pl-stage-opening .pl-stage__panel--r { animation: none; }
}