/* mm-value-card-hub
   Fully standalone hub / compare-page value card. No dependency on mm-value-card.
   Own class namespace (mm-vch-*) so it cannot collide with the base component.

   Behavior: 2-col grid down to 768px, 96px rotating-color number, 4px left border
   that cycles through 8 hues on a 12s loop, 22px bold headline with a divider,
   3D tilt on hover with neighbor-dim, underline slide on the hovered card.
*/

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

.mm-vch-card {
	position: relative;
	padding: 32px 32px 28px;
	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: 4px;
	animation: mmVchBorder 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-vch-row-active .mm-vch-card-dim {
	opacity: 0.55;
	filter: saturate(0.6);
}

.mm-vch-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-vch-card:nth-of-type(1)  { animation-delay: 0s; }
.mm-vch-card:nth-of-type(2)  { animation-delay: -1s; }
.mm-vch-card:nth-of-type(3)  { animation-delay: -2s; }
.mm-vch-card:nth-of-type(4)  { animation-delay: -3s; }
.mm-vch-card:nth-of-type(5)  { animation-delay: -4s; }
.mm-vch-card:nth-of-type(6)  { animation-delay: -5s; }
.mm-vch-card:nth-of-type(7)  { animation-delay: -6s; }
.mm-vch-card:nth-of-type(8)  { animation-delay: -7s; }

.mm-vch-head {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 28px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	margin-bottom: 20px;
}

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

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

.mm-vch-head-text {
	text-align: left;
	min-width: 0;
}

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

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

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

.mm-vch-body {
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
	font-weight: 300;
}

@keyframes mmVchBorder {
	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 mmVchNumColor {
	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-vch-card {
		animation: none;
		border-left-color: rgba(0, 180, 255, 0.85);
		transition: none;
		transform: none !important;
	}
	.mm-vch-headline::after {
		transition: none;
	}
}

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