/*
 * Quarter Mile Calculator -- the drag strip and its motion.
 *
 * NO `stroke` RULES in this file or in qmc.css. Stroke inherits through SVG and
 * the car's root class (qmc-shell) sits on an ancestor of every shape in it, so
 * the artwork keeps its strokes as attributes on the shapes (see js/qmc-art.js).
 *
 * Everything that moves does so by transform or opacity. The run loop writes
 * the live speed into --qmc-v (0 to 1) and the car's position and the dash
 * offsets as transforms; nothing here loops on its own. No url() either.
 *
 * Loads after qmc.css, and the blanket prefers-reduced-motion block is the last
 * thing in this file so it is the last word on everything in both.
 */

/* ----------------------------------------------------------------- stage */

.qmc-stage {
	--qmc-v: 0;
	--qmc-smoke: .6;
	--qmc-carw: calc(214px * var(--qmc-ui-scale));
	--qmc-endpad: 12px;
	position: relative;
	margin-top: calc(18px * var(--qmc-ui-scale));
	padding: var(--qmc-pad);
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(225, 29, 42, .10), transparent 62%),
		var(--qmc-surface);
	border: 1px solid var(--qmc-line);
	border-radius: var(--qmc-radius);
	overflow: hidden;
	/* Reserved: head, tree and clock, lane, five split chips. */
	min-height: 456px;
}
@media (max-width: 600px) {
	.qmc-stage { --qmc-carw: 112px; --qmc-endpad: 10px; min-height: 498px; }
}

.qmc-stage-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
}
.qmc-stage-head .qmc-eyebrow { margin: 0; }
.qmc-stage-btns { display: flex; gap: 10px; }
.qmc-stage-btns .qmc-btn { white-space: nowrap; }

/* ------------------------------------------------------------- tree + HUD */

.qmc-hud {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	gap: calc(26px * var(--qmc-ui-scale));
	align-items: center;
	margin-top: calc(12px * var(--qmc-ui-scale));
	min-height: 124px;
}
@media (max-width: 600px) {
	.qmc-hud { grid-template-columns: auto minmax(0, 1fr); gap: 14px 20px; min-height: 0; }
	.qmc-final { grid-column: 1 / -1; }
}

.qmc-tree {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 38px;
	padding: 7px;
	background: var(--qmc-bg);
	border: 1px solid var(--qmc-line-strong);
	border-radius: var(--qmc-radius);
}
/* A bulb is a dark disc with its lit twin on top; lighting it is an opacity
   change, so the glow costs no paint. */
.qmc-bulb {
	position: relative;
	display: block;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--qmc-surface-3);
}
.qmc-bulb::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--qmc-amber);
	box-shadow: 0 0 16px 3px rgba(245, 165, 36, .65);
	opacity: 0;
	transition: opacity .06s linear;
}
.qmc-bulb--go::after { background: var(--qmc-good); box-shadow: 0 0 16px 3px rgba(74, 222, 128, .6); }
.qmc-bulb.is-on::after { opacity: 1; }

.qmc-readout { display: flex; align-items: baseline; gap: calc(30px * var(--qmc-ui-scale)); flex-wrap: wrap; }
.qmc-clock, .qmc-speedo {
	font-family: var(--qmc-font-display);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.qmc-clock { font-size: calc(64px * var(--qmc-ui-scale)); color: var(--qmc-amber); min-width: 4.2ch; }
.qmc-speedo { font-size: calc(40px * var(--qmc-ui-scale)); min-width: 3.4ch; }
.qmc-clock small, .qmc-speedo small {
	font-family: var(--qmc-font-ui);
	font-size: calc(12px * var(--qmc-ui-scale));
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--qmc-faint);
	margin-left: 6px;
}
.qmc-stage.is-done .qmc-clock { color: var(--qmc-red); }
@media (max-width: 600px) {
	.qmc-readout { gap: 8px 20px; }
	.qmc-clock { font-size: 52px; }
	.qmc-speedo { font-size: 34px; }
}

.qmc-final {
	margin: 0;
	font-family: var(--qmc-font-ui);
	font-size: calc(14px * var(--qmc-ui-scale));
	line-height: 1.5;
	color: var(--qmc-muted);
	/* two lines at any width */
	min-height: calc(14px * 1.5 * 2 * var(--qmc-ui-scale));
}
.qmc-stage.is-done .qmc-final { color: var(--qmc-text); }

/* ------------------------------------------------------------------ lane */

.qmc-lane {
	position: relative;
	height: 170px;
	margin-top: calc(14px * var(--qmc-ui-scale));
	overflow: hidden;
	border-radius: var(--qmc-radius);
	background: linear-gradient(180deg, #0c0c10 0%, #121216 100%);
}
@media (max-width: 600px) { .qmc-lane { height: 138px; } }

/* Distant lights and dashes, sliding slowly. Wider than the lane by one
   pattern period so a transform of up to one period never shows an edge. */
.qmc-far {
	position: absolute;
	left: 0; top: 30px;
	height: 36px;
	width: calc(100% + 96px);
	background:
		repeating-linear-gradient(90deg, rgba(245, 165, 36, .55) 0 4px, transparent 4px 96px) 12px 0 / auto 4px no-repeat,
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .10) 0 30px, transparent 30px 96px) 0 22px / auto 2px no-repeat;
	will-change: transform;
}

.qmc-road {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 74px;
	background: var(--qmc-surface-2);
	border-top: 2px solid var(--qmc-line-strong);
}
@media (max-width: 600px) { .qmc-road { height: 60px; } }

.qmc-near {
	position: absolute;
	left: 0; bottom: 8px;
	height: 3px;
	width: calc(100% + 96px);
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 46px, transparent 46px 96px);
	will-change: transform;
}

.qmc-line { position: absolute; top: 0; bottom: 0; width: 3px; }
.qmc-line--start { left: var(--qmc-carw); background: rgba(255, 255, 255, .55); }
.qmc-line--finish {
	right: var(--qmc-endpad);
	width: 6px;
	background: repeating-linear-gradient(180deg, #f4f1ec 0 6px, #0a0a0b 6px 12px);
}

/* Distance marks along the road, placed by fraction of the strip. */
.qmc-mark {
	position: absolute;
	top: 0; bottom: 0;
	left: calc(var(--qmc-carw) + (100% - var(--qmc-carw) - var(--qmc-endpad)) * var(--at));
	width: 1px;
	background: rgba(255, 255, 255, .22);
}
/* Labels sit low, under the car's wheels, so a car at the line never hides them. */
.qmc-mark b {
	position: absolute;
	bottom: 16px; left: 50%;
	transform: translateX(-50%);
	font-family: var(--qmc-font-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--qmc-faint);
	white-space: nowrap;
}
@media (max-width: 600px) {
	.qmc-mark b { font-size: 9px; letter-spacing: .02em; }
	/* The 60 ft mark is 15px from the start line on a phone; its label would sit on the line. */
	.qmc-line + .qmc-line + .qmc-mark b { display: none; }
}

/* The finish beam: a column of light at the line, flashed as the car crosses. */
.qmc-beam {
	position: absolute;
	top: 0; bottom: 0;
	right: calc(var(--qmc-endpad) - 30px);
	width: 60px;
	background: linear-gradient(90deg, transparent, rgba(225, 29, 42, .6), transparent);
	opacity: 0;
	pointer-events: none;
}
.qmc-beam.is-hit { animation: qmc-flash 1.1s var(--qmc-ease) forwards; }
@keyframes qmc-flash {
	0%   { opacity: 0; }
	12%  { opacity: 1; }
	100% { opacity: .35; }
}

/* ------------------------------------------------------------------- car */

.qmc-car {
	position: absolute;
	left: 0;
	bottom: calc(74px - 42px);
	width: var(--qmc-carw);
	will-change: transform;
}
@media (max-width: 600px) { .qmc-car { bottom: calc(60px - 36px); } }
.qmc-shell { display: block; width: 100%; height: auto; overflow: visible; }

/* Speed lines trail the car; length and opacity come from the live speed. */
.qmc-lines {
	position: absolute;
	right: 100%; top: 0;
	width: calc(var(--qmc-carw) * .9);
	height: 100%;
	pointer-events: none;
}
.qmc-lineA {
	position: absolute;
	right: -6px;
	width: 70%; height: 2px;
	border-radius: 1px;
	background: linear-gradient(270deg, rgba(255, 255, 255, .55), transparent);
	transform-origin: right center;
	transform: scaleX(calc(var(--k) * var(--qmc-v) * 1.5));
	opacity: calc(var(--qmc-v) * .85);
}

/* Tire smoke hangs where the car launched, so the car leaves it behind. */
.qmc-smoke {
	position: absolute;
	left: calc(var(--qmc-carw) * .26 - 8px);
	bottom: calc(74px - 36px);
	width: 16px; height: 16px;
	pointer-events: none;
}
@media (max-width: 600px) { .qmc-smoke { bottom: calc(60px - 31px); } }
.qmc-puff {
	position: absolute;
	left: 0; bottom: 0;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: rgba(214, 214, 222, .55);
	opacity: 0;
}
.qmc-stage.is-smoking .qmc-puff {
	animation: qmc-puff 1.3s ease-out calc(var(--i) * .1s) both;
}
@keyframes qmc-puff {
	0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.4); }
	18%  { opacity: calc(var(--qmc-smoke) * .9); }
	100% { opacity: 0; transform: translate3d(calc(-30px - var(--i) * 12px), calc(-18px - var(--i) * 5px), 0) scale(2.6); }
}

/* ---------------------------------------------------------------- splits */

.qmc-splits {
	list-style: none;
	margin: calc(14px * var(--qmc-ui-scale)) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: calc(6px * var(--qmc-ui-scale));
}
.qmc-splitchip {
	background: var(--qmc-surface-2);
	border: 1px solid var(--qmc-line);
	border-radius: var(--qmc-radius);
	padding: calc(9px * var(--qmc-ui-scale)) calc(8px * var(--qmc-ui-scale));
	min-height: 62px;
	text-align: center;
	transition: border-color .2s var(--qmc-ease), background .2s var(--qmc-ease);
}
.qmc-splitchip span {
	display: block;
	font-family: var(--qmc-font-ui);
	font-size: calc(10.5px * var(--qmc-ui-scale));
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--qmc-faint);
	white-space: nowrap;
}
.qmc-splitchip b {
	display: block;
	margin-top: 4px;
	font-family: var(--qmc-font-display);
	font-weight: 600;
	font-size: calc(21px * var(--qmc-ui-scale));
	line-height: 1.1;
	color: var(--qmc-faint);
	font-variant-numeric: tabular-nums;
}
.qmc-splitchip.is-hit { border-color: var(--qmc-red); background: var(--qmc-surface-3); }
.qmc-splitchip.is-hit b { color: var(--qmc-text); }
@media (max-width: 600px) {
	.qmc-splits { gap: 4px; }
	.qmc-splitchip { padding: 8px 2px; }
	.qmc-splitchip span { font-size: 9px; letter-spacing: .03em; }
	.qmc-splitchip b { font-size: 16px; }
}

/* ------------------------------------------------------- reduced motion */

/*
 * One blanket rule, last. The tool stays fully functional: numbers arrive
 * instead of counting up, and js/qmc-run.js checks the same query in script,
 * so under it the run never starts a frame loop and the final state is written
 * at once. The stage carries data-qmc-app's descendants, so scoping to the app
 * covers everything that can animate.
 */
@media (prefers-reduced-motion: reduce) {
	.qmc-app *,
	.qmc-app *::before,
	.qmc-app *::after {
		animation-duration: .001ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}