/* Microservices Architecture hero illustration.
   See inc/hero-illustration-microservices.php. Base styles draw the end
   state (scaled out ×3, deployed v2, no packets); all motion is inside the
   no-preference media query. Traffic packets loop independently and never
   stop; the scale-out and rolling-deploy run on one 10s master timeline:
   scale out 10–22%, hold, scale in 62–70%; deploy sweep 30–52%, v2 lands
   52–57%, hold, reset 90–96%. */

.ms-hero {
	position: absolute;
	inset: 0;
}

.ms-hero svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	font-family: var(--font-heading);
}

.ms-hero__glow { fill: var(--cyan-tint); opacity: 0.5; }

.ms-hero__ring {
	fill: none;
	stroke: var(--cyan-tint);
	stroke-width: 12;
}

.ms-hero__arc {
	fill: none;
	stroke: var(--navy);
	stroke-width: 12;
	stroke-linecap: round;
	stroke-dasharray: 260 1224;
	stroke-dashoffset: -420;
}

.ms-hero__dot--a { fill: #b9e4f7; }
.ms-hero__dot--b { fill: var(--navy); opacity: 0.4; }
.ms-hero__dot--c { fill: var(--cyan); }
.ms-hero__dot--d { fill: var(--slate-light); opacity: 0.6; }

/* ---- Links ---- */
.ms-hero__link { fill: none; stroke-linecap: round; }
.ms-hero__link--spoke { stroke: var(--cyan-tint); stroke-width: 8; }
.ms-hero__link--edge  { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 2 6; }

/* ---- Tiles ---- */
.ms-hero__tile,
.ms-hero__uptime { filter: drop-shadow(0 10px 16px rgba(1, 36, 126, 0.14)); }

.ms-hero__tile-bg {
	fill: var(--paper);
	stroke: var(--line);
	stroke-width: 1;
}

.ms-hero__glyph {
	fill: none;
	stroke: var(--navy);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ms-hero__status { fill: var(--cyan); }

.ms-hero__replica rect {
	fill: var(--cyan-tint);
	stroke: var(--cyan);
	stroke-width: 1.4;
}

.ms-hero__bars rect { fill: var(--cyan); }

.ms-hero__deploy {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100; /* fully drawn away in the static state */
}

.ms-hero__pill rect { fill: var(--paper); stroke: var(--cyan); stroke-width: 1.2; }
.ms-hero__pill text {
	fill: var(--navy);
	font-size: 11px;
	font-weight: 600;
	text-anchor: middle;
}
.ms-hero__pill--v2 rect,
.ms-hero__pill--x3 rect { fill: var(--cyan); }
.ms-hero__pill--v2 text,
.ms-hero__pill--x3 text { fill: var(--paper); }
/* Static end state shows only the "after" pills. */
.ms-hero__pill--v1,
.ms-hero__pill--x1 { opacity: 0; }

/* ---- Hub ---- */
.ms-hero__hub-dash {
	fill: none;
	stroke: var(--navy);
	stroke-width: 1.5;
	stroke-dasharray: 3 9;
	stroke-linecap: round;
	opacity: 0.5;
}

.ms-hero__hub-ring {
	fill: var(--cyan-tint);
	stroke: var(--cyan);
	stroke-width: 1.5;
}

.ms-hero__hub-core {
	fill: var(--navy);
	filter: drop-shadow(0 10px 16px rgba(1, 36, 126, 0.3));
}

.ms-hero__hub-glyph rect { fill: var(--paper); opacity: 0.85; }
.ms-hero__hub-glyph .ms-hero__hub-lit { fill: var(--cyan); opacity: 1; }

/* ---- Uptime chip ---- */
.ms-hero__live { fill: var(--cyan); }
.ms-hero__uptime-num {
	fill: var(--navy);
	font-size: 15px;
	font-weight: 600;
}

/* ---- Packets (hidden when static) ---- */
.ms-hero__packet {
	opacity: 0;
	fill: var(--cyan);
	filter: drop-shadow(0 0 5px rgba(0, 159, 226, 0.7));
	offset-rotate: 0deg;
}

.ms-hero__packet--edge {
	fill: var(--navy);
	filter: drop-shadow(0 0 4px rgba(1, 36, 126, 0.35));
	r: 3.5px;
}

/* ---- Motion ---- */
.ms-hero__arc,
.ms-hero__hub-dash { transform-box: view-box; transform-origin: 260px 260px; }

.ms-hero__replica,
.ms-hero__pill,
.ms-hero__status,
.ms-hero__live,
.ms-hero__dot,
.ms-hero__bars rect,
.ms-hero__hub-lit,
.ms-hero__tile--3 {
	transform-box: fill-box;
	transform-origin: center;
}

.ms-hero__bars rect { transform-origin: center bottom; }

@media (prefers-reduced-motion: no-preference) {
	.ms-hero__arc      { animation: ms-spin 80s linear infinite; }
	.ms-hero__hub-dash { animation: ms-spin 32s linear infinite reverse; }
	.ms-hero__dot      { animation: ms-drift 7s ease-in-out infinite; }
	.ms-hero__dot--b   { animation-delay: -2s; }
	.ms-hero__dot--c   { animation-delay: -4s; }
	.ms-hero__dot--d   { animation-delay: -5.5s; }
	.ms-hero__status   { animation: ms-status 2.4s ease-in-out infinite; }
	.ms-hero__live     { animation: ms-status 1.8s ease-in-out infinite; }
	.ms-hero__bars rect { animation: ms-bar 2.2s ease-in-out infinite; }
	.ms-hero__hub-lit  { animation: ms-lit 3s ease-in-out infinite; }

	.ms-hero__packet--out  { animation: ms-travel 3s ease-in-out infinite; }
	.ms-hero__packet--edge { animation: ms-travel 4s ease-in-out infinite; }

	/* Scale-out */
	.ms-hero__replica--1 { animation: ms-rep-1 10s cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite; }
	.ms-hero__replica--2 { animation: ms-rep-2 10s cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite; }
	.ms-hero__pill--x1   { animation: ms-x1 10s ease-out infinite; }
	.ms-hero__pill--x3   { animation: ms-x3 10s ease-out infinite; }

	/* Rolling deploy */
	.ms-hero__deploy     { animation: ms-deploy 10s ease-in-out infinite; }
	.ms-hero__pill--v1   { animation: ms-v1 10s ease-out infinite; }
	.ms-hero__pill--v2   { animation: ms-v2 10s ease-out infinite; }
}

@keyframes ms-spin  { to { transform: rotate(360deg); } }

@keyframes ms-drift {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(6px, -10px); }
}

@keyframes ms-status {
	0%, 100% { transform: scale(1);   opacity: 1; }
	50%      { transform: scale(1.5); opacity: 0.5; }
}

@keyframes ms-bar {
	0%, 100% { transform: scaleY(0.5); }
	50%      { transform: scaleY(1.4); }
}

@keyframes ms-lit {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.35; }
}

/* Traffic never stops: each packet rides its lane, fades at both ends. */
@keyframes ms-travel {
	0%       { offset-distance: 0%;   opacity: 0; }
	10%      { opacity: 1; }
	60%      { offset-distance: 100%; opacity: 1; }
	70%, 100% { offset-distance: 100%; opacity: 0; }
}

/* Replicas fan out from behind the tile, then fold back in. */
@keyframes ms-rep-1 {
	0%, 10%  { opacity: 0; transform: translate(14px, 14px) scale(0.85); }
	18%, 62% { opacity: 1; transform: translate(0, 0) scale(1); }
	70%, 100% { opacity: 0; transform: translate(14px, 14px) scale(0.85); }
}
@keyframes ms-rep-2 {
	0%, 14%  { opacity: 0; transform: translate(28px, 28px) scale(0.85); }
	22%, 58% { opacity: 1; transform: translate(0, 0) scale(1); }
	66%, 100% { opacity: 0; transform: translate(28px, 28px) scale(0.85); }
}

@keyframes ms-x1 {
	0%, 12%  { opacity: 1; transform: scale(1); }
	16%, 64% { opacity: 0; transform: scale(0.7); }
	68%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes ms-x3 {
	0%, 14%  { opacity: 0; transform: scale(0.6); }
	20%      { opacity: 1; transform: scale(1.12); }
	23%, 62% { opacity: 1; transform: scale(1); }
	66%, 100% { opacity: 0; transform: scale(0.6); }
}

/* Rolling deploy: ring sweeps, v1 hands over to v2, then it all resets. */
@keyframes ms-deploy {
	0%, 30%  { stroke-dashoffset: 100; opacity: 1; }
	52%      { stroke-dashoffset: 0;   opacity: 1; }
	58%, 100% { stroke-dashoffset: 0;  opacity: 0; }
}
@keyframes ms-v1 {
	0%, 50%  { opacity: 1; transform: scale(1); }
	54%, 92% { opacity: 0; transform: scale(0.7); }
	96%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes ms-v2 {
	0%, 51%  { opacity: 0; transform: scale(0.6); }
	56%      { opacity: 1; transform: scale(1.14); }
	59%, 90% { opacity: 1; transform: scale(1); }
	94%, 100% { opacity: 0; transform: scale(0.6); }
}