/* Hero card, v2: "Messy data → clean signal".
 *
 * Two layers fill the card. .xr-raw is what scraping actually returns (HTML, broken JSON,
 * noisy points); .xr-clean is what comes out (KPIs, a sparkline, a tidy table). A circular
 * lens (--lx, --ly, --lr) shows the clean layer through a hole in the raw one, like an X-ray.
 * xray.js moves the lens: it follows the pointer, and drifts on its own when nobody is
 * hovering, so the effect is visible without interaction (and on touch screens).
 * Sizes are in cqw (the card is a size container), so it scales with the card.
 */
@property --lr { syntax: '<length>'; inherits: true; initial-value: 0px; }

.mm-home-frame > .xr { place-self: stretch; }
.xr {
	--lx: 50%; --ly: 42%; --lr: 0px;
	/* lens radius in px, set by xray.js from the card width (cqw on the container itself
	   would resolve against the viewport, not the card) */
	--lr-on: 105px; --lr-hover: 120px;
	position: relative; width: 100%; height: 100%;
	container-type: inline-size;
	overflow: hidden; isolation: isolate;
	cursor: none; touch-action: pan-y;
	transition: --lr .7s cubic-bezier(.2, .8, .2, 1);
}
.xr.is-live { --lr: var(--lr-on); }
.xr.is-hover { --lr: var(--lr-hover); }
.xr * { pointer-events: none; }   /* offsetX/Y then always come from .xr itself */

/* ---------------------------------------------------------------- raw layer */
.xr-raw {
	position: absolute; inset: 0;
	-webkit-mask: radial-gradient(circle at var(--lx) var(--ly), transparent calc(var(--lr) - .5px), #000 calc(var(--lr) + 1px));
	mask: radial-gradient(circle at var(--lx) var(--ly), transparent calc(var(--lr) - .5px), #000 calc(var(--lr) + 1px));
}
.xr-stream-wrap {
	position: absolute; inset: -2% -6% 0 4.5cqw;
	transform: rotate(-4deg);
	-webkit-mask: linear-gradient(transparent, #000 12%, #000 88%, transparent);
	mask: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.xr-stream {
	margin: 0; font-family: var(--font-mono); font-size: 2.55cqw; line-height: 1.65;
	white-space: pre; color: color-mix(in oklab, var(--text) 42%, transparent);
	animation: xr-scroll 38s linear infinite;
}
.xr-stream .t { color: color-mix(in oklab, var(--accent-text) 58%, transparent); }
.xr-stream .s { color: color-mix(in oklab, #3fcfb2 55%, transparent); }
.xr-stream .e { color: color-mix(in oklab, #f07ba8 70%, transparent); }
:root[data-theme="light"] .xr-stream .s { color: color-mix(in oklab, #13907c 70%, transparent); }
:root[data-theme="light"] .xr-stream .e { color: color-mix(in oklab, #c9407a 80%, transparent); }
@keyframes xr-scroll { to { transform: translateY(-50%); } }   /* the stream is two copies */

.xr-noise { position: absolute; inset: 0; width: 100%; height: 100%; }
.xr-noise circle { fill: var(--text); animation: xr-jitter 2.6s ease-in-out infinite alternate; transform-box: fill-box; }
.xr-noise circle:nth-child(3n) { fill: var(--accent); animation-duration: 3.4s; }
.xr-noise circle:nth-child(5n) { animation-duration: 1.9s; }
:root[data-theme="light"] .xr-noise { opacity: .55; }
@keyframes xr-jitter {
	0% { transform: translate(0, 0); }
	50% { transform: translate(.9px, -1.4px); }
	100% { transform: translate(-1.2px, .8px); }
}

/* ---------------------------------------------------------------- clean layer */
.xr-clean {
	position: absolute; inset: 0;
	display: grid; grid-template-rows: auto auto 1fr auto; gap: 3.4cqw;
	padding: 7cqw 6.5cqw 6.5cqw;
	background:
		radial-gradient(80% 55% at 50% 38%, var(--accent-dim), transparent 75%),
		var(--bg-elevated);
	-webkit-mask: radial-gradient(circle at var(--lx) var(--ly), #000 calc(var(--lr) - .5px), transparent calc(var(--lr) + 1px));
	mask: radial-gradient(circle at var(--lx) var(--ly), #000 calc(var(--lr) - .5px), transparent calc(var(--lr) + 1px));
	color: var(--text);
}
.xr-top { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 2.5cqw; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.xr-ok { display: inline-flex; align-items: center; gap: 1.4cqw; padding: .9cqw 2.2cqw; border: 1px solid var(--accent-dim); border-radius: 999px; color: var(--accent-text); }
.xr-ok::before { content: ""; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--accent); box-shadow: 0 0 2.4cqw var(--accent); }

.xr-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.xr-kpi {
	padding: 3.4cqw 3.8cqw; border-radius: 3.6cqw;
	border: 1px solid var(--glass-border);
	background: linear-gradient(160deg, var(--glass-bg-hover), transparent 80%), color-mix(in oklab, var(--bg) 55%, transparent);
}
.xr-kpi span { display: block; font-family: var(--font-mono); font-size: 2.3cqw; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.xr-kpi b { display: block; margin-top: 1.2cqw; font-size: 7.4cqw; font-weight: var(--w-med); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.xr-kpi--up b { color: var(--accent-text); text-shadow: 0 0 5cqw var(--accent-glow); }

.xr-chart { position: relative; min-height: 0; border-radius: 3.6cqw; border: 1px solid var(--glass-border); padding: 3cqw 3.4cqw 2cqw; display: grid; grid-template-rows: auto 1fr; background: color-mix(in oklab, var(--bg) 40%, transparent); }
.xr-chart > span { font-family: var(--font-mono); font-size: 2.3cqw; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.xr-chart svg { width: 100%; height: 100%; overflow: visible; }
.xr-grid line { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.xr-zero { stroke-dasharray: 3 3; stroke: color-mix(in oklab, var(--text) 28%, transparent) !important; }
.xr-area { fill: url(#xr-fade); }
.xr-end, .xr-tick { position: absolute; font-style: normal; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.xr-end { right: 3.4cqw; top: 2.6cqw; font-size: 3.4cqw; color: var(--accent-text); text-shadow: 0 0 3cqw var(--accent-glow); }
.xr-tick { left: 1cqw; transform: translateY(-50%); font-size: 1.9cqw; color: var(--text-2); opacity: .7; }
.xr-line {
	fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
	vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px var(--accent-glow)) drop-shadow(0 0 10px var(--accent-glow));
	stroke-dasharray: 1; stroke-dashoffset: 1;
}
.xr-dot { position: absolute; width: 2.2cqw; height: 2.2cqw; margin: -1.1cqw 0 0 -1.1cqw; border-radius: 50%; background: var(--accent); box-shadow: 0 0 2.6cqw var(--accent); opacity: 0; }
.xr.is-drawn .xr-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1); }
.xr.is-drawn .xr-dot { opacity: 1; transition: opacity .3s 1.5s; animation: xr-pulse 2s 1.8s ease-in-out infinite; }
@keyframes xr-pulse { 50% { transform: scale(1.6); opacity: .55; } }

.xr-table { width: 100%; border-collapse: collapse; font-size: 2.65cqw; font-variant-numeric: tabular-nums; }
.xr-table th { font-family: var(--font-mono); font-weight: 400; font-size: 2.1cqw; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); text-align: left; padding: 0 0 1.4cqw; }
.xr-table td { padding: 1.35cqw 0; border-top: 1px solid var(--border); color: var(--text-2); }
.xr-table td:first-child { color: var(--text); }
.xr-table th:not(:first-child), .xr-table td:not(:first-child) { text-align: right; }
.xr-table td:last-child { color: var(--accent-text); }
.xr-table .xr-neg td:last-child { color: #3fcfb2; }
:root[data-theme="light"] .xr-table .xr-neg td:last-child { color: #13907c; }

/* ---------------------------------------------------------------- lens */
.xr-lens {
	position: absolute; left: var(--lx); top: var(--ly);
	width: calc(var(--lr) * 2); height: calc(var(--lr) * 2);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1px solid color-mix(in oklab, var(--accent) 80%, transparent);
	box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent), 0 0 30px var(--accent-glow), inset 0 0 26px var(--accent-glow);
	opacity: 0; transition: opacity .4s;
}
.xr.is-live .xr-lens { opacity: 1; }
/* crosshair ticks on the rim */
.xr-lens::before, .xr-lens::after {
	content: ""; position: absolute; inset: -7px;
	background:
		linear-gradient(var(--accent), var(--accent)) top / 1px 7px no-repeat,
		linear-gradient(var(--accent), var(--accent)) bottom / 1px 7px no-repeat,
		linear-gradient(var(--accent), var(--accent)) left / 7px 1px no-repeat,
		linear-gradient(var(--accent), var(--accent)) right / 7px 1px no-repeat;
}
.xr-lens::after { inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 62%, color-mix(in oklab, var(--accent) 10%, transparent)); }
.xr-lens i {
	position: absolute; left: 50%; top: calc(100% + 9px); transform: translateX(-50%);
	font-family: var(--font-mono); font-style: normal; font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--accent-text); white-space: nowrap; opacity: .85;
}

/* the hero sticker now names the action */
.mm-home-portrait .mm-sticker--open { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }

@media (prefers-reduced-motion: reduce) {
	.xr-stream, .xr-noise circle, .xr.is-drawn .xr-dot { animation: none; }
	.xr, .xr.is-drawn .xr-line { transition: none; }
}