/* Bausteine für Hero (Startseite) und Kinomodus: Sendezeit-Fader und Cover-Stapel.
   Markup: inc/stage.php, Verhalten: assets/js/studio-stage.js. Lage und Größe setzt jeweils studio-hero.css bzw.
   studio-cinema.css. */

/* ---------- Sendezeit-Fader: Kappe läuft mit der Sendung, LED-Kette, Tape „noch … min“ ---------- */
.studio-fader {
	display: grid;
	gap: 0.35rem;
	width: min(100%, 460px);
	padding-top: 2.1rem;
}

.studio-fader__labels {
	display: flex;
	justify-content: space-between;
	color: var(--studio-text-2);
	font: 600 0.75rem / 1 var(--studio-font-text);
	font-variant-numeric: tabular-nums;
}

.studio-fader__ticks {
	height: 7px;
	background:
		linear-gradient(90deg, var(--studio-text-2) 0 2px, transparent 2px calc(50% - 1px), var(--studio-text-2) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) calc(100% - 2px), var(--studio-text-2) calc(100% - 2px)),
		repeating-linear-gradient(90deg, var(--studio-line) 0 1px, transparent 1px calc(100% / 12)) 0 100% / calc(100% + 1px) 4px no-repeat;
}

.studio-fader__groove {
	position: relative;
	height: 12px;
	border-radius: 6px;
	background: oklch(8% 0.01 245);
	box-shadow: inset 0 2px 4px oklch(0% 0 0 / 0.9), 0 1px 0 oklch(32% 0.02 245);
}

.studio-fader__groove::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 6px;
	left: 6px;
	height: 2px;
	margin-top: -1px;
	background: oklch(22% 0.015 245);
}

.studio-fader__cap {
	position: absolute;
	top: 50%;
	left: 0;
	width: 28px;
	height: 40px;
	translate: -50% -50%;
	border-radius: var(--studio-radius-s);
	background:
		repeating-linear-gradient(90deg, transparent 0 5px, oklch(20% 0 0 / 0.35) 5px 6px) 4px 0 / calc(100% - 8px) 100% no-repeat,
		linear-gradient(90deg, oklch(42% 0.008 240), oklch(76% 0.008 240) 40%, oklch(62% 0.008 240) 60%, oklch(40% 0.008 240));
	box-shadow: 0 6px 8px -2px oklch(0% 0 0 / 0.7), inset 0 1px 0 oklch(90% 0 0 / 0.4);
	transition: left 1s var(--studio-ease);
}

.studio-fader__cap::after {
	content: "";
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: var(--studio-brand);
	box-shadow: 0 0 6px var(--studio-brand);
}

.studio-fader__tag {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	padding: 0.25rem 0.55rem 0.15rem;
	translate: var(--studio-tag-shift, -50%) 0;
	transform: rotate(-2deg);
	background: var(--studio-tape);
	color: var(--studio-tape-ink);
	font: 400 0.85rem / 1 var(--studio-font-tape);
	white-space: nowrap;
	clip-path: polygon(2% 6%, 98% 0, 100% 90%, 0 100%);
}

.studio-fader__leds {
	display: grid;
	grid-template-columns: repeat(24, 1fr);
	gap: 3px;
	margin-top: 0.25rem;
}

.studio-fader__leds i {
	height: 4px;
	border-radius: 1px;
	background: oklch(26% 0.02 245);
}

.studio-fader__leds i.is-on { background: oklch(55% 0.11 234); }
.studio-fader__leds i.is-head { background: var(--studio-brand); box-shadow: 0 0 8px var(--studio-brand); }

/* ---------- Cover-Stapel: Song-Cover vor der nächsten Sendung (Hervorholen: stufuStage.bindStack) ---------- */
.studio-stack { position: relative; }

.studio-polaroid--back {
	--studio-edge: var(--studio-edge-b);
	position: absolute;
	top: -10%;
	left: -14%;
	z-index: 0;
	width: 62%;
	transform: rotate(-8deg);
	cursor: zoom-in;
}

.studio-polaroid--back .studio-strip {
	top: 8px;
	left: -20px;
	transform: rotate(-40deg);
}

.studio-polaroid--front {
	z-index: 1;
	width: 82%;
	margin-left: auto;
	transform: rotate(3deg);
}

.studio-polaroid--front .studio-strip {
	top: -14px;
	left: 34%;
	transform: rotate(-4deg);
}

.studio-polaroid--front .studio-sticker {
	top: 46%;
	right: -16px;
}

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