/* Microservices (Technology) hero illustration.
   See inc/hero-illustration-resilience.php. Base styles draw the healthy end
   state; all motion is inside the no-preference media query. One 10s master
   timeline: normal traffic 0–24%, B fails 24–28%, breaker opens 28–31%,
   standby wakes and traffic reroutes 32–66%, B restarts 50–62% and heals
   ~64%, breaker closes 66–69%, standby sleeps 72%, traffic resumes 70–95%,
   reset 96–100%. */

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

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

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

.rs-hero__radar {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 1.5;
	opacity: 0.35;
}
.rs-hero__radar--2 { r: 84px; opacity: 0.2; }

.rs-hero__dot--a { fill: #b9e4f7; }
.rs-hero__dot--b { fill: var(--navy); opacity: 0.4; }
.rs-hero__dot--c { fill: var(--cyan); }

/* ---- Lanes ---- */
.rs-hero__lane {
	fill: none;
	stroke: var(--cyan-tint);
	stroke-width: 9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rs-hero__lane-fb {
	fill: none;
	stroke: var(--line);
	stroke-width: 1.6;
	stroke-dasharray: 3 7;
	stroke-linecap: round;
}

.rs-hero__lane-fb-lit {
	fill: none;
	stroke: var(--cyan-tint);
	stroke-width: 9;
	stroke-linecap: round;
	opacity: 0;
}

.rs-hero__cut {
	fill: none;
	stroke: var(--paper);
	stroke-width: 12;
	opacity: 0;
}

/* ---- Gateway ---- */
.rs-hero__gw-ring {
	fill: var(--cyan-tint);
	stroke: var(--cyan);
	stroke-width: 1.5;
}

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

.rs-hero__gw-glyph path {
	fill: none;
	stroke: var(--paper);
	stroke-width: 2.4;
	stroke-linecap: round;
}
.rs-hero__gw-glyph circle { fill: var(--cyan); }

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

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

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

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

.rs-hero__standby { opacity: 0.55; }
.rs-hero__standby-dash {
	fill: none;
	stroke: var(--slate-light);
	stroke-width: 1.4;
	stroke-dasharray: 4 5;
}

.rs-hero__badge { opacity: 0; }
.rs-hero__badge circle { fill: var(--navy); }
.rs-hero__badge path {
	fill: none;
	stroke: var(--paper);
	stroke-width: 2;
	stroke-linecap: round;
}

.rs-hero__restart { opacity: 0; }
.rs-hero__restart-ring {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 60 217;
}

/* ---- Breaker ---- */
.rs-hero__breaker-bg { fill: var(--paper); stroke: var(--cyan); stroke-width: 1.5; }
.rs-hero__pole       { fill: var(--navy); }
.rs-hero__lever {
	stroke: var(--cyan);
	stroke-width: 2.6;
	stroke-linecap: round;
}

.rs-hero__tag rect { fill: var(--paper); stroke: var(--cyan); stroke-width: 1.2; }
.rs-hero__tag text {
	fill: var(--navy);
	font-size: 11.5px;
	font-weight: 600;
	text-anchor: middle;
}

/* ---- Meter ---- */
.rs-hero__meter-label {
	fill: var(--navy);
	font-size: 12px;
	font-weight: 600;
}
.rs-hero__meter-track { fill: var(--mist-dark); }
.rs-hero__meter-fill  { fill: var(--cyan); }

/* ---- Packets (hidden when static) ---- */
.rs-hero__packet {
	fill: var(--cyan);
	opacity: 0;
	filter: drop-shadow(0 0 6px rgba(0, 159, 226, 0.8));
	offset-rotate: 0deg;
}
.rs-hero__packet--main-b,
.rs-hero__packet--fb-b {
	fill: var(--navy);
	filter: drop-shadow(0 0 4px rgba(1, 36, 126, 0.4));
}

/* ---- Motion ---- */
.rs-hero__radar,
.rs-hero__tile,
.rs-hero__standby,
.rs-hero__badge,
.rs-hero__restart,
.rs-hero__lever,
.rs-hero__meter-fill,
.rs-hero__dot,
.rs-hero__status {
	transform-box: fill-box;
	transform-origin: center;
}

.rs-hero__lever      { transform-origin: 0% 50%; }
.rs-hero__meter-fill { transform-origin: left center; }

@media (prefers-reduced-motion: no-preference) {
	.rs-hero__radar--1 { animation: rs-radar 4s ease-out infinite; }
	.rs-hero__radar--2 { animation: rs-radar 4s ease-out 2s infinite; }
	.rs-hero__dot      { animation: rs-drift 7s ease-in-out infinite; }
	.rs-hero__dot--b   { animation-delay: -3s; }
	.rs-hero__dot--c   { animation-delay: -5s; }
	.rs-hero__lane-fb  { animation: rs-flow 1.8s linear infinite; }
	.rs-hero__tag--breaker { animation: rs-float 6s ease-in-out infinite; }
	.rs-hero__tag--fb      { animation: rs-float 7s ease-in-out -3s infinite; }
	.rs-hero__restart-ring { animation: rs-spin 1.1s linear infinite; }

	/* Master timeline */
	.rs-hero__packet--main-a { animation: rs-main-a 10s ease-in-out infinite; }
	.rs-hero__packet--main-b { animation: rs-main-b 10s ease-in-out infinite; }
	.rs-hero__packet--fb-a   { animation: rs-fb-a 10s ease-in-out infinite; }
	.rs-hero__packet--fb-b   { animation: rs-fb-b 10s ease-in-out infinite; }

	.rs-hero__tile--b        { animation: rs-b 10s ease-in-out infinite; }
	.rs-hero__status--b      { animation: rs-b-status 10s ease-in-out infinite; }
	.rs-hero__badge          { animation: rs-badge 10s ease-out infinite; }
	.rs-hero__restart        { animation: rs-restart 10s ease-in-out infinite; }
	.rs-hero__lever          { animation: rs-lever 10s ease-in-out infinite; }
	.rs-hero__cut            { animation: rs-cut 10s ease-in-out infinite; }
	.rs-hero__lane-fb-lit    { animation: rs-lit 10s ease-in-out infinite; }
	.rs-hero__standby        { animation: rs-standby 10s cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite; }
	.rs-hero__standby-dash   { animation: rs-dash 10s ease-in-out infinite; }
	.rs-hero__meter-fill     { animation: rs-meter 10s ease-in-out infinite; }
}

@keyframes rs-spin  { to { transform: rotate(360deg); } }
@keyframes rs-flow  { to { stroke-dashoffset: -10; } }

@keyframes rs-radar {
	0%   { transform: scale(0.6); opacity: 0.5; }
	100% { transform: scale(1.5); opacity: 0; }
}

@keyframes rs-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

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

@keyframes rs-main-a {
	0% { offset-distance: 0%; opacity: 0; }
	1.8% { offset-distance: 0%; opacity: 0; }
	2% { offset-distance: 0%; opacity: 1; }
	11% { offset-distance: 100%; opacity: 1; }
	11.2% { offset-distance: 100%; opacity: 0; }
	7.8% { offset-distance: 0%; opacity: 0; }
	8% { offset-distance: 0%; opacity: 1; }
	17% { offset-distance: 100%; opacity: 1; }
	17.2% { offset-distance: 100%; opacity: 0; }
	13.8% { offset-distance: 0%; opacity: 0; }
	14% { offset-distance: 0%; opacity: 1; }
	23% { offset-distance: 100%; opacity: 1; }
	23.2% { offset-distance: 100%; opacity: 0; }
	69.8% { offset-distance: 0%; opacity: 0; }
	70% { offset-distance: 0%; opacity: 1; }
	79% { offset-distance: 100%; opacity: 1; }
	79.2% { offset-distance: 100%; opacity: 0; }
	76.8% { offset-distance: 0%; opacity: 0; }
	77% { offset-distance: 0%; opacity: 1; }
	86% { offset-distance: 100%; opacity: 1; }
	86.2% { offset-distance: 100%; opacity: 0; }
	83.8% { offset-distance: 0%; opacity: 0; }
	84% { offset-distance: 0%; opacity: 1; }
	93% { offset-distance: 100%; opacity: 1; }
	93.2% { offset-distance: 100%; opacity: 0; }
	100% { offset-distance: 0%; opacity: 0; }
}

@keyframes rs-main-b {
	0% { offset-distance: 0%; opacity: 0; }
	5.8% { offset-distance: 0%; opacity: 0; }
	6% { offset-distance: 0%; opacity: 1; }
	15% { offset-distance: 100%; opacity: 1; }
	15.2% { offset-distance: 100%; opacity: 0; }
	11.8% { offset-distance: 0%; opacity: 0; }
	12% { offset-distance: 0%; opacity: 1; }
	21% { offset-distance: 100%; opacity: 1; }
	21.2% { offset-distance: 100%; opacity: 0; }
	17.8% { offset-distance: 0%; opacity: 0; }
	18% { offset-distance: 0%; opacity: 1; }
	27% { offset-distance: 100%; opacity: 1; }
	27.2% { offset-distance: 100%; opacity: 0; }
	73.8% { offset-distance: 0%; opacity: 0; }
	74% { offset-distance: 0%; opacity: 1; }
	83% { offset-distance: 100%; opacity: 1; }
	83.2% { offset-distance: 100%; opacity: 0; }
	80.8% { offset-distance: 0%; opacity: 0; }
	81% { offset-distance: 0%; opacity: 1; }
	90% { offset-distance: 100%; opacity: 1; }
	90.2% { offset-distance: 100%; opacity: 0; }
	87.8% { offset-distance: 0%; opacity: 0; }
	88% { offset-distance: 0%; opacity: 1; }
	97% { offset-distance: 100%; opacity: 1; }
	97.2% { offset-distance: 100%; opacity: 0; }
	100% { offset-distance: 0%; opacity: 0; }
}

@keyframes rs-fb-a {
	0% { offset-distance: 0%; opacity: 0; }
	33.8% { offset-distance: 0%; opacity: 0; }
	34% { offset-distance: 0%; opacity: 1; }
	43% { offset-distance: 100%; opacity: 1; }
	43.2% { offset-distance: 100%; opacity: 0; }
	40.8% { offset-distance: 0%; opacity: 0; }
	41% { offset-distance: 0%; opacity: 1; }
	50% { offset-distance: 100%; opacity: 1; }
	50.2% { offset-distance: 100%; opacity: 0; }
	47.8% { offset-distance: 0%; opacity: 0; }
	48% { offset-distance: 0%; opacity: 1; }
	57% { offset-distance: 100%; opacity: 1; }
	57.2% { offset-distance: 100%; opacity: 0; }
	54.8% { offset-distance: 0%; opacity: 0; }
	55% { offset-distance: 0%; opacity: 1; }
	64% { offset-distance: 100%; opacity: 1; }
	64.2% { offset-distance: 100%; opacity: 0; }
	100% { offset-distance: 0%; opacity: 0; }
}

@keyframes rs-fb-b {
	0% { offset-distance: 0%; opacity: 0; }
	37.8% { offset-distance: 0%; opacity: 0; }
	38% { offset-distance: 0%; opacity: 1; }
	47% { offset-distance: 100%; opacity: 1; }
	47.2% { offset-distance: 100%; opacity: 0; }
	44.8% { offset-distance: 0%; opacity: 0; }
	45% { offset-distance: 0%; opacity: 1; }
	54% { offset-distance: 100%; opacity: 1; }
	54.2% { offset-distance: 100%; opacity: 0; }
	51.8% { offset-distance: 0%; opacity: 0; }
	52% { offset-distance: 0%; opacity: 1; }
	61% { offset-distance: 100%; opacity: 1; }
	61.2% { offset-distance: 100%; opacity: 0; }
	58.8% { offset-distance: 0%; opacity: 0; }
	59% { offset-distance: 0%; opacity: 1; }
	68% { offset-distance: 100%; opacity: 1; }
	68.2% { offset-distance: 100%; opacity: 0; }
	100% { offset-distance: 0%; opacity: 0; }
}

@keyframes rs-b {
	0%, 23% { opacity: 1; transform: translateX(0); }
	24% { transform: translateX(-4px); }
	25% { transform: translateX(4px); }
	26% { transform: translateX(-3px); }
	27%, 62% { opacity: 0.4; transform: translateX(0); }
	65% { opacity: 1; transform: scale(1.1); }
	68%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes rs-b-status {
	0%, 24% { fill: var(--cyan); }
	27%, 62% { fill: var(--slate-light); }
	65%, 100% { fill: var(--cyan); }
}

@keyframes rs-badge {
	0%, 24% { opacity: 0; transform: scale(0.4); }
	28% { opacity: 1; transform: scale(1.2); }
	31%, 62% { opacity: 1; transform: scale(1); }
	65%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes rs-restart {
	0%, 49% { opacity: 0; }
	51%, 61% { opacity: 1; }
	63%, 100% { opacity: 0; }
}

@keyframes rs-lever {
	0%, 27% { transform: rotate(0deg); }
	31%, 65% { transform: rotate(-38deg); }
	69%, 100% { transform: rotate(0deg); }
}

@keyframes rs-cut {
	0%, 28% { opacity: 0; }
	31%, 65% { opacity: 1; }
	69%, 100% { opacity: 0; }
}

@keyframes rs-lit {
	0%, 31% { opacity: 0; }
	35%, 64% { opacity: 1; }
	69%, 100% { opacity: 0; }
}

@keyframes rs-standby {
	0%, 31% { opacity: 0.55; transform: scale(1); }
	35% { opacity: 1; transform: scale(1.1); }
	38%, 68% { opacity: 1; transform: scale(1); }
	72%, 100% { opacity: 0.55; transform: scale(1); }
}

@keyframes rs-dash {
	0%, 31% { opacity: 1; }
	35%, 68% { opacity: 0; }
	72%, 100% { opacity: 1; }
}

@keyframes rs-meter {
	0%, 25% { transform: scaleX(1); }
	28% { transform: scaleX(0.8); }
	40% { transform: scaleX(0.9); }
	66% { transform: scaleX(0.94); }
	74%, 100% { transform: scaleX(1); }
}

@media (max-width: 1024px) {
	.rs-hero__radar { display: none; }
}