/* mm-value-card
   Dark-theme port of Kilonova's kp-stat-card + InteractiveStatGrid.
   Interactions match Kilonova 1:1:
     - Mouse-tracked 3D tilt (see mm-value-card.js)
     - Neighbor-dim on hover
     - Underline slide 0->100% on headline
   Border-left cycles through 8 hues on a 12s loop, per-card offset. */

.mm-value-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	perspective: 1200px;
}

.mm-value-card {
	position: relative;
	padding: 28px 28px 24px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 45%, rgba(0, 0, 0, 0.3) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-left-width: 3px;
	animation: mmValueCardBorder 12s ease-in-out infinite;
	display: flex;
	flex-direction: column;
	transform-style: preserve-3d;
	transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateZ(0);
	will-change: transform;
	transition:
		transform 200ms ease-out,
		opacity 200ms ease-out,
		filter 200ms ease-out,
		box-shadow 200ms ease-out;
}

.mm-value-row-active .mm-value-card-dim {
	opacity: 0.55;
	filter: saturate(0.6);
}

.mm-value-card-active {
	box-shadow:
		0 25px 40px -20px rgba(0, 0, 0, 0.6),
		0 8px 20px -8px rgba(0, 180, 255, 0.35);
	z-index: 2;
}

.mm-value-card:nth-of-type(1)  { animation-delay: 0s; }
.mm-value-card:nth-of-type(2)  { animation-delay: -1s; }
.mm-value-card:nth-of-type(3)  { animation-delay: -2s; }
.mm-value-card:nth-of-type(4)  { animation-delay: -3s; }
.mm-value-card:nth-of-type(5)  { animation-delay: -4s; }
.mm-value-card:nth-of-type(6)  { animation-delay: -5s; }
.mm-value-card:nth-of-type(7)  { animation-delay: -6s; }
.mm-value-card:nth-of-type(8)  { animation-delay: -7s; }
.mm-value-card:nth-of-type(9)  { animation-delay: -8s; }
.mm-value-card:nth-of-type(10) { animation-delay: -9s; }
.mm-value-card:nth-of-type(11) { animation-delay: -10s; }
.mm-value-card:nth-of-type(12) { animation-delay: -11s; }

.mm-value-row-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* ============================================================
   --lite modifier: simpler card used on case-study pages
   (no eyebrow, no header divider, headline stacked above body).
   ============================================================ */

.mm-value-row-3 {
	grid-template-columns: repeat(3, 1fr);
}

.mm-value-card--lite .mm-value-head {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding-bottom: 0;
	border-bottom: 0;
	margin-bottom: 14px;
}

.mm-value-card--lite .mm-value-headline {
	font-size: 20px;
	text-align: left;
}

.mm-value-card--lite .mm-value-num {
	font-size: 40px;
}

.mm-value-body {
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	font-weight: 300;
}

.mm-value-card--link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.28);
}

.mm-value-card--link:hover,
.mm-value-card--link:focus {
	text-decoration: none;
	color: inherit;
}

.mm-value-card--link .mm-value-eyebrow {
	margin: -6px 0 10px;
	text-align: left;
}

.mm-value-card--link .mm-value-link-cta {
	margin-top: 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #00B4FF;
	transition: transform 160ms ease, color 160ms ease;
	display: inline-block;
}

.mm-value-card--link:hover .mm-value-link-cta,
.mm-value-card--link:focus .mm-value-link-cta {
	color: #4ecbff;
}

/* ============================================================
   Marquee: full-viewport continuous horizontal scroll.
   The track holds two identical passes of the cards so the loop
   can translate -50% and reset seamlessly. Card width is set so
   ~4 fit on a 1440 screen.
   ============================================================ */

.mm-value-marquee {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
	padding: 20px 0;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
	        mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

.mm-value-marquee__track {
	display: flex;
	gap: 20px;
	width: max-content;
	animation: mmValueMarquee 80s linear infinite;
	will-change: transform;
}

.mm-value-marquee__item {
	flex: 0 0 auto;
	width: calc((100vw - 100px) / 4);
	max-width: 360px;
	min-width: 260px;
	transform: none !important;
}

@keyframes mmValueMarquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.mm-value-marquee__track { animation: none; }
}

@media (max-width: 480px) {
	.mm-value-marquee {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-webkit-mask-image: none;
		        mask-image: none;
	}
	.mm-value-marquee::-webkit-scrollbar { display: none; }

	/* When JS marks the user as actively dragging, freeze the CSS animation
	   and switch the track to a non-transformed layout so native scroll works. */
	.mm-value-marquee.is-user-scrolling .mm-value-marquee__track {
		animation: none;
		transform: none !important;
	}

	.mm-value-marquee__item {
		width: 80vw;
		max-width: 320px;
	}
}

/* ============================================================
   Top row: 01 in upper-left | eyebrow + headline stacked upper-right
   Separated from stats by a single divider line.
   ============================================================ */

.mm-value-head {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	margin-bottom: 15px;
}

.mm-value-num {
	font-size: 56px;
	font-weight: 300;
	line-height: 1;
	color: rgba(0, 180, 255, 0.85);
	font-variant-numeric: tabular-nums;
	user-select: none;
	animation: mmValueNumColor 12s ease-in-out infinite;
	animation-delay: inherit;
}

.mm-value-card:nth-of-type(1)  .mm-value-num { animation-delay: 0s; }
.mm-value-card:nth-of-type(2)  .mm-value-num { animation-delay: -1s; }
.mm-value-card:nth-of-type(3)  .mm-value-num { animation-delay: -2s; }
.mm-value-card:nth-of-type(4)  .mm-value-num { animation-delay: -3s; }
.mm-value-card:nth-of-type(5)  .mm-value-num { animation-delay: -4s; }
.mm-value-card:nth-of-type(6)  .mm-value-num { animation-delay: -5s; }
.mm-value-card:nth-of-type(7)  .mm-value-num { animation-delay: -6s; }
.mm-value-card:nth-of-type(8)  .mm-value-num { animation-delay: -7s; }
.mm-value-card:nth-of-type(9)  .mm-value-num { animation-delay: -8s; }
.mm-value-card:nth-of-type(10) .mm-value-num { animation-delay: -9s; }
.mm-value-card:nth-of-type(11) .mm-value-num { animation-delay: -10s; }
.mm-value-card:nth-of-type(12) .mm-value-num { animation-delay: -11s; }

.mm-value-head-text {
	text-align: right;
	min-width: 0;
}

.mm-value-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 6px;
}

.mm-value-headline {
	position: relative;
	display: inline-block;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 0;
}

.mm-value-headline::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	height: 2px;
	width: 0;
	background: var(--mm-accent, #00B4FF);
	transition: width 500ms ease-out;
}

.mm-value-card-active .mm-value-headline::after {
	width: 100%;
}

/* ============================================================
   Stats: 3 rows, all identical height, separated by same line.
   ============================================================ */

.mm-value-stats {
	display: flex;
	flex-direction: column;
}

.mm-value-stat {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 2px 0;
}

.mm-value-stat-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.mm-value-stat-num {
	font-size: 15px;
	font-weight: 500;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.mm-value-stat-num.mm-value-them {
	color: rgba(255, 120, 120, 0.9);
}

.mm-value-stat-num.mm-value-us {
	color: rgba(120, 220, 160, 0.95);
}

.mm-value-footnote {
	margin-top: 32px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.65);
}

@keyframes mmValueCardBorder {
	0%   { border-left-color: rgb(0, 180, 255); }
	14%  { border-left-color: rgb(139, 92, 246); }
	28%  { border-left-color: rgb(236, 72, 153); }
	42%  { border-left-color: rgb(239, 68, 68); }
	57%  { border-left-color: rgb(249, 115, 22); }
	71%  { border-left-color: rgb(234, 179, 8); }
	85%  { border-left-color: rgb(34, 197, 94); }
	100% { border-left-color: rgb(0, 180, 255); }
}

@keyframes mmValueNumColor {
	0%   { color: rgb(0, 180, 255); }
	14%  { color: rgb(139, 92, 246); }
	28%  { color: rgb(236, 72, 153); }
	42%  { color: rgb(239, 68, 68); }
	57%  { color: rgb(249, 115, 22); }
	71%  { color: rgb(234, 179, 8); }
	85%  { color: rgb(34, 197, 94); }
	100% { color: rgb(0, 180, 255); }
}

@media (prefers-reduced-motion: reduce) {
	.mm-value-card {
		animation: none;
		border-left-color: rgba(0, 180, 255, 0.85);
		transition: none;
		transform: none !important;
	}
	.mm-value-headline::after {
		transition: none;
	}
}

@media (max-width: 1199px) {
	.mm-value-row-4 {
		grid-template-columns: repeat(2, 1fr);
	}
	.mm-value-row-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 991px) {
	.mm-value-row,
	.mm-value-row-4,
	.mm-value-row-3 {
		grid-template-columns: 1fr;
		gap: 16px;
		perspective: none;
	}
	.mm-value-card {
		padding: 24px 22px 22px;
		transform: none !important;
	}
	.mm-value-num {
		font-size: 44px;
	}
	.mm-value-headline {
		font-size: 20px;
	}
}