/* ==========================================================================
   NabiMakes — category-scenes.css
   The animated instrument panel beside the heading of the five designed
   project archives (nabimakes/category-scene), and the under-construction
   engine on the maintenance page, as in the design files (scenes.css), on the
   tokens. The SVG uses the short classes below, so every colour
   is a palette colour and the panel follows the light and dark schemes.
   view.js moves the parts.
   ========================================================================== */

/* ================================================================== Category scene panel */

.nm-scene {
	--nm-scene-ink: var(--wp--preset--color--deep-teal);
	--nm-scene-teal: var(--wp--preset--color--workshop-teal);
	--nm-scene-brass: var(--wp--preset--color--soft-brass);
	--nm-scene-red: var(--wp--preset--color--signal-red);
	--nm-scene-muted: var(--wp--preset--color--muted-text);
	--nm-scene-surface: var(--wp--preset--color--white-surface);
	--nm-scene-on: var(--nm-color-on-action, var(--wp--preset--color--white-surface));

	margin: 0;
	min-width: 0;
}

.nm-scene__panel {
	position: relative;
	overflow: hidden;
	aspect-ratio: 62 / 47;
	border: 1px solid var(--wp--preset--color--default-border);
	border-radius: var(--nm-radius-media);
	background:
		linear-gradient(color-mix(in srgb, var(--nm-scene-ink) 4%, transparent) 1px, transparent 1px) 0 0 / 30px 30px,
		linear-gradient(90deg, color-mix(in srgb, var(--nm-scene-ink) 4%, transparent) 1px, transparent 1px) 0 0 / 30px 30px,
		radial-gradient(120% 110% at 26% 14%, var(--nm-scene-surface), var(--wp--preset--color--subtle-surface) 58%, color-mix(in srgb, var(--wp--preset--color--subtle-surface) 94%, var(--nm-scene-muted)));
	box-shadow: var(--nm-shadow-3);
}

.nm-scene__corner {
	position: absolute;
	z-index: 1;
	width: 16px;
	height: 16px;
	border: 0 solid var(--nm-scene-brass);
	opacity: 0.65;
	pointer-events: none;
}

.nm-scene__corner--tl { top: 16px; left: 16px; border-top-width: 1.5px; border-left-width: 1.5px; }
.nm-scene__corner--tr { top: 16px; right: 16px; border-top-width: 1.5px; border-right-width: 1.5px; }
.nm-scene__corner--bl { bottom: 16px; left: 16px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.nm-scene__corner--br { right: 16px; bottom: 16px; border-right-width: 1.5px; border-bottom-width: 1.5px; }

/* Status strip: what the machine is doing, its number and the pause button. */
.nm-scene__status {
	position: absolute;
	top: 9px;
	right: 40px;
	left: 24px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	color: var(--nm-scene-teal);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--technical-xs);
	letter-spacing: var(--nm-tracking-label);
	text-transform: uppercase;
}

/* One line that ends in an ellipsis on narrow panels, so it never runs into the drawing. */
.nm-scene__live {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nm-scene__live::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: var(--wp--preset--spacing--20);
	vertical-align: 0;
	border-radius: var(--nm-radius-full);
	background: var(--nm-scene-red);
}

.nm-scene__controls {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.nm-scene__id {
	color: var(--nm-scene-muted);
}

.nm-scene__toggle {
	display: inline-grid;
	place-items: center;
	width: var(--wp--preset--spacing--60);
	height: var(--wp--preset--spacing--60);
	padding: 0;
	border: 1px solid var(--wp--preset--color--default-border);
	border-radius: var(--nm-radius-button);
	background: var(--nm-scene-surface);
	color: var(--nm-scene-ink);
	cursor: pointer;
}

.nm-scene__toggle[hidden] {
	display: none;
}

.nm-scene__toggle:hover {
	border-color: var(--nm-scene-teal);
	color: var(--nm-scene-teal);
}

.nm-scene__toggle:focus-visible {
	outline: 2px solid var(--nm-scene-teal);
	outline-offset: 2px;
}

.nm-scene__toggle-icon {
	width: var(--nm-icon-xs);
	height: var(--nm-icon-xs);
	fill: currentcolor;
}

.nm-scene__toggle[aria-pressed="true"] .nm-scene__icon-pause,
.nm-scene__toggle[aria-pressed="false"] .nm-scene__icon-play {
	display: none;
}

.nm-scene__drawing {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Lights blink while the scene runs. */
.nm-scene.is-live .nm-scene__live::before {
	animation: nm-scene-blink 1.5s steps(1) infinite;
}

.nm-scene.is-live .nm-scene__led {
	animation: nm-scene-blink 1.6s steps(1) infinite;
}

.nm-scene[data-paused] .nm-scene__live::before,
.nm-scene[data-paused] .nm-scene__led {
	animation-play-state: paused;
}

@keyframes nm-scene-blink {
	56%,
	100% {
		opacity: 0.16;
	}
}

/* SVG colours: s-* strokes, f-* fills, lbl text. Opacity stays on the elements. */
.nm-scene .s-ink { stroke: var(--nm-scene-ink); }
.nm-scene .s-teal { stroke: var(--nm-scene-teal); }
.nm-scene .s-brass { stroke: var(--nm-scene-brass); }
.nm-scene .s-red { stroke: var(--nm-scene-red); }
.nm-scene .s-muted { stroke: var(--nm-scene-muted); }
.nm-scene .s-on { stroke: var(--nm-scene-on); }
.nm-scene .s-surface { stroke: var(--nm-scene-surface); }
.nm-scene .f-ink { fill: var(--nm-scene-ink); }
.nm-scene .f-teal { fill: var(--nm-scene-teal); }
.nm-scene .f-brass { fill: var(--nm-scene-brass); }
.nm-scene .f-red { fill: var(--nm-scene-red); }
.nm-scene .f-muted { fill: var(--nm-scene-muted); }
.nm-scene .f-surface { fill: var(--nm-scene-surface); }
.nm-scene .stop-teal { stop-color: var(--nm-scene-teal); }

.nm-scene .lbl {
	fill: var(--nm-scene-muted);
	font-family: var(--wp--preset--font-family--mono);
}

.nm-scene .lbl-teal { fill: var(--nm-scene-teal); }
.nm-scene .lbl-red { fill: var(--nm-scene-red); }

/* The oscilloscope's RUN light flashes brass as each waveform starts. */
.nm-scene .nm-scene__run.is-flash {
	fill: var(--nm-scene-brass);
}

/* Footer under the panel: legend on the left, figure caption on the right. */
.nm-scene__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--30);
}

.nm-scene__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
	color: var(--nm-scene-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--technical-xs);
	letter-spacing: var(--nm-tracking-label);
	text-transform: uppercase;
}

.nm-scene__key {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.nm-scene__swatch {
	flex: none;
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: var(--nm-scene-red);
}

.nm-scene__swatch--line-teal { background: var(--nm-scene-teal); }

.nm-scene__swatch--dot,
.nm-scene__swatch--dot-red {
	width: 8px;
	height: 8px;
	border-radius: var(--nm-radius-full);
	background: var(--nm-scene-brass);
}

.nm-scene__swatch--dot-red { background: var(--nm-scene-red); }

.nm-scene__swatch--bar {
	width: 8px;
	background: var(--nm-scene-brass);
}

.nm-scene__swatch--dash {
	height: 0;
	border-top: 1.5px dashed var(--nm-scene-brass);
	border-radius: 0;
	background: none;
}

.nm-scene__swatch--tool {
	width: 0;
	height: 0;
	border-right: 5px solid transparent;
	border-bottom: 8px solid var(--nm-scene-red);
	border-left: 5px solid transparent;
	border-radius: 0;
	background: none;
}

.nm-scene__swatch--layers {
	height: 6px;
	border-top: 1px solid var(--nm-scene-teal);
	border-radius: 0;
	background: color-mix(in srgb, var(--nm-scene-brass) 45%, transparent);
}

.nm-scene__caption {
	color: var(--nm-scene-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--technical-xs);
	letter-spacing: var(--nm-tracking-wordmark);
}

/* Gradient stops and label tones (the engine uses them). */
.nm-scene .stop-brass { stop-color: var(--nm-scene-brass); }
.nm-scene .stop-red { stop-color: var(--nm-scene-red); }
.nm-scene .lbl-brass { fill: var(--wp--preset--color--brass-ink); }

/* The under-construction engine: the same panel, wider (14:9), on the maintenance page. */
.nm-scene--engine .nm-scene__panel {
	aspect-ratio: 14 / 9;
}

.nm-scene--engine .nm-scene__drawing {
	inset: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	width: calc(100% - 2 * var(--wp--preset--spacing--40));
	height: calc(100% - var(--wp--preset--spacing--60) - var(--wp--preset--spacing--20));
}