/* mm-control-knobs
   Interactive control-panel infographic. A grid of round "knobs" that idle-
   rotate at different speeds with an LED above each. Hover lights the LED,
   speeds up the knob and shows a cursor-following tooltip with the feature
   name and a short description. Built to drop into a Bootstrap col. */

.mm-knobs {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 32px 22px;
	padding: 20px 0;
}

/* Named color tokens for consumers — pass via data-color="blue|green|orange|..." */
.mm-knob[data-color="blue"]    { --knob-color: #00B4FF; }
.mm-knob[data-color="green"]   { --knob-color: #3DD68C; }
.mm-knob[data-color="mint"]    { --knob-color: #5FE3B5; }
.mm-knob[data-color="orange"]  { --knob-color: #FF8C2A; }
.mm-knob[data-color="amber"]   { --knob-color: #FFB400; }
.mm-knob[data-color="red"]     { --knob-color: #FF4D4D; }
.mm-knob[data-color="pink"]    { --knob-color: #FF6BAA; }
.mm-knob[data-color="magenta"] { --knob-color: #D81B9C; }
.mm-knob[data-color="purple"]  { --knob-color: #9F7BFF; }
.mm-knob[data-color="violet"]  { --knob-color: #C46BFF; }

.mm-knob {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}

.mm-knob__led {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.6);
	transition: background 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.mm-knob__dial {
	position: relative;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04) 40%, rgba(0, 0, 0, 0.4) 75%),
		linear-gradient(160deg, #2a2630, #14111a);
	box-shadow:
		0 2px 6px rgba(0, 0, 0, 0.6),
		inset 0 1px 1px rgba(255, 255, 255, 0.12),
		inset 0 -2px 4px rgba(0, 0, 0, 0.5);
	transition: box-shadow 250ms ease, transform 250ms ease;
}

.mm-knob__dial::before {
	content: "";
	position: absolute;
	inset: 6px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.15));
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
}

.mm-knob__indicator {
	position: absolute;
	left: 50%;
	top: 8px;
	width: 3px;
	height: 20px;
	margin-left: -1.5px;
	background: var(--knob-color, #00B4FF);
	box-shadow: 0 0 8px var(--knob-color, #00B4FF);
	transform-origin: 50% 34px;
	z-index: 2;
}

.mm-knob__label { display: none; }

.mm-knob.is-hover .mm-knob__led,
.mm-knob:hover .mm-knob__led {
	background: var(--knob-color, #00B4FF);
	border-color: var(--knob-color, #00B4FF);
	box-shadow: 0 0 8px var(--knob-color, #00B4FF), 0 0 16px var(--knob-color, #00B4FF);
}

.mm-knob.is-hover .mm-knob__dial,
.mm-knob:hover .mm-knob__dial {
	box-shadow:
		0 0 0 1px var(--knob-color, #00B4FF),
		0 0 14px color-mix(in srgb, var(--knob-color, #00B4FF) 55%, transparent),
		inset 0 1px 1px rgba(255, 255, 255, 0.18),
		inset 0 -2px 4px rgba(0, 0, 0, 0.5);
}

.mm-knob.is-hover .mm-knob__label,
.mm-knob:hover .mm-knob__label {
	color: #fff;
}

.mm-knobs__tooltip {
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 99999;
	width: 320px;
	max-width: 80vw;
	padding: 14px 18px;
	background: rgba(8, 10, 14, 0.95);
	border: 1px solid rgba(120, 180, 255, 0.5);
	color: #fff;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.mm-knobs__tooltip.show { opacity: 1; }
.mm-knobs__tooltip .p-title {
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 6px;
}
.mm-knobs__tooltip .p-desc {
	color: rgba(255, 255, 255, 0.78);
	font-size: 12.5px;
	line-height: 1.5;
}

@media (max-width: 991px) {
	.mm-knobs { grid-template-columns: repeat(4, 1fr); gap: 24px 14px; }
}
@media (max-width: 575px) {
	.mm-knobs { grid-template-columns: repeat(3, 1fr); gap: 26px 14px; }
	.mm-knob__dial { width: 68px; height: 68px; }
	.mm-knob__indicator { top: 7px; height: 16px; transform-origin: 50% 27px; }
}
@media (max-width: 380px) {
	.mm-knobs { grid-template-columns: repeat(2, 1fr); }
}