/* Lean Music effects in Lean Media Player's visuals and videos. */
.cpulm-fx-note i {
	color: #fff;
	text-shadow: 0 0 10px var(--lap-primary, #fff), 0 0 2px rgba(0, 0, 0, .6);
}

.cpulm-fx-eq {
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: 0;
	height: 34%;
	display: flex;
	align-items: flex-end;
	gap: 1.2%;
	opacity: .8;
	mix-blend-mode: screen;
}

.cpulm-fx-eq span {
	flex: 1;
	height: 100%;
	border-radius: 3px 3px 0 0;
	transform: scaleY(.1);
	transform-origin: 50% 100%;
	background: linear-gradient(to top, var(--lap-primary, #e4572e), color-mix(in srgb, var(--lap-primary, #e4572e) 30%, #fff));
	will-change: transform;
}

.cpulm-fx-ring {
	position: absolute;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, .85);
	box-shadow: 0 0 24px var(--lap-primary, #fff), inset 0 0 18px var(--lap-primary, #fff);
	opacity: 0;
	will-change: transform, opacity;
}

.cpulm-fx-lights {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
	mix-blend-mode: screen;
}

.cpulm-fx-lights span {
	position: absolute;
	top: -10%;
	width: 18%;
	height: 130%;
	transform-origin: 50% 0;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--lap-primary, #fff) 70%, #fff), transparent 85%);
	clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
	opacity: .32;
	filter: blur(4px);
	animation: cpulm-fx-sweep 6s ease-in-out infinite alternate;
	animation-play-state: paused;
}

.cpulm-fx-lights span:nth-child(2n) {
	background: linear-gradient(to bottom, rgba(255, 255, 255, .9), transparent 85%);
}

.lap-vis.is-playing .cpulm-fx-lights span {
	animation-play-state: running;
}

@keyframes cpulm-fx-sweep {
	from { transform: rotate(-28deg); }
	to { transform: rotate(28deg); }
}

.cpulm-fx-lighters {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30%;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
}

.cpulm-fx-lighters span {
	position: absolute;
	width: 6px;
	height: 10px;
	border-radius: 50% 50% 45% 45%;
	background: radial-gradient(circle at 50% 70%, #fff 0, #ffe9a8 35%, rgba(255, 170, 40, .6) 60%, transparent 70%);
	box-shadow: 0 0 10px 3px rgba(255, 200, 90, .45);
	transform-origin: 50% 300%;
	animation: cpulm-fx-sway 3.5s ease-in-out infinite alternate;
	animation-play-state: paused;
}

.lap-vis.is-playing .cpulm-fx-lighters span {
	animation-play-state: running;
}

@keyframes cpulm-fx-sway {
	from { transform: rotate(-14deg); opacity: .75; }
	to { transform: rotate(14deg); opacity: 1; }
}

.cpulm-fx-vinyl {
	position: absolute;
	left: 4%;
	top: 6%;
	z-index: 3;
	width: 17%;
	aspect-ratio: 1;
	pointer-events: none;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
	animation: cpulm-fx-spin 1.8s linear infinite;
	animation-play-state: paused;
}

.cpulm-fx-vinyl svg {
	display: block;
	width: 100%;
	height: 100%;
}

.cpulm-fx-vinyl .cpulm-fx-label {
	fill: var(--lap-primary, #e4572e);
}

.lap-vis.is-playing .cpulm-fx-vinyl {
	animation-play-state: running;
}

@keyframes cpulm-fx-spin {
	to { transform: rotate(360deg); }
}