/* mm-hero-meta
   Hero meta items. Small two-line blocks (label + value) used in a case
   study hero next to the CTAs to show Role / Type / Stack / Year, etc.
   Both lines cycle through 8 colors with text-shadow glow on the label,
   on a 12s rhythm offset 3s per item. */

.mm-hero-meta {
	display: block;
	padding-left: 18px;
	margin-top: 5px;
	border-left: 2px solid rgba(255, 255, 255, 0.12);
	animation: mmHeroMetaBorderTwinkle 12s ease-in-out infinite;
}

@keyframes mmHeroMetaBorderTwinkle {
	0%   { border-left-color: rgba(255, 255, 255, 0.55); }
	12%  { border-left-color: rgba(0, 180, 255, 0.95);   }
	25%  { border-left-color: rgba(200, 140, 255, 0.95); }
	37%  { border-left-color: rgba(255, 200, 100, 0.95); }
	50%  { border-left-color: rgba(140, 230, 200, 0.95); }
	62%  { border-left-color: rgba(255, 130, 165, 0.95); }
	75%  { border-left-color: rgba(180, 255, 140, 0.95); }
	87%  { border-left-color: rgba(255, 170, 90, 0.95);  }
	100% { border-left-color: rgba(255, 255, 255, 0.55); }
}

/* When the meta cards are wrapped in col-md-N (Bootstrap grid), each meta
   is :nth-of-type(1) of its own col — so the per-card delays below also
   need to fire via the parent column's :nth-of-type. */
.mm-hero-meta:nth-of-type(2),
[class*="col-"]:nth-of-type(2) > .mm-hero-meta,
[class*="col-"]:nth-of-type(2) .mm-meta-label,
[class*="col-"]:nth-of-type(2) .mm-meta-value { animation-delay: -3s; }
.mm-hero-meta:nth-of-type(3),
[class*="col-"]:nth-of-type(3) > .mm-hero-meta,
[class*="col-"]:nth-of-type(3) .mm-meta-label,
[class*="col-"]:nth-of-type(3) .mm-meta-value { animation-delay: -6s; }
.mm-hero-meta:nth-of-type(4),
[class*="col-"]:nth-of-type(4) > .mm-hero-meta,
[class*="col-"]:nth-of-type(4) .mm-meta-label,
[class*="col-"]:nth-of-type(4) .mm-meta-value { animation-delay: -9s; }

.mm-hero-meta .mm-meta-label {
	display: block;
	font-size: 9px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.95);
	font-weight: 600;
	margin-bottom: 6px;
	animation: mmHeroMetaLabelTwinkle 12s ease-in-out infinite;
}

.mm-hero-meta .mm-meta-value {
	display: block;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
	font-weight: 300;
	line-height: 1.4;
	animation: mmHeroMetaValueTwinkle 12s ease-in-out infinite;
}

.mm-hero-meta:nth-of-type(2) .mm-meta-label,
.mm-hero-meta:nth-of-type(2) .mm-meta-value { animation-delay: -3s; }
.mm-hero-meta:nth-of-type(3) .mm-meta-label,
.mm-hero-meta:nth-of-type(3) .mm-meta-value { animation-delay: -6s; }
.mm-hero-meta:nth-of-type(4) .mm-meta-label,
.mm-hero-meta:nth-of-type(4) .mm-meta-value { animation-delay: -9s; }

@keyframes mmHeroMetaLabelTwinkle {
	0%   { color: rgba(255, 255, 255, 0.95); text-shadow: none; }
	12%  { color: #fff; text-shadow: 0 0 8px rgba(0, 180, 255, 0.7);   }
	25%  { color: #fff; text-shadow: 0 0 8px rgba(200, 140, 255, 0.7); }
	37%  { color: #fff; text-shadow: 0 0 8px rgba(255, 200, 100, 0.7); }
	50%  { color: #fff; text-shadow: 0 0 8px rgba(140, 230, 200, 0.7); }
	62%  { color: #fff; text-shadow: 0 0 8px rgba(255, 130, 165, 0.7); }
	75%  { color: #fff; text-shadow: 0 0 8px rgba(180, 255, 140, 0.7); }
	87%  { color: #fff; text-shadow: 0 0 8px rgba(255, 170, 90, 0.7);  }
	100% { color: rgba(255, 255, 255, 0.95); text-shadow: none; }
}

@keyframes mmHeroMetaValueTwinkle {
	0%   { color: rgba(255, 255, 255, 0.55); }
	12%  { color: rgba(0, 180, 255, 0.95);   }
	25%  { color: rgba(200, 140, 255, 0.95); }
	37%  { color: rgba(255, 200, 100, 0.95); }
	50%  { color: rgba(140, 230, 200, 0.95); }
	62%  { color: rgba(255, 130, 165, 0.95); }
	75%  { color: rgba(180, 255, 140, 0.95); }
	87%  { color: rgba(255, 170, 90, 0.95);  }
	100% { color: rgba(255, 255, 255, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
	.mm-hero-meta .mm-meta-label,
	.mm-hero-meta .mm-meta-value { animation: none; }
}