/*
 * rack-primitives.css
 * Shared CSS for vintage rack-unit visual primitives:
 * - LEDs, LED bars, knobs, reels, button-pads, toggles, VU meters
 * - Rivet-corner overlays + engraved-text utility
 * - Counter (amber-glow VT323 readout)
 *
 * Loaded sitewide by functions.php so both the homepage AND interior
 * pages can render rack hardware without duplicating these rules.
 *
 * NOTE on specificity: home.css ALSO has these rules scoped to `#home-main`
 * (specificity 1,1,0). Those override these (specificity 0,1,0) on the
 * homepage — preserving any homepage-specific tweaks. On interior pages,
 * only the rules below apply.
 *
 * Variables are defined in fonts-global.css so they're available sitewide.
 */

/* ----- Reel-to-reel chrome palette + LED + font tokens (sitewide) ----- */
:root {
	--ad-gunmetal:      #2a2d35;
	--ad-gunmetal-hi:   #3a3d46;
	--ad-gunmetal-lo:   #1a1c22;
	--ad-steel:         #8a8d94;
	--ad-chrome:        #d5d6da;
	--ad-chrome-dim:    #a8abb2;
	--ad-led-amber:     #ffb84d;
	--ad-led-red:       #ff4d4d;
	--ad-led-green:     #4acf5c;
	--ad-led-glow:      rgba(255, 184, 77, 0.55);
	--ad-ivory:         #e8e2d4;
	--ad-ivory-dim:     #a8a396;
	--ad-brass:         #c9a75e;

	/* Scroll-driven (set by interactions-shared.js); fallback values keep
	   primitives static when JS hasn't run yet or is disabled. */
	--reel-speed:       22s;
	--scroll-progress:  0;
}

/* =================================================================== */
/*  Corner rivets — 4 dots via radial-gradient backgrounds, no DOM     */
/* =================================================================== */
.dsrt-rivet-corners {
	position: relative;
}
.dsrt-rivet-corners::after {
	content: "";
	position: absolute;
	inset: 7px;
	pointer-events: none;
	background:
		radial-gradient(circle at 0 0,         #9aa0a8 0, #4a4d54 3px, transparent 4px),
		radial-gradient(circle at 100% 0,      #9aa0a8 0, #4a4d54 3px, transparent 4px),
		radial-gradient(circle at 0 100%,      #9aa0a8 0, #4a4d54 3px, transparent 4px),
		radial-gradient(circle at 100% 100%,   #9aa0a8 0, #4a4d54 3px, transparent 4px);
	z-index: 2;
}

/* =================================================================== */
/*  Engraved-text utility                                              */
/* =================================================================== */
.dsrt-engraved {
	color: var(--ad-chrome);
	text-shadow:
		1px 1px 0 rgba(255, 255, 255, 0.10),
		-1px -1px 0 rgba(0, 0, 0, 0.7);
}

/* =================================================================== */
/*  Reel — decorative spinning SVG. Size via --reel-size.              */
/* =================================================================== */
.dsrt-reel {
	--reel-size: 48px;
	width: var(--reel-size);
	height: var(--reel-size);
	flex-shrink: 0;
	animation: dsrt-reel-spin var(--reel-speed) linear infinite;
	will-change: transform;
}
.dsrt-reel--reverse { animation-direction: reverse; }
.dsrt-reel--sm { --reel-size: 36px; }
.dsrt-reel--md { --reel-size: 72px; }
.dsrt-reel--lg { --reel-size: clamp(96px, 14vw, 160px); }

@keyframes dsrt-reel-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* =================================================================== */
/*  LED indicator (amber default, red/green variants, optional pulse)  */
/* =================================================================== */
.dsrt-led {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: radial-gradient(
		circle at 30% 30%,
		rgba(255, 255, 255, 0.5) 0 15%,
		var(--ad-led-amber) 20% 60%,
		#a06b1f 70% 100%
	);
	box-shadow:
		0 0 8px var(--ad-led-glow),
		inset 0 0 3px rgba(0, 0, 0, 0.6);
	vertical-align: middle;
	flex-shrink: 0;
	transition: box-shadow 300ms ease;
}
.dsrt-led--red {
	background: radial-gradient(
		circle at 30% 30%,
		rgba(255, 255, 255, 0.5) 0 15%,
		var(--ad-led-red) 20% 60%,
		#6b1515 70% 100%
	);
	box-shadow: 0 0 8px rgba(255, 77, 77, 0.6), inset 0 0 3px rgba(0, 0, 0, 0.6);
}
.dsrt-led--green {
	background: radial-gradient(
		circle at 30% 30%,
		rgba(255, 255, 255, 0.5) 0 15%,
		var(--ad-led-green) 20% 60%,
		#1f6b27 70% 100%
	);
	box-shadow: 0 0 8px rgba(74, 207, 92, 0.55), inset 0 0 3px rgba(0, 0, 0, 0.6);
}
.dsrt-led.is-lit {
	animation: dsrt-led-pulse 2.4s ease-in-out infinite;
}
@keyframes dsrt-led-pulse {
	0%, 100% { filter: brightness(1);   }
	50%      { filter: brightness(1.5); }
}

/* =================================================================== */
/*  Counter — VT323 amber-glow digits in an inset black box            */
/* =================================================================== */
.dsrt-counter {
	display: inline-block;
	padding: 3px 8px;
	background: #0a0a0e;
	color: var(--ad-led-amber);
	font-family: var(--ad-font-readout);
	font-size: 1.15em;
	line-height: 1;
	letter-spacing: 0.12em;
	border: 1px solid #050507;
	border-radius: 2px;
	box-shadow:
		inset 0 0 8px rgba(255, 184, 77, 0.25),
		inset 0 0 1px rgba(255, 184, 77, 0.5),
		0 0 4px rgba(255, 184, 77, 0.18);
	text-shadow: 0 0 6px rgba(255, 184, 77, 0.7);
}

/* =================================================================== */
/*  Knob — flat-vintage rotary control, pointer rotates via --tilt    */
/* =================================================================== */
.dsrt-knob {
	display: inline-block;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
}
.dsrt-knob--lg { width: 44px; height: 44px; }
.dsrt-knob svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dsrt-knob__pointer {
	transform: rotate(var(--tilt, 0deg));
	transform-origin: 20px 20px;
	transition: transform 160ms ease;
}

/* =================================================================== */
/*  LED bar — SSL-style segmented level indicator                      */
/* =================================================================== */
.dsrt-led-bar {
	display: inline-flex;
	gap: 3px;
	align-items: center;
	padding: 3px 5px;
	background: #0a0a0e;
	border: 1px solid #000;
	border-radius: 2px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
	flex-shrink: 0;
}
.dsrt-led-bar__seg {
	width: 7px;
	height: 18px;
	background: #141418;
	border: 1px solid #000;
	transition: background 120ms ease, box-shadow 120ms ease;
}
.dsrt-led-bar__seg.is-on.dsrt-led-bar__seg--green {
	background: var(--ad-led-green);
	box-shadow: 0 0 5px var(--ad-led-green);
}
.dsrt-led-bar__seg.is-on.dsrt-led-bar__seg--amber {
	background: var(--ad-led-amber);
	box-shadow: 0 0 5px var(--ad-led-amber);
}
.dsrt-led-bar__seg.is-on.dsrt-led-bar__seg--red {
	background: var(--ad-led-red);
	box-shadow: 0 0 5px var(--ad-led-red);
}

/* =================================================================== */
/*  Toggle switch — small rectangular up/mid/down                      */
/* =================================================================== */
.dsrt-toggle {
	display: inline-block;
	width: 14px;
	height: 24px;
	flex-shrink: 0;
}
.dsrt-toggle svg { display: block; width: 100%; height: 100%; }

/* =================================================================== */
/*  Button pad — flat vintage push button with 1px highlight/shadow    */
/* =================================================================== */
.dsrt-button-pad {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	padding: 3px 5px;
	font-family: var(--ad-font-readout);
	font-size: 0.85rem;
	letter-spacing: 0;
	color: var(--ad-ivory);
	background: #2a2d34;
	border: 1px solid #000;
	border-top-color: #4a4d54;
	border-radius: 1px;
}
.dsrt-button-pad.is-pressed {
	background: #f0b840;
	border-top-color: #000;
	border-bottom-color: #b07820;
	color: #1a0f06;
	text-shadow: none;
	box-shadow: 0 0 6px rgba(240, 184, 64, 0.5);
}

/* =================================================================== */
/*  Reduced-motion: stop reels and LED pulses                          */
/* =================================================================== */
@media (prefers-reduced-motion: reduce) {
	.dsrt-reel,
	.dsrt-led.is-lit {
		animation: none !important;
	}
}