/* mm-logo-twinkle
   Inline SVG logo that cycles through the 7-color constellation palette.
   Two size variants:
     .mm-header-logo-twinkle  -- nav-bar size, 50px tall
     .mm-footer-logo-twinkle  -- footer size, set width="150" on the SVG itself
   The SVG must use fill="currentColor" on its paths so the color animation
   reaches the shapes. */

.mm-footer-logo-twinkle,
.mm-header-logo-twinkle {
	color: #fff;
	animation: mmLogoTwinkle 14s linear infinite;
}

.mm-header-logo-twinkle {
	height: 50px;
	width: auto;
	display: block;
}

@keyframes mmLogoTwinkle {
	0%   { color: #fff; }
	12%  { color: var(--mm-accent); }
	25%  { color: var(--mm-pal-violet); }
	37%  { color: var(--mm-pal-amber-1); }
	50%  { color: var(--mm-pal-mint); }
	62%  { color: var(--mm-pal-rose); }
	75%  { color: var(--mm-pal-lime); }
	87%  { color: var(--mm-pal-amber-2); }
	100% { color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
	.mm-footer-logo-twinkle,
	.mm-header-logo-twinkle { animation: none; color: #fff; }
}